The New Defaults of the Modern Web

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

More than a decade ago, kicking off any web project required a huge investment to cover basic capabilities like multi-language support or creative details like animations. Your project will always result in unmaintainable stylesheets and complex JavaScript code just to get to the finish line. Today, the web has become a more mature canvas. With real projects as examples, let me show how the platform has moved the start line for us developers to build innovative and accessible websites.

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

FAQ

The speaker discusses improvements in CSS and web APIs, such as dynamic viewport height units, scroll behavior in CSS, scroll snap, intersection observer API, and the web animation API.

The speaker used GreenSock with custom promise wrappers for animations, but now uses the web animation API, which provides built-in promise-based animations.

The View Transition API allows for smooth page transitions without the need for additional frameworks, and is currently available on Chrome and Chromium.

The speaker's first major project was the Microsoft Windows 8 launch landing page.

The speaker faced challenges with mobile website design due to browser UI elements affecting viewport height, leading to issues with full height panels and content visibility.

The code for the speaker's project is available on GitHub, accessible through the QR code provided.

The speaker's retrospective focuses on their career transition from working on marketing agency websites to documentation and development for Storyblok.

Initially, scroll snapping was achieved through a hack involving scroll event detection and animation. Now, it can be done using the scroll snap CSS API, which simplifies the process with just two lines of code.

The Intersection Observer API is used to detect when a panel is in view, triggering animations and improving performance by unobserving targets not in view.

Jeremias Menichelli
Jeremias Menichelli
10 min
12 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The speaker reflects on past experiences developing various websites, highlighting challenges faced in achieving visually unique sites with similar functionalities. They discuss hacks used in web development, the evolution of CSS and web APIs, and express a desire for modern web defaults. Challenges with mobile viewport height on touch devices are described, along with the evolution of hacks into simpler CSS solutions. The evolution of scroll behavior, scroll snapping challenges, and scrolling interception techniques are also discussed. The text covers animation challenges, transitioning to promise-based animations, and the use of frameworks for animations and view transitions in web development.

1. Retrospective on Web Development Challenges

Short description:

The speaker reflects on past experiences developing various websites, including well-known projects like the Microsoft Windows 8 launch landing page. They discuss the challenges of creating visually unique sites with similar functionalities and the use of hacks to achieve desired outcomes. The speaker highlights the evolution of CSS and web APIs over the years and expresses a desire for modern web defaults to improve site development.

I will start with a really short and fast retrospective on my career because right now I'm doing documentation and dev stuff for Storyblok. But more than a decade ago, I was working for marketing agencies on a lot of different types of websites. Some of them were landing pages. Actually my first project was the Microsoft Windows 8 launch landing page, and that's how you can tell that I'm really old.

Also brand guidelines, promotional and movie sites. Some of these movies were really well known, I can't mention right now, but after the talk you can come and ask me. And probably my favorite ones were social initiative programs. These sites were super different visually and on design, but on the variables they were actually quite similar. We were doing the same thing over and over again.

These experiences were really scrolling immersive sites. You would get full height panels. When you scroll, you would get these indicators because you could never see below the fold that there was more content to be explored. So we always had these kind of helping CTAs. We would have scroll snapping, so you would never see this every time you tried to scroll. We would stop that, hijack, and show you the next panel. And then when the panel became visible, we would run some animation, even some videos and WebGL scenes. This was not the only thing that these sites had in common.

And they were also full of hacks. We were actually like twisting the arm of all the browsers. We were trying to do stuff that wasn't actually possible with the native web. And the code was really hard to maintain because of these hacks were accumulating over and over again. We were adding a bunch of code. Remember these sites had like really heavy assets, images, videos. So on top of that, a lot of code. Super. And it took a lot on a mobile network to actually see the sites. And even after you loaded everything, the performance was actually quite bad because it was full of hacks. And I kept reflecting a lot how much CSS on the web APIs have improved on the past five years maybe. And how much I would have loved to have like the new CSS, but like 10 years ago. So this talk is about this feeling of the new defaults of the modern web that would allow me to build these sites in a better way.

