--- title: "Behind the curtain of Wikipedia's redesign" publication: "Frontend Focus" issue: 599 published_at: "2023-06-28" canonical_url: "https://frontendfoc.us/issues/599" --- Plus more tinkering with scroll-driven animations, and MDN gets its own code playground. | Together with [![Userfront\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_600,h_110/e_make_transparent/co_white,e_outline:7/lnopbsxefrqqsjq14fvr.png)](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication) #​599 — June 28, 2023 | [Read on the web](https://frontendfoc.us/issues/599) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1687945673/b84q0yuqzwchyy8bh08r.png)](https://ishadeed.com/article/css-state-queries/) [🔮 Future CSS: _State_ Container Queries?](https://ishadeed.com/article/css-state-queries/) — The Chromium team [is experimenting](https://bugs.chromium.org/p/chromium/issues/detail?id=1445189&q=state%20queries&can=2) with a new type of CSS container query: state queries. These let you define styles based upon the _state_ of another element (such as whether a `position: sticky`-ed element is actually 'stuck' and how). It’s early days and Chrome Canary only for now, but this is a good initial look at the concept. Ahmad Shadeed [Introducing the MDN Playground](https://developer.mozilla.org/en-US/blog/introducing-the-mdn-playground/) — The popular Web dev docs site has branched out a little into the world of code sandboxes. [The MDN Playground](https://developer.mozilla.org/en-US/play) provides a space to prototype frontend ideas and expand live samples in the MDN docs into more of an interactive experience. Mozilla [![\](https://copm.s3.amazonaws.com/1cb74ae1.png)](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication) [React Authentication — Without Complexity](https://userfront.com/tutorials/react-authentication?&utm_source=frontendfocus&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, reset passwords, generate magic links, add SSO with Google, and more. Read the docs now. Userfront sponsor [Behind the Curtains of Wikipedia's Redesign](https://www.smashingmagazine.com/2023/06/behind-curtains-wikipedia-redesign/) — Shipping a redesign of one of the most visited sites on the web is no mean feat. Here, Alex Hollender and Jon Robson (from the team behind the effort) share details on the design, development, and process that went into the project. Geoff Graham INTERVIEW [Going Beyond Constants with Custom Properties](https://techhub.iodigital.com/articles/going-beyond-constants-with-custom-properties) — Some insights as to how we can use custom properties to “_create some smart systems or even use them as booleans in CSS and create easy progressive enhancements_”. Brecht De Ruyte **⚡️ IN BRIEF** - Two version 4s this week, with [Svelte 4.0](https://svelte.dev/blog/svelte-4) (the frontend framework) and [Stencil 4.0](https://ionic.io/blog/announcing-stencil-v4-0-0) (the Web Components toolchain) both landing. - Support for the CSS @property at rule may be [enabled in Firefox Nightly soon](https://front-end.social/@bramus/110615407359216592). Firefox has long been a hold out in [browser support for this feature.](https://caniuse.com/mdn-css_at-rules_property) - Alvaro Montoro is [having fun creating single div CSS drawings](https://cssdrawings.com). We like the Spirited Away and Game Boy pieces. One to use _Inspect Element_on. 📙 **Tutorials, Articles & Opinion** ⭐️ [Position-Driven Styles](https://kizu.dev/position-driven-styles/) — Roman continues his spelunking into the power of [scroll-driven animations](https://www.w3.org/TR/scroll-animations-1/) — this time looking at styling both flex and grid rows and columns, staggering animations, wrap detection and more. All experimental stuff, but an excellent bit of testing with examples to play with too. Roman Komarov 🫰**Related:** [Bramus Van Damme shares how you can use scroll-driven animations to fake a `:snapped` selector](https://www.bram.us/2023/06/26/faking-a-snapped-selector-with-scroll-driven-animations/) – a fictitious selector that will match elements that are currently snapped within their scroll-snapping enabled ancestor scroller. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1687944901/xljliiuzw2j0qyso0g51.png)](https://developer.mozilla.org/en-US/blog/learn-css-hues-colors-hsl/) [Learn How to Use Hue in CSS Colors with HSL](https://developer.mozilla.org/en-US/blog/learn-css-hues-colors-hsl/) — Hues are a bright way to define colors in CSS. This post looks at hues, color wheels, how to use color functions, and how you can create vibrant color palettes for your site using hue. Brian Smith [An Instagram Clone for Puppies Using Courier Inbox, Next.js & Inngest](https://www.courier.com/blog/introducing-puppygram-powered-by-courier-inbox-next-js-and-inngest/?utm_campaign=q2-fy23-cooper-press&utm_source=email&utm_medium=frontend-focus-06-26&utm_content=puppy-gram) — We launched Courier Inbox, a set of APIs and UI components for building a modern application inbox. courier․com sponsor [Mixing Colors with CSS](https://ryantrimble.com/blog/mixing-colors-with-css/) — Ryan has been digging into how the `colour-mix()` function works and quickly shares how it’s “_surprisingly straightforward to use and can provide some great results_”. Ryan Trimble [Vivaldi on Why a Browser + Mail Combination is Great](https://vivaldi.com/blog/how-to/5-reasons-why-a-browser-and-mail-combination-is-worth-it/) — Browser maker Vivaldi makes the case for browser with a built-in email client. To be fair, a good chunk of us probably use Gmail on the web, so sure, why not. Daniel Aleksandersen [Form and Search Landmarks](https://www.matuzo.at/blog/2023/form-and-search-landmark/) — A look at how well browsers and screen readers support the `form` and `search` landmark ARIA roles. Manuel Matuzović [Synchronizing Videos to Scroll Driven Animations](https://www.bram.us/2023/06/21/synchronize-videos-3d-models-to-scroll-driven-animations/) — With a little bit of JavaScript, you can control 3D models and videos using scroll-driven animations. It’s a common effect seen on modern fashion sites, for one. Bramus van Damme [Working with the Super-App-Showcase Repository](https://www.callstack.com/blog/case-study-super-app-template?utm_campaign=super_apps&utm_source=email&utm_medium=super_app_showcase&utm_content=frontend_focus) — Dive into the case study of a repo demonstrating how to structure a super app when working with Re.Pack effectively. Callstack sponsor [Exploring Universal & Cognitive-Friendly UX Design Through Pivot Tables & Grids](https://www.smashingmagazine.com/2023/06/universal-cognitive-friendly-ux-design-tables-grids/) Yuliia Nikitina [Building Sliding Cards with `position: sticky`](https://sarajoy.dev/blog/scrolling-tabs/) Sara Joy 🧑‍💻 JOBS [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1687947222/ujuqwjvvoryt7sdtpcya.jpg)](https://panda-css.com/) [Panda CSS: Modern, Build-Time, Type-Safe CSS-in-JS](https://panda-css.com/) — From the mind behind the [Chakra UI](https://chakra-ui.com/) component library comes this new DX-focused CSS-in-JS framework. It boasts build-time generated styles and type safety out of the box. It works with Remix, Vite, Next.js, Astro, and even server components. Segun Adebayo [WebPerf Snippets: A Curated List of Snippets to Use in The Browser to Get Performance Metrics](https://github.com/nucliweb/webperf-snippets) — You can use these in the Chrome DevTools Sources tab or directly in your browser console. Joan León [ModHeader: A Browser Extension to Modify HTTP Request and Response Headers](https://modheader.com/) — The site includes related tools but the primary one allows you to modify HTTP headers for testing performance, mimicking requests from various locations/devices, debugging CORS issues, etc. Hao Nguyen [Shiki: A Syntax Highlighter Using VS Code Themes](https://github.com/shikijs/shiki) — Supports over 100 languages and you can specify a VS Code theme in the settings to get the look you want. Works in both Node.js and even on static sites (via a CDN build) and you can see [some examples here](https://shiki.matsu.io/). Shiki [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1687947126/wwdo2c0odobmqmf6v1nb.png)](https://flowbite.com/icons/) [Flowbite: Free and Open-Source SVG Icons](https://flowbite.com/icons/) — A collection of over 400 clean and clear icons that you can simply tap to copy the SVG code for. Krall, Tanislav, Szögyényi [Starlight: Build Beautiful, High-Performance Documentation Sites with Astro](https://starlight.astro.build/) — Includes a bunch of features out-of-the-box like site navigation, search, internationalization, code highlighting, dark mode, and it’s extendible using your favourite framework (React, Vue, Svelte, etc). Starlight **✉️ ICYMI** Missed [last week's issue](https://frontendfoc.us/issues/598)? These were the top three links shared in[issue 598](https://frontendfoc.us/issues/598): - Chris Coyier [shared five new CSS things](https://chriscoyier.net/2023/06/06/modern-css-in-real-life/) that "_really matter to real-world development_". - Matthias Ott on [the new powers found within CSS](https://matthiasott.com/notes/the-new-css) and how these changes make CSS "_the most powerful design tool_" for the web. - A [mind-bending article from Roman Komarov](https://kizu.dev/cyclic-toggles/) on a unique CSS 'cyclic' toggling technique we're still getting our heads around. 🙈 **Try again...** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1687948280/tmnnpmzims89kbd0gpdp.png)](https://neal.fun/password-game/) [The Password Game](https://neal.fun/password-game/) — I’m sure we’ve all been there: you enter what you think is a solid password, and _then_ the form decides to inform us of its arbitrary, mysterious rules… This is a tongue-in-cheek take on that, but turned up to 11. Good luck! _(You should be using a password manager.. – Ed)_ Neal Agarwal 📬 **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/599/*|UID|*?ipx=t)