Connect to a Database from CSS

You can’t connect to a database from within CSS, Right? Or can you? Leveraging Houdini and SQL.js — which is SQLite compiled to JavaScript to serve as in-memory DB — you can. Using some Custom Properties, you can pass in queries to be executed. .query-display { background: paint(sql-css); } main { –sql-query: SELECT * FROM …

edit.photo — The Free Photo Editor in your Browser

Rik Schennink, author of the aformentioned redact.photo recently published a new free webapp: an entire photo editor in the browser. No popups to close. No ads to ignore. No cookies to accept. No account to create. 100% Free ✨ Simply drag or paste your image onto it, and start editing. You can also create a …

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 …