2. Mobile Viewport Height Challenges

Short description:

The speaker discusses challenges faced in achieving full height panels on mobile devices due to browser UI elements impacting viewport height. A hack involving recalculating pane heights on touch start is described. A one-line CSS solution using dynamic viewport height is highlighted.

Super fast because this is a lightning talk and I don't have a lot of time. That's my name. That's what I do. That's where I live. That's my face. And that's me on BlueSky and that's my blog.

Let's cut to the chase. First problem. We wanted full height panels on each section. In desktop, of course, it's like super easy. But the problem were mobile, actually. Mobile, you have this kind of like browser UI elements that would get into the way that would modify the height of the viewport.

And sometimes these UI elements would cover important information. Some of them were like this CTAs to scroll. And so this was not a detail that we could overlook. So we found out that our users on mobile will like rest their thumb on the screen while waiting. I think that everybody does that.

3. Viewport Height Hack Evolution

Short description:

The speaker describes creating a hack to recalculate pane heights on touch start but expresses dissatisfaction with the process. The solution evolves into a one-line CSS code using dynamic viewport height units. The text also touches on scroll animation challenges faced in the past and the simplicity of the current solution using an old API.

So we created this hack where on touch start we would recalculate the height of all the panes and then we would actually remove the event listener. The problem is that the user might not do that. We think that they might do that. But they might actually rotate, scroll. So we had to do that for all the events, which was not cool. And I didn't like it. I need to be honest.

It worked. But it didn't feel right. So yeah, that is now one line of CSS. It's just that. If you don't know that unit, that's like dvh. That's dynamic viewport height. And that unit adapts when somebody with something actually this kind of UI elements from the browsers actually cover part of the viewport. And that’s cool. That's not hacking. That's dynamic viewport units. That's the name of the API.

Scroll animation. We have this kind of CTAs that you would click or tap and the next panel would scroll. Of course, there's no native option for that 10 years ago. So what we would do is that we would access to the offset top of the next pane that we wanted to show. We would get a scroll container and we would, with a library, animate the scroll top property of this container. Issues. So every time you access this kind of properties like offset top, you would trigger a layout recalculation on the browser. Not cool. And also, animating scroll top is not GPU accelerated, so the performance was actually quite bad. Right now, super simple. You can just use a scroll interview to the balance. Actually super old API.

4. Scroll Behavior Evolution

Short description:

The speaker discusses the evolution of scroll behavior using CSS, highlighting scroll snapping challenges faced in projects and the transition to a two-line solution with the CSS API Scroll Snap. The text also covers scrolling interception techniques employed in the absence of native options a decade ago, emphasizing the performance issues and cleanup processes involved.

It's present in Internet Explorer. But the main difference is that now we have scroll behavior on CSS, which is with one line on the scroll container, you get this done. And that is a scroll behavior. Next thing. Scroll snapping. The thing that I mentioned that would never happen in these projects is this kind of like half of one panel and the other half in one panel, we would block you every time that you wanted to scroll. And the way that we did that was, guess, a hack. We would detect when you were trying to scroll. We would prevent default, so actually not scroll what happened, but we will still get the coordinates of that event. And we would calculate the direction of that. Which is a current pane, call a function, and we would animate that pane out, and the next one in. Yeah. Again, not cool, because I can tell you that the main thing was not performance here, maybe, but breaking the browser native scrolling inertia didn't feel right in UX. Some sites even do that today. I don't know. So, not cool. The solution? Scroll snap as a CSS API. Two lines. Basically, you set the type on the container, and then the align one on the pane. And you got it done. That's just no JavaScript. This is probably my favorite CSS API. So, so powerful in just two lines. It's amazing. Scrolling interception. I told you that we wanted to animate some stuff every time that a new panel comes in. So, yeah, no native option ten years ago. So, when we wanted to intercept that panel, we needed to listen to scroll, and every time that you scroll, we would get the offset top again, and we would get the current pane given that position. And after that position, we run some animations, and after that animations, we need to clean stuff up. This is because performance was such a problem that we would remove some assets, stop some animations on other panes that were not active, and yeah.

