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…
The State Of Web Workers In 2021
August 4th, 2021
You gotta appreciate the tenacity of Surma. He’s been advocating for Web Workers as a path forward to better-feeling websites for a lot of years now. He’s at it again making sure we all understand the landscape: […] regardless of where you look, multithreading is used everywhere. iOS empowers developers to easily parallelize code using Grand Central…
Web Features That May Not Work As You’d Expect
July 23rd, 2021
As the web gets more and more capable, developers are able to make richer online experiences. There are times, however, where some new web capabilities may not work as you would expect in the interest of usability, security, and privacy. I have run into situations like this. Like lazy loading in HTML. It’s easy to…
Adding Shadows to SVG Icons With CSS and SVG Filters
June 11th, 2021
Why would we need to apply shadows to SVG? Shadows are a common design feature that can help elements, like icons, stand out. They could be persistent, or applied in different states (e.g. :hover, :focus, or :active) to indicate interaction to users. Shadows happen in real life, so they can be used on screens to…
Links on Accessibility
June 7th, 2021
Show/Hide password accessibility and password hints tutorial — Nicolas Steenhout goes deep on <input type=”password”> accessibility. For one thing, being able to toggle it to type=”text” should be possible, while announcing, politely, the change. But also, put the password hints (for choosing a password) before the input and programmatically connect them. And a bunch of…
Serverless Functions: The Secret to Ultra-Productive Front-End Teams
May 31st, 2021
Modern apps place high demands on front-end developers. Web apps require complex functionality, and the lion’s share of that work is falling to front-end devs: building modern, accessible user interfaces creating interactive elements and complex animations managing complex application state meta-programming: build scripts, transpilers, bundlers, linters, etc. reading from REST, GraphQL, and other APIs middle-tier…