|
Decoding AVIF: A Deep Dive with Cats and Imgproxy — It’s been nearly a year since we shared Jake Arbibald’s piece on the ‘arrival of AVIF’. Now, browser support is not quite there just yet, so this article shows us how to actually implement this modern image format today using imgproxy. We also get an excellent explainer on AVIFs benefits — all told with cute cat example images. Polina Gurtovaya and Andy Barnov |
Why WebKit Supports AVIF But Safari Does Not
|
You Can Write Your Own Angular Data Grid, but Why? — Data grids are a daunting task. We work hard to make the task not only easy and enjoyable. Kendo UI for Angular's data grid is fast, full-featured, & customizable. And part of a 100+ component library. Learn more with component info, blogs, & demos. Progress Kendo UI for Angular sponsor |
canistilluse.com — When looking up a certain feature on caniuse.com Jim asserts that “there’s an incredible assumption many of us make when interpreting its UI” — that given enough time everything will go green and stay that way. What happens when Web functionality goes away? Jim Nielsen |
HTTP/3: Performance Improvements — This is part two of Robin’s deep-dive into QUIC and HTTP/3. This time it’s a close look at the performance improvements of HTTP/3, congestion control, head-of-line-blocking, and more. Part one looked at the broader concepts of the HTTP/3 protocol. Robin Marx |
|
|
📙 Tutorials, Articles & Opinion |
Key Data Structures and Their Roles in RenderingNG — Explains the components of the RenderingNG architecture (frame trees, display lists, etc), and how the rendering pipeline flows through them. Chrome Developers |
Native Search vs. Jetpack Instant Search in Headless WordPress with Gatsby — A look at how to implement search on a Gatsby site connected to headless Wordpress. The first option uses the built-in Wordpress search via the API. The second works to improve search using Jetpack Instant Search. Paulina Hetman |
Performance in Progress — Here’s an overview of the performance improvements the Firefox team have been implementing over the past six months, including changes to responsiveness, security, and web standards. Kim Moir |
Why Use a Time Series Platform for Application Performance Monitoring InfluxData sponsor |
Static vs. Dynamic vs. Jamstack: Where's the Line? — A useful attempt to define the distinction between what's just a static site, what's a Jamstack site, and what's dynamic. [→ Via our Jamstack newsletter.] Mike Neumegen |
Accessibility of the Scott O'Hara |
Creating an Interactive Gantt Chart Component with Vanilla JS — Coding a Gantt chart (commonly used as a way to visualize schedules) as a reusable Web component, covering the architecture of the component, rendering the calendar with CSS Grid, and managing the state of the draggable tasks with proxy objects. Anna Prenzel |
The Big Gotcha with CSS Custom Properties — Something to be aware of. Chris Coyier |
Does Shadow DOM Improve Style Performance?
|
How to Build a Portfolio Site with Next.js and Tailwind CSS
|
Six CSS Shorthand Properties to Improve Your Web Application
|
|
🔧 Code, Tools and Resources |
wavesurfer.js: Navigable Waveforms with Web Audio and Canvas — If you’re creating a podcast player, audio experience, or anything where seeing an interactive audio waveform could be useful, check this out. Peaks.js from the BBC is also worth exploring in this area. katspaugh and contributors |
Notistack: A Library for Easy Snackbar/Toast Notifications — You can try out a whole slew of demos and an API reference on the docs site. Hossein Dehnokhalaji |
Exclusive: Get Retool Free for Up to a Year and $160,000 in Startup Discounts — Retool for Startups bundles access to tools such as Retool, AWS, MongoDB, Brex, and more—so startups can build great internal tools, for free. Retool For Startups sponsor |
TailwindCSS Buttons: A Unique Collection of Copy & Paste Tailwind Buttons — Lots of attractive and different options for buttons here and if that’s not enough, here’s another set of CSS-only buttons gleaned from various open source projects. Tony Lea |
v-lazy-image: A Vue.js Component to Lazy Load Images — Uses Intersection Observer and then progressive rendering with CSS animations to keep things smooth. CodeSandbox demo. Alex Jover |
'how i experience web today' — A frustrating and wholly accurate recreation of just trying to read an article on the modern web. We can do better. liguangyi |
|