My nuanced opinion on the #AppleBrowserBan
Building an Adaptive SVG favicon that responds to Dark Mode
Speaking of favicons: In the latest episode of GUI Challenges, Adam details how to create an adaptive favicon that responds to Dark Mode. SVG Favicons were introduced in Chromium 80 (2019) and Firefox 41 (2015). No support in Safari. Building an adaptive favicon → 🤔 On the WebKit Issue tracker I can find this RESOLVED …
Continue reading “Building an Adaptive SVG favicon that responds to Dark Mode”
How to Favicon in 2022
Updated version of to the How to Favicon in 2021. <link rel="icon" href="/favicon.ico" sizes="any"><!– 32×32 –> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!– 180×180 –> <link rel="manifest" href="/manifest.webmanifest"> The markup (and manifest) are essentially the same as the 2021 version, with one exception: sizes=”any” has been added to the favicon.ico reference. This is a workaround …
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 …
Continue reading “Add Responsive-Friendly Enhancements to <details> with <details-utils>“
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/ …
Continue reading “Force DNS resolving in cURL with the --resolve switch”
Globle
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, …
A Web Components Primer
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 →
Color Spaces and Colors in CSS
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.
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 …