Links
Modern CSS Explained For Dinosaurs
The goal of this article is to provide a historical context of how CSS approaches and tooling have evolved to what they are today in 2018. By understanding this history, it will be easier to understand each approach and how to use them to your benefit. Let’s get started!
Direction Aware Hover Effects
This is a particular design trick that never fails to catch people's eye! I don't know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I'd round a few of them up here.
CSS Grid layout — crossed sections
I want to show you a layout scenario that wouldn’t be trivial to implement without CSS Grid — a layout with intertwined sections.
How to use variable fonts in the real world
Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way.
GitHub Contributions Chart
The contributions chart is wildly inaccessible. It may look pretty, but for anyone is who is not working in idealized conditions it is a problem. It is completely keyboard inaccessible, its hit areas are too small, it offers no cues for what is interactive, its contrast is poor, it is not exposed to screen readers in any way, heck, it’s not even responsive.
Videos
Inclusive Markup by Estelle Weyl
By developing with web standards, you can create accessible, performant web sites. Semantic markup helps ensure accessibility while reducing the need for frameworks. Write semantic HTML and leverage CSS Selectors and the cascade, to reduce your CSS and JS by up to 95% and obliterate your queue of accessibility bugs.
Sponsor
Sponsored Link Example
This is what it could look like if you buy a sponsored link in an issue of Friday Front-End! One link per issue maximum. Get in touch today!