Animorphs and View Transitions
A new CSS methodology for the 21st century, more npm security panic, and the long lost truth about Nuxt Server Components.
Welcome to #208.
The Main Thing
Live demo of the view transitions API.
Can view transitions trick you into using less JavaScript?
Astro is betting yes, which is why they just introduced experimental support for the View Transitions browser API. And they’re not alone. Nuxt shipped experimental support earlier this year, and SvelteKit is working on it too.
So what does this API actually do, and how could it change the way we build for the web? Let’s dive in.
What it does: View transitions let you update the DOM in a single step, while generating a CSS-controlled animated transition between the two states.
That means you can create silky smooth animations between HTML pages without needing to use client-side routing (see demo). And you can do element transitions to reorder multiple elements on the page without needing to use JavaScript (see demo).
How it works (Astro example):
-
For page transitions, you simply add the
<ViewTransitions />component to your common<head>or shared layout component, and Astro creates default animations between the old page and the new page (with fallback behavior for currently unsupported, non-Chromium browsers). -
You can create various element transitions using
transition:animatewith Astro’s built-in animations or with any CSS animation properties you want. -
Behind the scenes, the browser uses the View Transition API to take an image of the before and after states of the DOM elements that you’re transitioning. Then it goes full Animorphs, by hot swapping the old image with the new one and animating the changes with a crossfade. Check out MDN’s breakdown for all the dirty details.
What it means: MPAs just got a lot better. With view transitions, users won’t see a full-page refresh every time they navigate. Instead, they’ll get the same smooth transitions and animations you typically get with SPAs and mobile apps — without a ton of extra JavaScript.
And unlike some browser APIs, view transitions seem super simple and intuitive to work with. So we should start seeing them all over, once the API is supported by all vendors.
Bottom Line: As the web platform continues to get more powerful, we might not need as much JavaScript as we used to for building sophisticated web apps.
    |
Our Friends
(With Benefits)
Your best candidate getting taken out by an irrelevant algorithm interview.
Interview developers in a realistic IDE with CoderPad
Have you ever had to reverse-sort a binary tree at your job? Probably not.
That’s why 4,000 engineering teams (including Netflix, Lyft, and Spotify) have ditched the algorithm interview questions and are using CoderPad’s collaborative IDE to actually code with candidates (See the Sandbox.)
With a familiar, fully customizable IDE that supports 40+ languages and frameworks (React, Angular, Node, etc), you can:
- create interview questions unique to your business
- add packages with npm install
- drag and drop a repo for quick & easy interview setup
- watch code playback after the interview
It’s a great way to pair program with candidates to see if their working and communication style would be a good fit for your team.
Try it for free – and code together before you work together.
Spot the Bug
Sponsored by Secureframe
Get SOC 2 compliant in weeks instead of months, so you can start selling to big enterprises ASAP. Book a free, personalized demo to learn how.
function shouldAlert(durationInWarehouse, temperature) {
const CRITICAL_TEMPERATURE = 30; // °C
const SECONDARY_TEMPERATURE = 25; // °C
const CRITICAL_DURATION = 7; // Days
return temperature > CRITICAL_TEMPERATURE
&& durationInWarehouse > CRITICAL_DURATION
|| temperature > SECONDARY_TEMPERATURE;
}
Cool Bits
-
Daniel Roe wrote A guide to Nuxt Server Components, which TIL have apparently been around for longer than React Server Components. Unless Daniel is lying to me, which he explicitly promised he would never do again.
-
Valibot is a new schema library for validating structural data. It’s comparable to libraries like Zod and Yup, but its big innovation is “the modular design of its API and an optimization of the source code for compression.”
-
Snyk is hosting a Capture the Flag 101 Workshop on August 3 at 11am EDT. Solve your first CTF challenge and level up your security skills with live support in this hands-on workshop. (I pray this turns out better than the last time I played CTF at Boy Scout Camp 🤞) [sponsored]
-
Jordan Brennan wrote about A new CSS methodology for the Web Components era. It’s called TAC, which stands for “Tag, Attributes, Classes” — and not “Troglodytes Against Capitalism,” which was the name of my first black metal band.
-
Another day, another terrifying story about npm security. This one’s about how a social engineering campaign targeting tech employees is spreading through npm malware. Stay safe out there.
-
Kuma is a headless, zero-runtime UI component library with a cute polar bear logo.
-
Remix is now the recommended way to build Shopify Admin apps. Sometimes it’s funny to think about how indie hackers building Shopify and WordPress apps make more money than 90% of VC-backed devtool startups.
-
Dopt makes it easy to build seamless product onboarding and education in minutes. Their visual builder lets you map out flows, and their SDKs & APIs make it easy to develop them using your own components or Dopt’s React components (like checklists & tours). [sponsored]
-
Chidori is a new, reactive runtime for building durable AI agents. Travis Fischer tweeted that LangChain is like jQuery and Chidori is like React, but that somehow feels disrespectful to both jQuery and React.
-
In Putting the “You” in CPU, Lexi Mattick blurs the line between “article series” and “full-on ebook” to dive super deep into what exactly happens when you run a program on your computer. Get ready to clear the rest of your afternoon.
console.log(shouldAlert(5, 26)); // true (should be false)
console.log(shouldAlert(8, 26)); // true
console.log(shouldAlert(8, 32)); // true
In JavaScript, the && operator has higher precedence than the || operator. This means that in a statement with both these operators, the parts with &&`` will be evaluated first. To fix the issue, we need to add parentheses around the ||` part of the statement.
function shouldAlert(durationInWarehouse, temperature) {
const CRITICAL_TEMPERATURE = 30; // °C
const SECONDARY_TEMPERATURE = 25; // °C
const CRITICAL_DURATION = 7; // Days
return temperature > CRITICAL_TEMPERATURE
|| (
durationInWarehouse > CRITICAL_DURATION
&& temperature > SECONDARY_TEMPERATURE
);
}
Or you can just avoid ternaries all together and spare your teammates and your future self pain by using a proper if/else statement 🙃.