JSNation 2022

This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.

The Talk discusses imposter syndrome and reframes it as being a professional imposter. It emphasizes the importance of sharing and starting, embracing imposterism, and building inclusively for the web. The speaker shares personal experiences of being an imposter in various technical disciplines and highlights the significance of accessibility. The Talk concludes with the idea of building a collective RPG game to remove excuses for not making things accessible.

The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.

Welcome to MakePad, a new way to build UI for web and native using WebAssembly and Rust. JavaScript is not suitable for complex applications like IDEs and design tools. Rust, a new programming language, was used to reimagine MakePad, resulting in a fast and efficient platform. MakePad offers live editing, high CPU performance, and the ability to load native instrument components. The future of MakePad includes an open-source release, a design tool, and support for importing 3D models.

This lightning talk introduces distributed computing and discusses the challenges, patterns, and solutions related to using Kafka for event sharing. It emphasizes the importance of separating services and using strong typing to avoid broken messages. The talk also covers Kafka's transaction configuration and guarantees, highlighting the need for proper configuration and the use of transaction IDs. Overall, it provides valuable insights into scaling companies, big data, and streaming platforms.

The talk focuses on creating the best JavaScript data grid by categorizing code using abstract syntax trees. Code files are represented as tree structures, allowing for the extraction of different sections. Framework-specific converters generate code examples for Angular, React, and Vue. TypeScript validation and testing ensure code quality and easy updates for framework examples.

Web components allow you to create your own HTML elements that can do anything you want, and they are supported by all modern browsers. Many companies, including YouTube and GitHub, use web components to enhance their websites. There are extensive tooling and libraries available for web component development. The Model Viewer Web Component enables the display of 3D models in Virtual and Augmented Reality without needing to know underlying technologies. Web components can be used with various frameworks and libraries, and there are resources available to help with compatibility.

This Talk provides an introduction to content modeling and its importance in organizing content for teams. It explores the top-down approach to simplify and make content models more reusable, using a recipe app as an example. The Talk also highlights the best practices for content modeling, including considering reusability, rendering for end users, content governance, platform considerations, and continuous iteration.

StackHawk is a dynamic application security testing tool that runs active security tests on various types of applications, providing simple descriptions and examples of security issues. It integrates with CI processes and provides feedback on scan findings. The StackHawk YAML is used to configure the scanner, including important information about the application and additional configuration options. OpenAPI and GraphQL integration is possible with minimal configuration.

Images, video, and media are crucial in e-commerce to deliver the best user experience. Nike's acquisition of Artifact Studios and the launch of Nike land on Roblox demonstrate the future of e-commerce in the metaverse. Clear and zoomable images, point-based details, and video are essential for enhancing the user experience. Optimizing media delivery through modern image formats, compression, resizing, and technology can significantly improve conversion rates in e-commerce.

Today's Talk is about the world of monorepos, their history, benefits, and features. Monorepos address challenges in web development, such as slow build processes and unstable connections on mobile devices. Collocation in monorepos enables easy sharing of functions and components among projects. Speed and efficiency in monorepos are achieved through collocation, dependency graphs, and task orchestration. Monorepo tools like Learnr offer features such as caching and distributed task execution. Monorepos provide code sharing, consistent tooling, and automated migration, resulting in a 10x developer experience.

This Talk explores the intersection of accessibility and test-driven development (TDD) in software development. TDD is a process that involves writing tests before writing production code, providing a safety net for code changes. The Talk demonstrates how to apply TDD principles to real-life examples, such as filling out a form, and emphasizes the importance of user-centric testing. By using atomic design principles, code can be organized in a clean and easy way. The Talk also discusses the use of labels and test IDs in tests for improved accessibility.

This Talk introduces the Web Bluetooth API and its role in bridging the gap between browsers and peripheral devices. It covers how to interact with devices using the API, explores creating BLE devices like a buzzer and a small car, and discusses the limitations and availability of the Web Bluetooth API. The Talk also highlights the potential of the Web Audio API for hardware development and mentions the current lack of support for the Web Bluetooth API on iOS devices.

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.

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.

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.

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.

Tauri is a tool built to improve the JS ecosystem, providing a lightweight alternative to Electron. It integrates the stack, focuses on security, and offers cross-platform compatibility. Security measures include a new iFrame interaction and a thorough audit. The importance of taking care of the planet and reducing app consumption is emphasized. Tauri's community, licensing, and future plans are discussed, as well as the challenges of web view support and the aim to create a consistent engine using Servo.

