JS Nation

JSNation 2023

Progressive Enhancement is the philosophy of providing a basic, functional experience to everyone, regardless of device, and adding additional layers of interactivity and delight as they are supported. The last decade of web development, focusing on SPAs, where JavaScript is a hard requirement, have made this philosophy very difficult – how do we make websites that are fundamentally built with JavaScript accessible to users without it? This talk examines the philosophy behind Progressive Enhancement, then focuses on some concrete examples (including a dive into Svelte compiler output!) of how we can build functional, reliable, and usable experiences for all, adding delightful interactivity for those who can support it.

Progressive Enhancement - What It Is and Isn’t, a Practical Introduction With Svelte

Elliott Johnson

Remix Conf Europe

Remix Conf Europe 2022

A review of how we're using Remix at Daffy.org to change the way people give to charities. We'll talk about why we decided to use Remix, how we've used it and migrated from our previous frontend application and some patterns and libraries we have developed internally.

Remixing How We Give

Sergio Xalambri

In this talk I'll explore the evolution of e-commerce infrastructure from traditional co-located servers to the new frontier of serverless and edge computing, and how modern developer tools like Remix and Vendure fit in.

The New Frontier: E-Commerce at the Edge 

Michael Bromley

Here and there, people talk about "Personalization". Content creators, marketers, designers, and product owners evaluate the possibilities and alternatives to handle custom scenarios while offering powerful experiences to the users. And we, the developers, have some ways to help with that. Let's talk about personalization, the benefits, the challenges, and how we can manage and offer personalized experiences in our Remix projects.

Your Personal Remix!

Facundo Giuliani

In late 2020, I ran a Lighthouse test on a simple content page on Harvie, our farm management platform and Symfony app, and received a performance score of 31/100. The JavaScript bundle, the API requests, the database lookups, even with minimal UI to render, had a baseline score in the thirties! Along with customer feedback, this helped to catalyze a renewed commitment to performance at Harvie. Through numerous discussions, we walked through each step of page load, from networking to rendering, and identified where we could improve. After a year of rewrites and upgrades, our remaining detriment to overall performance was our frontend. We had been converting our Symfony twig templates into React SPA components and fell into the common problem of creating "request waterfalls", while our user had to stare at a loading screen. We needed a change, and for us, that was Remix. In this talk, I'll walk you through our team's journey with performance and how Remix has become a natural progression of that.

Remixing a Symfony

Emily Kauffman

React Advanced

React Advanced Conference 2022

Are you afraid of animations? Well, you shouldn't be, React Native Reanimated got you covered. Your mobile application can share a story through animations, can help users through micro-interactions and differentiate your app from the others.

React Native Animations Should Be Fun

Catalin Miron

Panel Discussion: UX and the Design/Dev Overlap

Anjana Vakil

Maggie Appleton

Steve Ruiz

React Summit

React Summit 2022

Loading…, Loading something else…, Finally loading one more thing… This doesn’t sound good right? Yeah I too feel the same 😔Loaders are indeed a great way to provide feedbacks to users that “something is happening”. But they can be easily misused, and that day comes when we see tonnes of loaders popping in our UI, defeating its purpose. Enter Suspense and SuspenseList in React!What if you could think “what parts to show a loader so that I see very less loaders”? What if you could also control the order in which they should appear? Let’s dive a bit deep into this problem and think of “right loader orchestration” experience instead of “just loaders everywhere”!

The Subtle Art of "Subtle Loading"!

Nikhil Sharma

JSNation 2022

With *dialog* and the inert attribute landing in all major browsers in 2022, we as web developers now have simple yet powerful primitives to help build complex app-like flows on the web, rather than the over-engineered or leaky solutions we've relied on for years. Let's demystify these primitives and talk through how they make your code simpler: from plain HTML, Web Components, to React/similar.

Ensuring your Users are on the Right Path: the Future of Modals and Focus Management

Sam Thorogood

In most computer systems, definition of performance is straight forward enough: do more work per time with less resources. For a frontend web application, this is rarely the case. Frontend applications not only need to be resource-efficient, but must also ""feel"" efficient to the user. This makes performance on the frontend mostly a user experience issue. Join me as we take a deep dive into the important performance metrics of a modern frontend app, how to measure them, and how to optimize them for both the machine and the user.

Performance is User Experience: Optimizing the Frontend for the Users

Chinenye Onuegbu

React Advanced Conference 2021

"Please do not close or leave this page" may send shivers down your spine, but coding the proper UX flow for async might make you question your daily job. How can we properly handle UX for asynchronous code in highly responsive applications? Let's explore how introducing asynchronous code creates a challenge for UX. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Asynchronous UX

Toni Petrina

React Finland

React Finland 2021

Quick tips on how to utilise the native mobile platform to help provide your users an upgraded experience with sounds, vibrations and animations. Small changes can have a huge difference UX-wise. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Haptics, Sounds and Micro Animations

Kadi Kraman

How to properly hide modals / dialogs / drawers functionalities behind buttons that spawn them without cluttering container components. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Delegate your React Dialogs

Calin Bogdan

React Summit Remote Edition

React Summit Remote Edition 2020

For years I've been a designer who codes and I believe that designing with code or with a coding mindset can help your team to be more productive. In this talk, I'm exploring this concept and showing my daily workflow that can probably help to bridge the gap between devs and designers.

Designing with Code in Mind

Elizabet Oliveira

React Summit Remote Edition 2021

When users directly manipulate onscreen objects instead of using separate controls to manipulate them, they’re more engaged and more readily understand the results of their actions. Subtle animations can give people meaningful feedback to help clarify the result of their actions. But, the devil is in the details. What often seems simple can be complex to get right, especially when you care about accessibility. Sid shares the lessons he has learned building interactive UIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#user experience