JSNation Live 2020

This Talk discusses live chat and live broadcast using WebRTC and RTMP. It explores running WebRTC on a server via Chrome and alternative approaches like using GetUserMedia and the Chrome.tabCapture API. The use of a whole Chrome instance for WebRTC and RTMP broadcast is also discussed, highlighting the pros and cons of this approach. The Talk recommends checking out Nick's talk from All Things RTC for more information.

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.

Alpine.js is a lightweight framework for creating JavaScript behavior directly in markup. It has 13 directives and 6 magic properties, making it like Tailwind for JavaScript. The upcoming version of Alpine will focus on performance and optimization. It sits between jQuery and Vue, offering reactivity without compilation. Alpine.js is robust and resilient for DOM manipulation, and works well with Laravel for localization and internationalization.

This Talk explores the UTF-8 encoding and its relationship with emojis. It discusses the history of encoding, the birth of Unicode, and the importance of considering global usage when building software products. The Talk also covers JavaScript's encoding issues with Unicode and the use of the string.prototype.normalize method. It highlights the addition of emoji support in Unicode, the variation and proposal process for emojis, and the importance of transparency in emoji encoding. The Talk concludes with the significance of diverse emojis, the recommendation of UTF-8 for web development, and the need to understand encoding and decoding in app architecture.

This Talk provides an introduction to game development in React using React 3.0 Fiber and three.js. It covers topics such as creating 3D objects, understanding meshes and lighting, adding interactivity and physics, controlling objects with mouse input, and creating enemies. The speaker emphasizes the ease and power of React 3.0 Fiber for game development and encourages experimentation and learning through examples and resources.

Fastify is a web framework that started in 2016 and is easy to use. It supports logging, splitting the app into separate files, and auto-loading routes. Fastify also provides authentication and user login functionality. It differs from other frameworks by fully supporting Async Await and the latest JavaScript features. Matteo Collina, the speaker, prefers Vim and T-Max as his IDE and enjoys Italian pizza as his comfort food.

The Talk discusses the development of web applications and the challenges involved, such as code management, CI/CD, routing, security, and scalability. It explores the use of Azure Static Web Apps for building and deploying static web apps with features like authorization, authentication, and serverless technology. The process of creating a static web app on Azure Portal is demonstrated, along with resource creation, deployment, and custom domain setup. The Talk also covers API deployment, authentication, authorization, and role-based access control. Azure Static Web Apps is highlighted as a globally distributed solution for building web apps.

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.

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.

This Talk introduces the adaptation of end-to-end testing for a project, highlighting its benefits in improving resilience and calmness during deployment. The speaker mentions the team's size, daily pull requests, and the size of their codebase. They also discuss the use of cookies to test different versions of a feature on a page and their plan to improve by adding E2E tests to a CICD pipeline and consolidating tests in their monorepo.

Gleb Akhmetov explains how to visually test React components, emphasizing the importance of addressing climate change and collaboration. He discusses component testing, styling, and the challenges of CSS changes. Gleb highlights the use of image snapshots for visual testing and the importance of controlling data for accurate results. He also discusses using Docker for consistent visual testing and the support for multiple browsers. Cypress is focused on flake-free testing and has plans for test retries and new features in the roadmap.

This Talk discusses the speaker's coding journey, forming habits, and finding time for coding. The speaker recommends participating in the 100 days of code challenge and learning HTML, CSS, JavaScript, AngularJS, and D3.js. Building small projects and games is helpful for learning and growth. The importance of forming habits and overcoming resistance is emphasized, along with prioritizing consistency and focusing on details. Finding time is about reclaiming the 24 hours we all have and making small changes to accommodate coding. Keeping a log or notebook is important for tracking progress.

The Talk introduces the composition API in Vue 3 as a better option for composing reusable features compared to mixins and scope slots. It explains how to abstract search functionality using the composition API and demonstrates the creation of searchQuery and searchResultsQuery objects. The Talk also covers running breed search in the mounted hook, sorting results using computed properties, and the benefits of the composition API in terms of code organization and reusability. It concludes by mentioning the upcoming release of Vue 3 and the advantages of the composition API.

This Talk provides an overview of Angular and its development stack, including the Component Development Kit (CDK) and UI components. It discusses the balance between static and dynamic systems and the benefits of using TypeScript. The Talk also highlights the evolution of Angular, version 10 updates, and the deployment of Angular Universal applications. It mentions the ease of updating Angular and the incorporation of web components. The future of frameworks, external contributions, and monorepo setups are also discussed.

This talk is about building full-stack cloud applications as a front-end developer using GraphQL and the GraphQL Transform library. It covers the three main parts of AWS Amplify: hosting, CLI, and client libraries. The GraphQL Transform library simplifies building a GraphQL API by handling schema creation, database interaction, and resolver mapping. It demonstrates how to use GraphQL transforms to build a GraphQL API with features like authorization rules, relationships, and local mocking. It also discusses the considerations for using managed services and the future of infrastructure as code with Amplify and other tools.

Frontity is a framework that combines WordPress and React to create modern user experiences. It is easy to use, SEO-friendly, and extensible. The framework has achieved great results for publishers, increasing page views, organic traffic, and user acquisition. Frontity Pro has served millions of page views worldwide and provides a seamless content management experience. Visit frontity.org to learn more and join the community.

In this Talk, Jen Looper introduces PoseDance, a TikTok trainer app that uses PoseNet for pose detection. She discusses the challenges of scoring and the potential for medical applications. Jen also mentions the use of Azure Functions and PlayFab for the app's backend and deployment. The Talk concludes with a code tour and an invitation for contributions to improve the scoring system.

Hasura's remote joins feature allows you to combine multiple data sources into a unified GraphQL API, including Postgres databases, GraphQL APIs, and REST APIs. It enables joining data across different databases and integrating with external APIs like Stripe and Auth0. Hasura pushes down SQL to join data across databases and can even integrate with REST APIs using actions. With remote joins, you can query and fetch data from multiple sources, enriching your GraphQL schema and creating powerful data relationships.

Tyler Hannon discusses the importance of choosing the right database and explains the ACID acronym, which stands for Atomicity, Consistency, Isolation, and Durability. He also highlights the challenges and benefits of distributed transactions in Fullstack applications. Various approaches to solving database challenges are mentioned, with a focus on FAUNA and its CALVIN protocol. The goal is to have a fast, reliable, and serverless database that meets specific requirements.