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…
To $ or Not to $: Displaying Terminal Code Snippets
May 27th, 2021
It’s very popular to put a $ on lines that are intended to be a command in code documentation that involves the terminal (i.e. the command line). Like this: $ brew install somepackage The point of that is that it mimics the prompt that you (may) see on your command line. Here’s mine: So the…
svg-loader: A Different Way to Work With External SVG
May 19th, 2021
SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external file that also retains the format’s customization powers. For instance, let’s say you want to…