Editor's Pick
ARIA Authoring Practices Guide - Patterns
Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences. This guide describes how to apply accessibility semantics to common design patterns and widgets. It provides design patterns and functional examples complemented by in-depth guidance for fundamental practices.
Accessibility
ARIA Authoring Practices Guide - Patterns
Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences. This guide describes how to apply accessibility semantics to common design patterns and widgets. It provides design patterns and functional examples complemented by in-depth guidance for fundamental practices.
Color contrast checker analyzer tool
Make sure your color choices are as accessible as possible by checking the contrast ratio of your background and text colors.
CSS
Pokemon Cards Holo effect v2
A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards. The cards use 3d transforms, filters, blend modes, css gradients and interactions to provide a unique experience when taking a closer look.
What You Need to Know about Modern CSS (Spring 2024 Edition)
My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t have a great understanding of them and could use a plain language explanation of what it is, why they should care, and a bit of reference code. Maybe that’s you.
JavaScript
Web Component for Copyright Years
This Web Component keeps the year in your copyright notice up-to-date.
Nice look at a really simple vanilla web component if that's something you're looking to move towards. One thing to note about this is the html is attribute, which, at the time of this writing is not supported in Safari.
Optimizing Javascript for fun and for profit
I often feel like javascript code in general runs much slower than it could, simply because it’s not optimized properly. Here is a summary of common optimization techniques I’ve found useful. Note that the tradeoff for performance is often readability, so the question of when to go for performance versus readability is a question left to the reader. I’ll also note that talking about optimization necessarily requires talking about benchmarking. Micro-optimizing a function for hours to have it run 100x faster is meaningless if the function only represented a fraction of the actual overall runtime to start with. If one is optimizing, the first and most important step is benchmarking. I’ll cover the topic in the later points. Be also aware that micro-benchmarks are often flawed, and that may include those presented here. I’ve done my best to avoid those traps, but don’t blindly apply any of the points presented here without benchmarking.
Unpoly - The unobtrusive JavaScript framework for server-side web applications
Unpoly enables fast and flexible frontends for server-rendered HTML views. It has no dependencies and plays nice with existing code.
17 Equations that Changed the World - Rewritten in JavaScript
The book "17 Equations That Changed The World" by Ian Stewart outlines 17 fundamental equations that helped shape the modern world. This article explores how these math equations could be written in JavaScript and, in doing so, aims to make these complex concepts more understandable.
How Next.js breaks React Fundamentals (Examples)
In the front-end world, there's an ongoing war over performance. RSC (React Server Components), currently implemented in the Next.js App router, serve as the official weapon aimed at improving startup performance. However, it seems that in the midst of this battle, we've forgotten about some fundamentals, resulting in a degraded DX (Developer Experience). This article aims to provide examples of such DX issues in the current Next.js API. Towards the end, I outline a better proposal.
3D DOM viewer, copy-paste this into your console to visualize the DOM topographically
3D Dom viewer, copy-paste this into your console to visualize the DOM as a stack of solid blocks. You can also minify and save it as a bookmarklet.
Pretty neat.
