Articles

Dave Rupert discusses browser diversity (post Mozilla layoffs) and the increasing complexity of modern web dev, Sophie Hodge compares the behaviour of our users to cats 🙀, Christian Heilmann encourages us to ensure (dev) tools are built to be inclusive and Built for Mars disects 'buy-now, pay-later' payment system Klarna, used by the likes of ASOS. Also, Davor Tvorić documents his React mastery journey... although Ender Minyard and Jim Nielsen both warn against 'expensive' front-end frameworks, whilst Lea Verou looks for some stricter criteria around web components.

What is the Value of Browser Diversity?

Everything I know about UX Research, I learnt from cats
— by Sophie Hodge
In User Experience design, it’s easy to think of ‘users’ as a faceless group of humans. To combat that we use ‘personas’ as a shorthand to…

The tangled webs we weave
Another reflection on modern web development

Tools should not only be for experts – they should turn us into them | Christian Heilmann

My journey to mastering React
— by Davor Tvorić
Let’s go back a couple of years, to a much different state in the world. When people didn’t have to s...

Stop Using React
— by ender minyard
I thought I simply didn't understand React. I taught myself React and I still wish I could go back in...

The Economics of the Front-End

How Klarna works – Built for Mars

The failed promise of Web Components – Lea Verou

Techniques & Tutorials

Accessibility specialist Manuel Matuzovic talks accessible CSS, Patrick Brosset highlights how CSS custom properties behave in the browser. Val Head describes accessible web animation and Léonie Watson takes on the tricky subject of how screen readers navigate data tables. Ender Minyard and Chris Bongers give web performance tips and there's a couple of conferences, one past (Inclusive Design 24) and one upcoming (Jamstack Conf Virtual).

Writing even more CSS with Accessibility in Mind, Part 1: Progressive Enhancement
Progressive enhancement is amazing. Building websites layer by layer allows for a cleaner separation of concerns, which makes the website…

patrick / articles / 3 things about CSS variables you might not know

Accessible Web Animation: The WCAG on Animation Explained | CSS-Tricks
It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic…

The Ultimate Guide to Web Performance 🚀
— by ender minyard
There's so many ways to speed up your site. Don't you wish every web performance tip was in one place...

I made my website 28ms faster with content-visibility 🤓
— by Chris Bongers
You might think, what is 28ms? If you are a big advocate of speeding up the web and getting perfect s...

How screen readers navigate data tables - Tink - Léonie Watson

Inclusive Design 24 (#id24)
A Free 24-Hour Online Community Event On Accessibility.

Jamstack Conf Virtual
Unlocking a FREE global conference 🌍 Join and learn how we can increase the webs reach and effectiveness all with the Jamstack

Design and Ethics

Chris Coyier discusses the important, not-mentioned-enough topic of website carbon emissions, Aleksandr Hovhannisyan picks up on those over-used (albeit it lovely) "happy blue people" illustrations. I watched and enjoyed Netflix's documentary-drama 'The Social Dilemma' but some there's some well-founded criticism from Pranav Malhotra and Brandon Dorn dissect the web brutalism design aesthetic.

Thinking About Power Usage and Websites | CSS-Tricks
Gerry McGovern asked if I had any insight into energy consumption and websites. He has a book, after all, about the digital costs on the…

Blue People Illustrations, or How to Kill a Brand | Aleksandr Hovhannisyan
— by Aleksandr Hovhannisyan
There's a recent trend in web design of using illustrations of blue, generic, faceless people. And it's killing brands.

The Social Dilemma Fails to Tackle the Real Issues in Tech
— by Pranav Malhotra
The Netflix documentary replicates Silicon Valley’s biggest shortcomings.

Web Brutalism, Seamfulness, and Notion | Viget
How a tool for sensemaking reconciles two distinct software design ideologies.

Tools

Parse Hub is an open-source web scraping tool I used recently, Duet Design System recently released "yet another" date picker but very welcome it is, as it's a tricky thing to do well (as I've found to my cost...) and has a focus on accessibility. There's more accessibility tools from a11yresources, the Cory LaViska's Shoelace web component library gets an update, Pablo Stanley gives us a lovely collection of diverse, customisable hand-drawn people illustrations (now with added face masks! 😷) and lastly an open source modular components library from Chromatic.


ParseHub | Free web scraping - The most powerful web scraper

ParseHub is a free web scraping tool. Turn any site into a spreadsheet or API. As easy as clicking on the data you want to extract.

duetds/date-picker
Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at…

Shoelace
Shoelace provides a collection of professionally designed, every day UI components built on a framework-agnostic technology.

a11yresources - A growing list of accessibility tools and resources
A growing list of accessibility tools and resources

Open Peeps, Hand-Drawn Illustration Library
Open Peeps is a hand-drawn illustration library to create scenes of people. You can use them in product illustration, marketing, comics,…

Component Driven User Interfaces
How modularity is transforming design and frontend development