#case study

Subscribe
A case study is an in-depth analysis of a particular event, situation or project. It focuses on examining the details of the subject at hand and providing an understanding of its context, processes and outcomes. In the context of JavaScript, a case study would involve researching the implementation of a specific JavaScript application or technology, such as a web framework or library, and then analyzing the results of its use. This could include exploring the advantages and disadvantages of the technology, user feedback, and any other relevant information. Case studies are useful for determining best practices and gaining insight into how certain technologies work in the real world.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Raising the Bar: Our Journey Making React Native a Preferred Choice
React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
Watch video: Raising the Bar: Our Journey Making React Native a Preferred Choice
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
A Practical Guide for Migrating to Server Components
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Building the AI for Athena Crisis
JS GameDev Summit 2023JS GameDev Summit 2023
37 min
Building the AI for Athena Crisis
Join Christoph from Nakazawa Tech in building the AI for Athena Crisis, a game where the AI performs actions just like a player. Learn about the importance of abstractions, primitives, and search algorithms in building an AI for a video game. Explore the architecture of Athena Crisis, which uses immutable persistent data structures and optimistic updates. Discover how to implement AI behaviors and create a class for the AI. Find out how to analyze units, assign weights, and prioritize actions based on the game state. Consider the next steps in building the AI and explore the possibility of building an AI for a real-time strategy game.
Video Editing in the Browser
React Summit 2023React Summit 2023
23 min
Video Editing in the Browser
Top Content
Watch video: Video Editing in the Browser
This Talk discusses the challenges of video editing in the browser and the limitations of existing tools. It explores image compression techniques, including Fourier transform and Huffman encoding, to reduce file sizes. The video codec and frame decoding process are explained, highlighting the importance of keyframes and delta frames. The performance bottleneck is identified as the codec, and the need for specialized hardware for efficient video editing is emphasized. The Talk concludes with a call to create a simplified API for video editing in the browser and the potential for AI-powered video editing.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
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.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
How to Build Your Own Open Source Project
React Advanced Conference 2022React Advanced Conference 2022
16 min
How to Build Your Own Open Source Project
Hello my friend, in this talk, I wanna share with you how to build your own open source project. Building an open source software project can be challenging. I receive a lot of things randomly in a day, like thank you messages for making my life easier, which motivates me. To choose an open source project to work on, pick one you use every day. Your software is being used when people report issues and send pull requests.
Monolith to Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.
Accessibility at Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accessibility at Discord
This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.
Full Stack Development Using Oracle 23ai
React Summit 2024React Summit 2024
23 min
Full Stack Development Using Oracle 23ai
Today's presentation is about full stack development using the new Oracle 23 AI database and Parse Platform. Parse Server simplifies mobile development by providing a flexible backend solution. The new Oracle 23 AI database container offers benefits like JSON support and pluggable database administration. The Parse Server storage adapter allows for easier management and testing of APIs. The stack also includes features like GraphQL, custom Oracle code execution, message queues, and Oracle Spatial for geofencing and trucking applications.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React Summit 2024React Summit 2024
22 min
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.
Search Speed: Making Expedia Flights Faster
JSNation 2024JSNation 2024
10 min
Search Speed: Making Expedia Flights Faster
The Talk discusses how the engineering team at Expedia improved the performance of customer flight search by using various metrics and techniques. These include prefetching resources during browser idle time, preemptive search to predict responses, and optimizing performance through micro queries and a micro front-end architecture. The team also focused on improving build and package size limits for better code analysis. Performance monitoring and automation were implemented for ongoing performance improvements.
Microfrontends in Safety Critical Aviation Systems
JSNation 2024JSNation 2024
9 min
Microfrontends in Safety Critical Aviation Systems
AWS SafeKit is a market leader in airport control software, managing the entire operation of an airport. Microfrontends extend microservice architecture to the frontend, allowing components to be combined at runtime. Module federation from Webpack is a popular approach for loading remote modules. Microfrontends offer benefits such as incremental upgrades and deployment independence, but also come with downsides like poor performance and complexity. Microfrontends are recommended for large-scale enterprise applications with distinct requirements and the need for experimentation.
JS on the Big Screen: Making TV Apps
JSNation 2024JSNation 2024
22 min
JS on the Big Screen: Making TV Apps
JavaScript is widely used in web, mobile, and backend development, and now it is also being used to create TV apps. TVs with web-based operating systems can be targeted with JavaScript applications, and React is commonly used for TV app development. React Native allows for cross-platform TV app development, except for Roku. User interactions and focus management are important considerations in TV app development. Performance optimization is crucial for TV apps, as TVs have lower device scores and limited RAM. Spatial virtualization can significantly improve TV app performance.
Using WebAssembly to Bring Command-Line Tutorials to Life
JSNation 2024JSNation 2024
23 min
Using WebAssembly to Bring Command-Line Tutorials to Life
WebAssembly is a cost-effective way to distribute computation and allows for code reuse and performance optimization. It can be used for running bioinformatics tools in the browser without setup, but running it on the server or smaller devices may have limitations. WebAssembly is best suited for playgrounds, small-scale simulations, audio and video processing, and upload pre-processing. It offers few benefits outside the browser for server-side applications, but can be useful for running user-provided code and serverless functions.
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.
Pixels, Promises, and Panic: Horror Stories of Production Nightmares
C3 Dev Festival 2024C3 Dev Festival 2024
28 min
Pixels, Promises, and Panic: Horror Stories of Production Nightmares
The Talk covers the importance of preventing and dealing with bugs in software development, with the speaker sharing their experiences and solutions. They discuss the impact of bugs on user experience and revenue, the importance of stress testing and implementing alerts, and the surprising impact of CSS. The speaker also emphasizes the importance of simplicity, monitoring, and refactoring, as well as the need to address security threats and learn from failure. They provide tips for writing postmortems and highlight common mistakes to avoid, especially for junior developers.
WebXR? Virtual Reality and Augmented Reality Natively on Browsers
C3 Dev Festival 2024C3 Dev Festival 2024
25 min
WebXR? Virtual Reality and Augmented Reality Natively on Browsers
This Talk introduces WebXR and VR experiments, showcasing examples and encouraging audience engagement. It explores the possibilities of WebXR and AR games, emphasizing the versatility of A-frame for creating AR and VR projects. The Talk also covers asset customization, animations, and augmented reality using LiDAR scanners. It highlights different types of virtual reality experiences and the potential of Apple Vision with WebXR. The speaker emphasizes the importance of community, developer experience, and starting early in WebXR development.
Who’s Faster at Building an Energy Generation Data Visualisation Platform: ChatGPT or a Developer?
C3 Dev Festival 2024C3 Dev Festival 2024
28 min
Who’s Faster at Building an Energy Generation Data Visualisation Platform: ChatGPT or a Developer?
Today's Talk discusses the competition between a developer and ChatGPT in building a data visualization platform. Generative AI is widely used, but ChatGPT is not a direct replacement for developers. Prompt engineering enhances ChatGPT's performance. The future of AI is promising, with open source models and proactive AI agents on the rise. Leveraging prompt engineering and dedicated LLM tools can improve code generation and automation.
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.
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.
Lessons for Building Resilient Codebases
JSNation 2024JSNation 2024
29 min
Lessons for Building Resilient Codebases
Code bases degrade over time, so it's important to build a protective layer and accept imperfections. Collocation and leaving traces in the code are key for better understanding. TypeScript's strict null checks and explicit typing can improve code reliability. Guidelines and naming conventions are crucial for maintaining a consistent and scalable architecture. Version control complexity is not significantly affected by having multiple components in one file.
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
Vue.js Live 2024Vue.js Live 2024
8 min
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
Knowing JavaScript is essential for getting started with Vue. Understanding the fundamentals of Vue and building on individual concepts will help you develop more complex applications. Don't fall into the trap of building something too big as a starter project. Focus on the fundamentals and don't be swayed by industry standards or tricks posted online. Find a mentor to guide your Vue journey.
To App or Not: When to Choose Native or Web
React Day Berlin 2023React Day Berlin 2023
23 min
To App or Not: When to Choose Native or Web
Watch video: To App or Not: When to Choose Native or Web
The Talk discusses the choice between building native or web apps for software development. It explores the benefits of building web apps, such as fast development, easy debugging, and universal rendering. It also highlights the power of native apps, with their advanced features, better offline experience, and monetization opportunities. The Talk suggests using libraries like Capacitor or React Native to combine the benefits of both web and native apps.
React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
React Day Berlin 2023React Day Berlin 2023
10 min
React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
Watch video: React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
Imagine building your own video conferencing app in React using Daily React, a React library built on Daily's client SDK. Rendering components and user controls in the app is crucial, including joining the call, displaying participants, toggling camera and microphone, and leaving the call. Optimize hooks and add features like device pickers, screen sharing, and text chat. Find the code on daily's GitHub and documentation at docs.daily.co.
Empathy Driven Development
React Day Berlin 2023React Day Berlin 2023
29 min
Empathy Driven Development
Watch video: Empathy Driven Development
This Talk explores empathy-driven development in software engineering, emphasizing the importance of understanding and applying empathy in code reviews, communication, and team collaboration. It highlights the benefits of empathy, such as personal growth, effective communication, and high code quality, while cautioning against excessive empathy. The Talk also discusses building empathetic teams, conducting empathy workshops, and practicing empathy in interviews. It addresses language barriers, handling engineers, and the role of AI in fostering empathy.
What I Learned About Software Quality From The 10 Most Popular Javascript Projects On Github
TestJS Summit 2023TestJS Summit 2023
27 min
What I Learned About Software Quality From The 10 Most Popular Javascript Projects On Github
The Talk discusses the code review process and the importance of software quality. It emphasizes the need for maintainability in code and the use of guidelines tailored to the team. The Talk also highlights the significance of functional suitability and the challenges of code review. Automation and documentation are recommended to improve code reviews and ensure software quality.
React Server Components from Scratch
React Summit US 2023React Summit US 2023
29 min
React Server Components from Scratch
Watch video: React Server Components from Scratch
This Talk introduces React Server Components and provides a step-by-step guide on building and rendering them. It explores the capabilities of server components, including interactivity and streaming. The Talk also covers the process of incorporating client-side rendering and the challenges of bundling and mapping client components. Additionally, it discusses the importance of supporting React Server Components and the ongoing efforts to integrate them with different bundlers.
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
React Summit US 2023React Summit US 2023
30 min
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
Watch video: Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
This Talk explores the journey of a software developer in unraveling the mysteries of Netflix TV UI. It emphasizes the importance of continuous learning in TV UI development and discusses the use of React and the TV signup process. The Talk also highlights the significance of widgets, navigation, and the TVUI Explorer app in building TV UI. It delves into the TVUI dev process, testing layers, and the value of continuous learning and fresh perspectives in the tech industry. The Talk concludes with insights on job opportunities, resources for TV development, and the Netflix hiring process.
Let’s Build a TV Spatial Navigation
React Advanced Conference 2023React Advanced Conference 2023
18 min
Let’s Build a TV Spatial Navigation
Watch video: Let’s Build a TV Spatial Navigation
This talk discusses the challenges of implementing spatial navigation for TV controls and the need for a library. The approach to spatial navigation can be improved by developing extra logic to connect TV control with the application. The demo application showcases the use of a NavigationEngine class and the useFocusRef hook function. The integration logic involves selecting the next node based on key presses and node coordinates. The talk also highlights the challenges of complex arrangements and circular navigations in smart TV application development.
Local-First Software With ElectricSQL
React Advanced Conference 2023React Advanced Conference 2023
29 min
Local-First Software With ElectricSQL
Watch video: Local-First Software With ElectricSQL
Local-first software allows for instant display of data to the user, offering zero latency and offline functionality. It simplifies data synchronization and enables real-time multi-user sync. Popular tools like Facebook Messenger and Google Workspace apps have adopted this pattern. Electric SQL provides a drop-in sync layer for existing applications, combining real-time functionality with conflict-free offline capabilities. Local-first software replaces APIs and microservices with a standardized replication protocol, simplifying state management and reducing server load.
Real-Time Collaborative State on the Edge
React Advanced Conference 2023React Advanced Conference 2023
26 min
Real-Time Collaborative State on the Edge
Watch video: Real-Time Collaborative State on the Edge
Steven, a design tool nerd, worked on InVision Studio and now focuses on LiveBlocks, providing APIs and tools for multiplayer collaboration. Collaborative design tools like Figma, Canva, Mural, Notion, Mirror, Linear, and Pitch use conflict resolution algorithms such as OTs and CRDTs. Data migration and collaboration patterns are important considerations for building production applications. Figma stands out for its seamless assembly of collaboration features. LiveBlocks enables front-end developers to build collaborative experiences without complex backend infrastructure, using fractional indexing for consistent ordering.
Implementation of Schedules and Timelines
React Advanced Conference 2023React Advanced Conference 2023
6 min
Implementation of Schedules and Timelines
Watch video: Implementation of Schedules and Timelines
Today's Talk focuses on implementing schedules and timelines using the PlanBy component. PlanBy is a React-based tool that offers a simple interface and features like sidebar, timeline, layout, and live program refreshing. It uses a custom virtualized view to handle large amounts of data efficiently. The component allows for easy customization and can be used to build schedulers, conference agendas, TV guides, and more. Installation is straightforward, requiring only a few components, one hook, and two wrappers.
Hacking an e-Reader with React
React Advanced Conference 2023React Advanced Conference 2023
7 min
Hacking an e-Reader with React
Watch video: Hacking an e-Reader with React
React for eBooks? Learn how to hack an eReader to display a tea menu. Create images and write e-books using React. Use EPUB format to create chapters and include CSS. Use Pandoc and Dino to simplify the process and make quick updates.
Feature Flagging With React
React Advanced Conference 2023React Advanced Conference 2023
27 min
Feature Flagging With React
Watch video: Feature Flagging With React
Feature management in React.js applications involves techniques like feature flags and toggles, allowing for decoupling of application deployment from feature releases. Gradual rollouts, remote configuration, and audience targeting are key techniques. Increased control and flexibility in feature management provide targeted launches and quick rollbacks, but there are pain points like lack of reviews and approval workflow. Infrastructure as code (IAC) and GitOps are practices that can be combined with feature management. Feature Advisor is a tool that helps with feature management in React applications, focusing on principles rather than the tool itself.
Superpowers of Browser’s Web API
React Advanced Conference 2023React Advanced Conference 2023
23 min
Superpowers of Browser’s Web API
Watch video: Superpowers of Browser’s Web API
Today's Talk explores various Web APIs and their functionalities, including the Intersection Observer API for element visibility, the Network API for connection detection, and the Background Sync API for offline capabilities. The Broadcast Channel API enables communication between components and the Beacon, Web Speech, Web Share, Screen Awake Lock, Page Visibility, Background Fetch, and Web Authentication APIs offer additional functionalities. These standardized APIs work across browsers and can improve performance while reducing electricity consumption.
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
React Advanced Conference 2023React Advanced Conference 2023
30 min
Thinking Differently About a11y – Accessible Website Design for the Neurospicy
Watch video: Thinking Differently About a11y – Accessible Website Design for the Neurospicy
Accessibility goes beyond screen readers and semantic HTML, and it's important to consider the needs of neurodivergent individuals. Cognitive impairments pose unique challenges, and COGA provides valuable guidelines for designing for cognitive accessibility. Customization, error tolerance, and compatibility with browser extensions are crucial in improving user experience. The NHS design system prioritizes functionality and has proven effective in handling emergencies. Understanding user needs and advocating for change within the tech industry are essential for creating a more accessible web.
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
React Advanced Conference 2023React Advanced Conference 2023
28 min
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
Watch video: The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.
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.
From Theory to Practice: harnessing Typescript for successful Atomic Design implementation
TypeScript Congress 2023TypeScript Congress 2023
27 min
From Theory to Practice: harnessing Typescript for successful Atomic Design implementation
Leveraging TypeScript and Atomic Design can solve code structure conundrums and achieve readability, efficiency, and flexibility. TypeScript offers benefits like intelligent refactoring, improved on-boarding, and fewer bugs. Typescript makes you think differently and opens doors for what you can do. Real-world challenges and considerations can be exacerbated when using TypeScript with atomic design. Avoid over-engineering and code depth, and stay close to the product to maintain codebase alignment.
Taming Language Models through TypeScript
TypeScript Congress 2023TypeScript Congress 2023
26 min
Taming Language Models through TypeScript
TypeChat is an open-source library that uses TypeScript types to guide and validate responses from language models. It allows for the creation of complex responses and provides a way to repair errors in the model. TypeChat programs enable better flow of data and the ability to refer to individual steps. The math example demonstrates the use of a program translator and metaprogramming techniques for type safety. Language models trained on both code and prose perform well in this context.
How to Convert Crypto Currencies With GRPC Microservices in Node.js
JSNation 2023JSNation 2023
117 min
How to Convert Crypto Currencies With GRPC Microservices in Node.js
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
The workshop overviews key architecture principles, design patterns, and technologies used to build microservices in the Node.js stack. It covers the theory of the GRPC framework and protocol buffers mechanism, as well as techniques and specifics of building isolated services using the monorepo approach with lerna and yarn workspaces, TypeScript. The workshop includes a live practical assignment to create a currency converter application that follows microservices paradigms. It fits the best developers who want to learn and practice GRPC microservices pattern with the Node.js platform.
Prerequistes:- Good understanding of JavaScript or TypeScript- Experience with Node.js and writing Backend applications- Preinstall Node.js, npm- Preinstall Protocol Buffer Compiler- We prefer to use VSCode for a better experience with JavaScript and TypeScript (other IDEs are also ok)
How Grafana Uses React to Power the World of Observability
React Summit 2023React Summit 2023
7 min
How Grafana Uses React to Power the World of Observability
Watch video: How Grafana Uses React to Power the World of Observability
Grafana uses React to power its open source platform, leveraging its vast ecosystem, improved performance, and community contributions. The choice of state management tool depends on the team's problem space. React Hooks have posed challenges but have also been a powerful tool for developers. The new Scenes library simplifies development and reduces the learning curve. Despite challenges, React remains a powerful tool for complex frontends, and Grafana will continue to use it.
Visual CMS… cool for React devs? Now’s the time!
React Summit 2023React Summit 2023
8 min
Visual CMS… cool for React devs? Now’s the time!
Watch video: Visual CMS… cool for React devs? Now’s the time!
The Talk discusses the need for a revolutionary product that will change the way people edit websites. It highlights the challenges faced in visual editing and the limitations of existing CMSs. The Talk also emphasizes the benefits of headless CMSes for developers but acknowledges the sacrifice of visual editing. Ultimately, a solution is sought that caters to both content editors and developers.
Overcoming Performance Limitations in React Components for Low-end Devices
React Summit 2023React Summit 2023
9 min
Overcoming Performance Limitations in React Components for Low-end Devices
Watch video: Overcoming Performance Limitations in React Components for Low-end Devices
This Talk discusses overcoming performance limitations in React components for low-end devices, focusing on app launch time and scrolling performance. The speaker shares techniques for improving app launch and scrolling performance, such as pre-rendering, generating HTML at build time, and using the Virtual List component. The Virtual List component recycles dominoes and uses Translate3D function for improved performance. Delegating scrolling to the browser in NativeMode and supporting scrolling via remote control keys are also mentioned. Overall, the Talk highlights the importance of optimizing performance for low-end devices and provides practical solutions for achieving better performance in React components.
WHOA, I Wrote This React App With My Voice!
React Summit 2023React Summit 2023
9 min
WHOA, I Wrote This React App With My Voice!
Watch video: WHOA, I Wrote This React App With My Voice!
Today we're going to build a React application with just our voice using GitHub Copilot, an AI peer programmer powered by OpenAI Codecs. It's important to be specific in your comments to get accurate suggestions from Copilot. Prompt engineering tips can be used to create different applications, such as a basic markdown editor and a simple to-do app. The application was tested successfully by adding and deleting to-do items using voice commands.
The Future Stack of Code Review
JSNation 2023JSNation 2023
22 min
The Future Stack of Code Review
The Talk discusses the challenges of code reviews and the need to redefine the code review process in light of changes in software development. It emphasizes the importance of collaboration, security, performance, and clean code in the new stack of code review. The Talk also highlights the benefits of automating code review comments and optimizing the code review process. Overall, the Talk aims to build a better code review process that promotes collaboration and improves the quality of software development.
Using PKCE to Communicate Between React and Native Mobile SDKs
React Summit 2023React Summit 2023
8 min
Using PKCE to Communicate Between React and Native Mobile SDKs
Watch video: Using PKCE to Communicate Between React and Native Mobile SDKs
The Talk discusses communication between React apps/web apps and native applications/SDKs. It explores the challenges of embedding web code in a WebView and proposes running the browser in an embedded mode. The use of deep links and the Pixie protocol is highlighted as a solution for securely exchanging data between the web code and native applications. The Pixie protocol involves generating an authorization code and comparing it with the original key for secure data exchange.
No CRA? What now?
React Summit 2023React Summit 2023
7 min
No CRA? What now?
Watch video: No CRA? What now?
React docs suggest using production-grade frameworks like Remix, Next.js, or Gatsby. But if you want to start with a simple pure React app, you can use Vite or Parcel as generic bundlers. Nx provides facilities to set up a workspace similar to Create React app with modern features. You can modularize and scale your project using Nx libraries. Consider upgrading to a Monorepo structure and adding Next.js or Remix applications. Migration strategies are available for existing React apps.
How to Become a Fintech Developer in Seven Minutes
React Summit 2023React Summit 2023
7 min
How to Become a Fintech Developer in Seven Minutes
Watch video: How to Become a Fintech Developer in Seven Minutes
RAPID is a globally integrated FinTech system that abstracts all the integrations into a single platform, eliminating the need for merchants to manage multiple integrations for payments, payouts, fraud detection, and compliance policies in different jurisdictions. RAPID offers various use cases, including e-commerce, online gaming, and marketplaces. With RAPID, merchants can easily handle payments, payouts, and fund transfers. Let's create a hosted checkout page through RAPID by signing up to the client portal, copying authentication keys, and following simple steps. After making a payment on the hosted checkout page, you can view payment details and transferred funds in the client portal. Congratulations, you're now a fintech developer!
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
Watch video: Moving on From Runtime Css-In-Js at Scale
This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.
Federated Microfrontends at Scale
React Summit 2023React Summit 2023
31 min
Federated Microfrontends at Scale
Top Content
Watch video: Federated Microfrontends at Scale
This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.
Accessible Component System Through Customization
JSNation 2023JSNation 2023
30 min
Accessible Component System Through Customization
The Talk discusses the importance of building an accessible UI component library, focusing on reusability, customizability, and responsiveness. It emphasizes the need for visual and functional consistency when developing components and highlights the key aspects of accessibility, including keyboard navigation, contrast, and content structure. The Talk also covers the building of accessible dialogues and provides tips for enhancing user experience. It emphasizes the significance of documentation, scalability, and customization in component planning. The Talk concludes by discussing the use of ARIA, accessibility testing, and strategies for persuading organizations to prioritize accessibility.
Maintaining a Component Library at Scale
JSNation 2023JSNation 2023
9 min
Maintaining a Component Library at Scale
Jumbo, a grocery chain in the Netherlands, has a tech campus with over 400 developers working on digital solutions. They built a distributed component library called Kompas, allowing everyone to contribute and ensuring knowledge is not lost. They adopted a hybrid solution, combining centralized and decentralized approaches, for fast development while maintaining a clear vision and high-quality standards. The key takeaway is to be willing to change processes and find what works best for your organization or team.
Bun, Deno, Node.js? Recreating a JavaScript Runtime From Scratch
JSNation 2023JSNation 2023
28 min
Bun, Deno, Node.js? Recreating a JavaScript Runtime From Scratch
This Talk explores the journey of learning and recreating Node.js from scratch, highlighting the main components and experimentation involved. It delves into implementing functions in V8 and setTimeout in Node.js, as well as the execution pipeline and the event loop. The collaboration between different JavaScript runtimes and the continuing evolution of Node.js are also discussed. The speaker shares their experience of exploring Node.js and writing a book, and hints at future projects involving React Native.
Build a Collaborative Notion-Like Product in 2H
JSNation 2023JSNation 2023
87 min
Build a Collaborative Notion-Like Product in 2H
WorkshopFree
Witek Socha
Witek Socha
You have been tasked with creating a collaborative text editing feature within your company’s product. Something along the lines of Notion or Google Docs.
CK 5 is a feature-rich framework and ecosystem of ready-to-use features targeting a wide range of use cases. It offers a cloud infrastructure to support the real-time collaboration system needs. During this workshop, you will learn how to set up and integrate CK 5. We will go over the very basics of embedding the editor on a page, through configuration, to enabling real-time collaboration features. Key learnings: How to embed, set up, and configure CK 5 to best fit a document editing system supporting real-time collaboration.
Table of contents:- Introduction to the CK 5 ecosystem.- Introduction to a “Notion-like” project template.- Embedding CK 5 on a page.- Basic CK 5 configuration.- Tuning up CK 5 for a specific use case.- Enabling real-time editing features.
0 To Auth In An Hour For Your JavaScript App
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
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 + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely 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.
Why Scaling Bottom-up? How Teams’ Interactions Should Impact the Organizational Structure
TechLead Conference 2023TechLead Conference 2023
17 min
Why Scaling Bottom-up? How Teams’ Interactions Should Impact the Organizational Structure
The Talk discusses the importance of organizational layout and Teams interactions in software development. It explores the challenges of organizational shards and the need for problem thinking to optimize team communication. The concepts of loose coupling, high cohesion, and clear domains of responsibility are explained. The Talk also emphasizes the three essential team interaction modes: working closely together, X as a service, and facilitation. Furthermore, it highlights the significance of understanding domains, boundaries, and domain-driven design for efficient work and fast delivery.
The Rewrite Trap
TechLead Conference 2023TechLead Conference 2023
22 min
The Rewrite Trap
The Talk discusses the 'rewrite trap' in software development, where the urge to start from scratch often leads to poor outcomes. It emphasizes the importance of understanding the existing project before making big technical decisions and the benefits of gradual improvement. The Talk also highlights the challenges and pitfalls of a complete rewrite, such as false sense of productivity, problems with edge cases, and the accumulation of tech debt. It stresses the need to understand the system and its influences, cater to the needs of stakeholders outside of engineering, and focus on creating value.
Purpose: What I Learned from Stepping Down as Team Lead Twice
TechLead Conference 2023TechLead Conference 2023
8 min
Purpose: What I Learned from Stepping Down as Team Lead Twice
The Talk discusses the importance of finding purpose and learning from past experiences in software development. It emphasizes the need to test different areas and reflect on experiences to find direction. Understanding one's purpose and the value it brings is crucial. Mistakes are seen as valuable insights for improvement.
What Engineering Leaders Should Know About DevRel (But Were Too Busy to Ask)
TechLead Conference 2023TechLead Conference 2023
21 min
What Engineering Leaders Should Know About DevRel (But Were Too Busy to Ask)
DevRel is about understanding the audience and collaborating with different departments. Dev Advocates bridge gaps between engineering and marketing, provide feedback, and stay updated on industry trends. DevRel helps raise team profiles, assists with editing and getting on podcasts, and aims to make engineers successful. Collaboration is key in DevRel.
Building Figma’s Widget Code Generator
React Advanced Conference 2022React Advanced Conference 2022
19 min
Building Figma’s Widget Code Generator
This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.
Making a Splash: The Story of a Toilet Map Migration
React Advanced Conference 2022React Advanced Conference 2022
24 min
Making a Splash: The Story of a Toilet Map Migration
The Talk discusses the migration of the Toilet Map Project from Create React app to Next.js, with plans to take it international. The project aims to address the inadequate public toilet provision in the UK. It includes publicly accessible toilets, community access schemes, and user contributions. The migration to Next.js offers benefits like server-side rendering and root prefetching. The Talk also covers the migration to TypeScript, improvements in loading speed and caching, dynamic pages, API migration, geohashing, marker clustering, chunk loading, accessibility overlay, and future plans for expansion and user contributions.
Lessons Learnt While Creating a New Framework on Top of React
React Advanced Conference 2022React Advanced Conference 2022
20 min
Lessons Learnt While Creating a New Framework on Top of React
React is a versatile tool that goes beyond front-end development and can be used for synthesizing music. Creating a specialized framework with React requires understanding the tooling ecosystem and React's design philosophy. Examining good codebases like createreactapp can accelerate development. Handling side effects and module replacement can be achieved through techniques like dead code elimination and hot module replacement. Maintaining component state and implementing hot module replacement are important considerations for a React application.
Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️
React Advanced Conference 2022React Advanced Conference 2022
9 min
Building a Lightning-Fast Site with Next.js, GraphQL and Tailwind ⚡️
Ankita explains how to build a lightning-fast site using Next.js, GraphQL, and Tailwind. Next.js offers rendering techniques for improved performance and SEO, as well as support for dynamic imports and deferring non-essential scripts. Next.js also provides performance benefits like layout stability and improved lighthouse score, along with server-side rendering and caching. GraphQL allows for efficient data retrieval, Apollo Client handles caching, and Tailwind simplifies CSS. The future goal is to make UI development easier and faster with React server components and Tailwind CSS.
Arrows (At Length)
React Advanced Conference 2022React Advanced Conference 2022
23 min
Arrows (At Length)
This talk focuses on arrows and their unique features in diagramming tools. It explores the challenges of arrow positioning and connector selection, particularly with irregular shapes. The talk also discusses alternative arrow intersections and curved lines, as well as the challenges of creating curved arrows. The speaker presents a method for creating arrows and moving handles that always look good. The talk concludes with an invitation to try out the new version of Teal Draw and follow the speaker on Twitter for more arrow content.
How I Test a Million UI States with Every Merge — Visual Testing with Storybook
React Advanced Conference 2022React Advanced Conference 2022
29 min
How I Test a Million UI States with Every Merge — Visual Testing with Storybook
The Talk discusses the need for more robust tools for visual testing in UI development. It explores the challenges in building UIs, including multiple views, variants, and breakpoints. The importance of component extraction and interactions is emphasized. The Talk also covers story derivation from components and interactions, UI testing with the test runner, and visual regression testing with Chromatic. Automating tests using GitHub Actions and common mistakes in using Storybook are discussed. The Talk concludes with a Q&A session.
AG Grid's New React Rendering Engine
React Advanced Conference 2022React Advanced Conference 2022
6 min
AG Grid's New React Rendering Engine
AGgrid is an enterprise component with cool chart features that superpowers any application. AG Grid's React UI provides a native React experience with all the benefits of React and AG Grid's intelligence and power.
Back to the Future
React Advanced Conference 2022React Advanced Conference 2022
30 min
Back to the Future
The speaker shares their personal journey in the software development field, from starting in technology after college to experiencing burnout and taking steps towards self-care. They emphasize the power of technology and accessibility, as well as the emergence of edge computing. The speaker introduces their project, the Multiplayer Development Kit, and discusses the challenges of building real-time multiplayer apps. They also highlight the importance of work-life balance and personal growth in the industry.
The Journey of CodeSandbox Projects
React Advanced Conference 2022React Advanced Conference 2022
25 min
The Journey of CodeSandbox Projects
Code Sandbox is an online code editor that started as a component editor. It has evolved and now has 30 million sandboxes. The creators emphasize the importance of seeking external feedback and doing fast releases. They also highlight the power of having true fans and the value of user feedback. Code Sandbox is expanding to support big projects and integrating with GitHub. It offers collaboration features, the ability to use your own code editor, and native apps for iPad and iPhone. The challenges lie in running everything in a virtual machine and enabling fast dev servers. Code Sandbox is also exploring the possibility of running other technologies like Deno, Bun, and Ruby on Rails. The talk concludes with a demo of running a Minecraft server on Code Sandbox.
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.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
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.
Find Out If Your Design System Is Better Than Nothing
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.
Don't take it Personally, it is Personalization
React Summit 2022React Summit 2022
22 min
Don't take it Personally, it is Personalization
Personalization is the ability to offer exclusive experiences based on existing data. It is important to meet customer expectations and stay competitive. There are four types of personalization: explicit, implicit, interrupted, and seamless. Implementing personalized experiences involves using tools like Next.js and NetJS. Best practices include avoiding annoying users, testing strategies, and monitoring analytics.
Large scale projects challenges (NextJS - Contentful)
React Summit 2022React Summit 2022
20 min
Large scale projects challenges (NextJS - Contentful)
This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.
Introducing Design System to Multinational Web Apps
React Summit 2022React Summit 2022
18 min
Introducing Design System to Multinational Web Apps
Octopus Energy introduced design systems to address challenges in maintaining brand identity, accessibility, and developer experience. They built a component library using design guidelines and accessibility best practices, following Bradfrost's atomic design methodology. They used TypeScript, Jest, Versal, and Storybook for building and testing the library. The design system is an ongoing project that evolves with the product and business over time.
Multiple apps, one code to rule them all
React Summit 2022React Summit 2022
20 min
Multiple apps, one code to rule them all
This Talk discusses the benefits of using a single app to host multiple experiences or mini-apps, as opposed to a micro front-end architecture. By using a single app, it becomes easier to share state, simplify code sharing, handle analytics and errors, and deploy and monitor the app. The Talk also covers the handling of the shell app, routing, authentication, and subdomains for authentication.
Finding Stealthy Bots in Javascript Hide and Seek
JSNation 2022JSNation 2022
11 min
Finding Stealthy Bots in Javascript Hide and Seek
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.
You Do Have Time to Build it Twice
React Summit 2022React Summit 2022
21 min
You Do Have Time to Build it Twice
Top Content
Today's Talk focuses on software rewrites, specifically the transition from jQuery to React. The speaker shares their experience of rewriting a jQuery app to React, highlighting the benefits of the rewrite in terms of improved user experience and increased conversions. Approaches to software rewrites are discussed, including the page-by-page approach which allows for product innovation. The speaker emphasizes the importance of prioritizing rewrites or refactors for startups. The Talk concludes with insights on testing, server-side functionality, and the overall value of the rewrite.
How React Applications Get Hacked in the Real-World
React Summit 2022React Summit 2022
7 min
How React Applications Get Hacked in the Real-World
How to hack a RealWorld live React application in seven minutes. Tips, best practices, and pitfalls when writing React code. XSS and cross-site scripting in React. React's secure by default, but not always. The first thing to discover: adding a link to a React application. React code vulnerability: cross-site scripting with Twitter link. React doesn't sanitize or output H ref attributes. Fix attempts: detect JavaScript, use dummy hashtag, transition to lowercase. Control corrector exploit. Best practices: avoid denialist approach, sanitize user inputs. React's lack of sanitization and output encoding for user inputs. Exploring XSS vulnerabilities and the need to pretty print JSON. The React JSON pretty package and its potential XSS risks. The importance of context encoding and secure coding practices.
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
React Summit 2022React Summit 2022
8 min
Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands
I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.
5 Years of Building React Table
React Summit 2022React Summit 2022
24 min
5 Years of Building React Table
Top Content
React Table is a popular table library that started with HTML5 tables and transitioned to React. It faced challenges with integration and user requests, leading to the development of React Table. The introduction of the Headless UI pattern and TypeScript support improved the library's capabilities and quality. Generics and TypeScript played a significant role in reducing the code size and improving development. React Table is now going framework agnostic and partnering with AG Grid.
Automatically maintaining thousands of code demos across multiple framework variations
JSNation 2022JSNation 2022
7 min
Automatically maintaining thousands of code demos across multiple framework variations
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.
Plug-in architecture: how TypeScript let us paint-by-numbers
TypeScript Congress 2022TypeScript Congress 2022
15 min
Plug-in architecture: how TypeScript let us paint-by-numbers
When faced with challenges in supporting multiple package managers and keeping up with growth, implementing a plugin architecture can help. Extending a CLI for source control management systems like GitHub and GitLab can be done using TypeScript and Oclef CLI. TypeScript errors can be resolved by adding missing properties and implementing required functions for plugins. Supporting multiple repositories by following TypeScript errors and having the right setup can reduce time to production and onboarding. Plugin architecture with TypeScript can be a valuable tool for faster development and onboarding onto repositories.
Making Multiplayer Games with Colyseus, Node.js and TypeScript
JS GameDev Summit 2022JS GameDev Summit 2022
31 min
Making Multiplayer Games with Colyseus, Node.js and TypeScript
Top Content
Today's Talk covers making multiplayer games with Coliseus, Node.js, and Typescript. It explores the state of networking on the web, alternative servers, and how Coliseus works. The Talk also discusses client-side prediction, lag compensation, server limitations, scaling, and showcases cool games made with Coliseus. Additionally, it mentions Nakama and Unity integration for client-side prediction in multiplayer games. Coliseus is available on mobile and can be found on colossus.io or the GitHub repository.
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
Node Congress 2022Node Congress 2022
134 min
Deploying a decoupled restaurant review site to production with Strapi and Platform.sh
WorkshopFree
Shedrack Akintayo
Chad Carlson
2 authors
Node.js has become an increasingly popular language to build and deploy backend APIs. In a world of legacy CMSs adopting decoupled implementations, plenty of frameworks have sprung up to classify themselves as "headless" CMSs, designed from the start to provide an easy way to personalize content models, administer permissions and authentication, and serve a content API quickly.
Strapi, one of the leaders in this space, has recently released their v4 version of the framework, and with Platform.sh it can be deployed alongside a number of frontends within the same project, giving a drastically simplified development experience working with decoupled sites. In this workshop, we'll deploy a Strapi demo application, which has been configured to serve a restaurant review site.
Piece piece you will add database services, tests, and frontends, all within the safety of isolated development environments. At the end, each user will have a functioning decoupled site, and some greater understanding of working with decoupled sites in production.
Semantic Search through the Complete Wikipedia with Weaviate’s GraphQL API
GraphQL Galaxy 2021GraphQL Galaxy 2021
17 min
Semantic Search through the Complete Wikipedia with Weaviate’s GraphQL API
Weaviate is a database and search engine that uses a GraphQL API. It supports various machine learning models for data vectorization and search. The core functions of Weaviate are get, explore, and aggregate, which allow users to query and search through the data set. Weaviate provides fast and accurate results, allowing users to find anything in the dataset. The GraphQL API in Weaviate can be used for querying specific data and establishing graph relations.
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
So Now You Know: Learnings on People, Product and Culture from Hypergrowth at Snyk
React Advanced Conference 2021React Advanced Conference 2021
8 min
So Now You Know: Learnings on People, Product and Culture from Hypergrowth at Snyk
Sneak, a software company, has experienced significant growth since its founding in 2015. They face challenges in culture, hiring, and scaling but focus on communication and transparency to manage change. Sneak emphasizes building a strong culture and supporting communities of practice. They hire based on key values and provide support for new hires to thrive. The concept of 'giving away our Legos' is embraced to scale effectively.
Debugging a Non Reproducible Crash
React Advanced Conference 2021React Advanced Conference 2021
20 min
Debugging a Non Reproducible Crash
The Talk discusses a vicious bug that caused 20,000 crashes in a JS application. The bug was an array index out of bounds exception in the SimplePool class. The team used a debugger to analyze the bug and discovered a race condition caused by an upgrade to React Native SVG. They collaborated with React Native contributors to fix the issue and deployed a patched version. The Talk emphasizes the importance of using a crash reporting tool, monitoring release health, and learning from bugs and source code analysis.
How Hopin is Moving 10x Faster: Microfrontends at Scale
React Advanced Conference 2021React Advanced Conference 2021
25 min
How Hopin is Moving 10x Faster: Microfrontends at Scale
This Talk discusses how Hoping uses micro frontends to improve development speed and create boundaries between applications. They break up apps into smaller, independently deployable apps owned by small teams. They use webpack and module federation to integrate dependencies at runtime and have a lightweight store for sharing state. The Talk also addresses performance concerns and the importance of explicit contracts and namespace styles to avoid conflicts between micro frontends.
Components, Patterns and sh*t it’s Hard to Deal with
React Advanced Conference 2021React Advanced Conference 2021
29 min
Components, Patterns and sh*t it’s Hard to Deal with
This Talk discusses modular architectures, patterns, and components in software development. It explores the concept of creating components and pattern libraries, as well as the challenges and benefits they present. The Talk also delves into managing code for flexible pattern usage and the responsibility of modules. It addresses issues such as class name injection, specialized patterns, and modifying components. Additionally, it emphasizes the importance of communication and collaboration with designers, testing UI complexity, and organizational responsibility for UI.