Hiding inline SVG icons from screen readers

Roger Johansson: SVG files may contain a title element which may or may not get announced by screen readers (depending on SVG embedding technique, browser name and version, and screen reader name and version). So far I haven’t run into a situation where I want any other behaviour than screen readers completely ignoring icons (since …

You Can’t Get Comfortable in Web Development

Rey Bango, after having read the aforementioned “How it feels to learn JavaScript in 2016”: A lot of the discomfort we’re feeling is the belief that we need to know how to use every new framework or tool that comes out. It’s really not the case. There will always be someone building a new tool …

Simple Flexbox Grid System

… with blackjack, and hookers! (ref) Introduction and Requirements A while ago, I created a small and simple flexbox-based grid system for use in the projects we make at work. The developed Grid System inspired upon how Bootstrap works: it divides the grid into 12 columns (configurable). it supports gutters in between columns (configurable). it …

Fukol™ Grids

Building a CSS Grid System isn’t that hard really, thanks to flexbox. Heydon has stripped it to its smallest form: .fukol-grid { display: flex; flex-wrap: wrap; margin: -0.5em; } .fukol-grid > * { flex: 1 0 10em; margin: 0.5em; } Fukol™ is a lightweight, breakpoint free, completely responsive, element query driven*, progressive enhancement based CSS …

Why there is no CSS4?

Rachel Andrew: If you read something about CSS3 Selectors, then what is actually being described is something that is part of the CSS Selectors Level 3 specification. […] The CSS Working Group is now working on Selectors Level 4 with new proposed features plus the selectors that were part of Level 3 (and CSS 1 …

Gmail to remove CSS :checked support 😟

With a new update about to roll (already rolling?) out, Gmail has added support for – amongst other things – media queries and non-inline styles. Along with that update however, they’ve also axed support for :checked: Also gone is the support for :checked selectors. The only pseudo-class selector supported in Gmail and G Suite webmail …

New CSS rotate syntax

In the CSS Transforms Module Level 2 there will be individual transform properties for translate, scale, and rotate. This pen by Wes Bos demonstrates the new rotate syntax (use Canary): See the Pen ALbmzN by Wes Bos (@wesbos) on CodePen. So how exactly is said syntax? Here’s a snippet from the spec: The rotate property …

9 Underutilized Features in CSS

List assembled by Jordan Little: The CSS calc() function The pointer media query The currentColor variable The :valid, :invalid, and :empty pseudoclasses Counters using only CSS Predictable tables with fixed layout Easy form states using adjacent sibling selectors Algebraic nth-child() selection Animating elements with animation-fill-mode As a tenth feature I’d like to add the use …

Electrode – Universal React and Node.js Application Platform

From the folks at Walmart: Electrode is a platform for building universal React/Node.js applications with standardized structure, best practices, and modern technologies baked in. It’s powering Walmart.com. And, now developers can use Electrode Platform as a whole or take its pieces, as appropriate. Electrode focuses on performance, component reusability, and simple deployment to multiple cloud …