Menu

Dev

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…