Massive round-up over at Smashing Magazine listing a bunch of accessible front-end components: from tabs and tables to toggles and tooltips. A Complete Guide To Accessible Front-End Components →
A Complete Guide To Accessible Front-End Components
Progress Nav with IntersectionObserver
In Table of Contents with IntersectionObserver on CSS-Tricks, Chris Coyier talks about sticky table of contents on long pages whose active state updates as you scroll. When talking about those, you can not not mention the wonderful Progress Nav by Hakim El Hattab. Final version of the progress nav! Switched to SVG and made it …
Building a Settings Component
In this episode of GUI Challenges, Adam Argyle builds a Settings Component with sliders and checkboxes. In this post I want to share thinking on building a Settings component for the web that is responsive, supports multiple device inputs, and works across browsers. Tons of CSS-knowledge in there: CSS Nesting CSS Grid Custom Properties for …
Cookie Consent Speed.Run
Test your GDPR skills by speed running a cookie consent banner Cookie Consent Speed.Run →
Three important things you should know about CSS :is()
Continue reading “Three important things you should know about CSS :is()“
HSL: a color format for humans
Over at the Cloud Four blog, Paul Hebert digs into HSL colors Colors on the web are confusing — but they don’t have to be! The HSL format makes it easy for humans and computers to work with color. Included are some nice CodePen-hosted Color Pickers, such as this one: See the Pen HSLA Color …
Easily write Twitter threads with ThreadStart
Whenever I write a Twitter Thread I carefully lay out my planned tweets in advance in a text editor. After manually adjusting my sentences to have tweetable parts, I tweet them out one by one. Quite a cumbersome work, where ThreadStart can do the heavy lifting for me instead: Creating a Twitter thread without guidance …
Continue reading “Easily write Twitter threads with ThreadStart”
React Flow – Library for Building Interactive Node-based UIs, Editors, Flow Charts and Diagrams
React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls. React Flow →
Too Many SVGs Clogging Up Your Markup? Try use
Good reminder by Georgi Nikoloff to have one (visually hidden) SVG that contains several layers, which you can then include further down in your code. SVG has a <defs> tag that lets us declare something like our graph footer just once and then simply reference it — using <use> — from anywhere on the page …
Continue reading “Too Many SVGs Clogging Up Your Markup? Try use“
Manage your DNS from GitHub with DNSControl
In this post Sven Luijten uses DNSControl from within GitHub Actions to manage DNS: What if you could edit a JavaScript file with your desired DNS configuration, submit a pull request on GitHub, see a preview of the changes you are about to make, and when you merge it, have those changes be applied completely …
Continue reading “Manage your DNS from GitHub with DNSControl”