A rather geeky/technical weblog, est. 2001, by Bramus
Like Worldle, but using country names. Every day, there is a new Mystery Country. Your goal is to guess the mystery country using the fewest number of guesses. Each incorrect guess will appear on the globe with a colour indicating how close it is to the Mystery Country. The more dark-red your guessed country colors, …
Originally a Twitter thread and now — thankfully — a blogpost by Cory LaViska on Web Components: Shadow DOM? Light DOM? Slots? If you’ve heard of these but aren’t sure what they are, maybe this will clear things up! A Web Components Primer →
The past few months, I’ve seen a lot of posts on Color Spaces and Colors in CSS float by. Here’s a small roundup.
If Tailwind is your thing, the “DevTools for Tailwind” by the folks over at BeyondCode looks like a handy tool to have. The DevTools for Tailwind CSS bring back designing and debugging in your browser. You can use the full power of the JIT engine and even add classes like border-[30px] on sites that use …
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 …
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 …
Continue reading “edit.photo — The Free Photo Editor in your Browser”
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 …
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 …
In this talk, we dig into how the CSS Cascade actually works. Origins, !important, Layers, Specificity, … it’s all covered.
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 …