Today's talk is about animations in Javascript, covering frame rates and different methods like CSS transitions and animations. JavaScript provides more control over animations, allowing interpolation and simulation of real-world scenarios. Different approaches to animating a box from zero to 100 pixels are discussed, including for loops, timers, and the web animations API. Request Animation Frame is highlighted as a solution for consistent and smooth animations. The Web Animations API is introduced as a powerful tool alongside CSS animations and transitions, although it has limited browser support.

This talk discusses the security challenges in the JavaScript ecosystem, including supply chain security, lock file tampering, and arbitrary command execution. It highlights the risks of blind upgrades and hidden comments in code. The talk also covers dependency confusion attacks and the importance of establishing a threat model for node applications.

ChirpX is a technology to securely run binary code in the browser, written in C++ and compiled to JavaScript WebAssembly. It can run a full virtualized system in the browser, including Bash and other languages like Python and JavaScript. ChirpX aims for scalability and the ability to work with large code bases, supporting multiprocessing and multithreading. It uses a two-tiered execution engine with an interpreter and a JIT engine. Future plans include running the full X.Org server in the browser and implementing the Windows system call. WebVM, the underlying technology, has a virtual file system backed by Cloudflare.

The Talk covers various experiments with JavaScript and C++, including controlling lights and creating a car control system. The speaker shares his experiences with home automation and the challenges of hiding wires. He explores using JavaScript with Esperino for face recognition and discusses the benefits and limitations of the platform. The Talk concludes with suggestions for using JavaScript in hardware projects and learning opportunities.

Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.

Starbeam is a library for building reactive user interfaces with JavaScript, similar to Svelte, Vue, and Ember. It provides a data structure and query feature for filtering and sorting. The useStarBeam function ensures JSX reconciliation only occurs when reactive dependencies change. Starbeam tracks every read and write operation to update the component accordingly. It can be used with React and other frameworks, and offers debugging tools and locale integration.

This talk covers the latest features in Chrome DevTools, including network tab analysis, performance tab optimization, and user flows. It discusses optimizing HTTP requests with fetch priority to improve loading time. The performance tab provides insights on frame drops, long tasks, and the importance of minimizing total blocking time. The talk also highlights the optimization of page rendering and introduces user flows in Chrome DevTools.

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.

Today we will discuss the Web3JS library, its history, maintenance, and community involvement. The upcoming version 4 aims to address challenges faced in version 1 by introducing native TypeScript support, reduced size, improved code readability, and increased test coverage. Version 4 also introduces a new validator for easier Ethereum data validation and allows developers to customize how they handle numbers and bytes. It brings a dynamic data format for custom formatting and introduces TypeScript for contracts without transpiling. The API in version 4 is easy to extend and has future improvements and refactoring.

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.

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.

Today's Talk discusses immutable web apps and their benefits, such as faster loading times and easy version tracking. The use of Universal Module Definition (UMD) style bundling allows for flexible dependency management and gradual upgrades. Tools like Webpack and Rollup provide ways to reference UMDs in bundles and automate dependency configuration. Arborist and YAML files help resolve dependency trees and handle conflicts, while the Orchard CLI tool automates dependency ordering. Internal and external dependencies can be initialized and managed effectively for optimal performance.

Solid.js is a declarative JavaScript library for building user interfaces that addresses performance optimization. It introduces fine-grained reactivity and avoids using a virtual DOM. The Talk explores rethinking performance and reactivity in web applications, understanding reactivity and primitives, and creating DOM elements and using JSX in Solid.js. It also covers rendering components, sharing state, and the advantages of fine-grained rendering and the reactive approach in Solid.js.

Welcome to GPU Accelerating Node.js Web Services and Visualization with Rapids. Rapids aims to bring high-performance data science capabilities to Node.js, providing a streamlined API to the Rapids platform without the need to learn a new language or environment. GPU acceleration in Node.js enables performance optimization and memory access without changing existing code. The demos showcase the power and speed of GPUs and rapids in ETL data processing, graph visualization, and point cloud interaction. Future plans include expanding the library, improving developer UX, and exploring native Windows support.

This Talk provides an introduction to NPM Workspaces and covers various aspects of using them, including starting a workspace with npm init, adding dependencies, forcing correct library versions, running scripts and orchestrating in a monorepo, and using npm pkg and npm exec. The examples provided demonstrate real-life use cases and highlight the flexibility and control that NPM Workspaces offer. The speaker also mentions improvements and future developments in the NPM CLI, emphasizing the importance of correct declarations in the package.json file and the ability to manage data across all workspaces.

