The aptly named View Transition API is a powerful way to create animated transitions between two states. I use the word 'powerful', because the View Transition API is powerful — more powerful than anyone would expect. You can navigate between pages, or modify the DOM, or meddle with your webpage in a number of other ways, and have an animation between the two states.It is incredibly powerful, and one could write quite the book (or several) explaining all the features and intricacies. There is plenty of surface-level view transition content on the web, but today we'll be getting hands-on with some examples. Thus, for the sake of brevity and in the Piccalilli way, I won't be covering every nuance but instead covering some cases and applicable patterns that you can use to apply view transitions in the real world.FYIAt the time of writing, the View Transition API has only just reached availability in the latest releases of Firefox, Chrome, and Safari, and even then, not all implementations

The majority AI viewAnd for those who aren't insiders in the tech industry, it's vital that you understand that you've been presented with an extremely distorted view about what tech workers really think about AI.Tapping the sign.Instant snapportScroll padding is actually a lot more useful than you might think as the ultimate global style.How to optimize SVG files: A complete guide for beginnersExtremely handy article!Detect fallback positions with anchored container queriesCSS just keeps getting more and more useful.How to stand out when anyone can build anythingHere’s something most technical people miss: the biggest part of product work isn’t building—it’s communicating.Again, tapping the sign.P.S. this is a good demo.Sponsor messageDid you know, we've made the whole “Principles” module free to everyone?It's eight free lessons, introducing what we think are the most important parts of Complete CSS. If you get the core skills right, the resilient code that works with the browser will

CSS terrain generatorOne for the Sim City fans. This is so cool!Springs and bounces in native CSSGreat demos, a great build your own curve feature and of course, another great article by Josh.Learning curvesAn interesting look at the level of details that goes into creating a typeface.Josh Farrant's websiteLovely look and feel and a cool, musical theme switcher that has Zelda Ocarina of Time vibes.Start implementing view transitions on your websites todayI've wanted some good view transitions content on our blog for ages and Cyd is here with the first of some great pieces for us to enjoy.P.S. this is a good demo.Sponsor messageElevate your craft at beyond tellerrand Berlin 2025, November 6 and 7 — next week!.A welcoming, single-track conference where designers and developers share practical insights and fresh ideas. Connect with 500+ peers and return energised and inspired.Tickets are limited. Secure your place today.Reserve your seatThanks for reading this issue of The Index. We reall

The entire “Principles” module of Complete CSS is now freeI think this module is one of the most important in Complete CSS so I've made the content free to everyone! If you go through to checkout from the paywall at the end, you'll get a nice discount too 💛Receipts: a brief list of prominent articles proclaiming the death of the webDon’t believe the hype, in short.Solved by modern CSS: section layoutAhmad just doesn't miss. Another outstanding article.Importing vs fetching JSONIt's always appreciated when someone comes through and gives us the performance facts with new(er) JavaScript capabilities.Build your own databaseYou might think "boring" but seriously, this is a masterpiece.P.S. this is cool.Sponsor messageElevate your craft at beyond tellerrand Berlin 2025, November 6 and 7.A welcoming, single-track conference where designers and developers share practical insights and fresh ideas. Connect with 500+ peers and return energised and inspired.Tickets are limited. Secure your place...

It's been nearly a year since we released Complete CSS and in that time, I've been touring my talk Get the core right and the resilient code will follow.The (not so) secret behind that talk is it's actually based on lessons #3, #4 and #5 of Complete CSS. That module is the really important stuff as I see it so I thought, "why not make the whole thing free for people to learn from." That's 8 free lessons!You can learn about communication, feedback, pacing your work, letting the browser work hard for you, fluid typography and space, layout, organising CSS code and progressive enhancement. That's a heck of a lot of stuff for free.The rest of the course is paid, but I hope by reading this free module, you'll really see the benefit of taking Complete CSS. Like I keep saying: you won't be the same developer after taking the course.When you get to the end of the free lessons and hit the marketing page, via the paywall, you'll get a nice bit of discount to say thanks for trying the free conten