I'm using RequireJs for structuring my JavaScript code. Also, I'm using a lot of CSS3 and I use "Modernizr w/ YepNope" + x number of css3 polyfills.
I understand "Modernizr w/ YepNope" and RequireJs are both Resource Loaders. Since they are both resource loaders is it a bad idea to use both of them in the same project?
So, basically I'm asking, is it a bad idea to use:
Require.js
Modernizr.js w/ YepNope.js
In the same page?
As long as you don't load RequireJS modules via YepNope it is ok to use both. Otherwise you could encounter this issue according to the RequireJS doc : http://requirejs.org/docs/errors.html#mismatch
And since you load stuff outside RequireJS, i.e. an API polyfill, the only way your modules could use those polyfills would be to make the initial require() call within the complete() callback of YepNope. But IMHO it gets a bit clunky...
Summary: Respond.js, (which is great with jQuery Mobile), is based on css3 media queries, so if polyfills is all you need, you probably do not 'need' resource loaders.
I cannot speak for YepNopejs, but since respond.js is listed in Modernizer, it seems redundant.
Modernizer, if used, should determine whether or not respond.js is loaded.
Modernizer will conditionally load the scripts, including respond.js, client-side based on feature detects.
Supported scripts (which do not currently include YepNope) at
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Related
Is it really that slow? Should it be so, or something's wrong with my implementation?
P.S. 2 input fields form with one button.
Without styled-components: (523ms Scripting)
With styled-components: (3161ms Scripting)
Yes, Styled Components is slow because it's a CSS-in-JS solution. This means your page must go through these steps:
page is loaded;
JavaScript code is parsed;
CSS is generated;
CSS is injected into components;
browser renders the CSS.
When you have plain CSS files (like when you use CSS modules), the steps are:
page is loaded;
JavaScript code is parsed; browser renders CSS in parallel.
Styled Components gives you the powerful ability to inject code dinamically into the CSS, but there is no free lunch: and the cost here is performance. In the long run, the best solution to me seems to be SCSS modules (that is, CSS modules combined with SCSS).
Then, if you need to inject code into the CSS, simply set CSS --variables dinamically.
Here is a npm package I am using:
http://blueprintjs.com/docs/#components.usage
I would like to use their component with CSS, but I don't their CSS affect to my own CSS. Is this possible to allow the CSS package ONLY affected in that npm components? Thanks.
Precisely what #barry-johnson said in his comment above: we use pt- as a namespace for all of our CSS classes to avoid collisions with your own application styles. For instance, you could use your own .custom-button alongside our .pt-button with no conflicts.
However, if you use a Blueprint React component, then it's going to use the Blueprint classes, and you're going to want to use our CSS (because it's not just pretty colors, there's some useful layout stuff in there too). Hope that helps!
I am converting an existing web application to Polymer. The web application consists of components (in the Knockout component architecture) and modules. Both are loaded using RequireJS. I see how to convert the Knockout components to Polymer custom elements, but not how to deal with the JavaScript modules. RequireJS modules return a JavaScript object which is passed to the JavaScript that depends on it via a parameter to the “define” function. There does not appear to be a way to get that object if the module code is loaded via HTML import rather than RequireJS.
For example, several of the existing components use the moment.js module for date/time manipulation. They load it via RequireJS, which passed them a reference to the moment object. In one of the Polycast videos, Rob Dobson says that the recommended practice would be to write a moment.html file that contains just a <script> tag to import moment.js. A Polymer custom element can then do an HTML import of moment.html, but that does not give the component access to the object returned by the moment.js module. Moment does not put that object in the global namespace, so how does the Polymer custom element get access to the moment object?
This from Justin Fagnani of the Polymer team:
"Sounds here like you need a module loader/registry that works with Polymer / HTML Imports. I made such a thing called IMD: https://github.com/PolymerLabs/IMD
It's only a AMD-compliant module registry, but not a loader, so all modules have to be loaded via explicit or tags, which ensures that dependency ordering is preserved."
It does exactly what I was looking for.
I'm using Bootstrap files within my application and I want to enable "Use runtime optimized JavaScript and CSS resources".
the problem I have is once enabled; glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg and glyphicons-halflings-regular.woff cannot be found:
I know for Bootstrap 2.3 we could use a Theme that loads a .CSS file that changes relative locations as described here http://www.bootstrap4xpages.com/bs4xp/site.nsf/article.xsp?documentId=F435B6DC54486B67C1257B6B002E5A6C&action=openDocument
So, what should I do to handle relative locations with Bootstrap 3?
You have to tweak the path to the web font resoureces in the Bootstrap CSS files.
Delete the part with "../" and replace it with the relative path to the font files within your project structure, e.g.
bootstrap/fonts/...
Then aggregation will load the fonts correctly.
This does not answer your question but if you want to use Bootstrap 3 you'd be MUCH better off using the Boostrap4Xpages project on OpenNTF.org. It will perform better and the resource aggregation will work better. It's easy to install and use but it is a plugin on the sever so that needs to be done. It's not self contained to the NSF. Try and move to this if at all possible.
Regarding the actual question. I'm not sure I know the answer specifically. I do know that using relative links can sometimes be a problem if the browser's URL doesn't have the page.xsp portion. So it works on the page.xsp and NOT the default launch XPage where the URL ends with the database.nsf. What I've done in the past there is set the application to launch to something like "start.xsp" and in that page in beforePageLoad to a redirect to "home.xsp". This forces the browser url to always show the page name and made life a little easier when dealing with adding projects to WebContent.
I want to be able to dynamically reference JavaScript and Stylesheets depending on which page a user is on in Express. I thinking the best way to do so (though I'm open to suggestions) is to pass the current view to the layout page.
For example;
Given the url http://example.com/trees
I would want to have some logic in layout.jade that said something to the effect of:
script(src="/javascripts/{view}.js")
Which would get rendered as:
<script src="/javascripts/trees.js"></script>
Any suggestions or best practices for doing this?
req.route is the matched route, so things like req.route.path etc are available, or of course req.url which may be parsed. With express 2x you can expose these values to views automatically using "dynamic helpers" or res.local()
There are no best practices for doing this, since Express doesn't provide Rails like url helpers, so I think you're approach is fine.
The easy answer is to just put ALL your javascript into a single file and be done with it. Ditto for CSS. See the Ruby on Rails asset pipeline for details. You are probably making your life more complicated than necessary and also less efficient by having different javascripts on different pages.
However, since you asked, the answer for javascripts is easy. Just put the extra <script> tags in the view, not the layout. Problem solved. CSS doesn't work as cleanly because the <link> tags need to be inside the <head>. In this case, I define the styles I need as an array of strings and loop over that in my layout template. So in my route I set up a local variable such as
locals.css = ['/css/one.css', '/css/two.css']
Then just loop over that in your template and generate one <link> tag for each.