#fun demos

The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.

This Talk is about writing super tiny JavaScript programs, known as tiny code. It explores the concept of code golf and the use of a live editor for instant feedback. The Talk discusses various ways to share tiny code, including Twitter.net. It also covers creating graphics, games, and sound in a small space. The speaker highlights inspiring tweets and showcases examples of tiny code, including asemic writing. The future of tiny code includes new techniques, better browser support, and AI-assisted programming.

Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.

Menahi Shayan, former CTO, discusses the power of React in software development beyond the browser, emphasizing its ease of use and versatility. JS developers face challenges beyond JS comfort zones when building tools for various platforms, illustrating diverse paradigms and syntaxes. Learn how to set up office add-ins with React using Yeoman, generating boilerplate for Excel add-ins and exploring code structure. Explore ExcelJS API integration with React for Excel add-ins, including manipulating Excel sheets and syncing data between JavaScript and Excel runtimes. Extract values and addresses from selected ranges in Excel using context.sync function. Display data in JSX/TSX and demonstrate accessibility of data selected in Excel sheets through JavaScript/React. Leverage NPM packages including generative AI and Tailwind CSS to create a React-powered Excel add-in. Utilize Fluent UI for consistent UI with Excel and demonstrate JS capabilities in modifying Excel content. Discussing challenges in utilizing an LCD display with limited capabilities for React implementation and highlighting the absence of CSS, state management, animations, and DOM updates in current rendering methods. Presenting a groundbreaking solution to render React on embedded system displays by utilizing the Linux system frame buffer with Chromium, achieving high FPS and full HTML, CSS, and JS support. Running a React-based package called Magic Mirror on an embedded system enables seamless API calls through JavaScript, full UI rendering, Chromium inspector access, and remote debugging experience. Leveraging all available packages beyond the browser unlocks JavaScript's full potential on embedded systems, urging users to explore unconventional setups and embrace the native development philosophy.

Nick Hare, developer advocate at Veeam, learned robotics from open source projects. WebRTC facilitates secure machine connections. Implementing WebRTC involves using Stun, ICE candidates, TURN servers, and signaling. Signaling and Remote Procedure Calls are crucial for peer-to-peer communication. Building a proof of concept with Notify involves PubSub messaging and REST API. Establishing WebRTC connections and data channels enables direct messaging. Video streaming and remote control are demonstrated with a webcam connected to a Raspberry Pi. VM robotics development allows building robots and smart machines with cloud support and SDK.

I'm here with the Poimandris Open Source Dev Collective, and I'm going to show you how to make a game with React using patterns you know and probably a lot you don't. We'll use React, React 3 Fiber, Kota, and Triplex. Cota is a nimble state solution that creates a local database for efficient updates. Spawn entities with specific traits and update them accordingly. Learn about composable behavior in Kota and how to update entities every frame. Enhance the visual appearance of the game by adding a HiFi view, materials, lights, and post-processing for bloom. Understand the concepts of creating games in React, dynamically spawning entities, and giving them behavior. Learn about testing strategy, compatibility with React Native, and the advantages of using React for game development, including wider accessibility and quicker iteration.

React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.

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.