#​543 — May 25, 2022 | Read on the web

Image via Code and Theory

The Era of Rebellious Web Design is Here — This is something of a case study on the provocative work of agency ‘Code and Theory’, looking at their approach to editorial web design — a notably bold ‘website as app’ aesthetic, described here as ‘web brutalism’. An interesting bit of food for thought on how things don’t have to always follow a set visual path.

Angelica Frey

Lesser-Known and Underused CSS Features in 2022 — A look at which properties and selectors are lesser-known or should be used more often — the likes of currentColor, scroll-padding, isolation, and contain-intrinsic-size pop up here. I learnt something.

Adrian Bece

Simplify Front-End Performance Monitoring by Analyzing UX Data — Utilize critical performance data to understand how users experience your applications with Datadog Real User Monitoring. Resolve front-end issues fast and analyze user errors in real-time.

Datadog sponsor

The Surprising Truth About Pixels and Accessibility — Pixels or rems? This comprehensive blog post aims to answer this question once and for all. You’ll learn about the accessibility implications, and how to determine the best unit to use in any scenario.

Josh W Comeau

WordPress 6.0 “Arturo” Released — Boasts “nearly 1,000 enhancements and bug fixes”, including new design tools, performance improvements, and accessibility enhancements. This post also highlights how WordPress is the CMS behind a huge 42% of sites globally.

Matt Mullenweg

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

An API for Fast, Beautiful Web Fonts — Here’s an update on the Google Fonts CSS API, looking at how it works, how to use it, and how it can efficiently deliver your web fonts.

Jimmy Mooney

▶  Secret Mechanisms of CSS — This talk digs into some common misunderstandings about CSS, to see if we can fill in some gaps in our mental model of the language.

Josh Comeau

The Balance Has Shifted Away From SPAs — “how the context has changed in recent years to give MPAs more of an upper hand against SPAs

Nolan Lawson

Integrate a Resource Scheduling Widget to Your App in Less Than a Day

Bryntum sponsor

CSS: Absolutely Positioning Things Relatively — An approachable look at using CSS grid to render complex webpages responsively. Plenty of visuals and code examples to help things along.

Benjamin Morris

Building an Interactive Starry Backdrop for Content — A thorough walkthrough/tutorial for building your own drop-in React component that brings an interactive visual backdrop to your site.

Jhey Tompkins

Five Things I'd Want to See Improved in WordPress Core — If you could write your own roadmap for the next few years of WordPress, what would it look like?

Brian Coords

'Safari Is Crippling The Mobile Market, And We Never Noticed'
Rupert Goodwins opinion

Dialog Components: Go Native HTML or Roll Your Own?
Rob Levin


Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

(Senior) JavaScript Engineer (m/f/d) In Full or Part-Time — You continuously improve the frontend of Civey together with our team. We offer a hybrid working model.
Civey GmbH

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools & Resources

Eva Icons: A Set of Beautifully Crafted Open Source UI Icons — Bit of an older project that includes 240+ icons in SVG or PNG format, each with an outline or fill version, and you can also select an animation type on hover.


AnimatiSS: A Small Collection of Drop-in CSS Animations — Choose from ten styles of animation (rotate, scale, slide, etc.), then select from one of the many variations of the chosen style.

Frank Eno

LunchboxJS: A Custom Vue 3 Renderer for Three.js — Straight in with a snazzy full-page demo here! The docs may prove more useful after checking it out.

Breakfast Studio LLC

Decrease Notification Development Time with Automation API and Builder — Product can easily build the templates and automation rules in our UI, and engineers can call it via our single send API.

Courier sponsor

PushIn.js: A Lightweight Parallax / Dolly / Push In Effect for Web Pages — Simulates an interactive dolly-in or push-in animation when scrolling. The homepage is itself a live demo.

Nathan Blair