~frontendfocus | Bookmarks (249)

Theme Toggles: A Small Set of Unique, Animated Dark Mode Toggles — They’re all built with SVG, accessible, and can be included as inline SVG or React, and of course you can try out each one directly on the page.

scrollend: A New JavaScript Event — Finally an event you won’t need a hotel booking for. scrollend provides a new way to detect that a scrolling operation is complete in the browser. Is it another Chrome-only nicety? Surprisingly not – Firefox 109+ supports it too.

Accessible Hamburger Buttons Without JavaScript — Sometimes you need to consider if modern techniques allow you to avoid JavaScript. Here’s a CodePen if you want to play.

Creating a High-Contrast Design System with CSS Custom Properties — Managing our colors can truly help people to access our content — as such, this article takes a deep dive into how we can create a high-contrast system while maintaining a balance between designing something accessible and respecting the look and feel of a brand.

Greater Styling Control Over Type with initial-letter — An overview of the new CSS property initial-letter for more styling control over the first letter.

Your Web Performance is Too Reactive; It’s Time to Do More Than Put Out Fires - Calibre — Notes that a ‘wait-and-see speed strategy’ isn’t the best for your site, before offering up some pointers on being proactive with web performance, how best to test, and how to get buy-in from your team.

Why We Switched CDNs: How Google's Core Web Vitals Led Us to Cloudflare Pages — In order to deal with issues with time to first byte (TTFB) in their Core Web Vitals assessment, this post compares TTFB results from Netlify, Vercel, Cloudflare Pages and Gatsby Cloud.

Sailboat UI: A Modern UI Component Library for Tailwind CSS — Includes a common set of 150+ ready-to-use components and is easy to theme to your liking based on configuration settings.

GradienMood: Generate a Gradient from a Mood — This is different! Type a word or prompt representing a “mood” and this AI-based tool will show you a copy/pasteable CSS gradient that matches what you typed (try 'calm looking gradient that is purplish color' for example). There’s also a gallery of “moods” to browse.

CSS color-mix() — Browser support is lacking right now, but the CSS color-mix() function is set to ship in Chrome 111. It can be used to take any colors, in any of the supported color spaces, and mix them directly from your stylesheet. This post explains how.

▶  React Isn’t Great at Anything Except Being Popular — You may have seen the controversial blog post by Josh Collinsworth about React not being the best choice anymore. In this episode, we dive into why React hasn’t aged well and what the best frameworks are today.

Easy SVG Customization and Animation: A Practical Guide — Adrian Bece notes that devs may often feel discouraged from editing SVG markup and experimenting with animations, thinking it’s a significant time investment or there is a need to use a complex animation libraries. Here, he showcases some of his favorite SVG tricks, making the process streamlined and fun. Plenty of neat examples here too to...

Building an Accessible Theme Picker — This is an attractively presented and easy to follow tutorial for a handy site feature, complete with keyboard navigation and screen reader support.

Creating an Interactive Whiteboard with Amazon IVS Chat — Live streaming is mostly known for entertainment related streams like gaming or sports, but it is a perfect tool for delivering educational content. Learn about an interesting use case for Amazon IVS chat rooms - live, interactive whiteboards.

Optimizing the Time to First Byte — A sound look at how to optimize for the 'Time to First Byte' metric — a foundational performance metric that precedes every other meaningful metric.

OK, OKLCH 👑 — Is OKLCH worthy of being crowned the winner of technological choices when it comes to CSS color options? Chris shares the rather rosy picture so far.

PSone.css — Look, I was on team N64 back in the 90s, but I can still appreciate this very cool PlayStation 1 style CSS framework — strong Final Fantasy VII vibes.

Shifty: A Small, Fast Tweening Engine — All it does is tweening. It’s a low level animation solution that you can integrate into any rendering mechanism of your choice. The examples here demonstrate it well as it can be used for ‘animating’ things in an unconventional sense. GitHub repo.

Barba.js: For Smooth Visual Transitions Between Pages — You certainly can’t say the project’s homepage doesn’t show off all of its features! For such a dramatic set of effects, things feel smooth and.. surprisingly tolerable 😁 GitHub repo.

Improved Web Component for Pixel-Accurate Atkinson Dithered Images — You may remember at the end of last year we shared a web component that displays images using the Atkinson dithering algorithm — well, Andrew is back with an improved version two. Repo here.

Astro 2.0 — Version 2.0 of this popular web framework is out now and includes hybrid rendering (allowing mixing of SSR and SSG outputs), type safety on Markdown, an upgrade to Vite 4.0 internally and more.