---
title: "When a hundred developers code the same layout"
publication: "Frontend Focus"
issue: 615
published_at: "2023-10-25"
canonical_url: "https://frontendfoc.us/issues/615"
---

Plus emulating Flash, Web sustainability, and drawing the line in select dropdowns. |       

Together with [![Imagekit\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_290,h_100/e_make_transparent/co_white,e_outline:7/srf0buoihyfdsnjkebof.png)](https://imagekit.io/lp/video-cdn/?utm_source=Cooperpress_newsletter&utm_medium=email&utm_campaign=FrontendFocus_newsletter_Oct&utm_term=video-cdn)        

🚀 Frontend **Focus** 

#​615 — October 25, 2023 | [Read on the web](https://frontendfoc.us/issues/615)      

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1698184603/onylca6bhi14gznphzo4.png)](https://developer.chrome.com/en/blog/hr-in-select/)  

[Introducing Horizontal Rules for `<select>`](https://developer.chrome.com/en/blog/hr-in-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>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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 Editor](https://www.vectorpea.com/) — [Photopea](https://www.photopea.com/) 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   [![\](https://copm.s3.amazonaws.com/74bdde8c.jpg)](https://imagekit.io/lp/video-cdn/?utm_source=Cooperpress_newsletter&utm_medium=email&utm_campaign=FrontendFocus_newsletter_Oct&utm_term=video-cdn) 

[Supercharge Video Streaming With ImageKit's Video CDN](https://imagekit.io/lp/video-cdn/?utm_source=Cooperpress_newsletter&utm_medium=email&utm_campaign=FrontendFocus_newsletter_Oct&utm_term=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](https://www.youtube.com/watch?v=ztBgxsgEG9A) — 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](https://developer.mozilla.org/en-US/blog/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** 

- Chrome 117 has introduced [`text-wrap: pretty`](https://developer.chrome.com/blog/css-text-wrap-pretty/) – a new setting for the `text-wrap` property that handles typographic widows and orphans.
- 💞 [What Does Happily Ever After Look Like?](https://pudding.cool/2023/10/romance-covers/) is a beautiful piece of modern web design (and a cool data-led look at romance novel book covers too).
- Ricky Onsman has shared a thorough [list of newsletters and blogs focused on digital accessibility.](https://www.tpgi.com/digital-accessibility-blogs-and-newsletters/)
- We've mentioned the Web Content Accessibility Guidelines a lot, as [WCAG 2.2](https://www.w3.org/TR/WCAG22/) came out recently. If you want to get up to speed, Geoff Graham has [a roundup of WCAG 2.2 explainers.](https://www.smashingmagazine.com/2023/10/roundup-wcag-explainers/)
- [Safari Technology Preview 181](https://webkit.org/blog/14721/release-notes-for-safari-technology-preview-181/) landed just after we sent last week's issue. It adds support for `content-visibility`.    

📙 **Tutorials, Articles & Opinion** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1698183481/svorik9nw62uisfj9pez.png)](https://csswizardry.com/2023/10/the-three-c-concatenate-compress-cache)  

[The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache](https://csswizardry.com/2023/10/the-three-c-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?](https://thecleverest.com/using-chatgpt-for-smart-truncation-in-responsive-web-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 🤯](https://scrimba.com/allcourses?coupon=ProFF1025#hi-there-frontend-focus) — 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](https://remysharp.com/2023/09/26/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](https://kirupa.com/web/changing_colors_svg_css_javascript.htm) — Almost everything inside an inline SVG image is up for modification using CSS and JavaScript. 

Kirupa Chinnathambi   

[Generating Tailwind Width Configs with Generative AI](https://allaboutcoding.ghinda.com/using-chatgpt-github-copilot-and-phind-to-generate-tailwind-config-for-width-classes) — 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](https://www.youtube.com/watch?v=_2LwjfYc1x8) — 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](https://www.pootlepress.com/2023/10/how-techcrunch-spent-1-million-rebuilding-their-website/) 
Jamie Marsland   

▶[Web Accessibility Strategies for Non-Accessible Projects](https://www.youtube.com/watch?v=7VKducQ_tHg) 
Adrián Bolonio  

🔧 **Code, Tools & Resources** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/lgvdeljlrjqytogzi889.jpg)](https://fffuel.co/cccolor/)  

[cccolor: A HEX, RGB and HSL Color Picker for HTML / CSS](https://fffuel.co/cccolor/) — 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](https://blog.pope.tech/2023/10/17/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](https://zoho.to/ffc) — 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](https://www.beercss.com/) — 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](https://ruffle.rs/) — Built in Rust, Ruffle targets both desktop and the web using WebAssembly. Time for a Flash renaissance? 😆 Of _course_ there [are demos.](https://ruffle.rs/demo/) 

Ruffle   

[404 Illustrations: Trendy 404 Images](https://www.kapwing.com/404-illustrations) — 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](https://github.com/imgly/background-removal-js) — A way to remove backgrounds from images directly in the browser (yes, there’s [a live demo](https://img.ly/showcases/cesdk/background-removal/web)) 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_)  

- In Miriam Suzanne's talk from CSS Day 2023 she shares a [▶️ deep-dive introduction to CSS Container Queries](https://www.youtube.com/watch?v=-Fw8GSksUIo).
- A comparison of the page performance gains and effects [▶️ between using preload, early hints, and fetch priority.](https://www.youtube.com/watch?v=sbjbS3P0P84)
- If you're not up to speed yet, Krasimir Tsonev gives [a short intro to the new and approved style of CSS nesting.](https://krasimirtsonev.com/blog/article/short-intro-to-css-nesting)      

📬 

**Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). 

--- 

**Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). 

--- 

**Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. 

--- 

Published by Cooper Press Ltd.
Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom 

[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)  

[Ipx.](https://frontendfoc.us/open/615/*|UID|*?ipx=t)