Multi-Thumb Sliders: Particular Two-Thumb Case
January 7th, 2020
This is a concept I first came across a few years back when Lea Verou wrote an article on it. Multi-range sliders have sadly been removed from the spec since, but something else that has happened in the meanwhile is that CSS got better — and so have I, so I recently decided to make…
How Auto Margins Work in Flexbox
January 6th, 2020
Robin has covered this before, but I’ve heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted to join the party. Say you have a flex container with some flex items inside that don’t fill the whole area. See the Pen ZEYLVEX…
New Year, New Job? Let’s Make a Grid-Powered Resume!
January 1st, 2020
Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that looks great when printed and at different screen sizes. That way, we can use the resume online and offline, which might come in handy during…
So Many Color Links
December 27th, 2019
There’s been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment. Curated colors in context Happy Hues demonstrates a bunch of color palettes in the context of the site itself. That’s a nice way to do it, because…
Why do we use .html instead of .htm?
December 26th, 2019
Interesting question from Andy: Serious question. Why do we use .html instead of .htm? / @adactio @css — Andy Clarke (@Malarkey) December 12, 2019 The most likely answer from the thread: DOS was a massive operating system for PCs for a long time and it had a three-character limit on file extensions. Interesting that the…
PHP Templating in Just PHP
December 26th, 2019
With stuff like template literals in JavaScript and templating languages, like JSX, I’ve gotten used to wanting to write my HTML templates in one nice chunk and sprinkling in variables wherever I need them. I had a situation where I needed to do that in “raw” PHP the other day, so I’m just documenting it…
How to Modify Nodes in an Abstract Syntax Tree
December 26th, 2019
One of the more powerful concepts I’ve stumbled across recently is the idea of abstract syntax trees, or ASTs. If you’ve ever studied alchemy, you may recall that the whole motivation for alchemists was to discover some way to transform not-gold into gold through scientific or arcane methods. ASTs are kind of like that. Using…
Moving Rainbow Underlines
December 23rd, 2019
I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It’s not scroll-jacking — it’s just a minor design feature that uses scroll position to enact a little movement. To draw the rainbows themselves, we could use a linear gradient with…
Is Web Design Easier or Harder Than it was 10 Years Ago?
December 20th, 2019
Is it harder or easier to build a website now than 10 years ago? Has the bar gone up or down? I don’t have any data for you, but I can shell out some loosey-goosey opinions. HTML HTML5 was the only big HTML change in the last decade, and it wasn’t particularly dramatic. It’s cool…
Two Lessons I Learned From Making React Components
December 18th, 2019
Here’s a couple of lessons I’ve learned about how not to build React components. These are things I’ve come across over the past couple of months and thought they might be of interest to you if you’re working on a design system, especially one with a bunch of legacy technical decisions and a lot of…