Bleach.js is a toolkit designed to make full-stack web development enjoyable. It is built on top of Next.js and includes features like authentication, authorization, Prisma setup, React Query, utilities, recipes, and code scaffolding. The upcoming version, Blitz 2.0, is being worked on. Blitz.js toolkit expands on the core framework with additional features like web sockets, scheduled jobs, mailers integration, and better mobile app support. Visit canary.blitz.js.com for documentation on the new toolkit and blitz.js.com for framework documentation.

Today's Talk discusses software performance and optimizing the frontend for the user. It emphasizes the importance of passive performance, which is a subjective measure of how well users perceive the application's performance. Techniques to improve performance include using a shared cache, HTTP2, preloading requests, and CDN. Optimizing frontend performance involves avoiding blocking the main thread, loading necessary resources first, using progress bars, and implementing optimistic patterns. It also highlights the importance of considering users' changing expectations throughout their interaction with the application.

The Talk discusses the challenges of detecting and combating bots on the web. It explores various techniques such as user agent detection, tokens, JavaScript behavior, and cache analysis. The evolution of bots and the advancements in automated browsers have made them more flexible and harder to detect. The Talk also highlights the use of canvas fingerprinting and the need for smart people to combat the evolving bot problem.

The Talk discusses technical debt and its relationship with bad code and lack of caring. It emphasizes the importance of repaying technical debt, particularly in terms of accessibility. The low number of websites passing basic accessibility tests is highlighted. The Talk provides strategies for repaying accessibility technical debt, promoting accessibility, and incorporating design systems. It emphasizes that accessibility is everyone's responsibility and should not be overlooked.

The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.

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.

This talk focuses on the importance of accessibility in building user interfaces, discussing WCAG and WAI. It emphasizes the use of correct HTML tags for accessibility and provides practical tips for improving accessibility in apps. The talk also highlights the significance of keyword accessibility and the use of semantic HTML. It covers navigation techniques, such as ARIA tags and breadcrumbs, and emphasizes the importance of internationalization. The demo showcases the improvements made to a login app after applying accessibility practices.

Today's Talk introduces the webHID API, which allows developers to control real devices from the browser via USB. The HID interface, including keyboards, mice, and gamepads, is explored. The Talk covers device enumeration, input reports, feature reports, and output reports. The use of HID in the browser, especially in Chrome, is highlighted. Various demos showcase working with different devices, including a DualShock controller, microphone, gamepad, and Stream Deck drum pad. The Talk concludes with recommendations and resources for further exploration.

This Talk discusses the new features of Modals and focus management in web development. The dialogue element allows for the creation of modal dialogs that appear on top of other elements and prevent interaction with elements below. The note element can mark a subtree of the DOM as inert, making it unusable. The field set component can group input elements together and disable them. Using these new primitives can improve focus control and user experience in web applications.

Welcome to my talk on using gamification to improve quality. Code quality is crucial and involves maintaining technical debt, ensuring maintainability, and prioritizing delivery and quality. To improve code quality, create a new standard, automate enforcement, and motivate teams. Resolving merge conflicts by removing warnings and automating warning decrease and error reduction can prevent future issues. Strive for zero errors by finding a balance, enhancing tools, blocking pull requests with errors, and incentivizing developers.

This Talk discusses using JavaScript to combat skin cancer, with a focus on machine learning integration. The speaker has experience in medical imaging and has partnered with dermatoscopy companies to develop hardware. JavaScript libraries like TensorFlow.js and Pandas.js are used for model deployment and data analysis. The Talk also covers building neural networks, analyzing skin cancer using scoring methods and image processing techniques, and extracting asymmetry in skin images using Python and JavaScript.

This Talk discusses building JavaScript apps with internationalization in mind, addressing issues such as handling different name formats, using Unicode for compatibility, character encoding bugs, localization and translation solutions, testing in different languages, accommodating translated text in layouts, cultural considerations, and the importance of enabling different languages for users. The speaker also mentions various open source tools for internationalization. The Talk concludes with a reminder to avoid assumptions and embrace diversity in the World Wide Web.

This Talk provides an introduction to Deno for Node.js developers, highlighting the differences in architecture and dependencies between the two runtimes. It discusses the Deno CLI and integrated toolchain, the Deno standard library and dependency management, as well as the Deno runtime and its core features. The Talk also covers Deno's permission system, its focus on web platform compatibility, and its support for TypeScript. Overall, it provides a comprehensive overview of Deno and its advantages over Node.js.

Docker Extensions allow users to extend Docker Desktop and integrate with partners, enhancing team workflows. The Extensions SDK simplifies extension development using React and TypeScript. Users can easily install extensions from the marketplace, such as Disk Usage and Logs Explorer, to manage disk space and search logs across containers. Docker Desktop users can upgrade to access these extensions and provide feedback to improve the marketplace experience.