makandra dev

We structure our CSS using the BEM pattern. Our naming convention for blocks, elements and modifiers has evolved over the...

CSP hat zum Ziel einen Browser-seitigen Mechanismus zu schaffen um einige Angriffe auf Webseiten zu verhindern, hauptsächlich XSS...

CSS selectors are a very simple tool to select elements from a Nokogiri document. However, the colon in the XML...

To make CSS rules dependent on the screen size, we use media queries: @media (max-width: 500px) { // rules for screen...

When you have many changes, and you want to spread them across different commits, here is a way to stage...

Embedding videos on a website is very easy, add a tag to your source code and it just works...

You can use the CSS property mask-image to define an "alpha channel" for an element. E.g. to let an...

Browsers come with a set of built-in elements like or . When we need a new component not covered by...

makandra dev

A primer on vector graphics For rastered image formats like JPG or PNG, each pixel is basically drawn on a...

So I had the issue that User input (coming from many different sources and users) often contains the...

This collection contains some useful design resources for developers. Many of them were mentioned in the Refactoring UI tutorials.

Most of the time it is a tedious task to apply a code style guide to an existing code...

makandra dev

CSS transitions are a simple animation framework that is built right into browsers. No need for Javascript here. They're...

gedd.ski

Within a Flexbox layout, there are multiple CSS attributes that may affect a child's basis (the initial width before...

makandra dev

General hints on the DOM the root of the DOM is document custom elements inherit from HTMLElement. They need a...

When an AJAX request raises an exception on the server, Rails will show a minimal error page with only basic...

makandra dev

webpack is a very powerful asset bundler written in node.js to bundle (ES6) JavaScript modules, stylesheets, images, and other assets...

RubyMine comes with a nice way to grep through your project's files: The finder (ctrl + shift + f). Don't...

The goal is to get Jasmine specs running in a Rails project using Webpacker, with the browser based test runner...

Cucumber up to version 2 had a neat feature called Step Argument Transforms which was dropped in favor of Cucumber...

Until Capybara 2, node finders that accept a text option were able to find nodes based on rendered text, even...

Webpacker can automatically create an icon font from SVG files, which is really handy. When you're using the asset...

It is quite easy to migrate from CoffeeScript to ES6. You can use decaffeinate to convert your CoffeeScript source to...

Over the years we have tried several solution to have vector icons in our applications. There are many ways to...