Helium accepts a list of URLs for different sections of a site then loads and parses each page to build...
jsPlumb can visually connect elements together with curved (or straight) lines. The demo has examples of Bezier curves and straight...
When is a global variable not a variable? When it is a property of the global object.
The difference is that return false; takes things a bit further in that it also prevents that event from propagating...
Run your Jasmine specs without a browser
...See MDN's full list of options. Also note that browsers will not execute Javascript for some combinations of modifiers. This was extracted from Unpoly...
For websites that don't do JavaScript rendering on the client, it's best practice to put script tags at the bottom of the HTML. This way, the page can...
...the page. This can be done with helpers. How to implement Add the attached javascript_helper to your app. Move your javascript_include_tags out of to the end of...
...can be hard to understand what causes a browser scroll smoothly or instantly. CSS, JavaScript and the browser settings all have options to influence the scroll behavior. They all interact...
...to instantly jump to new scroll positions in these situations: When clicking an . When JavaScript functions scroll without a { behavior } option. When the user manually changes the location #hash in...
webpack is a very powerful asset bundler written in node.js to bundle (ES6) JavaScript modules, stylesheets, images, and other assets for consumption in browsers. Webpacker is a wrapper around webpack...
...our assets in app/webpack instead of the default app/javascripts, since we not only bundle JavaScript, but stylesheets as well. To do this, change default.source_path to app/webpack in config/webpacker.yml.
...time and does not need to be fixed. However, as your frontend adds more JavaScript, AJAX and animations, this test might become "flaky". Flaky tests destroy the trust in your...
...is sufficient for basic, server-rendered application. However, as frontends become more complex (more JavaScript, AJAX requests, animations), race conditions will become too severe to be caught by these default...
...primarily increase with the number and size of your assets, especially with CSS and JavaScript. Always optimize: Keep your JavaScripts small. This is the most important rule.
...pages (e.g. TinyMCE), only load it on those pages. Be wary of low quality JavaScript libraries. You need to have a rough understand how a library works. This is especially...
You should prefer native promises to jQuery's Deferreds. Native promises are much faster than their jQuery equivalent. Native promises...
...forms against concurrent edits This is from a real project: When opening a form, JavaScript makes a request to acquire a lock for that record (1). After 20 seconds the...
...JavaScript starts polling the server (2), to check if another user has taken the lock away from us by force. When the PC was low on resources (parallel_tests), acquiring...
...flight AJAX requests to finish before ending a scenario: You may have client-side JavaScript that freaks out when the tab closure kills their pending requests. If that JavaScript opens...
end Legacy solution for jQuery frontends The module above is compatible with all JavaScript frameworks (or VanillaJS). If you cannot use capybara-lockstep and you're working on an...
If possible your code should detect features, not browsers. But sometimes you just need to sniff the browser. And when...
To keep JavaScript sources small, it can sometimes make sense to split your webpack bundles. For example, if your website uses some large JavaScript library – say TinyMCE – which is only...
...been loaded via AJAX }) The import function allows webpack to automatically put the imported JavaScript into a separate bundle (it uses some heuristic to decide whether to do it), automatically...
...In other cases (e.g. currencies with changing exchange rates) this might not be possible. Javascripts Your Javascript might render text, dates, formats, etc., so you must at least implement minimal...
...a gem that gives you your Rails locale dictionary and the I18n class in Javascript. Note that you might be using Javascript libraries that render strings, e.g. date pickers. Make...
...great browser support, and you should be using it to animate DOM elements from JavaScript, or to control or wait for CSS animations. Here is a quick overview of a...
...few useful features: Animating elements from JavaScript Use the Element#animate() function to perform animations on an element. Its API probably a bit different from how your favorite frontend framework...
...searchable when you just have a question about some function. Performance issue 1: Slow JavaScript If an event occurs and JavaScript has to run, the browser have to process the...
...JavaScript first, before it can redraw the screen. While JavaScript is very fast, you need to be very careful with JavaScript code that is called frequently: Code that runs on...
...inherit styles from the document. See Styling a Web Component for this case. Applying JavaScript behavior to new elements All client-side JavaScript frameworks comes with mechanisms to activate JavaScript...
...using a framework mechanism you may use customElements.define() to register your custom element's JavaScript behavior with the browser directly. A big advantage of using the browser's customElements.define() is...
...soft hyphens, which makes testing uncomfortable. Automatic insertion of soft hyphens You can use JavaScript libraries like hypher (includes LGPL patterns!) to automatically insert soft hyphens into the text of...
Loading the correct hyphenization patterns for the language you're using JavaScript to apply the library function to the DOM nodes you want hyphenated Manually adding exceptions...
The way that Javascript schedules timeouts and promise callbacks is more complicated than you think. This can be the reason why callbacks are not executed in the order that they...
...execute in order, and are executed: after every callback, as long as no other JavaScript is mid-execution at the end of each task Further resources: JavaScript Visualized: Promise Execution...