Editor's Pick
spacekit.js - an open-source JavaScript library for creating interactive 3D space visualizations - whether of the Earth/moon system, solar system, or beyond
You can check out an editable live example on jsfiddle, or look at a variety of live examples on SpaceReference.org.
This library generalizes work that is currently used on Meteor Showers, Ancient Earth, Asterank, and many other sites into a single open-source 3D engine for space that is both accurate and visually stunning.
CSS
Why Your CSS Code Is a Slow, Broken, and Hard-to-Manage Mess
This article will discuss how to create optimized, unbroken CSS code for web apps, including how to avoid common mistakes and tools for efficiently maintaining CSS code.
Limit the reach of your selectors with the CSS @scope at-rule
Learn how to use @scope to select elements only within a limited subtree of your DOM.
With @scope you can limit the reach of your selectors. You do this by setting the scoping root which determines the upper boundary of the subtree you want to target. With a scoping root set, the contained style rules –named scoped style rules– can only select from that limited subtree of the DOM.
JavaScript
Announcing Vue 3.4
This release includes some substantial internal improvements - most notably a rewritten template parser that is 2x faster, and a refactored reactivity system that makes effect triggering more accurate and efficient. It also packs a number of quality-of-life API improvements, including the stabilization of defineModel and a new same-name shorthand when binding props.
This post provides an overview of the highlighted features in 3.4. For the full list of changes, please consult the full changelog on GitHub.
Boring React - my boring way of doing react
So, after a good chunk of time tinkering with different setups in my projects and steering the ship at work, I stumbled onto something pretty cool. I call it the "boring" React way. it's been the secret sauce for the stuff I've led at my job. Everyone's been pretty darn happy with it. So, grab a seat, and let me share my "boring" way.
React Server Components: the Good, the Bad, and the Ugly
React Server Components bring server-exclusive capabilities to React. I’ve been using this new paradigm within Next.js 13 and 14, and what follows is my honest assessment of it.
I debated not publishing this post because of the way the React community has historically handled criticism. It is only recently that I decided it is important to share my thoughts, especially after seeing that much of the existing criticism is either not well-documented or stems from unfamiliarity.
I’m writing this from the perspective of someone who cares heavily about user experience. I do also care about developer experience, but the user always comes first.
fflate - High performance (de)compression in an 8kB package
You can both pack and expand Zlib, GZIP, DEFLATE, or ZIP files very quickly with just a few lines of code.
Weighing in at a measly 8kB for basic compression and decompression, you don't need to worry about your bundle size ballooning.
Despite utilizing multiple cores, supporting data streams, and being very memory efficient, fflate is compatible with both Node.js and browsers as old as IE11.
Github repo here.
JSX email - Build Emails with a Delightful DX
JSX email provides a set of React components and helpers for building delightful and responsive email templates, compatible with modern email clients.
The components handle the heavy lifting of compatibility and client inconsistency so designers and developers can focus on building impactful and engaging templates.
Some sample emails can be viewed here.
rea11y-easy-form - accessible React forms
The (hopefully) easiest way to build highly performant and accessible forms in React.
Built on top of react-final-form (for its subscription-based form state management), the key goals and features of rea11y-easy-form are:
- Accessibility
- Simplicity
- Extensibility
- Performance
In that order too.
With a number of built-in components developed for accessibility, and the ability to easily use your own, rea11y-easy-form should have you covered.
spacekit.js - an open-source JavaScript library for creating interactive 3D space visualizations - whether of the Earth/moon system, solar system, or beyond
You can check out an editable live example on jsfiddle, or look at a variety of live examples on SpaceReference.org.
This library generalizes work that is currently used on Meteor Showers, Ancient Earth, Asterank, and many other sites into a single open-source 3D engine for space that is both accurate and visually stunning.
2023 JavaScript Rising Stars
A complete overview of the JavaScript landscape in 2023: trends about frontend, fullstack and Node.js frameworks, React and Vue.js ecosystems, build tools, state management.
UX
Transition animations: a practical guide - Principles that can be used immediately by anyone in their design process
This article focuses on transition animation specifically. The goal is to showcase the principles of transition animation with examples that are basic, compact, and can be used immediately by anyone in their design process. These insights are not rules set in stone, but rather guiding considerations for new product creation. Consider this your concise, practical guide to the art of transition animation.
Miscellaneous
Harmful complexity: using React for static content
Yesterday, I wrote about the two types of harmful complexity I typically see when working with consulting clients…Using over-engineered tooling (like React) for simple, mostly static websites. Using too little tooling for large, interactive, data-driven UI. Today, I want to talk about the first type, using over-engineered tooling.