Upcoming events
JSNation 2025
JSNation 2025
Jun 12 - 16, 2025
React Summit 2025
React Summit 2025
Jun 13 - 17, 2025
Productivity Conf for Devs and Tech Leaders
Productivity Conf for Devs and Tech Leaders
Mar 27 - 28, 2025
Node Congress 2025
Node Congress 2025
Apr 17, 2025
JSNation US 2025
JSNation US 2025
Nov 17 - 20, 2025
React Summit US 2025
React Summit US 2025
Nov 18 - 21, 2025
React Advanced 2025
React Advanced 2025
Nov 27 - Dec 1, 2025
Web Development insights directly from framework authors and early adopters.
Talks from our events
Productivity Conf for Devs and Tech Leaders
Productivity Conf for Devs and Tech Leaders
Mar 27 - 28, 2025
React Day Berlin 2024
React Day Berlin 2024
Dec 13 - 16, 2024
React Summit US 2024
React Summit US 2024
Nov 18 - 22, 2024
JSNation US 2024
JSNation US 2024
Nov 18 - 21, 2024
React Advanced 2024
React Advanced 2024
Oct 25 - 29, 2024
TechLead Conference 2024
TechLead Conference 2024
Jun 15 - 19, 2024
React Summit 2024
React Summit 2024
Jun 14 - 18, 2024
C3 Dev Festival 2024
C3 Dev Festival 2024
Jun 14 - 15, 2024
JSNation 2024
JSNation 2024
Jun 13 - 17, 2024
Vue.js Live 2024
Vue.js Live 2024
Apr 25 - 26, 2024
Node Congress 2024
Node Congress 2024
Apr 4 - 5, 2024
DevOps.js Conf 2024
DevOps.js Conf 2024
Feb 15 - 16, 2024
Articles
Top ideas
Trending today
Notes System That Will Let You Thrive: Craft Your Own Path to Productivity
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
22 min
Notes System That Will Let You Thrive: Craft Your Own Path to Productivity
Hello, welcome to my presentation on building your own Node system. I want to share my tips and mistakes so you can learn from them. Having a personalized system is valuable. I use a combination of Bullet Journal and Apple Notes. Logstick is my current system and I love it because it allows easy creation of notes and tags. The four core things that make a system work are engagement, easy search and retrieval, frictionless addition of new notes, and feeling supported. Note-taking provides peace of mind and eliminates the need to remember and search for information. Customize your note system to suit your preferences. Experiment with different note-taking apps and find one that works for you. Consistency matters more than the tool you use.
Maximize Productivity with AI Agents
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
25 min
Maximize Productivity with AI Agents
I'm Tejas Kumar, a software developer with over 20 years of experience. AI agents are defined as entities that act on behalf of users or groups to produce specific effects. Agents consist of an orchestration layer, a language model, and tools represented as JSON functions. Langflow is an open-source tool that allows users to build their own AI agents by connecting language models and tools. Composio is a tool that enhances agent capabilities by offering integrations and apps, such as Google Calendar integration. MCP (Model Context Protocol) is a way to share context with models and extend their capabilities. It allows functions to be made available to models over standard input/output or an HTTP endpoint. MCP can be used with GitHub to perform various tasks like searching and fixing code issues. The Talk covered the basics of AI agents, building agents with Langflow and enhancing them with Composio, and using MCP with GitHub. The speaker encouraged audience questions and exploration of these concepts.
React Query - The Bad Parts
React Day Berlin 2024React Day Berlin 2024
30 min
React Query - The Bad Parts
Top Content
React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.
The Age of Universal React: What’s the Catch?
React Day Berlin 2024React Day Berlin 2024
30 min
The Age of Universal React: What’s the Catch?
Mo Khazali
Anisha Malde
2 authors
We're going to talk about the age of universal React, the next paradigm shift of React. Universal React is cross-platform and follows the principle of learn once, write once, and run anywhere. React Native is born as a declarative way to build iOS and Android apps. React Native components and APIs are implemented in an interoperable way with React DOM, powering a large part of Twitter's web platform. Code sharing in a universal React app maximizes code reuse, reduces duplication, and allows platform optimization. React Native for Web is the compatibility layer that enables universal development, handling translations between React Native and React Dom. Expo is the framework of choice for React Native, with Expo Router V3 completing the universal story. Challenges in achieving parity with React Native Core due to specific platform implementations. React Strict DOM prioritizes web, bringing web APIs to React Native. Taking a universal React approach can improve performance across platforms. React Native Web and React Strict DOM prioritize performance and accessibility.
Can AI Truly Enhance Manager Productivity?
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
27 min
Can AI Truly Enhance Manager Productivity?
Today's Talk discussed the potential of AI to enhance managerial productivity. The importance of frameworks and Git in coding was emphasized, as well as the need to stay updated with new technologies. Various AI tools and their use cases were mentioned, with a focus on data security. The benefits of using AI agents and case templates for project management were highlighted. AI tools for presentations, automation, and bias in AI models were also discussed. The limitations of AI and ethical considerations were mentioned, emphasizing the need for human creativity and accountability. Overall, the Talk provided valuable insights into the role of AI in software development and engineering.
Atomic Power: the Story of StyleX
React Day Berlin 2024React Day Berlin 2024
25 min
Atomic Power: the Story of StyleX
Hello, I'm Naman and today I'm going to talk about atomic power and the story of StylX. CSS preprocessors like Sass and Less emerged to address challenges with CSS. In the evolution of CSS, there was a fork in the road with some moving towards CSS modules and others towards CSS in JS. Atomic CSS is about breaking styles into small, reusable pieces. Tailwind is a successful implementation of atomic styles. Stylix is a JavaScript compiler that generates atomic CSS and allows for defining styles once and reusing them. The speaker demonstrates the conversion of a design to Tailwind classes using Stylix. The TW function and parser in StyleX are discussed for defining constants and converting them into StyleX objects. Atomic CSS is a widely agreed concept and Tailwind can be used with StyleX. The React Strict DOM project is mentioned as a tool for writing UIs for web and React Native.
Building the Next Generation of AI Developer Tools
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
26 min
Building the Next Generation of AI Developer Tools
Hello, everyone. My name is Krzysztof, and I will be talking today about developer tools, AI, and how we use both of those to create the next generation of developer tools. GitHub Copilot, released in 2021, revolutionized developer tools by automating boring parts of coding and keeping developers in a state of flow. Suggestions are shown directly in the editor and clearly separated from the real code. Chat interfaces, like Chat GPT, solve quality of response issues and are useful when flow doesn't exist. The next generation of tools focuses on structured exchange, user control, and iteration. GitHub Spark allows users to create small applications without focusing on code. Designing applications with the user in mind and handling ambiguity is important. Real-world software tasks require human guidance, and exploring new ideas beyond chat-based AI is necessary. Always consider the human aspect and ethical considerations when using AI-powered features.
Why You Should Use Redux in 2024
React Summit 2024React Summit 2024
33 min
Why You Should Use Redux in 2024
Top Content
Mark Erickson explains the history, creation, evolution, and benefits of Redux. Redux was designed to make state updates and action history maintenance easy, incorporating functional programming principles. Redux Toolkit was created to simplify Redux usage. Redux is still a valid choice for its consistent pattern and separation of state from UI. The decision to use Redux depends on the specific use case and the need for centralized state management.
AI-Powered Frontend Development: Building Better UIs Faster
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
19 min
AI-Powered Frontend Development: Building Better UIs Faster
Today's Talk introduces the use of large language models (LLMs) to enhance front-end development. LLMs can act like our brains by maximizing the good parts and minimizing the bad parts. A demo in Cursor, an IDE, showcases how LLMs can be used with the builder.io Figma plugin. The Talk emphasizes the automation of tasks, such as adding a settings button and resolving errors, with the AI agent. Feedback and manual verification are crucial to ensure desired results. Tests and continuous iteration are recommended for stronger guarantees of correctness. Monitoring and guiding the AI agents is important to stay on track. Connecting to other tools like Figma and using AI prompting can further enhance code generation. The CLI enables code base integration and parallel development. Visual prototyping and seamless updates are possible with the Builder tool. Overall, the Talk highlights how LLMs can revolutionize front-end development by automating tasks, improving efficiency, and facilitating collaboration.
If You Were a React Compiler
React Summit US 2024React Summit US 2024
26 min
If You Were a React Compiler
Top Content
In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.
Featured
Short takes
Applying React Principles to a Cloud Database
React Summit 2024React Summit 2024
7 min
Applying React Principles to a Cloud Database
React principles can break down for full-stack apps, but Convex has built a backend and database to address this. The five React principles discussed include reactivity, consistency, overlapping writes, and caching. Convex's database ensures consistency, handles overlapping writes with transactions, and automatically invalidates caches based on relevant writes. Convex combines the best of SQL and NoSQL databases and applies React principles to simplify app development and improve the user experience.
The Power of a Second Brain in a Developer's Workflow
C3 Dev Festival 2024C3 Dev Festival 2024
8 min
The Power of a Second Brain in a Developer's Workflow
The Talk emphasizes the importance of maintaining a second brain, a curated collection of digital notes, to enhance memory retention in software engineering. Building a second brain helps in recalling information, problem-solving, and retention. It is easy to create your own second brain using various tool options like Notion, Obsidian, Reflect, Rome Research, and Tana. Starting with small, self-contained notes and gradually expanding to form a mesh of related information is recommended for effective learning and retention.
What’s With Micro Frontends
JSNation US 2024JSNation US 2024
7 min
What’s With Micro Frontends
Watch video: What’s With Micro Frontends
Micro-frontends break down a large frontend into smaller, independently deployable pieces. This approach improves scalability, team autonomy, and code maintenance. Two primary ways to implement micro-frontends are build time and run time. Module federation, introduced in Webpack 5, allows for dynamic real-time updates across teams. Challenges in implementing micro-frontends include getting type safety with TypeScript and testing at runtime. Module federation 2.0 introduced type extraction and manifest updates. Full site federation allows testing the whole app. Micro frontends involve trade-offs, so choose what benefits you the most.
Rebooting Joy: Harnessing Playfulness and Hobbies to Redefine Work in the Tech World
TechLead Conference 2024TechLead Conference 2024
6 min
Rebooting Joy: Harnessing Playfulness and Hobbies to Redefine Work in the Tech World
Reignite your passion for tech by incorporating playfulness and hobbies into your daily grind. Organize mini hackathons, engage in pair programming, and dedicate time for curiosity hours. Helping others and participating in hack-a-thons are great ways to stay excited. What's one hobby or playful activity that could reignite your passion?
Can AI Turn Us Into 10x Developers?
JSNation 2024JSNation 2024
7 min
Can AI Turn Us Into 10x Developers?
AI can help developers become 10x more efficient by leveraging powerful GPUs. Codium is an AI developer tool that can accelerate learning, analyze dependencies, and provide personalized coding experiences. It abstracts away complexity and allows developers to focus on building user experiences. Codium aims to transform the software industry and empower developers to become 10x engineers.
Simplify Package Releases – From Versioning to Publishing
JSNation 2024JSNation 2024
7 min
Simplify Package Releases – From Versioning to Publishing
The Talk focuses on the Nx release command for publishing npm packages in a monorepo setup. It ensures correct package publishing order, handles versioning and change logs, and allows for simulating changes before publishing. Advanced features include configurable versioning, group releases, and support for different languages. Documentation, videos, and recipes are available for customizing and automating releases on your CI system.
Nested Interactive Elements: A Nightmare in Accessibility
React Summit 2024React Summit 2024
9 min
Nested Interactive Elements: A Nightmare in Accessibility
Nested Interactive Elements in Nightmare Accessibility can cause issues with screen readers and other assistive tools, making it difficult for users to interact with websites. Mitigation strategies include unnesting elements, using CSS overlay, and being cautious when modifying roles. It is recommended to involve users of assistive tools in focus groups and share solutions online.
Building a JS Engine -- For Fun!
JSNation 2024JSNation 2024
9 min
Building a JS Engine -- For Fun!
Top Content
The Talk discusses the basics of building a JS engine, highlighting the complexity and feature completeness of existing engines. It emphasizes the possibility of creating a simpler engine tailored to specific use cases and target audiences. The speaker suggests starting anywhere in the process and provides tips on using parser libraries, implementing runtime features, and ensuring correctness through testing. Additionally, the Talk encourages exploring JavaScript standards and engaging with the open-source community.
Forget Polygons – Gaussian Splats, the New Approach to Photorealistic 3D Graphics
JSNation 2024JSNation 2024
5 min
Forget Polygons – Gaussian Splats, the New Approach to Photorealistic 3D Graphics
Today, I'll be talking about GspotJS and Gaussian Splatting, a revolutionary graphics pipeline that can render high-fidelity scenes at 144 FPS. Gaussian Splatting is a technique that converts data directly into an image using Gaussians. GspotJS is a lightweight JavaScript library for Gaussian Splat rendering, with features like 4D rendering. The library aims to provide a simple and speedy way to view Splats on the web, while more advanced applications can use Mackellog Gaussian Splats 3D. Both Gaussian Splatting and gSplotJS are open-source.
Aligning Patterns Across Design and Development
React Summit US 2024React Summit US 2024
8 min
Aligning Patterns Across Design and Development
I'm Jake, a developer advocate at Figma, and today I'll be discussing aligning patterns between design and development. Collaboration between designers and developers requires recognizing our different perspectives. The goal is to close the gap between design and development, but this is often aspirational. The optimal path between design and development is somewhere in between, depending on factors like friction or waves. By recognizing each other's areas of resistance, we can find ways to make collaboration more effective. Figma's Code Connect fills the gap between Figma component logic and code logic by allowing teams to publish code-based informed component code snippets. CodeConnect currently supports HTML, Web Components, Angular, Vue, React, SwiftUI, and Jetpack Compose, and seeks to support more languages.
Latest
AI Engineer End-to-End Workflow: Productivity Challenges and Their Solutions
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
22 min
AI Engineer End-to-End Workflow: Productivity Challenges and Their Solutions
Today's Talk explores productivity challenges and solutions for AI engineers, focusing on an application called Contoso Chat. The end-to-end workflow is examined from a productivity perspective, introducing the concept of Exposure to AI. Building an AI application involves ideation, augmentation, and operationalization stages. Provisioning and setup are crucial steps, with infrastructure as code being a productivity tool. GitHub Codespaces and development containers provide consistent development environments. Azure AI Inference API allows easy iteration and prototyping. AI-assisted evaluation involves training AI models and using evaluators for grading responses. Custom evaluators can be created. Overall, the Talk emphasizes the importance of productivity throughout the AI engineer's journey.
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance
JSNation US 2024JSNation US 2024
10 min
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance
Hello, everyone. Today we are going to explore AI-powered end-to-end testing. Unlike unit tests, UI testing has a huge layer of obstructions between the source code and the rendered UI. The source code includes HTML, CSS, and TypeScript, which are transpiled into JavaScript and bundled with tools like Webpack. AI can generate tests effectively for standard websites or blogs, but it may struggle with niche applications behind strict authorization or on-premise tools. AI-powered end-to-end testing for complex scenarios requires our guidance. We use meaningful data test IDs and follow the page objects model pattern. Additionally, we rely on useful tools like the end-to-end test helper in-browser extension and the continue IDE extension. Now, let's proceed to the demo, where we will create tests for the Pokemon application, including the ability to filter by name or type. We will navigate to the Pokemon details page and use our extension to manage settings and prompts. Additionally, we will create the details page object together and generate the test file. The Pokemon details page has 105 elements. We can view the elements for debugging purposes, including page object name, Pokemon details page, and system message. We will copy the page object and save it to a file. We need to make it exportable. Then, we will use the extension to create an end-to-end test and pass the context. I will use all the open files, including the page objects and the test case itself. I will send them to EI along with the predefined prompt. There is a system message and additional information we need to be aware of. The test runs successfully, and that concludes this part.
Managing Context in AI Coding Assistants: Achieve Better Results with Fewer Hallucinations
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
20 min
Managing Context in AI Coding Assistants: Achieve Better Results with Fewer Hallucinations
Today's Talk discussed integrating context into AI coding tools using the MoloContext protocol (MCP). The demos showcased the use of Conduit, an MCP tool, for bug tracking and feature addition in software development. The Talk also highlighted the use of Fetch in Cursor to summarize GitHub issues and create Jira bug reports. It demonstrated how Conduit can be used to manage issues, make code changes, and perform Git commits. Additionally, it explored the integration of Conduit with Windsurf to add a user interface for the conduit application. The Talk also touched upon implementing MCP in the AIDER AI coding system and using MCP and Windsurf for Conduit integration. Overall, it emphasized the importance of context and choosing the right tools for efficient software development workflows.
Maximize Productivity with AI Agents
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
25 min
Maximize Productivity with AI Agents
I'm Tejas Kumar, a software developer with over 20 years of experience. AI agents are defined as entities that act on behalf of users or groups to produce specific effects. Agents consist of an orchestration layer, a language model, and tools represented as JSON functions. Langflow is an open-source tool that allows users to build their own AI agents by connecting language models and tools. Composio is a tool that enhances agent capabilities by offering integrations and apps, such as Google Calendar integration. MCP (Model Context Protocol) is a way to share context with models and extend their capabilities. It allows functions to be made available to models over standard input/output or an HTTP endpoint. MCP can be used with GitHub to perform various tasks like searching and fixing code issues. The Talk covered the basics of AI agents, building agents with Langflow and enhancing them with Composio, and using MCP with GitHub. The speaker encouraged audience questions and exploration of these concepts.
Writing Your First Vite Plugin
React Summit US 2024React Summit US 2024
19 min
Writing Your First Vite Plugin
Let's talk about writing your first Vip plugin. VIT, rollup, and Vip plugin are important tools in front-end development. Rollup is a bundler that can bundle JavaScript files into a single file. VIT goes through all the plugins and transforms files to JS modules. VIT and rollup have similar plugin architectures, allowing the use of existing rollup plugins in VIT. I'll discuss three plugin properties: resolve ID, load function, and more. Let's take a deeper look at the transform function. The resolve ID function determines the ID of the file or module, and the load function reads the file or module and returns its content. The transform function actually transforms the file or module into something else. For example, it can modify the code depending on the file extension. We can transform the result object into code by using object keys and map. This allows us to extract specific data and include it in the output. By making the code flexible, we can add additional information like 'built at' and utilize it for various purposes, such as displaying branch name or commit hash during deployment. You can implement various functionalities in the Vip plugin, such as reading Markdown files, implementing file-based routing, and creating domain-specific languages.
8 Things You Did Now Know Micro Frontends Can Do
React Summit US 2024React Summit US 2024
22 min
8 Things You Did Now Know Micro Frontends Can Do
Welcome to the session on microfrontends. Microfrontends allow for independent implementations and local development. It is possible to develop and integrate microfrontends locally using an emulator and achieve automatic updates. Fine-tuning modules and user experience can be done using a discovery service. Rules can be created in the discovery service to selectively load microfrontends for specific browsers. AI can be leveraged to generate AI-enhanced variants and compare them with the original implementation. Microfrontends are highly portable and can be used in different applications. Code isolation and enhanced performance are important considerations in microfrontends. The benefits of microfrontends include improvements in file name changes and performance overhead. The Netflix application is a case study for microfrontends. Overall, microfrontends offer various benefits and opportunities for architectural discussions.
The State of the Web: Key Insights From the HTTP Almanac 2024
React Day Berlin 2024React Day Berlin 2024
30 min
The State of the Web: Key Insights From the HTTP Almanac 2024
Today's Talk focused on Almanac 2024, a report that examines web sustainability. The speaker discussed various aspects of web sustainability, including page weight, unused CSS and JavaScript, image optimization, text compression, caching, and the usage of AI. They emphasized the need to reduce data transfer and carbon emissions through practices like green hosting and the implementation of lazy loading, responsive images, and text compression. The speaker also highlighted the importance of individual action and collaboration in achieving a more sustainable web. They called for volunteers for the next edition of the report and encouraged engineers to adopt greener practices. Overall, the Talk provided valuable insights into the current state of web sustainability and offered recommendations for improvement.
ESLint One for All Made Easy
React Day Berlin 2024React Day Berlin 2024
21 min
ESLint One for All Made Easy
Hello everyone! I'm Anthony Fu, a coaching member of Vit, Vue, and Nuxt. Today, I'll share my findings and practices in exploring ESLink and its ecosystem. ESLink v9.0 released 7 months ago with the new FlatConfig, which simplifies plugin configuration and provides full control and customization in JavaScript. Migrate legacy config to FlatConfig with eslink-migrate-config CLI and use eslink-config-inspector for visualized step tool. Flag config utilities make config customization easier and allow project-aware configs. ESLink is a powerful AST toolkit and can be used as a formatter. Use ESLink for maintaining stylistic rules and customize it to fit your project's needs.
Unlocking Fun Experiments: Exploring the Web Speech API
JSNation US 2024JSNation US 2024
21 min
Unlocking Fun Experiments: Exploring the Web Speech API
Watch video: Unlocking Fun Experiments: Exploring the Web Speech API
Hello, JS Nation! Today, I'll show you how I created gamified karaoke using Web Speech API. The Web Speech API has two parts: speech recognition and speech to text. It was originally built for karaoke but can also be used for forms and dictation. There are some quirks with the speech recognition API, such as limited microphone input and variation in implementation and privacy concerns across browsers. The speaker demonstrates how to implement speech recognition in a karaoke application and tests its error matching capabilities. Other interesting points include voice interface design considerations and the value of engaging in fun and unproductive side projects.
Leveraging Developer Productivity Engineering Practices for Greater Impact as an IC
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
26 min
Leveraging Developer Productivity Engineering Practices for Greater Impact as an IC
Hey, my name is Mikhail Levchenko. I've changed my job and became a full-time developer productivity engineer. Let me share a little story. Imagine being a wealthy trader in 15th century Europe. Delivering spices for profit was not an easy task. Middle East nations heavily taxed any traders. But the Portuguese sailed around Africa using the Mariner's Astrolabe. Fast forward, Gerardo Mercator invented a map perfectly suited for deep ocean navigation. The Dutch East India Company became the new king of the spice trade. Developer productivity is about building a cozy environment for developers, solving hard problems, and identifying process bottlenecks. It focuses on the whole development process as a product. By leveraging this perspective, you can drive change among developers and other roles. Observing developer processes as a product involves meeting stakeholders, formulating a vision, creating a model and metrics, finding productivity problems, and proposing solutions. The stakeholders include developers, CEOs, CTOs, engineering managers, and other roles involved in software development. The goal is to make everyone more productive, guided by the motto of happier developers building better software faster. There are three highlighted frameworks in this talk: DORA, DEVX, and Mertrix. DORA focuses on speed and reliability with metrics like acceleration frequency, lead time, failure rate, and recovery time. DEVX addresses the human factor with metrics related to feedback loops, cognitive load, and flow state. DX4 is a recent metric that combines DORA and DEVX, introducing proprietary metrics for top management. It includes a failure rate to encompass reliability and a percentage of time spent on new features. Engineer-developed metrics like the reliability metrics from Dora and the percentage of time spent on new features are valuable additions. Talking to top management about changes is made easier with a cool metric. Research concerning metrics, consult stakeholders, and read literature to improve understanding. Try prototypes before developing custom tools as a last resort. Confirm success with empirical metrics. Release managers often feel constantly interrupted and overwhelmed by the task of supervising a release. Sharing the role with the entire team proved to be ineffective, leading to forgotten procedures. Automation and streamlining of the release process improved satisfaction and reduced delayed releases. Make developer productivity part of company goals and culture code. Advocate for developers to top management. Drive change by starting small, experimenting, and using tools as a last resort. Find ways to make teammates more productive.
Popular
JavaScript
Testing: Do More With Less
JSNation 2024JSNation 2024
27 min
Testing: Do More With Less
This talk focuses on practical approaches for testing Node.js applications, including the use of Dora metrics and the testing trophy strategy. It emphasizes the importance of covering critical flows with integration and end-to-end tests, while also considering the cost and speed of different test types. The speaker recommends mocking third-party services and using snapshot testing, but warns about the potential for false positives. Playwright is suggested as a preferred tool, and the importance of automated test execution is emphasized.
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challeng...
Temporal: Modern Dates and Times in JavaScript
JSNation US 2024JSNation US 2024
22 min
Temporal: Modern Dates and Times in JavaScript
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!
Peace, Love and JavaScript
Node Congress 2024Node Congress 2024
17 min
Peace, Love and JavaScript
The OpenJS Foundation supports the entire JavaScript ecosystem and thousands of open source projects. They follow a neutral nonprofit organization with separate business and technical governance to minimize drama. Rebooting governance and addressing intellectual property can also help reduce conflicts. OpenJS provides collaboration spaces and support in various areas for open source projects. They foster a collaborative environment and invite participation in their projects.
Future of Frontend Frameworks Fireside Chat
React Summit 2024React Summit 2024
28 min
Future of Frontend Frameworks Fireside Chat
Fred K. Schott
Minko Gechev
Ryan Carniato
Daniel Afonso
Aakansha Doshi
Tim Neutkens
6 authors
Signals are being adopted by popular frameworks, enabling code reuse and improved tooling. While merging between frameworks is unlikely, they are learning from each other and adopting shared practices. It is important to embrace the diversity of frameworks and libraries. Instead of merging, focus on standardizing the principles behind frameworks. Consider tradeoffs and benefits when choosing a framework, and explore different technologies to learn new ideas.
Webdevelopment Tailored for 2024
React Summit 2024React Summit 2024
7 min
Webdevelopment Tailored for 2024
Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.
React
Tanstack Start - A Client-Side First Full-Stack React Framework
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - A Client-Side First Full-Stack React Framework
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.
If You Were a React Compiler
React Summit US 2024React Summit US 2024
26 min
If You Were a React Compiler
Top Content
In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.
Is React Really Dying?
React Advanced 2024React Advanced 2024
29 min
Is React Really Dying?
Is React really dying? React is dead. Let's take a look at the numbers. Svelte is getting 1.5 million downloads per week. Angular is pulling 3.5. Probably not a competitor with React. React dwarfs everything with 25 million downloads a week. React is incredibly popular with 4 million users and developers. Despite some criticism, a survey shows that 71% of respondents liked React, while only 28% didn't. React's flexibility and options can be overwhelming for beginners. React's complexity has increased, causing confusion for beginners. Memory management, overcomplicated architecture, and innovation fatigue are common challenges in React. React 19 is delayed due to suspense issues. React server components are a favorite innovation. Qwik's hydration model is cool. Qwik is amazing, and it would be cool to see something like it for React. AI can help you get 80% there, but you still need an actual developer to tweak and clean up the code. Tab AI keeps your workflow going. React's popularity is undeniable. The momentum behind React is strong, and it's unlikely to fade away anytime soon.
Sketching with Code: Integrating React and p5.js
React Summit US 2024React Summit US 2024
30 min
Sketching with Code: Integrating React and p5.js
Hello React Summit! Senior software engineer building educational experiences at NewZella. Passionate about helping people get involved with open source. Creative coding journey started on Neopets. Have a CodePen with examples in p5.js, svg.js, and CSS. Talk is about p5.js and React, building an application to generate a grid pattern. Incorporating user inputs into the creative process using p5.js and React. Art exhibit at the Wellcome Museum inspired by generative art. True shade tiles and the 10 print algorithm inspired the pattern in our example. p5.js is a JavaScript library for creative coding, accessible to different backgrounds. Order is important in p5.js. React is better at managing complex state. Use the p5.js React wrapper to simplify integration. Use p5.js in instance mode to avoid naming collisions. Instance mode is safer and helpful as the project grows. Use destructuring to get values from input. Lerp color function creates color gradients. Use random seed for consistent random numbers in animations. Struggling with making the Canvas mobile-friendly. Animating P5.js sketches without relying on CSS. Optimizing canvas elements. P5.js and WebGL for 3D rendering. Conclusion and appreciation.
Let's Build Suspense 🥁
React Summit US 2024React Summit US 2024
20 min
Let's Build Suspense 🥁
Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
React Summit US 2024React Summit US 2024
12 min
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React Summit 2024React Summit 2024
22 min
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
React Advanced 2024React Advanced 2024
12 min
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
I'm Gil, a performance architect at Wix. Today, I'll explain how we use code splitting to improve website performance. Code splitting breaks down JavaScript into smaller chunks or React components, loading them only when needed. This reduces JavaScript size and improves user experience. We measure performance using Core Web Vitals, focusing on INP scores, which evaluate interactivity. Reducing JavaScript improves INP. Our INP scores have significantly improved, thanks to our code splitting techniques. Let's dive into the code splitting strategies we use, starting with dynamic import and React Lazy. Let's move on to a more advanced example: conditionally loading components on page load, not on user interactions. We fetch the comments data and render the comment section only if there are any comments. This method is supported in React 18 and works for server-side rendering (SSR). React components can be loaded dynamically on scroll or hover interactions with suspense. If the components are already rendered with SSR, we just need to download and hydrate them. This is only possible with the new suspense in server-side rendering (SSR). We use react-lazy with dynamic imports to render the component when it enters the viewport. I created a download on viewport wrapper that creates a ref and uses the intersection observer to resolve a promise when the component enters the viewport. I use the viewport and a wrapper that calls a function called use, which is implemented using the suspense API from React. This function is used to manage the promise and render the components only after it's resolved. The suspense component handles this promise. We moved props calculation to the server side and fetched them in the React component. This approach simplifies the process and can be implemented using the dynamic API in Next.js. By conditionally rendering components and calculating props on the server side, we can significantly reduce the amount of JavaScript code loaded in the client side, resulting in improved performance.
React in the Autonomous Robotics Industry
React Summit 2024React Summit 2024
11 min
React in the Autonomous Robotics Industry
Hamza Hawi, a software engineer at the Autonomous Robotics Research Center, discusses the use of React and Leaflet in robotics. The research center utilizes a mixed fleet of robots and relies on React for mission planning software, while Leaflet is used for mapping and custom layers. Leaflet offers flexibility for different types of vehicles and supports the creation of custom layers like image and video overlays. Additionally, the talk mentions the use of video overlays for weather forecasts and optimizing joystick usage with a strategy design pattern.
React Query - The Bad Parts
React Day Berlin 2024React Day Berlin 2024
30 min
React Query - The Bad Parts
Top Content
React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.
Free workshops
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Featured Workshop
Lazar Nikolov
Sarah Guthals
2 authors
Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to...
Deploy and Test Full-Stack React Apps on Cloudflare
React Summit US 2024React Summit US 2024
105 min
Deploy and Test Full-Stack React Apps on Cloudflare
Workshop
Dario Piotrowicz
Christian Sparks
2 authors
This 3 hour workshop will provide an introduction to the Cloudflare Developer Platform for application developers. It will focus on developing a full-stack React application backed by tests that can guarantee the correctness of its interactions with the resources and APIs provided by the Develope...
Powerful Data Visualisation with AG Grid & AG Charts
React Summit US 2024React Summit US 2024
107 min
Powerful Data Visualisation with AG Grid & AG Charts
Workshop
Mike Ryan
Mike Ryan
Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid & Charts libraries that...
Building Your Own GenAI Agent Application
React Summit US 2024React Summit US 2024
87 min
Building Your Own GenAI Agent Application
Workshop
Amit Mandelbaum
Idan Rozin
2 authors
GenAI agents are one of the most promising directions for complex GenAI based applications. These agents can search the web, code, and carry complex tasks completely autonomously for the user. In this workshop we will learn the basics of GenAI agents. Define the basic terms and frameworks...
Llms Workshop: What They Are and How to Leverage Them
React Summit 2024React Summit 2024
66 min
Llms Workshop: What They Are and How to Leverage Them
Workshop
Nathan Marrs
Haris Rozajac
2 authors
Join Nathan in this hands-on session where you will first learn at a high level what large language models (LLMs) are and how they work. Then dive into an interactive coding exercise where you will implement LLM functionality into a basic example application. During this exercise you will get a f...
Can LLMs Learn? Let’s Customize an LLM to Chat With Your Own Data
C3 Dev Festival 2024C3 Dev Festival 2024
48 min
Can LLMs Learn? Let’s Customize an LLM to Chat With Your Own Data
Workshop
Andreia Ocanoaia
Andreia Ocanoaia
Feeling the limitations of LLMs? They can be creative, but sometimes lack accuracy or rely on outdated information. In this workshop, we’ll break down the process of building and easily deploying a Retrieval-Augmented Generation system. This approach enables you to leverage the power of LLMs with...
How to Build Front-End Access Control with NFTs
React Summit 2024React Summit 2024
88 min
How to Build Front-End Access Control with NFTs
Workshop
Solange Gueiros
Solange Gueiros
Understand the fundamentals of NFT technology and its application in bolstering web security. Through practical demonstrations and hands-on exercises, attendees will learn how to seamlessly integrate NFT-based access control mechanisms into their front-end development projects.
Building Your Generative AI Application
React Summit 2024React Summit 2024
82 min
Building Your Generative AI Application
Workshop
Dieter Flick
Dieter Flick
Generative AI is exciting tech enthusiasts and businesses with its vast potential. In this session, we will introduce Retrieval Augmented Generation (RAG), a framework that provides context to Large Language Models (LLMs) without retraining them. We will guide you step-by-step in building your ow...
Build Peer-to-Peer Applications with Pear Runtime
JSNation 2024JSNation 2024
152 min
Build Peer-to-Peer Applications with Pear Runtime
Workshop
David Mark Clements
David Mark Clements
Learn how to rapidly build peer-to-peer applications with Pear Runtime. No servers required. Understand peer-to-peer paradigms and construct applications from well-defined building blocks. This workshop will cover how to create both Desktop and Terminal applications (with discussion for Mobile) t...
Upcoming events

Subscribe to the top JS conferences

and grow in-depth as engineer with insights from library authors and core teams

Learn more
JSNation 2025 logo
JSNation 2025
Amsterdam, Jun 12 - 16, 2025
React Summit 2025 logo
React Summit 2025
Amsterdam, Jun 13 - 17, 2025
Productivity Conf for Devs and Tech Leaders logo
Productivity Conf for Devs and Tech Leaders
Mar 27 - 28, 2025
Node Congress 2025 logo
Node Congress 2025
Apr 17, 2025
JSNation US 2025 logo
JSNation US 2025
New York, Nov 17 - 20, 2025
React Summit US 2025 logo
React Summit US 2025
New York, Nov 18 - 21, 2025
React Advanced 2025 logo
React Advanced 2025
London, Nov 27 - Dec 1, 2025