Editor's Pick
Shadow DOM is for hiding your shame
The CSS Zen Garden philosophy is a good one. Your markup should be just what it needs to be to convey the semantics of your document, and no more. Through the magic of CSS you can then make that document look however you’d like it to.
That’s the idea anyway, but sometimes reality falls a bit short of this ideal. You find that you need to add some otherwise-unnecesary structure to your document in order to acheive a specific look. You add a <div> here, a <span> there, and eventually things look like how you imagined they could. It’s a shame about the markup though, it started out so clean.
What if I told you it doesn’t have to be this way? That your document’s markup can stay as pristine as you wanted it to be? Well, it’s true. Shadow DOM is the tool for the job—it lets our light DOM retain the ideal, perfect structure while keeping the messy bits out of sight and out of mind in the shadow DOM.
CSS
CSS Utility classes: from blasphemy to hype
Utility classes had a long journey. Once considered a jest, this methodology is nowadays turning into a de facto.
This is a huge achievement for utilities, which for a long time had to fight sarcasm and shame from the community.
I still remember when I started using utility classes at the end of 2019.
I had managers telling me not to do it. I had FE friends telling me they were hating utility classes. Funny enough, BE people were the only ones who got them immediately.
The truth is, utilities were too good to be ignored; the results were speaking for themself.
The `hanging-punctuation property` in CSS
The hanging-punctuation property in CSS is almost a no-brainer. The classic example is a blockquote that starts with a curly-quote. Hanging that opening curly-quote into the space off to the start of the text and aligning the actual words is a better look.
CSS Hooks
Hooks bring advanced CSS capabilities to native inline styles, with practically zero runtime, no build steps, and a tiny CSS footprint. Designed for React, Solid, Preact.
Using Javascript Variables in Tailwind
How to use dynamically calculated or user generated values in Tailwind.
Clippy — CSS clip-path maker
Clippy is a tool for generating values for shape functions for the CSS clip-path property. The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.
Preventing Scroll “Bounce” with CSS
When you scroll rapidly to the top or bottom of a webpage you might notice a “bounce” effect, where the browser momentarily allows you to scroll beyond the uppermost or lowermost point, before bouncing you to correct position.
There’s a simple way to prevent this with css, using the overscroll-behavior property on the document root.
HTML
Shadow DOM is for hiding your shame
The CSS Zen Garden philosophy is a good one. Your markup should be just what it needs to be to convey the semantics of your document, and no more. Through the magic of CSS you can then make that document look however you’d like it to.
That’s the idea anyway, but sometimes reality falls a bit short of this ideal. You find that you need to add some otherwise-unnecesary structure to your document in order to acheive a specific look. You add a <div> here, a <span> there, and eventually things look like how you imagined they could. It’s a shame about the markup though, it started out so clean.
What if I told you it doesn’t have to be this way? That your document’s markup can stay as pristine as you wanted it to be? Well, it’s true. Shadow DOM is the tool for the job—it lets our light DOM retain the ideal, perfect structure while keeping the messy bits out of sight and out of mind in the shadow DOM.
ai2html
ai2html is an open-source script for Adobe Illustrator that converts your Illustrator documents into html and css.
JavaScript
Tamagui — React Native + Web UI kit
Write less, run faster. Styles, optimizing compiler & UI kit that unify React Native + Web.
How to Optimize React Context Performance
React Context is a great API to avoid prop-drilling or if you need a simple way to have access to some global app data in any component, but don’t want to use often recommended solutions like Redux or Mobx, because they, being good scalable libraries, advocate for proper architecture and to separate all files properly, and that is a big daunting task for something small.
So, what’s the big deal? Well, the issue is that it is relatively simple to introduce performance problems which can bite you much later, and you might never even know about them, since we usually develop on pretty powerful machines. Typically, the general advice is to avoid premature optimizations at all costs, but in this case it is just a good developer practice, from my experience. You are basically protecting yourself from performance regressions in the future. There is an excellent article which describes in detail how you can improve your Contexts from Nadia Makarevich, which I highly recommend to read as well.
Javascript — What’s new with ECMAScript® 2024 (ES15) — In Depth Guide
With the proposed features of ES2024®, developers are on the brink of unwrapping a variety of enhancements that promise to make coding in JavaScript more efficient, readable, and robust. From the intuitive syntax of top-level await to the expressive power of the pipeline operator, and the reliability of immutable records and tuples, each new feature is like a carefully chosen present, designed to enrich the JavaScript ecosystem and empower developers with more tools at their disposal.
According to the ECMAScript 2024 Internationalization API Specification (ECMA-402 11th Edition) several features are slated for inclusion in ES2024.
Just keep in mind that some of these are still “proposals” so things will probably adapt a bit, but lucky for you, this article will adapt with the approved changes.
Web Components Eliminate JavaScript Framework Lock-in
Web components can dramatically loosen the coupling of JavaScript frameworks. To prove it, we're going to do something kinda crazy: build an app where every single component is written in a different JavaScript framework.
A year working with HTML Web Components
While the term “HTML Web Components” is fresh out of the oven, the architecture it refers to has been sitting on the counter at room temperature for a while now. I’ve been experimenting with this way of building web components for almost a year, and in this post, I want to talk about some of the big takeaways I’ve come to thus far.
Multi-window-pong-game
Play pong game across multiple windows on the same origin using localStorage. Inspired by this project. I hope you enjoy it
Stimulus: A modest JavaScript framework for the HTML you already have.
Stimulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbo to provide a complete solution for fast, compelling applications with a minimal amount of effort.
Stop building (frontend) databases
There comes a time in every frontend engineer’s life where we realize we need to cache data from an API. It might start off benign – storing a previous page of data for that instant back button experience, implementing a bit of undo logic, or merging some state from different API requests. But we all know what ends up happening. More feature requests show up, and soon we’re busy implementing data caches, manual indexes, optimistic mutations, and recursive cache invalidation.
Welcome to the world of accidental database programming.
Miscellaneous
public-apis: A collective list of free APIs
A collective list of free APIs for use in software and web development.
Web developers: remarkably untalented and careless?
This passage here from John Gruber’s review of some new macs struck me in particular:
Web browser rendering is surprisingly resource-intensive — partially because modern HTML, CSS, and Javascript are remarkably complex, and partially because most web developers are remarkably untalented and careless programmers
I disagree with Gruber’s take on a lot in tech, but I think this is an accurate representation of what people in tech who aren’t web devs think of web dev.