June 9 - 11, 2021
JSNation Live
Online

JSNation Live 2021

The biggest JS conference in the cloud

Discover the future of the JavaScript development ecosystem and get connected to its stellar crowd! Attend JSNation Live, a 3-day conference on all things JS, gathering international software engineers in the cloud.

Vite: Rethinking Frontend Tooling
31 min
Vite: Rethinking Frontend Tooling
Top Content
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
Building Brain-controlled Interfaces in JavaScript
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.
Making JavaScript on WebAssembly Fast
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
The Third Age of JavaScript
30 min
The Third Age of JavaScript
Top Content
The way we write JavaScript in 2030 will be completely different than in 2020. Here's why: the slow death of IE11 and rollout of ES Modules will converge toward a new generation of JavaScript tooling. These tools are faster, typesafer, and polyglot, leading to both a better developer and user experience. Change is afoot!
Pixi Powerups!
30 min
Pixi Powerups!
A look into Pixi.js coolest and lesser known features.Including treats such as:- Meshes- Spine Animation- Custom filters- Render Textures and Image exporting
Showing example how it can make working with WebGL super easy and give your content that edge it needs to stand out!
Building a Custom Component Library – Fast
8 min
Building a Custom Component Library – Fast
If your company is anything like the ones I’ve worked for, you have apps with seven different button designs, three different datepickers, and a bizarre collection of dropdowns that may or may not be accessible. A growing trend to deal with this inconsistency is to build a custom design system or component library. Essentially, you build The One Way™ to create a datepicker for your organization, and ask that the rest of your company to conform to your new system. But building a component library comes with a lot of challenges, like, which frameworks or libraries should you use (if any)? How do you make sure your components are accessible? And how to you distribute your components so your whole company can use them? In this lightning talk you’ll learn how to build a component library fast building on top of a library like Kendo UI. You’ll learn tips & tricks on how to get up and running, how to customize components, and how to distribute components throughout your organization.
How Your Architecture and Infrastructure Can Make (or Break) Your Team’s Productivity
8 min
How Your Architecture and Infrastructure Can Make (or Break) Your Team’s Productivity
Developers want to ship and create value for our users. Why, then, do so many teams struggle with getting things to production quickly? In this talk, Jason Lengstorf will look at the impact our frontend architecture and infrastructure has on our teams’ ability to build, iterate, and deploy software — and how it affects the quality and risks of deployment.
Simplifying the Complexity of Node.js with InfluxDB
8 min
Simplifying the Complexity of Node.js with InfluxDB
Learn how NodeSource strengthens their competitive advantage building their product on InfluxDB to increased visibility into production applications and presents better security monitoring and alerts into their solution.
Accelerating Code Quality with DORA Metrics
27 min
Accelerating Code Quality with DORA Metrics
What are the benefits of becoming an Elite Performer? The answer can be complicated. Join me today for a short journey to accelerate code quality with Google's DORA metrics & continuous code improvement to drive higher software delivery and team performance.
Using the Proxy API for State Management
27 min
Using the Proxy API for State Management
With so many libraries to choose from for state management, why not add one more? The ECMAScript Proxy API enables you to intercept and redefine how an object operates. Let's explore how you might use the Proxy API for state management!
How to Code Boring Internal Apps 10x Faster
7 min
How to Code Boring Internal Apps 10x Faster
Retool is a front-end as a service tool that is similar to React and can be 10x faster than coding a web app from scratch. We’ll focus on how and why it is used for internal tools at some of the fastest growing companies and take a minute to walk through how it works, where it’s a good fit and where it’s not.
The Visual Future of State Management
32 min
The Visual Future of State Management
Learn about state modeling with state machines and statecharts can improve the way you develop application logic, and get a sneak peek of never-before-seen upcoming visual tools that will take state management to the next level.
Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit
34 min
Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit
Service workers bring amazing new capabilities to the web. They make fully offline web apps possible, improve performance, and bring more resilience and stability to any site. In this talk, you'll learn how these man-in-the-middle attacks on your own site work, different approaches you can use, and how they might replace many of our current best practices.
Yarn in Depth: Why & How
34 min
Yarn in Depth: Why & How
Since 2017 Yarn proved itself a pillar of JavaScript development incubating numerous features our ecosystem now heavily relies on. As years passed, as competitors improved, so did Yarn, and it's now time today to dive into the features and tradeoffs that make Yarn a truly unique gem of the JavaScript ecosystem.
Keep Scrolling
33 min
Keep Scrolling
Wait! Not so fast - Stop scrolling and hang out with me for a while! When done right, scroll based animations can add polish to a site, and make online storytelling feel more immersive. GreenSock's ScrollTrigger enables you to achieve buttery smooth scroll based animations with minimal code. Let's dig in to some of it's features together.
Headless vs Traditional eCommerce Platforms: Introducing Commerce Layer
8 min
Headless vs Traditional eCommerce Platforms: Introducing Commerce Layer
In this lighting talk Fabrizio will go through the main highlights of CommerceLayer, comparing the headless approach to the traditional "monolithic" ecommerce platforms. We will speak about security, performances and scalability.
Build Fullstack Apps in Record Time with Blitz.js
32 min
Build Fullstack Apps in Record Time with Blitz.js
Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs! Brandon will cover all the important parts, so you'll know if you might want to use Blitz or not.
ES?.next()
31 min
ES?.next()
Does hearing about potential new features of Javascript makes you excited? Then this talk is for you! We will walk through a few interesting proposals from TC39 from stage-0 to stage-3. Let us see how beneficial these proposals are with code samples and some live coding.
Automated Security Testing for JS Apps & Underlying APIs
8 min
Automated Security Testing for JS Apps & Underlying APIs
With StackHawk, engineering teams can run security tests against JS applications and the backing APIs to find and fix vulnerabilities fasters. With automated testing on every PR, you can be confident that your app is secure. Join StackHawk co-founder Scott Gerlach for a quick overview of JS application security testing with StackHawk.
Create an Application Backend in Clicks with the Amplify Admin UI
29 min
Create an Application Backend in Clicks with the Amplify Admin UI
There's a lot that goes into building a modern application: the frontend for users, data persistence, user authentication and authorization, business logic, cloud deployment, and much more. The AWS Amplify Admin UI allows users to create and deploy an offline-ready application backend in clicks and then extend it with code, lowering the complexity of fullstack development for frontend and mobile developers. We'll build a fullstack application backed multiple AWS services including Cognito, Appsync, and S3 in minutes.
Transforming a Country Through Code!
8 min
Transforming a Country Through Code!
In this talk, you can learn the journey of the creation of those communities, the challenges, lessons, and insights on how to transform a community in a developing nation around technology and how it can set the stage for other communities to build upon.
How Core Web Vitals Will Affect Google Rankings in 2021
31 min
How Core Web Vitals Will Affect Google Rankings in 2021
Landing a top spot on Google can have a multi-million dollar impact on your business. Starting in May 2021, the performance of your site (determined Core Web Vitals) will be critical to your search ranking. Learn how Next.js can help you optimize your site’s performance, user experience, and SEO.
An Introduction To IoT; Or How I Built an IoT Kitty Litter Box Using JavaScript
23 min
An Introduction To IoT; Or How I Built an IoT Kitty Litter Box Using JavaScript
My favorite things in life are cats, computers and crappy ideas, so I decided to combine all three and make an IoT (Internet of Things) litter box using a Raspberry Pi and JavaScript! If you have ever wanted to get build your own IoT project, but didn’t know how to start, then this is the talk for you.Together, we will go through how I setup my IoT Litter Box from start to finish. Including how to setup Node.js on a Raspberry Pi and how to connect sensors to a Raspberry Pi and how to read the sensor inputs with Node.js.
Remember CSS Sprites? Let's do that with video!
8 min
Remember CSS Sprites? Let's do that with video!
Synchronizing multiple streams, particularly multiple live streams, and especially when the audio is critical too, can be incredibly difficult. How, then, could you build an experience where you have a few camera angles and you want a viewer to be able to seamlessly pick one? We'll walk through a hack technique that allows you to do just that without ever having to worry about synchronization.
Multithreaded Logging with Pino
19 min
Multithreaded Logging with Pino
Top Content
Almost every developer thinks that adding one more log line would not decrease the performance of their server... until logging becomes the biggest bottleneck for their systems! We created one of the fastest JSON loggers for Node.js: pino. One of our key decisions was to remove all "transport" to another process (or infrastructure): it reduced both CPU and memory consumption, removing any bottleneck from logging. However, this created friction and lowered the developer experience of using Pino and in-process transports is the most asked feature our user.In the upcoming version 7, we will solve this problem and increase throughput at the same time: we are introducing pino.transport() to start a worker thread that you can use to transfer your logs safely to other destinations, without sacrificing neither performance nor the developer experience.
Debugging with Chrome DevTools
11 min
Debugging with Chrome DevTools
Jecelyn will share some tips and tricks to help you debug your web app effectively with Chrome DevTools.
TensorFlow.JS 101: ML in the Browser and Beyond
39 min
TensorFlow.JS 101: ML in the Browser and Beyond
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!
Web Components, Lit and Santa 🎅
28 min
Web Components, Lit and Santa 🎅
Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅
Securing Node.js APIs with Decentralised Identity Tokens
9 min
Securing Node.js APIs with Decentralised Identity Tokens
Authentication and Authorization are serious problems. We often dedicate a lot of time to craft powerful APIs but overlook proper security measures. Let's solve it with Magic using a key-based identity solution built on top of DID standard, where users’ identities are self-sovereign leveraging blockchain public-private key pairs. In this talk, we’ll look at proper ways to secure our Node.js APIs with Decentralised Identity Tokens. We’ll go from learning what Decentralised Identity standards are, how the users’ identities are self-sovereign leveraging blockchain public-private key pairs, why they’re the future of API security, and to put theory into practice we will build a real-world implementation using Node.js where I’ll show common best practices.
How to Outsmart Time: Building Futuristic JavaScript Apps Using Temporal
25 min
How to Outsmart Time: Building Futuristic JavaScript Apps Using Temporal
For close to 25 years now, JavaScript developers have suffered at the hands of time: the Date object. We have tried all sorts of solutions from using popular libraries like Moment.js all the way to handling dates and times on the backend.Now it's time to show "time" who is boss. With the Temporal API stable at Stage 3 and the polyfill ready for production use, let me show you how to harness the power of this delightful API in order to build powerful JavaScript applications that handle dates and times like we always wished we could. We shall also discuss the orthogonal features being worked on in the JavaScript Intl API and find out how these play along with each other and come together to form a comprehensive set of APIs that allow us to build state of the art date and time components in our applications.
VS Code Can Do That!
28 min
VS Code Can Do That!
How do you debug so easily in VS Code? How do codespaces work? What are those key combinations to edit code so quickly? What extensions are the ones I shouldn't code without? Get ready to hit the ground running in this fast-paced, demo-heavy talk that takes you through some of the best and most effective tips and tricks in VS Code. Learn how to setup your environment and customize it the way you like it. You'll walk out with several tips on how to be more efficient with one of the hottest tools on the Web today!
CSS Can Do That Too
22 min
CSS Can Do That Too
CSS has evolved and grown immensely since it was first introduced back in 1996. There was a time back then when CSS was not even meant for doing layouts, but that time has long past. Today, web layouts are practically synonymous with CSS. In addition to that, CSS can now be used to build things that used to only be feasible with Javascript. This talk will showcase a few of such features and explain how to build them yourself.
Micro-scopes – How to Build a Modular Modern App in a Bundled World
21 min
Micro-scopes – How to Build a Modular Modern App in a Bundled World
In this talk we will explore the great benefits of breaking a big modern app to meaningful, independent pieces – each can be built, deployed and loaded separately. We will discuss best practices and gotchas when trying to apply this microservice-like pattern to the chaotic world of the browser, and we'll see how building the right pieces guarantees a brighter future for your apps. Let's dive into Neverendering story of modern front-end architecture.
Let's Expand the Reality!
12 min
Let's Expand the Reality!
How long have we been watching movies about reality and how exciting it looks! You may not have noticed, but virtual reality is already in our lives, even in our browsers. There are more and more ways to apply these technologies. Let's take a look at VR and AR and see how they look in real life.
Put Down the Javascript – Level Up with the Fundamentals of Web Development
11 min
Put Down the Javascript – Level Up with the Fundamentals of Web Development
Seasoned and beginner alike, developers have a habit of jumping right into a framework or new technology that makes a lot of promises while also glazing over important fundamentals that without, tend to hold back a website or application’s potential. Without some basic knowledge of HTML, you might inadvertently exclude people from learning about your company through your website due to poor accessibility. Lacking an understanding or simply being afraid of CSS, you might be more prone to add unnecessary libraries on top of libraries that just add to the weight of the page, impacting how quickly your app can load. In this talk, we’ll go over some basic HTML and CSS strategies that can immediately be used right alongside of JavaScript including frameworks like React and Vue that will provide another range of benefits like better accessibility, simpler code, and ways you can improve SEO letting search engines like Google more easily figure out what your page is about.