How Do You Handle Component Spacing in a Design System?
January 25th, 2022
Say you’ve got a <Card /> component. It’s highly likely it shouldn’t be butted right up against any other components with no spacing around it. That’s true for… pretty much every component. So, how do you handle component spacing in a design system? Do you apply spacing using margin directly on the <Card />? Perhaps…
8 Helpful Accessibility Links for January 2022
January 13th, 2022
Every now and then, I find that I’ve accumulated a bunch of links about various things I find interesting. Accessibility is one of those things! Here’s a list of related links to other articles that I’ve been saving up and think are worth sharing. Myths about Web Accessibility — Alvaro Montoro covers some classics. My…
Empathetic Animation
December 29th, 2021
Animation on the web is often a contentious topic. I think, in part, it’s because bad animation is blindingly obvious, whereas well-executed animation fades seamlessly into the background. When handled well, animation can really elevate a website, whether it’s just adding a bit of personality or providing visual hints and lessening cognitive load. Unfortunately, it…
Care for the Text
December 24th, 2021
How do you make a great website? Everyone has an answer at the ready: Flashy animations! Illustrations! Colors to pack a punch! Vite! And, sure, all these things might make a website better. But no matter how fancy the application is or how dazzling the technology will ever be under the hood, a great website…
Test Your Site With Real Users
December 2nd, 2021
A few years ago, there was this French book publisher. They specialize in technical books and published an author who wrote a book about CSS3, HTML5, and jQuery. The final version, however, had a glaring typo on the cover where “HTML5” was displayed as “HTLM5.” Read that twice. Yes. “HTLM5.” (Note that it was also…
Which SVG technique performs best for way too many icons?
November 23rd, 2021
Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge case, but hey, 250 rows of data with four icons in each gets you there. Tyler covers the nuances carefully in the post. The different techniques…
How to Make Sure Browsers Only Download the SVG Version
November 5th, 2021
Šime Vidas DM’d me the other day about this thread from subzey on Twitter. My HTML for favicons was like this: <!– Warning! Typo! –> <link rel=”icon” href=”/favicon.ico” size=”any”> <link rel=”icon” href=”/favicon.svg” type=”image/svg+xml”> The attribute size is a typo there, and should be sizes. Like this: <!– Correct –> <link rel=”icon” href=”/favicon.ico” sizes=”any”> <link rel=”icon”…
Scroll Shadows With JavaScript
October 5th, 2021
Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It’s just good UX. You can actually pull it off in CSS. Except… it just doesn’t work on iOS Safari. It used to work, and then it broke in iOS 13, along…
Links on React and JavaScript
October 1st, 2021
How To Use The Vite Build Tool with React — Vite is hot, in part, because it’s based on esbuild and wickedly fast. It’s from Evan You of Vue fame, but it’s not a Vue-specific tool. Here, NARUHODO covers how to configure it to work with React. React Architecture: How to Structure and Organize a…
How online tool helps to convert XML to JSON format.
September 12th, 2021
It has been a bone of contention for the programmers and developers to use a single most efficient data encoding and transporting format. They are always looking for a better option that can optimize their work. With that said, the journey for a standard all-to-use format was not less than a rollercoaster ride. However, with…