#javascript

Subscribe
Feeling like boosting up your career? In this section, you'll find free JavaScript courses, tutorials, and coding lessons to help you stay up-to-date with the latest developments in the JS ecosystem and take you from basic to advanced. Dive into it, and you'll find out that the world's most popular programming language is easy to learn.
Explore what's new in the 2024 editions of JSNation and React Summit!
Explore what's new in the 2024 editions of JSNation and React Summit!
Featured Article
JSNation and React Summit are the key JavaScript and React conferences of the year, expecting over 3K attendees, featuring 110+ speakers, and offering 15+ Free and PRO workshops altogether. All this excitement will be in Amsterdam and online in June! As always, you can expect deep and interactive talks, Q&A sessions, a food truck festival, activities to explore Amsterdam, and a ferry ride to the venue. And what's fresh this year?More Connections:
Making connections is the main focus of JSNation and React Summit  in 2024! Arriving solo? Fear not! During the conference days, you'll have plenty of opportunities to network and get to know others. If you're with friends, that's also awesome – you'll have many things to enjoy together!• Remember the Treasure Hunt? Or those puzzle-collecting competitions with fellow attendees? If you've been to one of GitNation conferences in-person, you definitely should. It's all about scouring the venue for treasure and getting prizes. This year, we've crafted something simpler to participate in, yet as much fun!• There are more gaming areas where you can relax during the breaks.• Compete in arcade machines to see who is better at football or kart racing.• Join in the buddy matchmaking activity to connect with like-minded attendees for engaging conversations.More Excitement:
Fun is something we all need, especially considering how focused we are during the workdays. So adding a bit more excitement to the conference can't be overlooked!• Start your day with a smartphone orchestra performance! The details are under wraps until you arrive – just be there on time.• We're not letting the biggest JavaScript and React party end too soon – come join us for an after-afterparty at a special place, where the fun keeps rolling! And guess what? The party doesn't stop there – you'll also receive a list of cool bars to explore and keep the networking alive until the morning!• What is more, this year we're inviting you to join the C3 Dev Festival party. Get ready to dive into performances from over 18 DJs, live coders, and famous artists!More Gastronomic Delights:
We understand that good food matters, so there will be something tasty for everyone!• Rest assured, we'll have healthy, vegan, and gluten-free options available.• Are you a burger lover? No worries, we've doubled up on last year's most popular food truck with burgers.• Hungry for more? We'll hook you up with a list of good restaurants to check out before or after the conference.More Ease and Relaxation:
We're working hard to ensure your conference experience goes smoothly! So you can focus on networking, learning, and having fun without any distractions!• Take part in uninterrupted discussion rooms located in quiet zones, speed through registration with faster lines at the pre-party and badge pick-up, and easily find your way around the conference with better signage.• Stay focused with soundproofing improvements and stay connected with discounted e-SIMs with data and charging stations at the working area.• Plus, enjoy breaks every 4 talks on remote days to stay refreshed and engaged.With an array of enhancements inspired by your valuable feedback, JSNation and React Summit 2024 promise an experience like never before. Have more ideas stirring in your mind? After each conference, we send out a link to gather feedback. If you could spare a moment to share your thoughts, we'd really appreciate it! Your input is valuable to us. We're committed to continually improving for you. Can’t wait to see you at the conference!
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
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 challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
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.
JavaScript Haikus: My Adventures in Tiny Coding
JS GameDev Summit 2023JS GameDev Summit 2023
27 min
JavaScript Haikus: My Adventures in Tiny Coding
This Talk is about writing super tiny JavaScript programs, known as tiny code. It explores the concept of code golf and the use of a live editor for instant feedback. The Talk discusses various ways to share tiny code, including Twitter.net. It also covers creating graphics, games, and sound in a small space. The speaker highlights inspiring tweets and showcases examples of tiny code, including asemic writing. The future of tiny code includes new techniques, better browser support, and AI-assisted programming.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
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.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Webpack in 5 Years?
JSNation 2022JSNation 2022
26 min
Webpack in 5 Years?
Top Content
In the last 10 years, Webpack has shaped the way we develop web applications by introducing code splitting, co-locating style sheets and assets with JavaScript modules, and enabling bundling for server-side processing. Webpack's flexibility and large plugin system have also contributed to innovation in the ecosystem. The initial configuration for Webpack can be overwhelming, but it is necessary due to the complexity of modern web applications. In larger scale applications, there are performance problems in Webpack due to issues with garbage collection, leveraging multiple CPUs, and architectural limitations. Fixing problems in Webpack has trade-offs, but a rewrite could optimize architecture and fix performance issues.
Towards a Standard Library for JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
Towards a Standard Library for JavaScript Runtimes
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
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.
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.
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.
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.
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Day Berlin 2023React Day Berlin 2023
149 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
Rise of the Robots
TestJS Summit 2023TestJS Summit 2023
27 min
Rise of the Robots
This Talk discusses the possibility of robots taking over based on Asimov's three laws of robotics. It explores the use of automation robots for testing, including building and controlling them. The Talk also covers implementing interfaces, conducting math game challenges, and the capabilities of automation testing. It addresses questions about responsive design, camera attachment, and the future roadmap. The affordability of the setup and the potential for future automation are also discussed, along with a rapid fire Q&A session.
I Run Code From the Internet!
React Advanced Conference 2023React Advanced Conference 2023
20 min
I Run Code From the Internet!
Watch video: I Run Code From the Internet!
npm packages are unsanitized inputs from the internet that we run without much scrutiny, so we need to address the issue of malicious packages. Lavamote offers proactive runtime protections to automatically detect and mitigate threats. Lava Mode uses Hardened JavaScript to provide isolation and enforce a policy for your application's build process. The talk introduces a webpack plugin for those who don't want to use the browserify ecosystem. Lavamote's behavior is explored, showcasing how it restricts package access to certain properties. Beta testing is open to gather feedback and improve Lava Mode.
Leveraging the Event Loop for Blazing-Fast Applications!
React Advanced Conference 2023React Advanced Conference 2023
35 min
Leveraging the Event Loop for Blazing-Fast Applications!
Watch video: Leveraging the Event Loop for Blazing-Fast Applications!
This talk covers the event loop, microtask queue, and provides a live demo. JavaScript is single-threaded but can perform tasks that only a multithreaded environment can. The event loop consists of a call stack and microtask queue, which allow JavaScript to run non-blocking operations. Leveraging the microtask queue can lead to significant performance improvements in applications, such as React. However, it is important to use it correctly to avoid issues like infinite loops.
Game Development Patterns and Architectures in JavaScript
JS GameDev Summit 2023JS GameDev Summit 2023
28 min
Game Development Patterns and Architectures in JavaScript
Today's Talk covers game design and architecture, including entity component systems, game loops, and decoupling game logic from rendering. Entity component systems are popular in JavaScript game development for representing games as entities and their components as behavior on data. Game loops control the flow of the game and updating its state, with different architectures like fixed time step and variable time step. Decoupling game logic from rendering improves performance and flexibility, allowing for independent updates and easy addition of new features. Having a clear separation of concerns in game development improves performance, increases flexibility, and makes debugging easier.
Unleashing Object Proxies: Building Type-Safe Wrappers for Anything
TypeScript Congress 2023TypeScript Congress 2023
16 min
Unleashing Object Proxies: Building Type-Safe Wrappers for Anything
Object proxies are middleware for objects that allow control over input and output. They have various use cases such as controlling data access, adding logging, and handling responses. Implementing object proxies involves transpiling calls into network requests and handling property access and method calls. Handling object proxy traps and errors involves faking object structure, logging target objects and properties, and resolving errors. Making API calls with object proxies involves defining the correct type, making backend calls, and wrapping methods to return promises. Object proxies are widely used in ORMs and RPC libraries and should be explored and experimented with.
Are the (module) types wrong?
TypeScript Congress 2023TypeScript Congress 2023
30 min
Are the (module) types wrong?
This Talk discusses module system complexities and terminology, TypeScript and Node disagreements, and fixing TypeScript errors with the Helmet package. It also explores module resolution and type disagreements, challenges with TypeScript and Node support, and the need for improvements in popular packages.
Generating types without climbing a tree
TypeScript Congress 2023TypeScript Congress 2023
30 min
Generating types without climbing a tree
This talk explores the challenges and benefits of generating types for APIs. The speaker discusses the need for a better client experience and the popularity of generating clients. They also explain the use of OpenAPI for generating REST API clients and the use of Cold Block Writer for code generation. The talk covers the process of defining types for parameters and responses, generating the client and request, and using the generated client. The speaker also touches on validation in production and the initial challenges with TypeScript.
Generating Typed Code
TypeScript Congress 2023TypeScript Congress 2023
22 min
Generating Typed Code
Today, I'm going to be talking about how type generation helped reduce bugs and improve our developer experience at Rollbar. The Monolith tech stack is built primarily on Python Pyramid, a web framework that's similar to Django, Ruby on Rails, or Express. To address debugging, performance, and code navigation challenges, we migrated to a tech stack that includes TypeScript, Next.js, GraphQL, and React Query. Codegen is used to generate TypeScript code on both the server and client side, enhancing debugging, performance, and code navigation.
What is "TC39: Type Annotations" aka the Types as Comments proposal
TypeScript Congress 2023TypeScript Congress 2023
27 min
What is "TC39: Type Annotations" aka the Types as Comments proposal
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.
Zod === Typescript, but at Runtime in Your React Applications
React Summit 2023React Summit 2023
8 min
Zod === Typescript, but at Runtime in Your React Applications
Watch video: Zod === Typescript, but at Runtime in Your React Applications
Today's Talk discusses how Zod, an NPM library, can guarantee the TypeSystem at runtime, providing all the benefits of TypeScript. Zod's parse method allows for checking if objects match the schema, creating a validation layer between applications and APIs. By combining TypeScript with Zod, developers can ensure type safety at both runtime and build time, preventing code execution with incorrect data and improving the user experience.
Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
This Talk explores the challenges and solutions in video encoding with web codecs. It discusses drawing and recording video on the web, capturing and encoding video frames, and introduces the WebCodecs API. The Talk also covers configuring the video encoder, understanding codecs and containers, and the video encoding process with muxing using ffmpeg. The speaker shares their experience in building a video editing tool on the browser and showcases Slantit, a tool for making product videos.
How I Like to Write JavaScript
JSNation 2023JSNation 2023
26 min
How I Like to Write JavaScript
Caleb Porzio introduces Alpine JS, a JavaScript framework, and demonstrates the process of creating a scrappy version of AlpineJS and refactoring it. The Talk covers topics such as creating a Dom Walker, evaluating expressions, using mutation observers, and refactoring the code. It also discusses techniques like inverting conditionals, using callbacks, and parameter currying. The Talk emphasizes the importance of abstraction, handler extraction, and a declarative approach in software development.
JavaScript Iteration Protocols
JSNation 2023JSNation 2023
27 min
JavaScript Iteration Protocols
We are working on troubleshooting a production issue in a startup. The CTO identified a problem with loading large files into memory and suggested reading the file line by line. We learn about iterators and generators in JavaScript, which allow us to process data one item at a time. Generators can be used to combine async and generator functions for file processing. The speaker also discusses using a for loop instead of map, filter, and reduce. The Talk concludes with the speaker mentioning poly-filling the implementation using core.js and offering free workshops on iteration protocols and Node.js streams.
Let’s Get Visual - Visual Testing in Your Vue.JS Project
Vue.js London 2023Vue.js London 2023
22 min
Let’s Get Visual - Visual Testing in Your Vue.JS Project
This Talk discusses the importance of fixing small UI errors and typos, as they can leave a negative impression and raise questions about trust in applications. Traditional testing methods may not catch all UI errors, so visual testing is introduced as a solution. The Visual Regression Tracker is recommended as a tool for managing visual test results. Best practices for visual testing include ensuring the application is fully loaded, addressing flakiness, and handling false negatives. The key lessons include giving tests eyes, looking beyond the given path, using visual testing, and covering the original with suitable tests if consistent results can't be obtained.
JavaScript-based full-text search with Orama everywhere
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
Michele Riva
Michele Riva
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Securing Your Software Supply Chain
Node Congress 2023Node Congress 2023
21 min
Securing Your Software Supply Chain
Today's Talk focuses on securing the software supply chain, particularly in the JavaScript ecosystem. The number of transitive dependencies in JavaScript projects can contribute to vulnerabilities. Attacks on the open-source supply chain have increased significantly, leading to initiatives to improve supply chain security. Accuracy in package manager dependencies is crucial, and caching and bundling dependencies can help achieve reproducible installations. Mitigating threats involves active scanning, creating profiles, and sharing information. Tools like NPM Audit Signatures can verify package integrity. Future developments include reproducible installations and powerful dependency queries.
Parse, Don’t Validate
Node Congress 2023Node Congress 2023
26 min
Parse, Don’t Validate
Evgeny Poberezkin
Jason Green
2 authors
Hello. We're going to talk today about JavaScript and how to ensure data correctness. JSON can be wasteful and has security issues, but Fastify tackles these challenges. JTD is better than JSON Schema for most API use cases, as it has a more strict structure and avoids debugging issues. Jason demonstrates how to validate data with JTD and TypeScript, ensuring data validity and improving performance. The approach of parsing JSON directly to the application type and serializing a specific type improves security and reliability.
Roll you own JavaScript runtime
Node Congress 2023Node Congress 2023
21 min
Roll you own JavaScript runtime
This Talk introduces Deno, a custom JavaScript runtime similar to Node.js, and discusses the benefits of using a custom runtime. It explores the process of building a custom runtime with Deno in Rust, including the integration with Cargo and the ability to mix and match crates and APIs. The Talk also covers the implementation of the setTimeout function in both Run.js and Runtime.js, and provides examples of how to fix errors and implement additional functions. Overall, the Talk highlights the flexibility and possibilities of creating custom runtimes with Deno.
Things I learned while writing high-performance JavaScript applications
Node Congress 2023Node Congress 2023
31 min
Things I learned while writing high-performance JavaScript applications
Top Content
This talk explores the creation of a full-text search engine in JavaScript, highlighting the challenges with existing search engines like Algolia and the advantages of using JavaScript. The speaker emphasizes the importance of code optimization and performance enhancement techniques in JavaScript. The talk also discusses the evolution of the Lyra search engine into the open-source project Orama, which offers a feature-rich and highly performant full-text search engine for JavaScript. The speaker addresses questions about language choice, scalability, and deployment, and showcases the benefits of deploying an immutable database to a CDN.
Eval all the strings! - Hardened JavaScript
Node Congress 2023Node Congress 2023
8 min
Eval all the strings! - Hardened JavaScript
NPM packages can be potentially dangerous, so it's important to be proactive in managing them. Lava Mode allows you to detect and investigate suspicious packages before deploying your app. Lavamote prevents unauthorized access to sensitive resources by isolating dependencies and using hardened JavaScript. Lava Mode makes it easier to analyze obfuscated files and understand their actions.
JS Character Encodings
Node Congress 2023Node Congress 2023
33 min
JS Character Encodings
Character encodings are important for converting characters into bytes. UTF-8 is the most commonly used encoding in JavaScript. JavaScript engines handle character encodings automatically. There are bugs in Node.js related to character encoding and string manipulation. It is important to be cautious when working with character encodings and to choose the appropriate method for string manipulation.
Prototype Pollution in JavaScript
Node Congress 2023Node Congress 2023
27 min
Prototype Pollution in JavaScript
This Talk discusses prototype production in JavaScript and focuses on the concept of prototype pollution. It explains the impact of prototype pollution and ways to avoid it. The Talk also highlights real-world examples of prototype pollution vulnerabilities in Kibana and MongoDB. It provides recommendations for preventing and mitigating prototype pollution, such as filtering out merge functions and using defensive objects. The Talk concludes with a discussion on tools like Semgrep for static analysis and the importance of sanitization and validation in preventing outside attacks.
0 to Auth in an Hour Using NodeJS SDK
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Remix Persistence With DynamoDB
Remix Conf Europe 2022Remix Conf Europe 2022
41 min
Remix Persistence With DynamoDB
DynamoDB is a next-generation key-value database that is low-latency, scalable, and easy to use. It offers advantages such as local development options, a generous free tier, and fast performance. Common misconceptions about DynamoDB being expensive or hard to learn are debunked. The Talk covers topics like basic modeling, separating concerns, working with DynamoDB in Remix, and building a DynamoDB client. Overall, DynamoDB is a powerful database that integrates well with Remix and provides efficient data access patterns.
React Remixed
Remix Conf Europe 2022Remix Conf Europe 2022
19 min
React Remixed
Remix is a full stack web framework that focuses on the user interface and works back to web standards. It eliminates render and fetch waterfalls in web applications, resulting in improved performance. Remix leverages the foundations of the web and combines them with features like HTTP caching and dynamic server rendering. It allows for progressive enhancement and speeds up the user experience. Remix is a powerful tool for web development with great potential for the future.
Remixing How We Give
Remix Conf Europe 2022Remix Conf Europe 2022
32 min
Remixing How We Give
Daphne uses Remix for their web application, benefiting from its resilience, error boundaries, cache boundaries, and progressive enhancement. Remix simplifies form submission, authorization, and validation, and allows for easier refactoring and code duplication avoidance. Next and Remix are used together, with Remix serving as the backend for the frontend and handling data aggregation. Remix provides query functions for fetching data, mutations for form data validation and API calls, and custom conventions using the handle export. Migrating to Remix resulted in smaller JavaScript files, faster navigation, and the ability to preload data and assets. The migration process took around nine months and involved mixing Next.js and Remix using Express. Hiring someone to work on Remix is easier than hiring for other frameworks.
The New Frontier: E-Commerce at the Edge
Remix Conf Europe 2022Remix Conf Europe 2022
19 min
The New Frontier: E-Commerce at the Edge
Today's Talk discusses the new frontier of e-commerce at the edge, focusing on headless commerce and the benefits it offers. The edge, an intermediate server, can improve website loading by rendering HTML on the server and reducing latency. Venger, an open-source headless e-commerce framework, is introduced as a solution to cache API responses at the edge and improve performance. The Venger online shop demonstrates excellent performance, highlighting the benefits of headless and edge computing in e-commerce.
Remixing a Symfony
Remix Conf Europe 2022Remix Conf Europe 2022
19 min
Remixing a Symfony
This Talk discusses Harvey's performance journey and how it led to the adoption of Remix. The engineering team addressed scaling and performance issues through backend fixes and frontend improvements. The redesign focused on loading products by category and prioritizing performance. The implementation of Remix resulted in improved performance and a reduction in API requests. The focus on long-term scalability is essential for handling a growing product list and customer base.
Demystifying Web Accessibility
Remix Conf Europe 2022Remix Conf Europe 2022
11 min
Demystifying Web Accessibility
Web accessibility ensures that people with disabilities can use and participate equally on the web. Over 15% of the global population has some form of disability. Improving web accessibility can be done using tools like ex-DEV tools and the web disability simulator. Color contrast plays a crucial role in readability, and semantic HTML and tab order help with functionality and user flow. There are additional tools and extensions available for further exploration.
Let’s Remix to Localize Content!
Remix Conf Europe 2022Remix Conf Europe 2022
36 min
Let’s Remix to Localize Content!
This Talk introduces Remix and internationalization, highlighting the impact and importance of internationalization in software development. It explores different approaches to internationalizing URLs and the use of Remixi18next for internationalization in Remix. The Talk covers the creation and configuration of translated files, as well as the importance of loading translation files before hydration for improved performance. It discusses the challenges and benefits of localization, including the use of folder-level translation and dynamic routes. The Talk also touches on different translation approaches and the importance of considering user experience and understanding in different languages.
How Remix and Prisma Make Frontend Devs Fullstack
Remix Conf Europe 2022Remix Conf Europe 2022
22 min
How Remix and Prisma Make Frontend Devs Fullstack
Remix and Prisma enable front-end developers to become full-stack developers by working across different parts of the stack without diving into complexities. They provide a great framework for writing code and interacting with databases, making it easier to be a full-stack developer. Prisma's ORM allows mapping database models to JavaScript or JSON models. Developing a full stack app with Remix requires structuring components and loaders differently, but simplifies development by focusing on one place.
Remix Architecture Patterns
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Top Content
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.
E2E Tests for Web3 Applications
TestJS Summit 2022TestJS Summit 2022
21 min
E2E Tests for Web3 Applications
Top Content
In this Talk, Rafaela discusses Web3, its decentralized and token-based model, and the architecture based on smart contracts. Testing Web3 poses challenges due to the need for third-party providers like MetaMask. Approaches such as mocking the Web3 flow and using end-to-end testing tools like Taskafar are suggested. The trade-offs in Web3 testing include test speed and dependency on third-party apps. Balancing unit, integration, and end-to-end tasks is crucial for a robust testing strategy.
Playwright Can Do This?
TestJS Summit 2022TestJS Summit 2022
23 min
Playwright Can Do This?
Playwright is a powerful tool for end-to-end testing, offering support for all major browsers and platforms. It provides features like parallelization, built-in waiting, and assertions. Playwright allows for running tests on multiple browsers with a single command and has functionality for generating tests and performing visual regression testing. It also enables the manipulation of the network layer and loading internals of web pages. Best practices include using short and idempotent scripts, splitting user account flows into separate tests, and cleaning up after each test case.
Using Tests for What?!
TestJS Summit 2022TestJS Summit 2022
11 min
Using Tests for What?!
Today's Talk introduces VEST, a form validation framework that combines the syntax and style of Unitest with form validation. The lack of structure in form validation is a major problem, leading to messy and difficult-to-maintain code. Testing forms and form validation can be challenging, especially with complex logic. VEST offers a solution by allowing the creation of a form validation suite using unit tests. It provides features like multiple validations per field, async validations, and memoization, with support for any JavaScript environment and full TypeScript support.
Zero Dependency Testing With Node.js
TestJS Summit 2022TestJS Summit 2022
10 min
Zero Dependency Testing With Node.js
Today's Talk is about zero dependency testing with Node.js. The new test runner in Node.js supports CLI and standalone file execution, and different test runner styles are supported. Writing tests with Node.js is simple using its assert and test modules. The test runner passed one test and failed another, and future work includes implementing a tap parser and adding code coverage and mocking features.
Overtesting: why it happens and how to avoid it
TestJS Summit 2022TestJS Summit 2022
7 min
Overtesting: why it happens and how to avoid it
This talk is about overtesting, a technique to improve test suites and testing proficiency. It addresses the common problem of spending excessive time on maintaining test suites. The goal is to maintain 100% coverage while spending equal or less time on test suites. The talk suggests splitting tests into functional units, using expect object containing for manageable expectations, and prioritizing ease of testing and time spent.
Automated Security Testing for JS Apps
TestJS Summit 2022TestJS Summit 2022
9 min
Automated Security Testing for JS Apps
At StackHawk, we do application security testing, specifically dynamic application security testing. Legacy DAST tools are not effective for testing JavaScript front ends and APIs. To achieve better testing, it is essential to drive the API directly using industry standards like postman collections, OpenAPI spec, GraphQL, and introspection queries. StackHawk simplifies finding and fixing security issues in applications, integrating with CI/CD processes and providing simple descriptions and examples. Start a free trial at stackhawk.com to improve software quality.
Challenges of Testing and Monitoring WebRTC Applications
TestJS Summit 2022TestJS Summit 2022
21 min
Challenges of Testing and Monitoring WebRTC Applications
WebRTC is an HTML5 specification for real-time media communications between browsers and devices, with challenges in testing and monitoring. Browsers frequently update, potentially breaking WebRTC applications. Testing requires browser automation, consideration of network conditions, and device characteristics. Virtual machines and raw data injection are important for testing. Manual testing is necessary for specific workflows and scalability. Orchestrating multiple machines in the cloud and validating video, packet loss, and bit rate are challenges. Visibility and analysis of WebRTC API calls and metrics are crucial. TestRTC by Spearline offers testing and monitoring solutions.
Delightful Integration Tests With Testcontainers
TestJS Summit 2022TestJS Summit 2022
21 min
Delightful Integration Tests With Testcontainers
Top Content
Testing is crucial for development and production, with integration tests becoming more popular. Test containers is a library that integrates with Docker to create reliable test environments. It is flexible and can be used with various frameworks and test libraries. The IDE setup involves configuring the container and connecting it to the application. Test containers can be used for complex operations and allows running tests with real dependencies.
Unit Testing Angular Applications
TestJS Summit 2022TestJS Summit 2022
24 min
Unit Testing Angular Applications
This talk explores unit testing in Angular applications, covering topics such as testing front-end applications, specifics of testing Angular, best practices, and educational resources. It discusses the anatomy of a unit test in both Jasmine and Jest, the setup and initial tests in Angular, testing user interaction and event handlers, testing rendered output and change detection, and unit testing parent components with child components. It also highlights best practices like using test doubles, testing components with dependency injection, and considerations for unit testing. Code coverage is emphasized as a metric that doesn't guarantee bug-free code.
Beyond Rest - Contract Testing in the Age of gRPC, Kafka and GraphQL
TestJS Summit 2022TestJS Summit 2022
22 min
Beyond Rest - Contract Testing in the Age of gRPC, Kafka and GraphQL
This talk explores the challenges of API communication in a multi-protocol environment and the limitations of REST. It discusses how contract testing can address these challenges by focusing on API communications and reducing reliance on end-to-end tests. The talk also examines the limitations of specifications like OpenAPI and JSON schema and the challenges of endpoint evolution and versioning. It highlights the benefits of consumer-driven contract testing in ensuring API compatibility and provides an overview of the PACT framework as a standardized solution.
Testing Mail Service With Playwright
TestJS Summit 2022TestJS Summit 2022
17 min
Testing Mail Service With Playwright
Top Content
This Talk discusses how to test mail service with Playwright, covering e-mail verification, reset password user journey, and more. It explores the use of third-party providers for reliable e-mail delivery and demonstrates how Playwright can help perform checks on e-mail content. The Talk also introduces the concept of a fake SMTP server and showcases how fixtures can be used to access the SMTP server and perform assertions on the HTML body of emails. Playwright's HTML rendering feature allows for interaction with email content as if it were a regular web page. It highlights the ability to render HTML from API calls, perform assertions on the rendered page, and exclude dynamically generated data from visual regression tests.
Machine Learning based Unit Tesing in JavaScript
TestJS Summit 2022TestJS Summit 2022
22 min
Machine Learning based Unit Tesing in JavaScript
This talk explores machine learning-based unit testing in JavaScript and TypeScript, focusing on tools like the Pony Code VS Code extension and GitHub Copilot. The Pony Code tool provides a graphical user interface for generating and managing unit test cases. GitHub Copilot acts as an intelligent code auto-completion tool, understanding the context of the code and suggesting unit test cases. These tools aim to improve code coverage and achieve 100% coverage.
Dissecting Complexity in Tests
TestJS Summit 2022TestJS Summit 2022
15 min
Dissecting Complexity in Tests
Today's Talk discusses complexity in tests and how to effectively deal with it. The speaker emphasizes the importance of testing critical user-facing paths and modeling tests from the user's perspective. They also highlight the significance of creating a testing setup that allows any test to run smoothly and the implicit testability of a well-designed system. The Talk explores the impact of choosing the right testing environment, the role of testing setup in mitigating complexity, and the importance of test structure and expectations. The speaker provides practical tips for tackling complexity in tests, such as keeping tests flat, using helper utilities, and splitting tests into separate files.
How to Choose an Automation Tool
TestJS Summit 2022TestJS Summit 2022
21 min
How to Choose an Automation Tool
I am Lia, a software engineer at Nocare, and I'm going to show you a process to choose an automation tool. I'll compare three frameworks and discuss other integration options. Selenium is a well-established framework with a large community, but it requires third-party integrations for certain types of tests. Cypress is an all-in-one tool that supports unit testing, but it only works with JavaScript and lacks parallel testing capabilities. Playwright is a newer framework that is more complete and supports parallel testing, but it has a smaller community and less mature documentation. If you want a framework that does it all, choose Playwright. Documentation is essential to remember your initial thoughts, show others what is being tested, and establish good practice. Once you have your test list, chosen framework, and prioritizations, schedule a meeting with management. Present your work confidently, as it is the best approach for the team and product.
Automate WebApp Security Testing using GitHub Actions (from StackHawk team)
TestJS Summit 2022TestJS Summit 2022
87 min
Automate WebApp Security Testing using GitHub Actions (from StackHawk team)
WorkshopFree
Zachary Conger
Zachary Conger
Software development has changed - Frequent deployments, APIs, GraphQL, Cloud Architecture and CI/CD Automation are the norm. So why is security testing the same way it was a decade ago?
Leading teams are realizing that periodical penetration testing and security audits is not enough when code is being shipped daily. Instead, these teams are using developer-centric tools to run automated security testing in a CI/CD pipeline. Join Zachary Conger as he walks through how to automate application JS security testing using GitHub actions.
Getting Started with AG Grid and React – The Best Javascript Grid in the World
React Advanced Conference 2022React Advanced Conference 2022
140 min
Getting Started with AG Grid and React – The Best Javascript Grid in the World
WorkshopFree
Brian Love
Brian Love
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
JSNation 2022JSNation 2022
99 min
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
WorkshopFree
Matthew Salmon
Matthew Salmon
npm and security, how much do you know about your dependencies?Hack-along, live hacking of a vulnerable Node app https://github.com/snyk-labs/nodejs-goof, Vulnerabilities from both Open source and written code. Encouraged to download the application and hack along with us.Fixing the issues and an introduction to Snyk with a demo.Open questions.
JS Security Testing in GitHub Actions
JSNation 2022JSNation 2022
101 min
JS Security Testing in GitHub Actions
WorkshopFree
Zachary Conger
Zachary Conger
This workshop will focus on automating software composition analysis, static application security testing and dynamic application security testing using GitHub Actions. After a brief introduction covering the different types of application security and the importance of finding security vulnerabilities before they hit production, we'll dive into a hands-on session where users will add three different security testing tool to their build pipelines.
Build Web3 apps with Javascript
JSNation 2022JSNation 2022
49 min
Build Web3 apps with Javascript
WorkshopFree
Shain Dholakiya
Shain Dholakiya
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for JavaScript developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”Learn more about the Hyperverse here.We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have JavaScript experience.
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
🚀 Supercharge your NodeJS with Rust
JSNation 2022JSNation 2022
21 min
🚀 Supercharge your NodeJS with Rust
In this Talk, Dmitry Kudravtsev discusses how to supercharge JavaScript and Node.js using Rust. He introduces NEON, an open-source library for integrating Rust and JavaScript, and explains how to use it to export Rust functions to JavaScript. Dmitry also explores the performance benefits of using native modules written in Rust and WebAssembly. He compares the two approaches and highlights the faster performance of Rust native modules. He concludes by recommending WebAssembly for its ergonomics and portability, while suggesting native modules for extending Node.js with performance code.
Build Blockchain dApps using JavaScript
JSNation 2022JSNation 2022
21 min
Build Blockchain dApps using JavaScript
Hello, my name is Russ Fustino, and welcome to Build Blockchain DApps Using JavaScript. We'll cover Algorand blockchain, layer one, setup your development environment, creating a simple DApp, verification, and UI controls from pipeline. Blockchain tools are now accessible to anyone for creating liquidity pooling, staking, and more. The Italian Society of Authors and Publishers is using NFTs on the Algorand blockchain to identify copyrights. Algorand accounts, ASAs, Atomic Transactions, Algorand Smart Contracts, and reporting with Indexer are part of the solution. Creating NFTs can be done using visual tools like Algodesk.io and wallets like Algosigner and MyAlgoWallet. Algorand atomic transfers guarantee the exchange of goods and facilitate decentralized applications. Smart signatures approve spending transactions and smart contracts facilitate global and local storage. DApp architecture includes a UI front end, payment transactions between accounts, asset transactions for NFTs and Fungible Tokens, and application calls for smart contracts. Various SDKs and tools are available, such as AlgoDesk.io, Algorand Studio, and Algodia. Reach is a high-level language and compiler for deploying DApps to the blockchain. Verification and audits play a crucial role in preventing locked away tokens. The Pipeline UI offers controls and components for easy integration into solutions.
Quantum Computing in JavaScript with Q.js
JSNation 2022JSNation 2022
26 min
Quantum Computing in JavaScript with Q.js
Stuart Smith discusses his journey in virtual reality and quantum computing, highlighting his work in web VR and the creation of Quantum JavaScript. He introduces QGS, a platform for quantum tutorials and experimentation, and explains the concept of qubits and superposition. Smith also mentions Amazon Bracket, a quantum service that allows the building and running of quantum circuits on simulators or actual quantum hardware.
Future Features of JS?!
JSNation 2022JSNation 2022
28 min
Future Features of JS?!
Top Content
Welcome to the future features of JavaScript, including proposals for array operations, throw expressions, records and TPUs, pipeline operators, and more. The talk covers the introduction of type assertions for imported files, non-mutating array operations, and the simplification of error handling. It also explores the concept of immutability with records and TPUs, and the use of the pipeline operator to simplify code. Other proposals include Map.implace, IteratorHelper, slice notation, type annotations, Array UNIQBY, number ranges, and the Function 1 proposal.
How JS Modules work: a Browser Perspective
JSNation 2022JSNation 2022
26 min
How JS Modules work: a Browser Perspective
This Talk discusses JavaScript modules from the perspective of a browser, exploring how they work and their differences from common JS. It covers topics such as loading modules, module records, and the module map. The module loading and evaluation process is explained, along with the challenges of module adoption and performance. The Talk also touches on lazy loading, dynamic import, and import reflection. The speaker shares a humorous anecdote during the Q&A session about stealing a shirt from the DOM team.
Record & Tuple: Immutable Data Structures in JS
JSNation 2022JSNation 2022
24 min
Record & Tuple: Immutable Data Structures in JS
Top Content
Today's Talk introduces the concept of record and tuple in JavaScript, which provide a new way to handle data. The Talk explores the references and mutability of objects, strings, and numbers in JavaScript. It discusses the limitations of freezing objects and proposes record and tuple as a solution. The Talk also covers methods and syntax for tuples, the status of the proposal, and acknowledges the contributions of various individuals. Overall, the Talk aims to redefine how data is handled in JavaScript and encourages waiting for broader browser support before implementing these features.
Yarn 4 - Modern Package Management
JSNation 2022JSNation 2022
28 min
Yarn 4 - Modern Package Management
Top Content
Yarn is a package manager that focuses on stability, performance, and security. It offers unique features like plug and play installation, support for nonmodules, and the exec protocol. Yarn is committed to being a good citizen in the open-source community and contributes to fixing dependencies. It is part of the Node.js Loader's working group and advocates for Corepack. Yarn is still experimental but is improving its user experience and security features. Contributions are welcome, and switching to Yarn can improve performance in large projects.
Alternatives to TypeScript
TypeScript Congress 2022TypeScript Congress 2022
8 min
Alternatives to TypeScript
This Talk explores alternatives to TypeScript such as Clojure, Flow, and Hagel, highlighting their unique features and syntax. Flow and Hagel make finer distinctions between types and prioritize safety. TypeScript offers quick fixes for inferring types. Hagel aims for fewer type annotations and increased safety. These alternatives can provide insights and understanding of TypeScript.
A Comparison of Web Workers
Node Congress 2022Node Congress 2022
25 min
A Comparison of Web Workers
This Talk compares web workers, including dedicated workers, shared workers, and service workers. Web workers provide multithreading capabilities and use shared memory for higher performance. Dedicated workers have one parent and can execute on a separate thread. Shared workers can have multiple parents and are useful for communication across different windows. Service workers can intercept and proxy requests made from a web page and are useful for caching network assets and building progressive web apps.
Understanding JavaScript Compilation
Node Congress 2022Node Congress 2022
8 min
Understanding JavaScript Compilation
Today's Talk explores the concepts of compilation and transpilation in JavaScript, highlighting the three steps involved: parsing, code transformation, and code generation. The process of traversing an abstract syntax tree is discussed, with examples of tools like Babel and ESLint that can be used for code transformations. Code transformation tools and techniques, such as CodeShift and T-TypeScript plugin, are introduced, emphasizing the power of abstract syntax trees and the visitor pattern. The summary concludes by encouraging further exploration of code refactoring and transformations using tools like Babel, TSLint, and astexplorer.net.
The Future of JavaScript Runtimes
Node Congress 2022Node Congress 2022
34 min
The Future of JavaScript Runtimes
Today's Talk explores the future of JavaScript runtimes, their evolution, and impact on software development. It discusses the historical trends of JavaScript, the adoption of new tools and libraries, and the convergence of Node and Deno. The emergence of isolate clouds and their potential to replace traditional VMs and containers is also highlighted. Additionally, the talk touches on the possibilities of JavaScript in exotic use cases, its impact on machine learning, and the potential for TypeScript to become the de facto language for JavaScript development.
Back to the basics
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
Guillermo Gutierrez Almazor
Guillermo Gutierrez Almazor
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.
Technical SEO & JavaScript
Vue.js London Live 2021Vue.js London Live 2021
8 min
Technical SEO & JavaScript
Technical SEO is important for making content visible to search engines. Developers have a significant impact on the crawling and indexing process. Hash-based routing can lead to duplicate content issues, and it is recommended to use the History API instead. In 2019, 12% of websites still used fragmented URLs.
Charlie Gerard's Career Advice: Be intentional about how you spend your time and effort
Charlie Gerard's Career Advice: Be intentional about how you spend your time and effort
Article
Charlie Gerard
Charlie Gerard
When it comes to career, Charlie has one trick: to focus. But that doesn’t mean that you shouldn’t try different things — currently a senior front-end developer at Netlify, she is also a sought-after speaker, mentor, and a machine learning trailblazer of the JavaScript universe. "Experiment with things, but build expertise in a specific area," she advises.
What led you to software engineering?My background is in digital marketing, so I started my career as a project manager in advertising agencies. After a couple of years of doing that, I realized that I wasn't learning and growing as much as I wanted to. I was interested in learning more about building websites, so I quit my job and signed up for an intensive coding boot camp called General Assembly. I absolutely loved it and started my career in tech from there.
What is the most impactful thing you ever did to boost your career?I think it might be public speaking. Going on stage to share knowledge about things I learned while building my side projects gave me the opportunity to meet a lot of people in the industry, learn a ton from watching other people's talks and, for lack of better words, build a personal brand.
What would be your three tips for engineers to level up their career?Practice your communication skills. I can't stress enough how important it is to be able to explain things in a way anyone can understand, but also communicate in a way that's inclusive and creates an environment where team members feel safe and welcome to contribute ideas, ask questions, and give feedback. In addition, build some expertise in a specific area. I'm a huge fan of learning and experimenting with lots of technologies but as you grow in your career, there comes a time where you need to pick an area to focus on to build more profound knowledge. This could be in a specific language like JavaScript or Python or in a practice like accessibility or web performance. It doesn't mean you shouldn't keep in touch with anything else that's going on in the industry, but it means that you focus on an area you want to have more expertise in. If you could be the "go-to" person for something, what would you want it to be? 
And lastly, be intentional about how you spend your time and effort. Saying yes to everything isn't always helpful if it doesn't serve your goals. No matter the job, there are always projects and tasks that will help you reach your goals and some that won't. If you can, try to focus on the tasks that will grow the skills you want to grow or help you get the next job you'd like to have.
What are you working on right now?Recently I've taken a pretty big break from side projects, but the next one I'd like to work on is a prototype of a tool that would allow hands-free coding using gaze detection. 
Do you have some rituals that keep you focused and goal-oriented?Usually, when I come up with a side project idea I'm really excited about, that excitement is enough to keep me motivated. That's why I tend to avoid spending time on things I'm not genuinely interested in. Otherwise, breaking down projects into smaller chunks allows me to fit them better in my schedule. I make sure to take enough breaks, so I maintain a certain level of energy and motivation to finish what I have in mind.
You wrote a book called Practical Machine Learning in JavaScript. What got you so excited about the connection between JavaScript and ML?The release of TensorFlow.js opened up the world of ML to frontend devs, and this is what really got me excited. I had machine learning on my list of things I wanted to learn for a few years, but I didn't start looking into it before because I knew I'd have to learn another language as well, like Python, for example. As soon as I realized it was now available in JS, that removed a big barrier and made it a lot more approachable. Considering that you can use JavaScript to build lots of different applications, including augmented reality, virtual reality, and IoT, and combine them with machine learning as well as some fun web APIs felt super exciting to me.

