MeshSpin.js

Meshspin.js is a simple and lightweight JavaScript library that lets you spin a 3D mesh object in your browser using SVG and JavaScript without dependencies. A default MeshSpin is defined as follows, but you can also define your own shapes and have it rotate by mouse movement. var mesh = new MeshSpin(); mesh.setup(‘wrapper’); mesh.run(); See …

The Mystery of the Changing Favicon

Alvaro Montoro recently had a weird issue where the favicon shown in Firefox differed from that in other browers, even though it was the same favicon.ico file. It was puzzling: the favicon worked differently depending on the browser. Chrome and Safari showed the correct favicon (with the corporate logo) while Firefox showed a completely different …

Inclusive Design

Inclusive design describes methodologies to create products that understand and enable people of all backgrounds and abilities. It may address accessibility, age, economic situation, geographic location, language, race, and more. Covered examples include: Text Legibility and Dark Mode for Older Users Surname Inputs for Global Audiences A Variety of Demographic Identifiers Inclusive Facets Diverse Illustrations …

Chrome 99: CSS Cascade Layers, a New Picker for Input Elements, and More

There are some exciting new things slated for Chrome version 99 — currently in beta and to become stable on March 1st. Standout features are the shipping of CSS Cascade Layers and the new showPicker() Method on HTMLInputElement Objects. On the Chrome Developers Blog, Una Kravets wrote a post that covers Cascade Layers in detail. …

Not all Evergreen Browsers can be Updated

Chris put together two posts. A first one by Jim Nielsen who couldn’t update Safari on his Mom’s iPad when a site broke due to the use of the Optional Chaining Operator; and a second one by Eric Bailey with some nuance on the Evergreen part of “Evergreen Browsers”. As Chris wrote: But even browsers …

Cascade Layers: Practical Use-Cases / Examples

Highly interesting post by Manuel Matuzovic on Cascade Layers. Manuel skips out on the technical/theoretical details — which were already been covered by me, Stephanie, Una, … — and jumps straight into the practical side of things. While I’m writing this blog post, I’m looking at a large site I’ve been working on and I’m …

JavaScript for Impatient Programmers (ES2022 edition)

A book on JavaScript by Axel Rauschmayer. This book makes JavaScript less challenging to learn for newcomers, by offering a modern view that is as consistent as possible. Covers all essential features of JavaScript, up to and including ES2022. You can read the entire contents online, or order PDF/EPUB/MOBI versions for $34 JavaScript for Impatient …

Lights at Sea — A map of Lighthouses

This map shows all the blinking beacons from OpenStreetMap. More specifically, it asks the Overpass API for all elements with an seamark:light:sequence attribute, decodes these, and displays them as coloured circles on the map using Leaflet. It also tries to take the seamark:light:range and seamark:light:colour into account. The cool part is that the size and …

Two posts on Semantics

I recently enjoyed reading Hidde de Vries‘s post (that was a talk) on Semantics: One of the web’s killer features is that it comes with a language for shared semantics. When used right, HTML helps us build websites and apps that work for a broad range of users. Let’s look at what semantics are and …

Getting Started With CSS Cascade Layers

Stephanie Eckles, writing for Smashing Magazine: Cascade layers introduce the new at-rule of @layer. The intent is to help CSS authors be more intentional about ordering the “layers” of CSS rules as a new method of cascade management. Getting Started With CSS Cascade Layers → If you’re looking for the quick version on Cascade Layers, …