JS Nation

JSNation 2025

Sasha Grief discusses the state of the web through web development surveys, leading to an interactive quiz about the state of JS and usage of front end frameworks. Discussion on popular front-end libraries like React, Vue, Angular, and the rising popularity of TypeScript among developers in recent surveys. Discussion on TypeScript adoption, TC39 committee proposals, favorite CSS feature 'has,' and browser support for 'has' selector. Browser interoperability, browser vendors' initiatives, AI usage among web developers, and survey insights. Job titles linked to higher income, diversity of survey topics, top hobby among developers, and popular specific video games. Learnings on CSS features, TypeScript default, AI usage, survey benefits, challenges in reaching diverse survey participants. Surprising positivity in JavaScript usage, stable framework landscape, AI adoption challenges, mainstream AI tools, successful situp.js survey. Inconsistent respondent numbers, manual data normalization efforts, subjective question selection process, community input, mitigation of selection bias. Reason for starting surveys, transition from Meteor JS, exploration of JavaScript ecosystem.

A behind-the-scenes look at running the "State of" series of developer surveys (State of JS, CSS, etc.) as well as lessons learned and upcoming trends.

The State of the Web

Sacha Greif

JSNation US

JSNation US 2025

Online talk discussing web overlays, ads, models, and cookie banners. Focus on dialogues, popovers, and their history in web design. Emphasis on accessibility and successful UI strategies. Introduction of non-modal dialogues and popovers in web design. Insights on implementing model dialogues, popovers, and managing Z-index values. Exploration of Z-index challenges, top layer concepts, and dialogue accessibility. Analysis of dialogue opening, focus management, and urgent model dialogues. Implementation of advanced popover features, CSS anchor usage, and dialogue comparisons.

The web platform is evolving, introducing powerful new primitives that change how we build interfaces. Among these innovations is the toplayer – an important yet often misunderstood rendering concept. This talk explores the toplayer rendering mechanism, learning how it enables UI patterns and examining its role in accessibility, performance, and developer experience.The toplayer isn't just another technical specification—it represents a shift in how browsers handle elements that need to break out of the normal document flow. From dialog elements to the new popover API, custom tooltips to modal interfaces, the toplayer has quietly become essential for creating modern web experiences. By understanding how the toplayer works, developers can build more robust, accessible, and maintainable components while avoiding common pitfalls that lead to inconsistent user experiences.In this session, we'll dive into the toplayer to understand how browsers handle stacking contexts, painting order, and focus management within the toplayer. Through practical examples and live coding demonstrations, attendees will gain both theoretical understanding and practical skills they can apply to their own projects.

Diving Into the Toplayer: Where Dialogs, Popovers, and Modals Live

Tim Damen

Get ready for a fresh spin on frontend creativity! In this session, Elian will introduce some cutting-edge web APIs and showcase live demos that push the boundaries of what’s possible in the browser. From playful, interactive experiments to genuinely useful features you can use today, join us for a hands-on journey and get inspired to make the web a little weirder (and a lot more fun).

Beyond Boring: Unlocking the Web’s Wild Side

Elian Van Cutsem

Speaker shared a story of creating a Haskell-inspired language for Zebra labelers using a compiler. Discussed the evolution of JS frameworks into compilers, focusing on React compiler's advanced techniques. Highlighted the role of compilers in reactive programming and code optimization. Explored challenges in large-scale migration using tools like tsmorph and QuickType. Emphasized the significance of compilers in user interface development and software architecture decisions. Addressed the future of front-end tools, Web Assembly adoption, and the importance of experimentation with tools for project success.

Compilers have long been seen as one of the most complex topics in computer science. Nowadays, web frameworks are evolving from runtime libraries into optimizing compilers and reshaping how we build user interfaces. Different topics in front-end development—e.g., reactive programming—are now experiencing this era fueled by static-analysis-driven insights.This talk will explore how modern UI compilers are redefining performance and developer experience. We’ll discuss how some compilers are designed and different open-source solutions — including the React Compiler, Million.js, Svelte, and Marko, as well as enterprise apps, and the growing role of compilers in automating things.By the end of the session, you'll probably be optimistic about a future where compilers understand our entire code and offload a huge part of our mental burden related to manual tasks!