Where do you see the fields going together in the future, near or far? I'd love to see more AI-powered web applications in the future, especially as machine learning models get smaller and more performant. However, it seems like the adoption of ML in JS is still rather low. Considering the amount of content we post online, there could be great opportunities to build tools that assist you in writing blog posts or that can automatically edit podcasts and videos. There are lots of tasks we do that feel cumbersome that could be made a bit easier with the help of machine learning.
You are a frequent conference speaker. You have your own blog and even a newsletter. What made you start with content creation?I realized that I love learning new things because I love teaching. I think that if I kept what I know to myself, it would be pretty boring. If I'm excited about something, I want to share the knowledge I gained, and I'd like other people to feel the same excitement I feel. That's definitely what motivated me to start creating content.
How has content affected your career?I don't track any metrics on my blog or likes and follows on Twitter, so I don't know what created different opportunities. Creating content to share something you built improves the chances of people stumbling upon it and learning more about you and what you like to do, but this is not something that's guaranteed. I think over time, I accumulated enough projects, blog posts, and conference talks that some conferences now invite me, so I don't always apply anymore. I sometimes get invited on podcasts and asked if I want to create video content and things like that. Having a backlog of content helps people better understand who you are and quickly decide if you're the right person for an opportunity.What pieces of your work are you most proud of?It is probably that I've managed to develop a mindset where I set myself hard challenges on my side project, and I'm not scared to fail and push the boundaries of what I think is possible. I don't prefer a particular project, it's more around the creative thinking I've developed over the years that I believe has become a big strength of mine.***Follow Charlie on Twitter
Build Full Featured Frontend App with Svelte
React Summit 2020React Summit 2020
192 min
Build Full Featured Frontend App with Svelte
Workshop
Mikhail Kuznetcov
Mikhail Kuznetcov
Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. We will be building an app that mimics the famous Q&A website stackoverflow.com. Will start developing from simple front end components, later we'll connect it to a real running backend and then test it and optimise for production.Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte. 
Introduction to JS Functional Testing at Scale
TestJS Summit - January, 2021TestJS Summit - January, 2021
197 min
Introduction to JS Functional Testing at Scale
Workshop
Christian Bromann
Nikolay Advolodkin
2 authors
In this workshop we will take a look at the JavaScript framework landscape for automated functional testing, such as Puppeteer, Playright, Cypress, and others. We will explore what their differences are and how to choose the right tool for your project. Then, we will look at various scenarios, from basic functional test concepts to complex visual and frontend performance tests and complete the session with scaling up our solution using a cloud vendor like Sauce Labs.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
What's New in npm?
DevOps.js Conf 2021DevOps.js Conf 2021
26 min
What's New in npm?
Welcome to my talk on what's new in the NPM CLI. NPMv7 introduced many new capabilities, including installing peer dependencies by default. npm v7 also introduced support for workspaces, allowing the definition of projects within your root project. The NPM team is continuously improving the CLI with weekly releases and is working on exciting features in collaboration with GitHub. NPM is not an acronym for Node Package Manager, and the CLI will continue to improve with the support of the growing team.
ESNext: Proposals To Look Forward To
JSNation Live 2020JSNation Live 2020
9 min
ESNext: Proposals To Look Forward To
ES Next proposal stages include straw person, proposal, draft, candidate, and finished. Optional chaining and null coalescing operators are solutions for handling undefined and null values. Logical assignment and null coalescing operators are seeking advancement to stage four. Decimal type is introduced to address floating point math issues. Cancellation API and abort control are solutions for canceling promise execution. Pattern matching allows matching the shape of a vector and performing actions based on it.
How Does the TypeScript Team Try to Avoid Negative Effects on the JS Ecosystem
JSNation Live 2020JSNation Live 2020
33 min
How Does the TypeScript Team Try to Avoid Negative Effects on the JS Ecosystem
TypeScript's influence in the JavaScript ecosystem and its alignment with JavaScript's goals and principles. TypeScript's impact on the industry and its popularity among JavaScript programmers. The goal of TypeScript to innovate in types without introducing new concepts to JavaScript. The challenges of running TypeScript on other people's code and making it a native browser language. TypeScript's compatibility with JavaScript and its aim to be a thin layer on top of JavaScript. The efforts to improve support for JS and JS docs and the pain points of transitioning to TypeScript. The accessibility work in TypeScript and the absence of real competitors in the market.
Module Federation in Webpack 5
JSNation Live 2020JSNation Live 2020
32 min
Module Federation in Webpack 5
This Talk discusses module federation in Webpack 5 as a scalable solution for shared dependencies in large applications. Module federation allows separate builds for different parts of an application, reducing build time and deploy delay. It features exposed and shared modules, asynchronous loading, and container creation. Module federation supports container orchestration techniques and aims to integrate with ECMAScript modules. However, optimization and sharing in module federation may impact code size, and careful evaluation is necessary. Updating containers can be managed through active testing for stability.
Web Components in Action
JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
Joren Broekema
Alex Korzhikov
2 authors
The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc.
Painting with Data: Intro to d3.js
JSNation Live 2021JSNation Live 2021
130 min
Painting with Data: Intro to d3.js
Workshop
Ian Johnson
Ian Johnson
D3.js is a powerful JavaScript library for building data visualizations, but anyone who has tried to use it quickly finds out that it goes deeper picking your favorite chart type. This workshop is designed to give you a hands-on introduction to the essential concepts and techniques for creating custom data visualizations with d3.js. By the end of this workshop you will have made an interactive and animated visualization on a realistic dataset that you can easily swap out with your own.
Regular Expressions in JavaScript
JSNation Live 2021JSNation Live 2021
83 min
Regular Expressions in JavaScript
Workshop
Bonnie Schulkin
Bonnie Schulkin
Even if you're a regular expression pro, it's not always easy to know how to apply them in JavaScript. What's the difference between RegExp.prototype.exec and String.prototype.match ? What if I want to replace all punctuation followed multiple spaces with the same punctuation followed a single space? This workshop will explore the various methods and leave you with sample code, a cheat sheet, and the confidence to choose the right method for the job.
Prerequisites:Node 12+Array methods: map and filterKnowledge of regular expression syntax helpful but not required
Workshop level:JS devs who avoid regular expressions because who has time to figure out which method to use? Level: beginner / intermediate.
How to Outsmart Time: Building Futuristic JavaScript Apps Using Temporal
JSNation Live 2021JSNation Live 2021
25 min
How to Outsmart Time: Building Futuristic JavaScript Apps Using Temporal
Temporal is a proposal in JavaScript that brings an ergonomic API for building futuristic JavaScript applications. It is now at stage 3 and implementers will start implementing it in different polyfills and browsers. Temporal includes classes for working with dates, times, time zones, calendars, and durations. The talk covers building an invoice calculator using Temporal, calculating durations between date times, creating and manipulating durations, understanding time relativity and rounding, and rewriting methods using Temporal. The speaker expresses gratitude to various contributors and provides a sandbox for exploration.
CSS Can Do That Too
JSNation Live 2021JSNation Live 2021
22 min
CSS Can Do That Too
This Talk is about CSS techniques that can simplify web development and eliminate the need for JavaScript. It covers topics such as responsive typography, flexible font sizing, CSS math functions, scroll snapping, sticky elements, and CSS masonry layout. The speaker emphasizes the importance of understanding how sticky elements work and highlights the potential bugs that can occur. CSS Masonry layout is discussed as a native solution for creating masonry grids in the browser. Overall, CSS provides flexible solutions for web styling and is an exciting tool for developers.
ES?.next()
JSNation Live 2021JSNation Live 2021
31 min
ES?.next()
The Talk discusses various proposals for the next version of ECMAScript (ES Next) and the TC39 process. It covers features such as binding syntax, shorthand property assignments, pattern matching, async match, operator overloading, and more. These proposals aim to simplify code, make it more readable, and introduce new functionalities. The Talk also addresses questions about the committee's decision-making process and the experience of being part of the TC39 committee.
Using the Proxy API for State Management
JSNation Live 2021JSNation Live 2021
27 min
Using the Proxy API for State Management
This Talk introduces the concept of using proxies in JavaScript for state management. It explores the implementation of proxies, observing properties and creating caches, building the proxy, and observing changes with proxies. The Talk also discusses using the Taits library for state management and the performance implications of proxies. TypeScript and JavaScript are compared, and the results of a poll on their usage are shared.
The Third Age of JavaScript
JSNation Live 2021JSNation Live 2021
30 min
The Third Age of JavaScript
Top Content
This talk presents the Third Age of JavaScript, covering the evolution and future of the language. It explores the adoption of ES modules and the decline of IE11, as well as the changing landscape of JavaScript tooling and the concept of polyglot tooling. The talk also touches on the potential future of JavaScript with WebAssembly and emphasizes the importance of code composability and receiving feedback in software development.