Webpacker is Rails' way of integrating Webpack, and version 4 has been released just a few days ago, allowing us...

makandra dev

This is a presentation from 2019-01-21. Summary We want to move away from jQuery in future projects

When building an application that sends e-mails to users, you want to avoid those e-mails from being classified...

If your app does not need to support IE11, you can use most ES6 features without a build step. Just...

Rails ships with two separate build pipelines: Sprockets ("asset pipeline") and Webpacker. Webpacker has many more moving parts, but allows...

makandra Curriculum

When your code does not behave as expected, you can use a debugger statement ("breakpoint") at any point in your...

The rendered font often depends on the local font your system provides, therefore you often find a rule like below...

The Ace editor is a great enhancement when you want users to supply some kind of code (HTML, JavaScript, Ruby...

When projects run for many years, they require special regular maintenance to stay fresh. This kind of maintenance is usually...

codepen.io

Occasionally, your designer will hand you designs where elements break the layout's horizontal container width, like navigation buttons of...

Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple. Using getComputedStyle

api.jquery.com

jQuery's removeClass removes the given class string from an element collection. If you want to remove multiple/unknown classes matching...

It is possible to access Rails config (for example secrets) from within your webpack bundles, thanks to rails-erb-loader...

TL;DR: All modern browsers default to using the element as the main document viewport. In CSS, prefer to set...

Font Awesome 5 is a comprehensive solution for vector icons on your website. Originally, Font Awesome came as an icon...

github.com

Masonry is a famous library to dynamically arrange a grid of items that have different aspect ratio, like horizontal and...

github.com

For Sidekiq to be able to retry your jobs it has to be able to catch errors that occur while...

A JavaScript error in an E2E test with Selenium will not cause your test to fail. This may cause you...

developer.mozilla.org

...HTML's accepts a single file. You can allow multiple files via . But sometimes, selecting multiple files is not enough...

plnkr.co

Flexbox is awesome. Most of it even works in IE11, but flex: 1 won't work reliably in Internet Explorer...

web.archive.org

Restricting access to cookies is essential for security in many web apps. For example, the session ID, the secret token...

Most forms have a single submit button that will save the record when pressed. Sometimes a form needs additional submit...

At makandra, we've built a few gems over the years. Some of these are quite popular: spreewald (> 1M downloads...

Google Chrome has a subtle rendering bug that hits me once in a while. It usually occurs in sliders with...