Compilers, User Interfaces & the Rest of Us

Matheus Albuquerque

Ivo Plaza introduces TypeGPU, a TypeScript toolkit for WebGPU, with a live Jelly Slider demo. The demo showcases interactive features and a customizable API for dynamic color changes. TypeGPU offers extensibility for library creators, allowing intricate customization and per-pixel operations. It demonstrates GPU material animation control, WebGPU support, efficient debugging with GPU console log, and memory allocation. WebGPU enables program execution, resembling REST API interactions between front-end and back-end. TypeGPU integrates JavaScript shaders with WebGPU shading language, utilizing TGPU Resolve API for shader conversion and shader code generation. It covers compile-time operations, function calls, runtime conditions in shaders, and code optimization. TypeGPU's TINYEST format, JS to AST conversion, WebGPU usage, and integration with 3JS and React 3 Fiber are discussed, highlighting the differences between WebGL and WebGPU. The Talk emphasizes the integration of TypeGPU with 3JS and React 3 Fiber, utilizing GPU directives, marketing effects, AI for shader conversion, and future possibilities.

Join me for a technical deep-dive on TypeGPU which, among other things, allows your WebGPU shader to be made up of JavaScript either partially or entirely. This means a library can be written fully in WebGPU Shading Language, yet accept a JS callback that gets compiled and injected into the shader code. Improving APIs by going past just tweaking knobs and parameters.In my talk, I’ll be touching upon how we offload most of this work to a build-step while still supporting dynamic scenarios, how we mitigate the differences between JavaScript and WebGPU Shading Language, and how we leverage existing tooling like the TypeScript language server to make CPU and GPU code connect seamlessly through types.

TypeScript on the GPU – Bridging the Gap Between Realms

Iwo Plaza

Alba Silvente, Fullstack Engineer at Servlug, discusses unlocking web extension power with Vue. Shows demo features and AI API usage. Talks about building extensions, standards, structures, open-source tools, and practical use cases. Explores the simplicity and benefits of web extensions for customization, automation, and time-saving. Mentions varied functionalities like translation, JSON formatting, and form filling using extensions. Exploring form-filling extensions and building web extensions with Manifest V3 and Vue. Understanding the structure and components like pop-up and sidebar pages. Discussing manifest.json for defining extension details, background JavaScript in service worker context, and creating popup and sidebar pages. Discussing the importance of different contexts for popup and sidebar pages, customization with various JavaScript frameworks, and utilizing content scripts to interact with web pages. Communicating with content scripts, configuring settings via the options page, and extending web extensions with various functionalities like overriding home pages, bookmarks, history, and adding options to the context menu. Communicating with browser APIs for web extensions using packages like WebExtension Polyfy and webext. Storing data in web extensions efficiently with specialized storage areas. Simplifying communication between components using the WebX Bridge package for seamless browser API interactions. Using Vite and WXT frameworks for web extension development. Implementing preference configuration and communication flow between components for efficient web extension creation with WXD. Defining items in local storage for preferences and using composable for shared components in web extensions development. Using extension storage for web extension synchronization and integrating AI APIs for text analysis. Exploring Content Script Actions, Background API Communication, and Extension Deployment.

Do you want to automate daily manual tasks or explore extending browser functionality? This talk has you covered; we’ll break down how to build Web Extensions from scratch – covering architecture, state management, Manifest V3, best practices and tools to bring your ideas to life! 🚀

Building Web Extensions With Your Favourite Framework

Alba Silvente Fuentes

JS 0 and JS Sugar proposal for JavaScript evolution. Complexity abstraction to engines. Splitting language into JS0 and JSugar. Lessons learned from developers' concerns and users' preferences. Involvement in shaping JavaScript ecosystem.

