Axel Rauschmayer’s tips to fighting JavaScript Fatigue: Don’t try to know everything Wait for the critical mass. Stick to things you understand: don’t use more than 1–2 new technologies per project. Do exploratory toy projects Diversify in life When in doubt, you can always fall back to the solid base you already know: HTML, CSS, …
Author Archives: Bramus!
How to Use Animation to Improve UX
Animation may be used in a wide range of scales and contexts to unite beauty and function: it can influence behavior, communicate status, guide the users attention and help the user see the results of their actions. Here are just a few examples to illustrate places where you can add some animations in your UI …
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 …
Continue reading “Hiding inline SVG icons from screen readers”
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 …
Continue reading “You Can’t Get Comfortable in Web Development”
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 …
Film Meets Art
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 …
CSS Transparent and Outlined Text
For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly. Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen: See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) …