--- title: "The 100 top CodePens of 2023" publication: "Frontend Focus" issue: 625 published_at: "2024-01-10" canonical_url: "https://frontendfoc.us/issues/625" --- Plus the EU begins to rethink its cookie consent banner approach. | 👋 As our last issue was something of a round-up, looking back over some of the highlights from 2023 ([here if you missed it](https://frontendfoc.us/issues/624)), we've now got plenty of links to get through today from over the past few weeks. Let's get to it! __ _Your editor, [Chris Brandrick](https://mastodon.social/@brandrick)_ Together with [![Userfront\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_471,h_107/e_make_transparent/co_white,e_outline:12/pckilgymweyjt5zipj6x.png)](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfoc.us&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication) 🚀 Frontend **Focus** #​625 — January 10, 2024 | [Read on the web](https://frontendfoc.us/issues/625) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1704887175/bgampn5q5higdvbvnnzr.png)](https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization) [How Google 'Perfected' the Web](https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization) — An extensive look at how Google’s dominance has ultimately shaped the web, resulting in a web that's filled with content designed for Google, not necessarily humans. _(Not only is it an interesting article, but also a striking piece of modern editorial Web design.)_ Mia Sato (The Verge) [The Top _Pens_ of 2023 on CodePen](https://codepen.io/2023/popular) — An always enjoyable round-up of the year in CodePen demos. There’s bound to be something here you find interesting or novel — and there’s always takeaways to be had in terms of how things have been approached too. 100 demos in total, including [lovely WebGL flowers](https://codepen.io/ksenia-k/pen/RwqrxBG), a [CSS 3D maze](https://codepen.io/ivorjetski/pen/poQpveN), and a [glowing shadow effect](https://codepen.io/LukyVj/pen/YzOXepM). CodePen [![\](https://copm.s3.amazonaws.com/5b21d2d5.png)](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfoc.us&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication) [Auth Without Complexity — Auth in a Straightforward Platform](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfoc.us&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication) — Userfront streamlines authentication & access control so engineers can focus on their core business. Create signup and login forms, generate magic links, add SSO with Google, and more — all from a streamlined dashboard. [Read the docs now](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfoc.us&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication). Userfront sponsor [🔮 Frontend Predictions for 2024](https://buttondown.email/whatever_jamie/archive/frontend-predictions-for-2024/) — Because who doesn’t like some soothsaying on where things are heading? Some nuanced thoughts on ‘owning’ the frontend stack, the rise of AI, UI frameworks and more. Jamie Birch [The Popular Vote of Interop 2024](https://frontendmasters.com/blog/the-popular-vote-of-interop-2024/) — We will soon be learning what the focus for [Interop will be in 2024](https://github.com/web-platform-tests/interop/blob/main/2024/README.md), but ahead of that Chris attempts to tally up what proposals might be front and centre in terms of attention (_from a total of 103!_) — including scroll-driven animations, JPEG XL, and more. Chris Coyier ⚡️ Quick Links - 🧑‍⚖️ The EU has conceded that [cookie banners are _slightly_ annoying](https://www.techspot.com/news/101396-european-union-set-revise-cookie-law-admits-cookie.html), and is now looking to revise their approach. - 🍪 A new tool that [defaults to restricting third-party cookies](https://searchengineland.com/google-chrome-started-phasing-out-third-party-cookies-436244) is being rolled out to 1% of Chrome users globally. - 🔧 [The top 10 most common accessibility errors](https://www.tpgi.com/the-top-accessibility-errors-found-in-2023/) found across sites in 2023. - 🖼️ [A look behind the scenes](https://rauno.me/craft/vercel) at how Vercel's new homepage came together. - 👏 The New York Times now has [a web Flash player](https://eagereyes.org/blog/2024/nytimes-web-flash-player), bringing a number of old interactive experiences back to life. - 🎙️ The Syntax podcast [▶️ discussed potential trouble ahead](https://twitter.com/syntaxfm/status/1744444923884294369) for Gecko & Firefox. - ✨ [Version 4.1 of Astro](https://astro.build/blog/astro-410/) is out now. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1704889156/ipwoikgfjnb9sbbsr8qc.png)](https://jakelazaroff.com/words/the-website-vs-web-app-dichotomy-doesnt-exist/) [The Website vs. Web App Dichotomy Doesn't Exist](https://jakelazaroff.com/words/the-website-vs-web-app-dichotomy-doesnt-exist/) — “_the web is a flexible medium where any number of technologies can be combined in all sorts of interesting ways..._” Jake Lazaroff [New CSS Viewport Units Don't Solve the Classic Scrollbar Problem](https://www.smashingmagazine.com/2023/12/new-css-viewport-units-not-solve-classic-scrollbar-problem/) — On the problem with `100vw`, how browsers handle scrollbars, and what future solutions we may have to solve the issue. Šime Vidas [The World's Smallest PNG](https://evanhahn.com/worlds-smallest-png/) — It takes 67 bytes to make one pixel. Evan dives into how it works. Evan Hahn [Join Our Livestream to Hear Tips on How to Thrive in 2024 and Beyond](https://www.red-gate.com/hub/events/navigating-the-database-landscape-in-2024?utm_source=frontend-focus&utm_medium=email&utm_campaign=mc-202401-t1-sodl-navigating-the-db-landscape-gc-all) — We’ll introduce the key findings from our industry 'State Of' survey and the big changes coming in 2024. Redgate Software sponsor [My Web Development Wishlist 2024](https://meiert.com/en/blog/web-development-wishlist-2024/) — Some broad but well intentioned wishes. Jens Oliver Meiert [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1704886793/ti1iltfahowlquln1jde.png)](https://component-odyssey.com/articles/05-using-heaps-of-cutting-edge-css-to-build-a-progress-indicator) [Using Cutting Edge CSS Features to Build a Progress Indicator](https://component-odyssey.com/articles/05-using-heaps-of-cutting-edge-css-to-build-a-progress-indicator) — Brings together things like scroll linked animations, CSS trig functions, and `color-mix` properties to create a progress indicator linked to the current scroll position of the page, _without_ any JS. Andrico Karoulla [CSS Media Query for Scripting Support](https://blog.stephaniestimac.com/posts/2023/12/css-media-query-scripting/) — A new ‘scripting’ media query (e.g. `@media (scripting: none)`), recently added to Chrome, looks to be a powerful addition to the progressive enhancement toolbox — it allows you to test whether scripting languages are available and tailor page content and styles based upon this. Stephanie Stimac ['My CSS Resets'](https://keithjgrant.com/posts/2024/01/my-css-resets/) — How folks approach a CSS reset always seems to be of interest, so here’s Keith’s take on it. Keith J. Grant [How Using Server-Timing API Helped Bring >70% Perf Improvement](https://calendar.perfplanet.com/2023/server-timing-api-70-percent-perf-improvement/) Nishu Goel [Taking a Closer Look at `@property` in CSS](https://utilitybend.com/blog/taking-a-closer-look-at-property-in-css/) Brecht De Ruyte [Installing Google Fonts as npm Packages](https://www.amitmerchant.com/google-fonts-as-npm-packages/) Amit Merchant [How I'm Writing CSS in 2024](https://leerob.io/blog/css) Lee Robinson 🔧 **Code, Tools & Resources** [CSS Hooks: A Styling Solution That Brings Advanced CSS Capabilities to Native Inline Styles](https://css-hooks.com/) — This solution resembles inline styles and is designed for React, Preact, Solid, and Qwik. And one big plus is no need for a build step, reducing the overall footprint. CSS Hooks [remoteStorage: A Cross Browser/Device Persistence Approach](https://github.com/FrigadeHQ/remote-storage) — Combines the `localStorage` API with a remote server to persist data across browsers and devices – so basically, imagine `localStorage` but remote. Here’s how [the server part runs.](https://github.com/FrigadeHQ/remote-storage/blob/main/apps/remote-storage-server/README.md) Frigade [Try a Lightning-Fast Pairing Tool Built with You in Mind](https://tuple.app?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=Q1_2024&utm_content=FrontEnd+Focus_Sponsored+Link) — Tuple will change the way you think about pair programming. Try it with your team free for 14 days, no card required. Tuple sponsor [Makedraft: An AI That Generates Frontend Code Based on Instructions](https://makedraft.com/) — Will generate HTML with Tailwind, JavaScript, or Alpine.js. Also includes the option to highlight code you want changed before adding your text in the prompt. makedraft [subiRegex: Generate Regular Expressions with English](https://www.subiregex.com/) — Type something like “Canadian Postal Code” or “5 numbers followed by an optional letter”, etc. and this tool will generate the regex for you using AI. Jonathan Kong Boon Lieng [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1704888249/mhsaf9qfr5yqss8fjcpt.png)](https://codepen.io/jkantner/pen/zYbBebv) [Direction-Aware Mickey Mouse](https://codepen.io/jkantner/pen/zYbBebv) — Everyone’s been talking about the copyright status of Steamboat Willie lately, so here’s Mickey following your pointer and keeping an eye on things… Jon Kantner CodePen [Tailplates: A Set of 20+ Responsive Tailwind CSS Templates](https://tailplates.com/) — Includes four categories of templates: agency, blog, ecommerce, and SaaS, with eight different page variations. Not a free project, but the price seems reasonable at $10 for the set. Tailplates [SVGL: A Searchable, Categorized Library of Tech/Brand SVG Logos](https://svgl.app/) Pablo Hernández 📬 **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/625/*|UID|*?ipx=t)