--- title: "What the data tell us about the web in 2024" publication: "Frontend Focus" issue: 672 published_at: "2024-12-11" canonical_url: "https://frontendfoc.us/issues/672" --- Plus a suggestion to remove shorthand CSS. | Together with [![WorkOS\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_514,h_98/e_make_transparent/co_white,e_outline:9/tdfxwgk852ui9leli4wm.png)](https://workos.com/?utm_source=cpff&utm_medium=newsletter&utm_campaign=q42024) πŸš€ **Frontend** Focus #​672 β€” December 11, 2024 | [Read on the web](https://frontendfoc.us/issues/672) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1733917485/pblydvd59udbkosngpau.png)](https://almanac.httparchive.org/en/2024/) πŸ—“οΈ [The 2024 Web Almanac](https://almanac.httparchive.org/en/2024/) β€” This comprehensive report on the state of the web returns to wrap up 2024. This edition has 21 chapters (_most of which are available now_) covering UX, accessibility, publishing, content distribution, and more. All of the metrics shared are based on real world data from over 16 million websites. HTTP Archive [Creating a Pure CSS Halftone Effect in 3 Declarations](https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/) β€” Creating a halftone effect in pure CSS using just a single div, no pseudos and just three properties. Talk about efficient (and visually striking, too). Ana Tudor [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/573b2839.png)](https://workos.com/?utm_source=cpff&utm_medium=newsletter&utm_campaign=q42024) [WorkOS: Sell to Enterprises with a Few Lines of Code](https://workos.com/?utm_source=cpff&utm_medium=newsletter&utm_campaign=q42024) β€” The modern identity platform for B2B SaaS, offering flexible, easy-to-use APIs to integrate SSO, SCIM, and FGA in minutes instead of months. WorkOS sponsor [CSS Wrapped 2024](https://chrome.dev/css-wrapped-2024/) β€” A fun (pixel-art filled) exploration of the new additions to the web platform in 2024, including cross-document view-transitions, scroll-driven animations, anchor positioning, and more. Chrome DevRel Team [Solved By Modern CSS: Feature Image](https://ishadeed.com/article/modern-css-feature-image/) β€” Ahmad shares how container queries and CSS `:has()` can help build a neat featured image component that changes depending on viewport/container size. As ever, great illustrations and code examples to help our understanding. Ahmad Shadeed [Court Orders Automattic to Restore WP Engine's Access to WordPress.org](https://techcrunch.com/2024/12/10/court-orders-mullenweg-and-automattic-to-restore-wp-engines-access-to-wordpress-org/) Ivan Mehta ⚑️ Quick Links - 🀯 Tailwind CSS has just [surpassed 1 _billion_ downloads](https://bsky.app/profile/adamwathan.com/post/3lcxcb73yfk2i). - ✨ Here's an [update on the progress made in 2024 on the Baseline project](https://web.dev/blog/baseline-project-2024). - 🧭 [Here are the release notes](https://www.webkit.org/blog/16296/release-notes-for-safari-technology-preview-209/) for Safari Technology Preview 209. No new additions but plenty of outstanding issues resolved. - 🌐 Cloudflare's [end of year review](https://radar.cloudflare.com/year-in-review/2024) highlights plenty of interesting tidbits about internet traffic in 2024. - πŸ“„ [This site brings together the best examples of one page websites](https://onepagelove.com). There's over 8,500 here to go through. Good inspiration! - πŸ§“πŸ½ [Is Googling for 'old people'](https://webdesignerdepot.com/googling-is-for-old-people-what-this-means-for-web-designers/) and what might this mean for web design if so? πŸ“™ **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1733827755/ph4i3jdwupym0mbswdz0.png)](https://www.youtube.com/watch?v=MA9WAHEEfGM) β–Ά[Custom Dropdowns Just Got a Whole Lot Easier (Finally!)](https://www.youtube.com/watch?v=MA9WAHEEfGM) β€” A quick look at the upcoming [customizable select element](https://open-ui.org/components/customizableselect/) that makes it easy to create totally custom dropdown selects with just HTML and CSS, no JS needed. It’s currently available [behind an experimental flag in Chromium browsers](https://caniuse.com/selectlist), but wider support is expected in 2025. Wes Bos ['My Issues with Shorthand Properties'](https://www.havardbrynjulfsen.design/writing/thoughts/my-issues-with-shorthand-properties/) β€” A bold claim here, stating that the β€œ_removal of CSS shorthand properties would benefit us all_”. HΓ₯vard adds that writing explicit properties over shorthand is the way to go: β€œ_Clarity trumps cleverness_”. HΓ₯vard Brynjulfsen [Catch Flaky Tests Before They Break Your Build](https://about.codecov.io/blog/catching-flaky-tests-before-its-too-late/?utm_medium=paid-community&utm_source=frontendfocus&utm_campaign=fy25q4-blogtests&utm_content=newsletter-fy25q4-tests-read) β€” Flaky tests waste time and erode trust. Learn to flag unreliable tests early and keep your CI/CD smooth. Codecov by Sentry sponsor [What Do the State of CSS and HTML Surveys Tell Us?](https://web.dev/blog/state-of-css-html-2024?hl=en) β€” Rachel (of the Chrome Web Dev relations team) takes an initial look at some of the most interesting findings from these surveys, highlighting the top browser support issues, missing features, and more. Rachel Andrew [Using Transformers.js for AI in the Browser](https://www.raymondcamden.com/2024/12/03/using-transformersjs-for-ai-in-the-browser) β€” [Transformers.js](https://huggingface.co/docs/transformers.js/en/index) is a seriously impressive project we link from time to time that lets you run pretrained machine learning models in the browser. Here’s a practical look at actually playing with it yourself right now. Raymond Camden [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:120,q_auto/v1733826950/rr71typd85fcthl8rlgq.png)](https://www.smashingmagazine.com/2024/12/mastering-svg-arcs/) [Mastering SVG Arcs](https://www.smashingmagazine.com/2024/12/mastering-svg-arcs/) β€” Akshay shares his love of drawing in code, in turn demystifying how to use radii, rotation and arc direction to make intricate SVG designs. Akshay Gupta [Multi-State Buttons](https://frontendmasters.com/blog/multi-state-buttons/) β€” Typically, buttons are either pressed or they aren’t. But as long as you handle it in an accessible way, you can make a group of radio inputs look like a multi-state button with some neat CSS trickery. Preethi shows us how. Preethi Sam [How to Code a Shader Based Reveal Effect with React Three Fiber and GLSL](https://tympanus.net/codrops/2024/12/02/how-to-code-a-shader-based-reveal-effect-with-react-three-fiber-glsl/) Colin Demouge [Understanding the Main Thread in the Browser](https://calendar.perfplanet.com/2024/understanding-the-main-thread-in-the-browser/) Amrik Malhans πŸ”§ **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1733916633/y6vqfxg72ww83dk5kxhx.png)](https://gradienty.codes/) [Gradienty: A Suite of CSS Tools & Generators](https://gradienty.codes/) β€” Currently includes 11 different tools including generators for Tailwind gradients, CSS animations, mesh gradients, text gradients, box shadows, and more. Gradienty [Roquefort - WebGPU Fluid Simulator](https://github.com/Bercon/roquefort) β€” A browser-based 3D simulator that uses WebGPU compute shaders. You can edit the scene, speed, along with various effects. Jerry Ylilammi [InclusiveColors: A Color Palette Creator for WCAG-Compliant Colors](https://www.inclusivecolors.com/) β€” Offers features like precise control of every shade/tint that’s generated, live contrast checking as you edit, and ability to export to CSS, Tailwind, Adobe products, and more. Sean Wilson [Codate: Easily Create Custom Date Formats in Any Programming Language](https://codate.io/) β€” A neat little resource to get a code snippet for common date formats – hyphenated, slashed, dotted, standard with commas, etc. Supports 11 languages including JS, Go, Python, Java, PHP, and more. Badreddine Ibril [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1733918708/gzdzuo9u2vwogrk66ery.png)](https://www.piclooks.com/) [PicLooks: Authentic Looking AI-Generated Profile Photos](https://www.piclooks.com/) β€” An alternative to using stock photos, these do have a more realistic look than some other AI-generated photos, and they’re free to use commercially without attribution. PicLooks [VTracer: An Online Tool to Convert Raster Images Into Vector Graphics](https://www.visioncortex.org/vtracer/) Vision Cortex πŸ•°οΈ ICYMI (_Older links, still worth checking out_) - Alex Chan shows us [a neat way to create static sites for browsing local files](https://alexwlchan.net/2024/static-websites/) on your machine. - Mark Anthony Cianfrani poses a question on [the design considerations around letter-spacing](https://cianfrani.dev/posts/do-you-really-need-that-letterspacing/): "_Use it well. Or don’t._" - Terence Eden shared [a neat trick for showing an external site's favicon](https://shkspr.mobi/blog/2024/10/using-a-css-cursor-to-show-the-external-links-favicon/) when you hover over a link. πŸ“¬ **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/672/*|UID|*?ipx=t)