How to make changes to a Ruby gem (as a Rails developer)

Posted Almost 6 years ago by Dominik Schöler.

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

Haml: Generating a unique selector for an element

Posted Almost 6 years ago by Henning Koch.

Having a unique selector for an element is useful to later select it from JavaScript or to update a fragment...

Debugging Webpacker config

Posted Almost 6 years ago by Natalie Zeumann.

Option 1: JSON dump In config/webpack/environment.js you can get inspect environment which includes all webpack config options set for the...

Introduction to Google Tag Manager (for web developers who know Google Analytics)

Posted Almost 6 years ago by Dominik Schöler.

As a web developer, you know Google Analytics (GA). Probably you've dropped the GA snippet into more than one...

Rails: Flagging all cookies as secure-only to pass a security audit

Posted Almost 6 years ago by Henning Koch.

Why secure-only cookies used to be necessary Cookies have an optional secure flag. It tells the browser to not...

JavaScript “Stale Practices” | benmccormick.org

Posted Almost 6 years ago by Henning Koch.
benmccormick.org

The linked article lists a number of techniques that were best practices with ES5, but have better alternatives in modern...

Minimal JavaScript function to detect version of Internet Explorer or Edge

Posted Almost 6 years ago by Henning Koch.

If possible your code should detect features, not browsers. But sometimes you just need to sniff the browser. And when...

Operators "in" and "of" are very inconsistent between CoffeeScript and JavaScript

Posted About 6 years ago by Henning Koch.

CoffeeScript and JavaScript (ECMAScript) both have operators in and of. Each language use them for more than one purpose. There...

screenfull.js: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

Posted About 6 years ago by Arne Hartherz.
github.com

Using the JS fullscreen API is painful because all browers use different methods and events and you need to use...

Unpoly: Loading large libraries on-demand

Posted About 6 years ago by Henning Koch.

When your JavaScript bundle is so massive that you cannot load it all up front, I would recommend to load...

jQuery: How to replace DOM nodes with their contents

Posted About 6 years ago by Arne Hartherz.

You know that you can use jQuery's text() to get an element's contents without any tags.

Webpacker: Configuring browser compatibility

Posted About 6 years ago by Henning Koch.

Webpacker uses Babel and Webpack to transpile modern JavaScript down to EcmaScript 5. Depending on what browser a project needs...

Event order when clicking on touch devices

Posted About 6 years ago by Henning Koch.
developer.mozilla.org

Touch devices have their own set of events like touchstart or touchmove. Because mobile browsers should also work with with...

Generating test images on the fly via JavaScript or Ruby

Posted About 6 years ago by Arne Hartherz.
jsfiddle.net

When you need test images, instead of using services like lorempixel or placehold.it you may generate test images yourself.

Upgrading a Rails app to Cucumber 3

Posted About 6 years ago by Henning Koch.

You need to update a lof gems. Make sure you don't have any version constraints in your...

Nested Spreewald patiently blocks are now patient

Posted About 6 years ago by Henning Koch.
makandracards.com

In Spreewald 1.10.4+, nested patiently blocks are now patient. Here is an example: patiently do outer_code patiently do

HTML5: disabled vs. readonly form fields

Posted About 6 years ago by Natalie Zeumann.

Form fields can be rendered as noneditable by setting the disabled or the readonly attribute. Be aware of the differences...

Font Awesome 5 migration guide

Posted Over 6 years ago by Arne Hartherz.
fontawesome.com

Font Awesome version 5 changed some icon names, and introduces new prefixes fab, far, and fas. There is a JavaScript...

Jasmine: Expecting objects as method invocation arguments

Posted Over 6 years ago by Henning Koch.

To check if a method has been called in Jasmine, you first need to spy on it: let spy = spyOn...

Firefox cancels any JavaScript events at a fieldset[disabled]

Posted Over 6 years ago by Arne Hartherz.
jsbin.com

If you try to listen to events on elements that are nested inside a , Firefox will stop event propagation once...

HTML: Making browsers wrap long words

Posted Over 6 years ago by Henning Koch.

By default, browsers will not wrap text at syllable boundaries. Text is wrapped at word boundaries only. This card explains...

JavaScript: Testing the type of a value

Posted Over 6 years ago by Henning Koch.

Checking if a JavaScript value is of a given type can be very confusing: There are two operators typeof and...

Spreewald: Content-Disposition not set when testing a download's filename

Posted Over 6 years ago by Emanuel.

You are not using javascript tests The file is served from a public folder (not via controller) Problem description...

Fixing flaky E2E tests

Posted Over 6 years ago by Henning Koch.

An end-to-end test (E2E test) is a script that remote-controls a web browser with tools like Selenium...