A look at CSS Cascade Layers

Kevin Powell takes a look at Cascade Layers: If you’re new to Cascade Layers and are looking for more resources, here’s a few useful ones: The Future of CSS: Cascade Layers (CSS @layer), by yours truly Getting Started With CSS Cascade Layers, by Stephanie Eckles CSS Cascade Layers in 5 Minutes, by Una Kravets Cascade Layers: …

Add Responsive-Friendly Enhancements to <details> with <details-utils>

Zach created a very handy Web Component that augments and wraps around a <details> element. He’s named it <details-utils>. This web component adds five new responsive-friendly enhancements to one or more <details> elements nestled inside: Force open/closed Click outside to close Close on esc Animate open/closed Toggle root element class Using attributes you can control …

Force DNS resolving in cURL with the --resolve switch

It’s possible to force DNS resolving in cURL using the –resolve switch. The –resolve switch allows you to tell curl which address to request when it would resolve a given hostname. The format of the argument is domain:port:ip # HTTPS Example curl -I -L https://domain.example.org/ \ –resolve domain.example.org:443:192.168.0.1 # HTTP Example curl -I -L http://domain.example.org/ …

DevTools for Tailwind

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 …

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 …