5. Animation Challenges and Framework Usage

Short description:

The text discusses challenges with off-screen panels running WebGL or videos, the simplicity of the intersection of server API for running animations efficiently, and the transition to promise-based animations using the Web animation API. It also covers the development of an animate function for HTML elements, providing a one-line solution for concurrent animations and the use of frameworks for view transitions.

It still didn't work, honestly. And you had some panels off screen, like, I don't know, running some WebGL or some videos. It was actually quite tricky. And right now you have the intersection of server API, and that's super simple, because you just check if the panel is intersecting, you run the animations, and for a super easy performance gain, you can just unobserve the target. Cool.

Intersection of server. This is actually quite old. So, person in old browsers. We have animations. As I told you, every time that we intercepted one of these panels, we wanted to animate pretty much everything that was inside it, because we were really into motion design. And specifically, we were doing complex animation flows. So we wanted promise-based animations. We didn't have that. There were actually great animation libraries. There was GreenSock, which was one of my favorites at the time. But it had no promises. It was all callbacks, and it was actually quite hard when you needed to animate, I don't know, more than seven elements, and these animations were actually quite convoluted.

For animations, yeah, we created our own promise wrapper for GreenSock, which added a lot of code on top of the other code that we had. So we didn't like it, and right now you have an animate function for each HTML element. You just grab the HTML element, call .animate, pass an array of transforms that you want to do, and the most interesting thing is that this returns an animation object, and that animation object has a finished promise. You can await and await and await and await, and that's actually a promise all for if you want concurrent animations. It's super cool. It's just one line. Amazing. Web animation API. And the last thing that I'm going to talk about today is view transitions. You might have heard of it, because it's actually quite new. It's only on Chrome and Chromium. But the main thing is that just for this thing, we had to use a framework. I'm not against frameworks, but these projects were not hard to build because of the web application feature, but because of these hacks.

6. Web Page Animation Framework Integration

Short description:

The text discusses the use of a framework for transitions and animations, the availability of a view transition API, fully animated web pages with controlled scrolling, and the simplicity of implementing the code for this functionality.

But then on top of that, we had to actually use a framework just to use this transition and animate the page when they were swapping and revealing, and right now you have a view transition API available for you. So that's quite cool, and the result is actually a web like this, just fully animated, super controlled scrolling. You can see how the elements flush in. Super nice. You can see it feels natural, because this is actually the browser scroll inertia. I'm not hijacking anything here. This is not a video or nothing. This is actually an application. It exists. You can scan that QR code and just write that web URL, and also the code is available on GitHub.

You can also scan that QR code and get the code. Actually super simple, literally like 20, I don't know, 30 lines of code for both CSS and JavaScript. And that's it.

Thank you so much. Thank you.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Build a Design System with React and Tailwind CSS
React Summit 2022React Summit 2022
27 min
Build a Design System with React and Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Rethinking CSS - Introducing Stylex
React Finland 2021React Finland 2021
25 min
Rethinking CSS - Introducing Stylex
Top Content
CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.
How to achieve layout composition in React
React Summit 2022React Summit 2022
8 min
How to achieve layout composition in React
This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.
Type-safe Styling for React Component Packages: Vanilla Extract CSS
React Advanced 2023React Advanced 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Watch video: Type-safe Styling for React Component Packages: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
Watch video: Moving on From Runtime Css-In-Js at Scale
This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.
Building Pixel-Perfect UI Components Using CSS Variables
React Summit 2023React Summit 2023
9 min
Building Pixel-Perfect UI Components Using CSS Variables
Watch video: Building Pixel-Perfect UI Components Using CSS Variables
CSS variables and their possibilities for UI developers, MUI's history and understanding of developer needs, Joy UI's focus on developer experience and use of CSS variables for consistency and future-proofing, the elimination of manual calculations and JavaScript with CSS variables in JoyUI, and the availability of playgrounds and a stable release for exploration.