#tooling

Subscribe
JS tooling is a term used to describe the tools and processes used to develop applications in JavaScript. This includes frameworks, libraries, build systems, task runners, and other tools that help developers create, test, and deploy their applications. We have talks and workshops on this topic to help students learn how to use these tools effectively and efficiently.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
Infinite Patterns in the Digital Canvas: Unleashing Creativity With JavaScript in Algorithmic Art
JSNation 2024JSNation 2024
24 min
Infinite Patterns in the Digital Canvas: Unleashing Creativity With JavaScript in Algorithmic Art
Algorithmic art is a unique form of artistic expression where programming plays a fundamental role in creating unpredictable and complex works. P5.js is a JavaScript library that enables artists, designers, educators, and beginners to create graphic and interactive web experiences. P5.js offers various features and possibilities, such as fractals, iterate systems, and creating art with randomness. It also allows for user interactivity and provides a resource called Open Processing for inspiration and examples. The library offers a wide range of examples for exploration and learning, providing endless possibilities for creating complex and unique pieces of art.
LLRT JavaScript Runtime: Redefining Serverless Latency
JSNation 2024JSNation 2024
20 min
LLRT JavaScript Runtime: Redefining Serverless Latency
Swift responsiveness is essential, and LLRT is a new JavaScript runtime optimized for serverless environments that offers improved performance and cost savings compared to other runtimes. LLRT achieves fast performance by removing complexities, leveraging Rust, and optimizing the AWS SDK for Lambda. It starts almost six times faster than Node.js and provides a cost saving of 2.9 times and a time saving of 3.7 times compared to Node.js.
What’s the Deal With Drizzle ORM?
JSNation 2024JSNation 2024
8 min
What’s the Deal With Drizzle ORM?
Drizzle is a TypeScript ORM that leverages SQL knowledge, is fast and has its own ecosystem. It manages database schema and supports prepared statements for peak performance. Drizzle provides a complete set of tools, including Drizzle Studio and query runners. The ecosystem includes GraphQL integration and community-built tools.
What's Inside Biome's Linter?
JSNation 2024JSNation 2024
10 min
What's Inside Biome's Linter?
Today, we're going to talk about the Biome Analyzer, which is not just a linter or a CLI tool. It takes advantage of multi-threading, channels for communication, and caching to achieve high performance. The analyzer complements the parser and provides features like import sorting and emitting new diagnostics. It is LSP ready, can automatically sort JSON keys, and can be used as a CLI tool for enforcing refactors. The Biome Analyzer showcases its impressive performance in handling large codebases in a video demonstration.
Conquering Complexity: Refactoring JavaScript Projects
JSNation 2024JSNation 2024
21 min
Conquering Complexity: Refactoring JavaScript Projects
Today's Talk explores the complexity in code and its impact. It discusses different methods of measuring complexity, such as cyclomatic complexity and cognitive complexity. The importance of understanding and conquering complexity is emphasized, with a demo showcasing complexity in a codebase. The Talk also delves into the need for change and the role of refactoring in dealing with complexity. Tips and techniques for refactoring are shared, including the use of language features and tools to simplify code. Overall, the Talk provides insights into managing and reducing complexity in software development.
Reverse-Engineering Everything to Get Rid of Trust Issues
JSNation 2024JSNation 2024
20 min
Reverse-Engineering Everything to Get Rid of Trust Issues
JavaScript's power and versatility make it the programming language of choice for consumer applications worldwide. A JavaScript engineer should understand how things work, even if they don't know everything. The Talk discusses modifying websites, uncovering game rigging through developer tools, analyzing fetch requests and overrides, refactoring and state management, and website modification. The speaker shares personal experiences and highlights the importance of understanding and being able to modify code in real-time.
Automate the Browser With Workers Browser Rendering API
JSNation 2024JSNation 2024
20 min
Automate the Browser With Workers Browser Rendering API
The Talk discusses browser automation using the Worker's Browser Rendering API, which allows tasks like navigating websites, taking screenshots, and creating PDFs. Cloudflare integrated Puppeteer with their workers to automate browser tasks, and their browser rendering API combines remote browser isolation with Puppeteer. Use cases for the API include taking screenshots, generating PDFs, automating web applications, and gathering performance metrics. The Talk also covers extending sessions and performance metrics using Durable Objects. Thank you for attending!
JSR – Next Generation JavaScript Registry
JSNation 2024JSNation 2024
6 min
JSR – Next Generation JavaScript Registry
JSR is a new JavaScript registry that supports TypeScript and offers additional features like GitHub Action integration, provenance attestations, and documentation generation. It provides a simple website with package search, documentation, and a gamified score. The process of publishing a new package in JSR involves creating a JSR.json file with package details and exports, using MPX JSR publish to publish the package, and approving authorization in the browser. However, documentation for the package is not automatically generated and needs to be manually added.
WebXR? Virtual Reality and Augmented Reality Natively on Browsers
JSNation 2024JSNation 2024
28 min
WebXR? Virtual Reality and Augmented Reality Natively on Browsers
JS Nation explores the power of the web, including virtual and augmented reality experiences. WebXR and A-Frame enable creating native-like experiences using web technologies. Tooling and resources are available to develop and experiment with WebXR. The possibilities for web development and creative projects are endless. Improving AR devices, enhancing PDF viewers, and utilizing AI assistants are areas of interest. JavaScript abstraction and positive audience feedback were highlighted.
Why Your Performance Work Is Not Seen
JSNation 2024JSNation 2024
25 min
Why Your Performance Work Is Not Seen
This Talk discusses the importance of performance work and how to drive performance governance. It emphasizes the need to frame data, set meaningful budgets, and understand both engineering and product perspectives. The Talk also highlights the significance of delivering value, establishing solid performance governance, and gaining buy-in from management. Additionally, it emphasizes the importance of measuring performance, optimizing through data, and collecting performance data using tools like Speedcurve and Bugbear Sentry. The speaker also mentions their training program and expresses gratitude towards the audience.
JavaScript Source Maps, Can We Do Better?
JSNation 2023JSNation 2023
27 min
JavaScript Source Maps, Can We Do Better?
Source maps allow understanding of transpiled, bundled, or minified code. Debugging with post hoc and debug identifiers helps identify files. Issues with source maps include hash collisions and missing function names. Various techniques can be used to determine the function that caused an error. Source maps can store additional information and improvements can be made to path resolution and column positions. Code points and token positions can differ across browsers. Detecting source maps can be challenging without a standardized JSON schema.
Start Building Your Own JavaScript Tools
JSNation 2023JSNation 2023
22 min
Start Building Your Own JavaScript Tools
[♪ music ♪ by The Illuminati plays)] I see a common thread across any project I work on. Different developers are making the same mistake and we have preferred ways of doing things. Preventing mistakes and sharing best practices are great reasons to look at tools like linters and in particular ESLint. Let's write our first rule together. We're just scratching the surface of building our own tools, which can have a massive impact on improving the developer experience.
Static Analysis in JavaScript: What’s Easy and What’s Hard
JSNation 2023JSNation 2023
23 min
Static Analysis in JavaScript: What’s Easy and What’s Hard
Static analysis in JavaScript involves analyzing source code without executing it, producing metrics, problems, or warnings. Data flow analysis aims to determine the values of data in a program. Rule implementation in JavaScript can be straightforward or require extensive consideration of various cases and parameters. JavaScript's dynamic nature and uncertainty make static analysis challenging, but it can greatly improve code quality.
Three Ways to Automate Your Browser, and Why We Are Adding a Fourth: WebDriver BiDi
JSNation 2023JSNation 2023
19 min
Three Ways to Automate Your Browser, and Why We Are Adding a Fourth: WebDriver BiDi
This Talk discusses browser automation techniques, including the introduction of a new web driver. It covers the history of browser automation, different techniques for automating browsers, and the use of web APIs and browser extensions. The Talk also explains how automation tools communicate with browser drivers and the challenges of waiting for elements to appear on the screen. It highlights the differences between the WebDriver protocol and the Chrome DevTools protocol, and introduces the WebDriver Bidirection project that aims to combine the best parts of both protocols. Lastly, it mentions the WebDriver Bidi support for console monitoring and introduces WebDriver ByteEye as a stable automation choice.
Improving Developer Happiness with AI
React Summit 2023React Summit 2023
29 min
Improving Developer Happiness with AI
Watch video: Improving Developer Happiness with AI
GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.
Rome, a Modern Toolchain!
JSNation 2023JSNation 2023
31 min
Rome, a Modern Toolchain!
Top Content
Rome is a toolchain built in Rust that aims to replace multiple tools and provide high-quality diagnostics for code maintenance. It simplifies tool interactions by performing all operations once, generating a shared structure for all tools. Rome offers a customizable format experience with a stable formatter and a linter with over 150 rules. It integrates with VCS and VLSP, supports error-resilient parsing, and has exciting plans for the future, including the ability to create JavaScript plugins. Rome aims to be a top-notch toolchain and welcomes community input to improve its work.
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
JSNation 2023JSNation 2023
44 min
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
WorkshopFree
Ryan Albrecht
Ryan Albrecht
You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real.
Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).
How I Automated Code Changes for 100 Repositories: Getting Started With Codemods
React Day Berlin 2022React Day Berlin 2022
28 min
How I Automated Code Changes for 100 Repositories: Getting Started With Codemods
This Talk discusses automating code changes for Android repositories, utilizing tools like JSCodeShift and Abstract Syntax Tree. The speaker shares a real use case example of maintaining a design system library and making changes to a component. The talk emphasizes the importance of automating repetitive tasks and using the power of abstract syntax tree for code changes. The Q&A session covers topics like source code formatting, TypeScript support, and cultural embedding of code mods. The talk concludes with insights on when automation is worth it and the limitations of code mods for monorepo changes.
Monitoring Errors and Slowdowns Across JS Applications
DevOps.js Conf 2022DevOps.js Conf 2022
8 min
Monitoring Errors and Slowdowns Across JS Applications
Sentry is an error monitoring platform that helps developers optimize the customer experience by alerting them of errors and slowdowns. It supports all major languages and frameworks, with a focus on error monitoring, performance monitoring, and release health. The Talk explores how Sentry organizes and represents error data, analyzes error details and tags, and investigates backend issues, performance problems, and release health. Collaboration with backend teams is emphasized to resolve issues and optimize transaction time. The Talk also highlights the importance of analyzing graphs, issues, and regressions to identify areas for improvement in release health.
Tooling and Processes for Managing GraphQL at Scale
GraphQL Galaxy 2021GraphQL Galaxy 2021
18 min
Tooling and Processes for Managing GraphQL at Scale
This talk discusses the life of a GraphQL developer at Yelp, covering tooling, processes, and the scale of GraphQL usage. It emphasizes the importance of making good schema choices and using GraphQL Faker for quick iteration. The talk also highlights the challenges of using data loaders at Yelp and the solutions implemented, such as code generation and precommits. It mentions the significance of schema review, documentation, and GraphQL adoption. Lastly, it mentions the value of obsessive documentation and the use of vPress for generating markdown and an in-house UI for query reference.
Magic with Babel Macro
React Advanced Conference 2021React Advanced Conference 2021
20 min
Magic with Babel Macro
Babel macros allow for code transformation without multiple plugins, providing a solution to the downsides of regular Babel plugins. Understanding AST is crucial for developers working with transpilers, and exploring its structure and representations can help derive code. Babel started as a transpiler but has evolved into a tool for live code transformation. Babel macros are supported in various React-based frameworks and can be used for track translation and CSS to React Native macros. However, macros have limitations, such as being synchronous and evaluated at compile time.
Javascript Tooling - The Evolution and Future of JS & Front-end Build Tools
JSNation Live 2020JSNation Live 2020
11 min
Javascript Tooling - The Evolution and Future of JS & Front-end Build Tools
Today's Talk covers the evolution and future of Javascript tooling, including dependency management, transpiling, bundling, minifying, and module management. Webpack has grown in popularity and offers features like hot module replacement and code splitting. Other build tools like Rollup, Parcel, Snowpack, and ESBuild are also discussed. The Talk explores browser import and bundling-free approaches, and emphasizes the dynamic nature of the JavaScript ecosystem with evolving tools and project-specific trade-offs.