Editor's Pick
Semi-Annual Reminder to Learn and Hire for Web Standards
This is a common cycle. Web developers tire of a particular technology — often considered the HTML killer when released — and come out of it calling for a focus on the native web platform. Then they decide to reinvent it yet again, but poorly.
There are many reasons companies won’t make deep HTML / CSS / ARIA / SVG knowledge core requirements. The simplest is the commoditization of the skills, partly because framework and library developers have looked down on the basics.
Even assuming orgs don’t hire for “fit” (a combination of gatekeeping, selection bias, and confirmation bias) and instead prioritize on web standards knowledge, potential employees don’t have the fundamental education to understand the web platform. Neither higher-ed programs nor bootcamps drive a standards-first curriculum.
Accessibility
Reasonable Colors
Reasonable Colors is an open-source color system that makes it easy to build accessible, nice-looking color palettes.
The “Other” C In CSS
Sara’s presentation, “The Other ‘C’ in CSS”, was published on YouTube just last week. It’s roughly 55 minutes of must-see points on the various ways CSS can, and does, impact accessibility. I began watching the presentation casually but quickly fired up a place where I could take thorough notes once I found myself ooo-ing and ahhh-ing along.
So, these are the things I took away from Sara’s presentation.
CSS
Animista - On-Demand CSS Animations Library
Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
95 Beautiful CSS box-shadow examples
Curated collection of 95 free beautiful CSS box-shadow, ready-to-use for your next projects. Click to copy.
CSS-only infinite scrolling carousel animation
Create an infinite scrolling carousel animation with pause on hover using only CSS. No JavaScript required.
CSS @property and the New Style
The @property at-rule recently gained support across all modern browsers, unlocking the ability to explicitly define a syntax, initial value, and inheritance for CSS custom properties. It seems like forever ago that CSS Houdini and its CSS Properties and Values API were initially introduced. I experimented sparingly over time, reading articles that danced around the concepts, but I had barely scratched the surface of what @property could offer. The ensuing demo explores what's possible in the next generation of CSS.
The Dialog Element with Entry *and* Exit Animations
Una Kravets blogged the other day that animating entry effects are now supported in the latest stable version of all major browsers. The new cool way to do it, that is. We’ve long had trickery like applying a @keyframe animation with a to frame that would behave like an “entry effect”, but it was a bit awkward and didn’t work in all situations. Specifically one like using the new and very useful <dialog> element.
Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations
Anchor positioning and scroll-driven animations are among of the most popular and exciting CSS features of 2024. They unlock a lot of possibilities, and will continue to do so as browser support improves and developers get to know them.
Here is a demo of a custom range slider where I am relying on such features.
Double your specificity with this one weird trick
When browsers calculate the specificity of a CSS selector, they're essentially counting how many ID, class, element or equivalent selectors you've combined. It turns out that you're allowed to repeat the same selector multiple times and each instance will add to the specificity. The CSS Selectors Level 4 specification says:
Repeated occurrences of the same simple selector are allowed and do increase specificity.
Therefore, you can simply duplicate (or triplicate, or quadruple, etc.) the same selector to boost your specificity.
The Ultimate Guide to Font Performance Optimization
Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more.
Optimizing the fonts displayed on your website comes with many web performance advantages, including faster page load times, improved user experience, and better results for Core Web Vitals and other performance metrics.
JavaScript
staticrypt: Password protect a static HTML page, decrypted in-browser in JS with no dependency. No server logic needed
Safely encrypt and password protect the content of your public static HTML file, to be decrypted in-browser without any back-end - to serve it over static hosting like Netlify, GitHub pages, etc. (see a live example).
StatiCrypt uses AES-256 and WebCrypto to encrypt your HTML file with your long password, and returns a static HTML page showing a password prompt that you can now safely upload anywhere, the page containing your encrypted content and decryption happening in javascript client side (see the details of how it works).
You can encrypt a file online in your browser (client side) at robinmoisson.github.io/staticrypt, or use the CLI to do it in your terminal or build process.
i-html, an inline-html import element
i-html is a drop in tag that allows for dynamically importing html, inline. It's a bit like an <iframe>, except the html gets adopted into the page.
The <i-html> tag can be placed on a page, as an empty container. It is completely unstyled (well almost, it has display:contents). Whenever the src= attribute changes, it will fetch the requested resource as text/html and replace its inner contents with the parsed contents of the response. That's essentially all it does. Kind of.
Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders
In this tutorial, you will learn how to create a pixel/grid displacement effect using Three.js, enhanced with shaders and GPGPU techniques. The guide covers the application of a subtle RGB shift effect that dynamically responds to cursor movement. By the end, you’ll gain a solid understanding of manipulating textures and creating interactive visual effects in WebGL, expanding your creative capabilities with Three.js.
It’s recommended that you have some basic understanding of Three.js and WebGL for understanding this tutorial.
Demo here.
Miscellaneous
I will f(l)ail at your tech interviews, here's why you should care
How technical interviews might be costing your org time and quality candidates.
Semi-Annual Reminder to Learn and Hire for Web Standards
This is a common cycle. Web developers tire of a particular technology — often considered the HTML killer when released — and come out of it calling for a focus on the native web platform. Then they decide to reinvent it yet again, but poorly.
There are many reasons companies won’t make deep HTML / CSS / ARIA / SVG knowledge core requirements. The simplest is the commoditization of the skills, partly because framework and library developers have looked down on the basics.
Even assuming orgs don’t hire for “fit” (a combination of gatekeeping, selection bias, and confirmation bias) and instead prioritize on web standards knowledge, potential employees don’t have the fundamental education to understand the web platform. Neither higher-ed programs nor bootcamps drive a standards-first curriculum.
A Developer's Guide to Shape Outlining Techniques
Explore main SVG outline techniques with pros and cons, plus code-based guides for developing modern, responsive web applications and websites.
How To Create An NPM Package
Learn how to publish a package to npm with a complete setup including, TypeScript, Prettier, Vitest, GitHub Actions, and versioning with Changesets.
Also includes a video walkthrough of this guide if you prefer that format.