Together with  Imagekit
🚀 Frontend Focus

#​615 — October 25, 2023 | Read on the web

Introducing Horizontal Rules for <select> — As of Chrome 119 and Safari 17, you can add <hr> elements into a list of select options as a way to visually break them up that differs from the <optgroup> approach. A beautiful coming together of two of the oldest HTML elements to create something new.

Una Kravets (Chrome Developers)

🎨 Vectorpea: An Online Vector EditorPhotopea is a popular online image editor that just celebrated its tenth birthday – what better way to celebrate than releasing a vector version? It’s not Adobe Illustrator yet, but there’s plenty to enjoy and you can export your creations as SVGs for your projects.

Ivan Kuckir

Supercharge Video Streaming With ImageKit's Video CDN — Unleash the full potential of your videos with ImageKit's Video CDN. Supercharge your video streaming with Adaptive Bitrate Streaming and a global video CDN to deliver a buffer-free viewing experience on any device, anywhere.

ImageKit | Video CDN sponsor

▶  When 100 Developers Reproduce the Same Web Layout — A popular web design YouTuber asked folks on his Discord to reproduce a ‘card’ layout however they wished. In this video, he analyzes the approaches taken which mostly break down between using grids and flexbox – though one plucky individual went with tables! (16 minutes.)

Kevin Powell

An Introduction to Web Sustainability — What can designers and developers do to build a more sustainable web? Michelle explores the environmental impacts of web tech and looks at how to build greener sites.

Michelle Barker

⚡️ IN BRIEF

📙 Tutorials, Articles & Opinion

The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache — When serving and storing files on the web, Harry notes that there are a number of different things we need to take into consideration in order to balance ergonomics, performance, and effectiveness. This meaty post breaks these processes down into three: concatenating files on the server, compressing them over the network, and caching them at the other end.

Harry Roberts

Using ChatGPT for 'Smart Truncation' in Responsive Design? — We’re not saying this is a great approach, but the idea of ‘responsive content’ (where the length of written content is adjusted to fit the viewing environment) is certainly intriguing.

Mike Solomon

This Way of Learning to Code Will Blow Your Mind 🤯 — Get 30% off Scrimba Pro plans covering JS, React, CSS & AI, taught by experts Kevin Powell, Bob Ziroll, and more!

Scrimba sponsor

No More 404 — Remy shares a neat solution to dreaded link rot that leans on archive․org's Wayback Machine.

Remy Sharp

Changing Colors in an SVG Element with CSS and JavaScript — Almost everything inside an inline SVG image is up for modification using CSS and JavaScript.

Kirupa Chinnathambi

Generating Tailwind Width Configs with Generative AI — Tasking ChatGPT, Github Copilot, and Phind with generating width configs ended with mixed results, with just one taking the golden ratio into account.

Lucian Ghinda

▶  Using CSS Custom Properties Like This is a Waste — A little PSA from Kevin on how to simplify things when using CSS custom properties.

Kevin Powell

How TechCrunch Spent $1 Million Rebuilding Their Website
Jamie Marsland

▶  Web Accessibility Strategies for Non-Accessible Projects
Adrián Bolonio

🔧 Code, Tools & Resources

cccolor: A HEX, RGB and HSL Color Picker for HTML / CSS — There are a lot of color pickers for designers, but this new one is neat with color values available to quickly copy to the clipboard as RGB, HSL, hex, or oklch.

ffffffuel

Color Contrast Accessibility Tools with Examples — Sticking to the topic of color, here are a few ways to approach checking that the contrast between colors is good from an accessibility perspective.

Whitney Lewis

Accelerate Your Development with Catalyst—Get $250 in Credits + a Free Trial — Simplify your development workflow, harness the power of machine learning, effortlessly deploy apps, and automate like never before.

Catalyst by Zoho sponsor

Beer CSS: Build Material-Based Designs in Record Time — A CSS framework based on Material Design 3 whose name is inspired by a German ‘beer purity law’ where beer should have only the essential ingredients. Similarly, Beer CSS only has settings, elements, and helpers.

Beer CSS

Ruffle: A Flash Player Emulator — Built in Rust, Ruffle targets both desktop and the web using WebAssembly. Time for a Flash renaissance? 😆 Of course there are demos.

Ruffle

404 Illustrations: Trendy 404 Images — There’s a handful of fun images that may well work on your Page Not Found pages here.

Kapwing

imgly/background-removal: Remove Backgrounds From Images — A way to remove backgrounds from images directly in the browser (yes, there’s a live demo) without relying on a third party service. It relies on a large pre-trained model to do this, however, and is GPL licensed.

img․ly

🕰 ICYMI (Some older stuff that's still worth checking out)

Ipx.