The need for clearfix hacks has been greatly reduced since we could layout with Flexbox or CSS Grid.
All browsers + IE9 know the CSS :empty selector. It lets you hide an element when it has no content, i.e...
Internet Explorer until version 9 has some limitations when parsing CSS files Summarized, these are: Up to 31 CSS files...
When using the asset pipeline your assets (images, javascripts, stylesheets, fonts) live in folders inside app: app/assets/fonts app/assets/images...
Rachel Andrew has built a website about CSS Grid. Video tutorials More than 30 layout examples for feature demonstration
PDFKit converts a web page to a PDF document. It uses a Webkit engine under the hood...
TL;DR: All modern browsers default to using the element as the main document viewport. In CSS, prefer to set...
CSS Flexbox has become extremely popular amongst front-end developers the last couple of years. This isn’t surprising, as...
When using Rails to truncate strings, you may end up with strings that are still too long for their container...
Even when you app has no CSS at all, you still inherit a default user agent stylesheet from your browser...
There is a kinda secret, yet well supported CSS feature called currentColor. It's like a special CSS variable that...
Note: You won't need this for single lines of text. In this case it is better to just use...
SVG is an acronym for "scalable vector graphics". SVGs should be used whenever an image can be described with vector...
CSS4 comes with :has. E.g. h1:has(b) would select all tags that contain a tag. This is implemented in...
Maybe I haven’t been paying close enough attention, but over the past few years an interesting variation of CSS...
webpack is a very powerful asset bundler written in node.js to bundle (ES6) JavaScript modules, stylesheets, images, and other assets...
40 new icons, spinner-style rotation with CSS animations, smaller file size, possibility to sub-set the font to only...
Recently I made an upgrade from Bootstrap 3 to Bootstrap 4 in a bigger project. Here are some tips how...
It can be hard to understand what causes a browser scroll smoothly or instantly. CSS, JavaScript and the browser settings...
You can use text-overflow to truncate a text using CSS but it does not fit fancy requirements.
For my computer science bachelor's thesis I programmed and evaluated a CLI Test Case Prioritization (TCP) tool for makandra...
After switching a project from Sprockets to Webpack, I started observing a bug that was hard to debug: Our...
JavaScript code can access and manipulate the browser's DOM tree. Using JavaScript we can add interactive behavior to our...
Crazy hack. Might be useful one day. The code required has since been extracted into a library.