React Conferences

React Summit US 2023

React Summit US 2023

English versionEN

Video: Superpowers of Browser's Web API

Nikola Mitrovic

Nikola Mitrovic

Passionate about web performance and ensuring the best possible User Experience of web applications

Project website

The video delves into the fascinating world of Web APIs, starting with the IntersectionObserver API, which is ideal for lazy loading images and creating infinite scroll lists. This API is fully supported by major browsers, making it a reliable choice for developers. Another highlight is the Screen Wake Lock API, which prevents devices from locking during activities like reading e-books or following recipes, although support varies across browsers. The Background Sync API is another powerful tool, ensuring tasks are completed once connectivity is restored, enhancing user experience during offline periods. For communication between different browser contexts, the Broadcast Channel API is invaluable, allowing seamless data exchange across tabs or windows. Developers are also encouraged to consider the environmental impact of their code, using tools like the Website Carbon Calculator to reduce their websites' carbon footprint. The talk emphasizes the importance of understanding browser and device support for various Web APIs, as this ensures consistent application performance across different platforms.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

Read FAQ and transcription

web development api development

Nikola Mitrovic

Nikola Mitrovic

25 min

15 Nov, 2023

Comments

Sign in or register to post your comment.

Available in other languages:

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

Don't Solve Problems, Eliminate Them

React Advanced 2021

39 min

Don't Solve Problems, Eliminate Them

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.

remix best practices web development

Jotai Atoms Are Just Functions

React Day Berlin 2022

22 min

Jotai Atoms Are Just Functions

Top Content

Daishi Kato

Zustand, Jotai & Waku author

State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.

state management web development builders and founders jotai react jotai react native

React Summit 2023

24 min

Debugging JS

Top Content

Watch video: Debugging JS

Mark Erikson

Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

best practices case study javascript web development debug

React Summit US 2023

21 min

The Epic Stack

Top Content

Watch video: The Epic Stack

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.

react web development builders and founders future of development epic react

Fighting Technical Debt With Continuous Refactoring

React Day Berlin 2022

29 min

Fighting Technical Debt With Continuous Refactoring

Top Content

Watch video: Fighting Technical Debt With Continuous Refactoring

Alex Moldovan

This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.

team productivity web development developer challenges inspiration

AHA Programming

React Summit Remote Edition 2020

32 min

AHA Programming

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

The Talk discusses the concept of AHA programming, which emphasizes thoughtful abstractions. It presents a live-coded example of the life-cycle of an abstraction and demonstrates how to fix bugs and enhance abstractions. The importance of avoiding complex abstractions and the value of duplication over the wrong abstraction are highlighted. The Talk also provides insights on building the right abstractions and offers resources for further learning.

best practices web development

Workshops on related topic

React, TypeScript, and TDD

React Advanced 2021

174 min

React, TypeScript, and TDD

Top Content

Featured WorkshopFree

Paul Everitt

ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.

react best practices typescript devtools web development test driven development react

Web3 Workshop - Building Your First Dapp

React Advanced 2021

145 min

Web3 Workshop - Building Your First Dapp

Top Content

Featured WorkshopFree

Nader Dabit

In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.

react blockchain web development ethereum web3

Remix Fundamentals

React Summit 2022

136 min

Remix Fundamentals

Top Content

Featured WorkshopFree

Kent C. Dodds

Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions

remix web development

Vue3: Modern Frontend App Development

Vue.js London Live 2021

169 min

Vue3: Modern Frontend App Development

Top Content

Featured WorkshopFree

Mikhail Kuznetsov

Mikhail Kuznetsov

The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM

web development vue composition api vue vue 3

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

JSNation 2023

174 min

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

Top Content

Featured WorkshopFree

Alba Silvente Fuentes

Roberto Butti

2 authors

This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.

web development fullstack ssr svelte

Build Modern Applications Using GraphQL and Javascript

Node Congress 2024

152 min

Build Modern Applications Using GraphQL and Javascript

Featured Workshop

Emanuel Scirlet

Miguel Henriques

2 authors

Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.

case study web development graphql