In October 2024, a language evolution proposal was submitted to the TC39 Javascript Committee meeting. In it, a new vision for JS as a whole is shown, one in which the language is seemingly split in two - a core ""JS0"" and an extended ""JSSugar"". What is this about, why did it come up at this point and what does it mean for us as JavaScript developers?In this short talk, we'll go over the proposal, exploring what it tries to accomplish, how and its potential pros and cons from a neutral, community-first perspective.

Divide and Conquer? - Exploring the 'JS0' and 'JSSugar' Proposal for JavaScript Evolution

Daniel Hervás

Hemant emphasizes mastering web standards and the collaboration among various organizations. Different groups like WhatWG, ECMA, IETF, Unicode, and IANA manage specific IT standards. Participation in standards organizations varies in cost. Joining W3C, Ecma, or IETF can aid in web standards development. Engaging in global discussions and contributing test cases are crucial. Community involvement drives web standards evolution towards innovation and inclusivity. Understanding the proposal stages and future trends in web standards is essential for developers.

Discover how you can shape the future of the web by contributing to web standards! In this talk, we’ll explore the process of creating and evolving web technologies, the role of standards organizations, and how developers of all levels can get involved. Learn practical steps to contribute your ideas, collaborate with global communities, and ensure the web remains open, accessible, and innovative for everyone.

Contributing to Web Standards

Hemanth HM

The Talk delves into TypeScript, highlighting its introduction, differences from JavaScript, and providing code examples. It emphasizes the significance of strict typing in TypeScript, showcasing the use of literal types and union types for precise type modeling. The discussion also covers template literal types for creating combined types and precise type matching, as well as conditional handling without if statements and function type inference. Furthermore, it explores looping, recursion, object type manipulation, key manipulation, mapper type, and TypeScript utility types for efficient property management and type manipulation.

In TypeScript’s type system is more than just a tool for catching errors—it’s a way to solve complex problems with clean and reliable code. In this talk, we’ll dive into advanced TypeScript techniques like mapped types, conditional types, and generics to handle even the trickiest type challenges.You’ll see how these techniques can help you extract, transform, and validate data types while keeping your code simple and maintainable. These "TypeScript gymnastics" aren’t just for show—they’re practical skills that make your systems stronger and easier to work with.Come learn how to take full advantage of TypeScript’s flexibility and power to build solutions that are as smart as they are safe.

TypeScript Gymnastics: Why Are They So Powerful for You?

Luca Del Puppo

Speaker introduces a side project involving JavaScript and iconic car recreation at JS Nation. Nico, a frontend developer, explains the concept of KIT from Knight Rider and its human-like features, emphasizing the use of machine learning in building it. Using Transformers.js involves defining tasks and models, with options like Whisper for transcribing speech to text and Kokoro.js for text to audio conversion. Adding intelligence through LLMs enhances the capabilities of the pipeline. Models small enough to run on device, allowing browser usage using LLM library. Creating engines and new conversations, streaming replies with added tokens for efficiency. Implementing Kit reasoning process for problem-solving and fun in learning and building using LLMs.

In the TV series Knight Rider, the concept of an intelligent car was pure sci-fi. Over 40 years later, we now have the tools to bring it to life - purely in the browser. This talk explores combining AI techniques like RAG and function calling with advanced browser APIs (e.g., WebBluetooth) to create a browser-based AI agent with personality, memory, and autonomy, powered by WebAssembly and WebGPU - fully offline and privacy-preserving!

Let’s Build K.I.T.T. With JavaScript

Nico Martin

Speaker's involvement in Temporal proposal and TC39 meetings for JavaScript standardization. Date conversion challenges faced in development. Addressing time zone discrepancies with Temporal to prevent bugs. Exploration of Temporal types and design philosophy. Usage of Java's time zone serialization in JavaScript Temporal. Challenges in implementing Temporal proposal and its transformative potential in ECMAScript.

This is the story of how I almost spent a night on the street — because of JavaScript's Date object! We'll dive in and try to understand why that happened, and how to prevent it. Luckily coming soon to a browser near you is Temporal, the JavaScript built-in API that makes this kind of mess-up a thing of the past.

Temporal: The Curious Incident of the Wrong Nighttime

 Philip Chimento

