After switching a project from Sprockets to Webpack, I started observing a bug that was hard to debug: Our...

When testing JavaScript functionality in Selenium (E2E), you may need to access a class or function inside of a evaluate...

makandra dev

When a Ruby version gem has a letter in its version number, it is considered a pre-release:

jetbrains.com

In RubyMine folders can be excluded from search, navigation etc. by marking it as excluded. You might sometimes wish to...

If your Webpack build is slow, you can use the Speed Measure Plugin for Webpack to figure out where time...

Sometimes you want to load code on demand. For instance, when a a large library is only used on a...

makandra dev

Webpack builds can take a long time, so we only want to compile when needed. This card shows what will...

I use the TypeScript compiler for this, since its output is more minimal than Babel's. The following will transpile...

When your Rails application server raises error, Capybara will fail your test when it clears the session after the last...

Browsers blocks abusable JavaScript API calls until the user has interacted with the document. Examples would be opening new tab...

makandra dev
github.com

capybara-lockstep can help you with flaky end-to-end tests: This Ruby gem synchronizes Capybara commands with client-side...

json is part of the standard library of Ruby and deals with JSON, obviously. As you know, JSON is the...

When you repeat a subpattern with a *, + or {...} operator, you may choose between greedy, lazy and possessive modes. Switching modes...

getbootstrap.com

Recently I made an upgrade from Bootstrap 3 to Bootstrap 4 in a bigger project. Here are some tips how...

makandra dev

Rails 6 includes a WYSIWYG editor, Action Text. It works out of the box quite well, but chances are that...

makandra dev

I just finished migrating a project from the Asset Pipeline to Webpacker, this is what my diff to master looks...

TinyMCE is a WYSIWYG editor which is quite customizable. Add a custom button to the tinyMCE toolbar and tell tinyMCE...

makandra dev

Feature Queries (Edge 12+): Similar to @media queries, @supports blocks can be scoped to browsers that support a given declaration...

When deploying a Rails application that is using Webpacker and Capistrano, there are a few configuration tweaks that optimize the...

github.com

Scroll and touch event listeners tend to be computationally expensive as they are triggered very often. Every time the event...

gomakethings.com

Learn how to create offline applications with service workers. The amazing power of service workers Writing your first service worker...

makandra dev
developers.google.com

Chrome has a built-in utility to check performance and accessibility (and more) of your web app: Lighthouse.

webpack.js.org

You can do this per environment, e.g. in config/webpack/test.js: const environment = require('./environment') const config = environment.toWebpackConfig() config.devtool = 'none' module.exports = config

If you migrate a Rails application from Sprockets to Webpack(er), you can either transpile your CoffeeScript files to JavaScript...