Editor's Pick
threejs-procedural-planets: Procedurally generated planets using Three.js
Procedurally generated planets using Three.js.
Live demo here.
Accessibility
Navigating the Web as a Blind Person: Accessible vs. Inaccessible Website Examples
In this video, we follow Joe DiNero as he navigates through two different websites: one that is accessible to him and one that is not. See the importance of designing websites with accessibility in mind and how it can impact the user experience for individuals with disabilities.
Template for accessibility guidelines
This template is opinionated and intended as a starting point for those who want to define how accessibility is dealt with in their company. It does not matter whether your title is developer, designer, project manager or something else.
When creating this template, I had the six most common WCAG failures in mind, but also what processes take place when you collaborate with other people. Nothing is set in stone and it should be adapted in consultation with your colleagues, because accessibility is a group effort.
Test-driven HTML and accessibility
Months passed of continuing to enjoy TDD with JavaScript, while wishing I could do more to test my accessible markup. Most of my research pointed to slow, flaky approaches like scripting an entire headless browser just to check if an HTML element rendered or if a menu opened on click.
Then I came across a tool called Web test runner from the team behind Open Web Components. Instead of running JavaScript tests in Node, Web Test Runner executes tests directly in the browser.
With this approach, I write tests to capture my expectations around semantic markup and accessibility upfront, then get instant feedback on whether my code meets those expectations.
CSS
Using date-based CSS to make old web pages *look* old
How do you know you're looking at an old website? You may have found a page which has lots of interesting information, but how can you tell it's a modern and relevant result?
Here's (one way) this can be fixed - inspired by Moriel Schottlender fabulous historic CSS selector.
MaintainableCSS - an approach to writing modular, scalable and maintainable CSS
Write CSS without worrying that overzealous, pre-existing styles will cause problems.
HTML
Making SVG Loading Spinners: An Interactive Guide
SVG spinners: you've seen them all over, giving us as a visual cue when elements are loading or data is being fetched. They are practical, scalable, and can enhance user experience. This guide will walk you through how they can be implemented using only a few simple SVG attributes like stroke-dasharray and stroke-dashoffset.
JavaScript
facet: Web components made declarative and simple
Facet is a single-file web library that allows for the easy, declarative definition of web components. By making use of <template> elements with special attributes, Facet makes it possible to define useful and effective web components with no Javascript boilerplate, so you can focus entirely on the structure and behavior of your component.
Related article you might find interesting by author here as well.
threejs-procedural-planets: Procedurally generated planets using Three.js
Procedurally generated planets using Three.js.
Live demo here.
API call in JavaScript & JS frameworks
Interacting with external applications is a necessary thing when we work on front-end applications by API calls. APIs allow different software applications to communicate with each other, enabling developers to access and retrieve data from various sources. There were many ways to API calls, like fetchAPI, XMLHttpRequest (xhr) & etc.
Here we will discuss fetching API calls and some tools for API calls.
React Tricks: Fast, Fit and Fun
How to make your React app or library faster and smaller. Tips and tricks: useEvent, useSyncExternalStore, stable object references, readonly useState.
Extending Responsive Video with HTML Web Components
Responsive HTML video is a web standard again, and with recent patches to Firefox and Chrome that match Safari's preexisting support, it now works across all modern browsers! That means you can use media queries for delivering your videos and potentially save your users some precious bytes.
You can try a demo of this responsive video web component here, which wraps a standard responsive video element and makes it respond to media changes that happen after pageload (which it would not do by default), while syncing the video's timecode as well.
How to Create Fully Reusable React Components
Creating a component is fairly easy, but doing them correctly is a different story.
A fully reusable component is what I call a component that is enjoyable to use. While the flawed ones frustrate you every time you need to customize them. It’s something that actually helps you code quickly by being fully reusable.
UX
Design Systems Database: Surf among top‑notch Design Systems
Best-in-class Design Systems with components and foundations references from top-tier tech companies and leading UI teams.
Miscellaneous
User Interface Typography
This book is about how to do good user interface typography, from basic things and principles to building layout and various design elements. The book has hundreds of illustrations that explain every nuance and principle.
Free to read the book online.
The Web Can Do What!?
Showcase of the incredible capabilities of the modern web by the Chrome for Developers team. As passionate web enthusiasts, our goal is to inspire creators to build better, more engaging, and innovative web experiences.
It’s weird how design systems are so rote, yet so difficult
I’ve built a bunch of different design systems for a bunch of different products and organizations, and this thought keeps popping into my mind: it’s weird how design systems are so rote, yet so difficult.
When I say rote, I’m thinking about how parts of the underlying toolkit have become really easy, how pretty much any designer can work on one, and how the general idea of a design system has become understood such that it’s a reasonable expectation that a team will have one.
All this means it’s easy to get started, make fast progress, then hit brick walls at high speed.