Editor's Pick
If Not React, Then What?
Frameworkism is now the dominant creed of today's frontend discourse, and it's bullshit. We owe it to ourselves and to our users to reject dogma and embrace engineering as a discipline that strives to serve users first and foremost.
Long and spicy!
Accessibility
Alt Text: Not Always Needed
Most images require description for clarity, there are exceptions. This set of notes looks at different situations and contexts where alt text may not be needed and what to do in those cases.
Accessibility | 2024 | The Web Almanac by HTTP Archive
Accessibility chapter of the 2024 Web Almanac covering ease of reading, navigation, forms, media, ARIA, and accessibility apps.
Dataviz accessibility principles, demonstrated by the 2024 presidential election dashboards
I tested how well different election dashboards implemented common dataviz accessibility princples, and explained where things went wrong (including lots of demos).
CSS
CSS Today: Powerful Features You Might Not Know About
We’re talking about stuff like finally being able to center a div without losing your mind, dealing with dark mode more easily, animating hidden elements, or using CSS to solve math problems. It’s like we can do more with less hassle now, so let’s check out some of these newer CSS features that showed up recently.
SVG Spinners
Collection of open-source SVG-based spinners (CSS & SMIL).
These animations have been curated from a variety of sources and all have MIT License. Therefore, they can be used commercially without restrictions and it requires no attribution.
You can see all the spinners here.
CSS Popover + Anchor Positioning is Magical
If you’ve ever needed the positioning of an element to be connected (or anchored) to the position of another element, then you’ll be very excited about anchor positioning in CSS.
Solved By CSS: Donuts Scopes
Donut scoping addresses the challenge of preventing parent styles from leaking to nested content. Originating from a 2011 concept by Nicole Sullivan, the issue has evolved, culminating in 2024's @scope at-rule. This allows for more precise CSS styling, safeguarding content from unwanted inheritance while managing global CSS complexities.
Sideway selection in CSS with :has()
This use of :has() is certainly one of the most common: it basically acts as a parent selector, something that really was missing in the web platform and was highly demanded for years by developers.
BUT, because :has() actually accepts a relative selector list as its argument, you can select so much more than just the parent element! Using various CSS combinators, it is now possible to not only go up the DOM tree, but also do sideway selections!
Next-level frosted glass with backdrop-filter
Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet.
Radial Gradients and CSS Trigonometric Functions
I’ve been playing around with layering radial gradients in CSS to create flower shapes, with the help of CSS trigonometric functions. For a primer on what trigonometric functions are, and why they’re useful in our code, I’ve written a three-part series for Codrops.
Hyper-responsive web components
Some time ago, I was assigned the task to build a new component: an embeddable call to action to sign up for email alerts. This component needed to be incredibly portable, looking great on any third-party website, in any position, at any viewport, with any amount of content. It had to be a “hyper-responsive” component.
How to Create Zig-Zag CSS Loaders Using One Element
In a previous article, I showed you how to create filling CSS loaders collection where each loader was built using a single HTML element. Here, you’ll learn more about loaders by creating the Zig-Zag collection.
HTML
HTMLrev - 1500+ free HTML templates for websites, landing pages, blogs, portfolios, ecommerce and admin dashboards
Discover free HTML website templates built with vanilla CSS, Bootstrap, Tailwind, Angular, React, Vue, Nextjs, Nuxt, Svelte, Gatsby, Astro and Laravel.
Preloading Responsive Images
Responsive images and preloading don’t naturally work well together. When you use responsive images, the browser makes smart decisions about which image to load based on the device’s characteristics. But preloading needs to happen before these decisions can be made. Let’s explore how to make them work together.
JavaScript
Experiment: Automatically triggered View Transitions with MutationObserver
Instead of adding document.startViewTransition at various places in your JS, use a MutationObserver to watch for DOM mutations. In the Observer’s callback undo the original mutation and reapply it, but this time wrapped in a View Transition.
Avoiding Common Mistakes with useEffect in ReactJS
useEffect allows you to perform side effects in functional components, such as fetching data or updating the DOM. However, it can be easy to make mistakes when using useEffect, which can lead to bugs and performance issues. In this blog post, we will explore some of the common mistakes that people make when using useEffect and how to use it correctly.
If Not React, Then What?
Frameworkism is now the dominant creed of today's frontend discourse, and it's bullshit. We owe it to ourselves and to our users to reject dogma and embrace engineering as a discipline that strives to serve users first and foremost.
Long and spicy!
dollar
A modern DOM manipulation library that feels like native JavaScript. Write cleaner code with an API that matches the actual DOM, while keeping the convenience of jQuery-style selections and chaining.
react-scan: Scan for React performance issues and eliminate slow renders in your app
React Scan automatically detects performance issues in your React app.
Previously, tools like:
- <Profiler /> required lots of manual changes
- Why Did You Render? lacked simple visual cues
- React Devtools didn't have a simple, portable, and programmatic API
React Scan attempts to solve these problems:
- It requires no code changes – just drop it in
- It highlights exactly the components you need to optimize
- Use it via script tag, npm, CLI, you name it
5 JavaScript PDF Libraries Every Developer Should Know
Working with PDFs in web apps can sometimes be a hassle. Whether you’re trying to generate reports, process documents on the fly, or display PDFs cleanly, you need the right tools to make it smooth and efficient.
Dependency management fatigue, or why I forever ditched React for Go+HTMX+Templ
You can actually find a lot of compelling arguments for ditching React in favor of HTMX in the essays found in the HTMX official website. But I feel that not that many people are speaking about dependency management fatigue.
The first time that one of these React libraries broke my application with a major version bump, I refactored my code without any questioning.
But the second time that this happened, it just felt odd. I started asking myself:
- Is my webapp getting some actual benefits (apart from maybe security patches) from this major version release?
- Is it necessary to literally break the API of a fundamental component in a React webapp 5 times ?!?!
- How much time am I losing on this, when I could be shipping new features or other products?
I don't have time to learn React
React proponents might claim that React will teach you modern UI, but from what I've seen it barely copes with modern UI. autofocus is broken, custom elements don't work in all but the experimental version, using any "modern" features like <dialog> or popovers requires useEffect, and the synthetic event system teaches you so little about how DOM actually works. This isn't modern UI, it's UI from 2013 at its inception. I don't have the time left in my career to pick up UI paradigms that haven't evolved much beyond from when Barack Obama was in office.
HTML5 Canvas Tips
The <canvas> element may be the best thing to happen to HTML since <marquee>. I’ve been using it a lot for various projects recently and thought it’d be nice to collect some of the tips and tricks I’ve learned into once place.
Native dual-range input
The "native" part is somewhat open for discussion. I call it native because the library uses two native HTML range inputs. This means that all of the native interactions and accessibility features are preserved.
Native inputs allow us not to reinvent the wheel. There is about fifty lines of JavaScript to synchronize the inputs, along with some CSS to ensure everything looks polished.
UX
Don't Fuck With Scroll
Momentum scrolling plugins are the web equivalent of turning a functional bike into a unicycle because it "looks cool." It adds unnecessary complexity, degrades usability, and frustrates users. Instead of reinventing scrolling, stick to what works: native, predictable, fast scrolling behavior.
Don't make scrolling a thing. Just let people scroll.
Miscellaneous
Image Optimization for SEO: The Complete Guide
Optimizing images isn't just about making your website look good – it's crucial for SEO success. Properly optimized images can improve your search engine rankings, enhance user experience, and significantly reduce page load times. This detailed guide covers everything you need to know about image optimization for SEO.