Karl Vorden introduces signals for reactivity in JavaScript, aiming to demystify its implementation for better understanding. Signals in JavaScript provide efficient reactivity by updating only the necessary code without extra work. Different frameworks offer signal implementations like createSignal in solid JS, resembling React's useEffect but functioning differently. Vue signals are called refs, created with the ref function, returning an object with a value property. Define effect functions for tracking changes and execution in reactive signals. Explore computed functions for complex operations within reactive signals. Beware of pitfalls with conditionals affecting signal execution.

Signals have been revolutionizing state management lately, offering a more intuitive and performant approach than traditional methods. But what kind of magic is there under the hood? You change a value, and all places that use that value update and recalculate themselves automagically… 🤔In this talk we will look behind the curtain and explore the inner workings of Signals, by building our own implementation from scratch (Disclaimer: use for learning purposes only 😉).Signals have become almost a de facto building block in JavaScript frameworks lately, with some notable exceptions (looking at you React 👀), so it really pays off to have a deeper understanding about how they operate, how to debug them effectively and how to avoid common pitfalls. Plus, who doesn't like a bit of live coding? ✨

Build Your Own Reactivity: A Deep Dive Into Signals

Carl Vuorinen

JSNation US 2024

I'll speak today about the Temporal proposal, which adds modern date and time handling to JavaScript. Temporal is an API that'll be available in browsers soon and will add a built-in library for dates and times, avoiding the need for external libraries like Moment. It offers strong typing with different types for different data, such as calendar dates with or without time. Temporal objects are immutable and designed to work with JavaScript's internationalization facilities. It addresses deficiencies in the global Date object and introduces types like instant and plain types for accurate representation of time and dates across time zones. With the old Date, representing a date without a time can be problematic, especially in time zones where midnight is skipped due to daylight saving time. Temporal introduces types like PlainDate, PlainTime, PlainYearMonth, PlainMonthDay, and ZonedDateTime to accurately represent different scenarios. Additionally, there is a type called Duration for arithmetic operations and unit conversion. Now that I've introduced you to the cast of characters in Temporal, it's time to show how to accomplish a programming task. We'll start with an easy task: getting the current time as a timestamp in milliseconds using the instant type. To convert between Temporal types, you can either drop or add information. The toZonedDateTime method is used for conversion and requires adding a time zone and a time. Although Temporal objects are immutable, you can create new objects with replaced components using the with method. Migrating from the old Date object to Temporal offers a more reliable solution and avoids potential bugs. Check out the documentation for more details and enjoy using Temporal in your codebase!

Ever been fooled by one of the many pitfalls of the JS Date object? Do you bundle time zone data? Then check out Temporal! Temporal is a TC39 proposal currently being implemented in JS engines, that brings better date and time handling, and time zone awareness, to JS. This talk is a tour of what you need to know about Temporal, walking through one simple, one medium, and one complicated task each solved with Temporal.

Temporal: Modern Dates and Times in JavaScript

JSNation 2024

Today's Talk explores Web Monetization, a JavaScript API that simplifies payment for web content. The challenges of monetizing web content and possible solutions are discussed, along with the drawbacks of advertisements and subscriptions. Content creators face challenges with platform restrictions and delayed payments, but web monetization offers a solution. The advantages of web monetization include instant payments, privacy-conscious transactions, and lower entry barriers for creators. The Talk concludes by encouraging involvement in the web monetization community and the development of web monetization utilities and plugins.

Earning money for your content on the web has historically been a challenging endeavor, requiring a substantial user base and navigating complex payment processes. Ads, as a primary income source for content platforms, raise privacy concerns for creators and consumers alike. However, the new W3C Standard proposal, Web Monetization, leverages the Interledger Protocol to empower developers, especially JavaScript enthusiasts like you, to monetize your work seamlessly. In this talk, we delve into the world of Web Monetization, a friendly JavaScript API poised to revolutionize how the web can be monetized.  We explore open payments, microtransactions, and the Interledger protocol, unveiling a more efficient and inclusive path to monetize web content, ultimately paying the web forward. Learn how to create payment pointers and seamlessly receive payments in your preferred currency, breaking down barriers and connecting with a global audience. Join me on this journey as we navigate the landscape of Web Monetization, empowering developers to harness its capabilities and redefine the process of building applications that are inherently web monetized.

