Editor's Pick
echo-chamber-js - Commenting without the comments
Echochamber.js is a third-party script you can install to add a simple comment form to your blog post or website.
When a user submits a comment, echochamber.js will save the comment to the user's LocalStorage, so when they return to the page, they can be confident that their voice is being heard, and feel engaged with your very engaging content. It does not make any HTTP requests. Since LocalStorage is only local, you and your database need not be burdened with other people's opinions.
Note: editor's pick is not a sponsored or paid post in any way.
Accessibility
Accessible Animated GIF Alternatives
Can our GIF-like embeds support playback controls, alternative text, and reduced motion?
True accessibility depends on real people interacting with real experiences. But as an imperfect substitute, we can base our requirements on portions of the Web Content Accessibility Guidelines (WCAG).
CSS
Adapting typography to user preferences with CSS
A method to adapt a font to your users' preferences, so they're maximally comfortable reading your content.
How To Define An Array Of Colors With CSS
What if I tell you we can also use CSS to create an array? More precisely, we can create an array of colors. Don’t try to search MDN or the specification because this is not a new CSS feature but a combination of what we already have. It’s like we’re remixing CSS features into something that feels new and different.
HTML
I'm betting on HTML
With the advent of large language model-based artificial intelligence, semantic HTML is more important now than ever.
JavaScript
A JavaScript Iambic Pentameter Generator
Why I made a JavaScript iambic pentameter generator? I suppose the right answer is "because I felt like it". But that's how creativity works.
Next js Templates
Pre-built components or pages that you can use as a foundation for your own projects.
Use svg sprite icons in React
In this article, we will build a script that compiles a folder of svg icons into a single svg spritesheet. We will also build a React component that displays a specific icon by name with full type safe autocomplete for the available icons.
esbuild - An Extremely Simple React Starter Kit
I feel compelled to write about one of my favorite web development tools: esbuild! It’s a batteries-included JS and CSS bundler made by Evan Wallace, co-founder and former CTO of Figma. Written in Go rather than JavaScript, it’s ridiculously fast, and it powers some other popular bundlers you may have heard of.
Using something like Next.js will get you everything in esbuild and a lot more — but it’s much heavier. According to NPM, Next.js has 25 dependencies, and Packagephobia reports a 170MB install size. esbuild has one dependency, and adds a comparatively tiny 9MB to your node_modules folder.
Skeleton Mammoth – a lightweight and reusable skeleton loader screen
A powerful JavaScript library designed to enhance user experience by displaying UI skeleton loaders, also known as placeholders. It allows you to simulate the layout or elements of a website while data is being loaded in the background. With a multitude of advantages, Skeleton Mammoth takes your website's visual appeal to the next level.
Rewind-UI - A fully customizable React-TailwindCSS component library
Rewind-UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project. We've designed our components to be flexible and easy to use, so you can focus on what matters most: building great user experiences.
How I rewrote my spreadsheet from ReactTable to Vanilla JS
In this video I’m showing ReactTable implementation of my spreadsheet, what problems I did have with it and how I solved it by rewriting the table in Vanilla JS. In AMS Pilot I have a spreadsheet, very similar to Google Spreadsheet, but customized to the target audience needs.
VanJS (abbreviated Vanilla JavaScript, smallest reactive framework) 1.0.0 is here
VanJS is an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with VanJS feels like building React apps in a scripting language, without JSX.
basic-computer-games - a repository of “BASIC Computer Games” code in modern languages
An updated version of the classic "Basic Computer Games" book, with well-written examples in a variety of common memory safe and general purpose scripting languages, including JavaScript.
Browser-based robot dog simulator
I’m continuing to learn about robot simulation, and the next step is simulating a real robot, rather than a simplified platform.
I’ve chosen a quadruped (Unitree A1) for the next demo. First step is to load robot description from the official repository, using urdf-loaders library. Next, robot’s links and joints can be created in rapier.js physics engine for simulation and added to a three.js scene for visualization.
The whole project is ~800 LOC, which is quite compact for a realistic 3d robot simulator. I do believe that existing robotics simulators are frequently over-engineered, and it looks that some parts of a simulator can be simplified by relying on WebGL and WASM.
Next step for this project will be to implement a simple walking motion controller.
More Control Loading the Maps JavaScript API
Today we're sharing three big improvements to how the Maps JavaScript API is loaded: an API for flexible library loading, the new inline bootstrap loader, and a set of performance improvements.
echo-chamber-js - Commenting without the comments
Echochamber.js is a third-party script you can install to add a simple comment form to your blog post or website.
When a user submits a comment, echochamber.js will save the comment to the user's LocalStorage, so when they return to the page, they can be confident that their voice is being heard, and feel engaged with your very engaging content. It does not make any HTTP requests. Since LocalStorage is only local, you and your database need not be burdened with other people's opinions.
Playroom Kit - Build multiplayer games in minutes
Playroom Kit simplifies the development of real-time web-based multiplayer games by offering seamless synchronization and state management features. With its convenient integration capabilities, you can effortlessly incorporate the kit into popular game engines and libraries, transforming any game into a multiplayer experience.
Using microtasks in JavaScript with queueMicrotask()
A microtask is a short function which is executed after the function or program which created it exits and only if the JavaScript execution stack is empty, but before returning control to the event loop being used by the user agent to drive the script's execution environment.
Miscellaneous
Web Components Aren’t Components
Modern web frameworks are built entirely on the concept of components. In the realm of these frameworks, a component is a reusable piece of application code. All logic is encapsulated in one place, so the component can be dropped into the application anywhere it’s needed. Components are nested within one another to compose the structure of the page.
Man Spends Entire Career Mastering Crappy Codebase
This week, software developer Arthur Westbook announced his early retirement at age 58. His manager noted, “Arthur had a knack for working hard without learning transferrable skills. He will be dearly missed. It’ll take two junior devs and a Keurig to replace him.”