Web Monetization: Your New Friendly JavaScript API

Santosh Viswanatham

React Summit US

React Summit US 2023

The Talk discusses the web platform and the speaker's experience with Remix. It covers issues with mutations and form data submission, fixing bugs, and discovering missing features. The speaker also talks about working on JS DOM and web standards, opening a pull request and making progress, and working on Chromium, Gecko, and Firefox. The Talk concludes with discussions on time to GA and documentation, as well as the speaker's contributions and takeaways.

As web developers, it's sometimes easy to see "The Platform" as this thing we can't really change that does things for reasons we can't really understand. But that's not true! Browsers and specs are built by developers just like you and me, and the entire process is open source, which means we can do it too! Let's take a journey through a real web platform improvement from start to finish, learning how the WHATWG and browser vendors work. By the end you'll know how to update a spec, write web platform tests, land a change in major browsers, and document your shiny new feature on MDN!

You's the Platform!

Jon Jensen

React Advanced

React Advanced 2023

Remix is a web development framework that combines the scalability of server-rendered frameworks with the flexibility of React. It prioritizes web standards and best practices for security. Remix streamlines development with web standards like URLs, fetch API, HTML, and HTTP caching. It simplifies data handling through HTML forms and HTTP, improving user experience. Httpication in Remix reduces server load and speeds up response time, while global search and Storyblock make building complex websites easier.

Discover the power of Remix, a groundbreaking full-stack framework that embraces web standards to redefine modern web development.As developers grapple with complex tools and frameworks, creating performant and maintainable applications becomes increasingly challenging.What if there's a solution that leverages core web principles to streamline development? Enter RemixIn this talk, learn how Remix harnesses web standards, such as URLs, Fetch API, HTML, and HTTP caching, to elevate developer and user experiences, ultimately empowering you to become a better developer!

Remix: Embracing Web Standards to Redefine Modern Web Development

Alexandra Spalato

Today's Talk explores various Web APIs and their functionalities, including the Intersection Observer API for element visibility, the Network API for connection detection, and the Background Sync API for offline capabilities. The Broadcast Channel API enables communication between components and the Beacon, Web Speech, Web Share, Screen Awake Lock, Page Visibility, Background Fetch, and Web Authentication APIs offer additional functionalities. These standardized APIs work across browsers and can improve performance while reducing electricity consumption.

When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code. In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀 All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers. So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!

Superpowers of Browser’s Web API

Nikola Mitrovic

TS Congress

TypeScript Congress 2023

The TC59 Type Annotations proposal, also known as Types with Comments, introduces the ability to run typed code in JavaScript. It aims to bring TypeScript back into JavaScript and create a separation between type system and runtime. TypeScript's popularity is on par with JavaScript, raising concerns about the influence of Microsoft. The proposal progresses by addressing runtime interaction and token soup in type specifications. Research, community involvement, and quantifying the effects of supporting this comment style are important goals.

A deep dive into the proposal which could de-fork TypeScript and bring all us users back to being "JavaScripters, but with some TypeScript types." We'll cover the author's motives, how it could work, why now and how it is going.ort

What is "TC39: Type Annotations" aka the Types as Comments proposal

Orta Therox

JSNation 2023

Let's talk about web push notifications and their benefits. Web push notifications have higher opt-in and click rates compared to traditional methods. The web push API should be used responsibly, with subscription requests initiated only after explicit user action. Improve engagement by using emojis in notifications. Connect with the speaker on LinkedIn for more information about the web push API.

Finally, Web Push API is available in all major browsers and platforms. It's a feature that can take your users' experience to the next level or... ruin it! In my session, after a tech intro about how Web Push works, we'll explore implementing smart permission request dialogues, various types of notifications themselves, and communicating with your app for more sophisticated scenarios - all done right, with the best possible UX.

#web standards