React Day Berlin

React Day Berlin

@reactdayberlin.gitnation.org

Meet React heroes on December 4 & 7 in Berlin & Online 🌍 👥 40+ speakers & trainers 💻 Build apps, not walls (for the AI era) 👨‍💻 800+ devs attending Don’t miss it: https://reactday.berlin/

303 followers30 following79 posts

React Day Berlin
@reactdayberlin.gitnation.org

Berlin devs 👋 Come hang out with us on March 24 🎤 Talks: • Craig Walker — WebStorm Developer Experience Research, Figma and Storybook Integration • Bernardo Belchior — Can SVG Be Fast? Rendering a Scatter Chart With Over 10K Points • @buraaak.bsky.social — Semantic Caching for Your Agent Chat

React Day Berlin
@reactdayberlin.gitnation.org

Berlin devs 👋 Come hang out with us on March 24 🎤 Talks: • Craig Walker — WebStorm Developer Experience Research, Figma and Storybook Integration • Bernardo Belchior — Can SVG Be Fast? Rendering a Scatter Chart With Over 10K Points • @buraaak.bsky.social — Semantic Caching for Your Agent Chat

React Day Berlin
@reactdayberlin.gitnation.org

🚀 What an incredible night at #ReactBerlinMeetup! 🎤 Huge thanks to Anastasiia Mihal, Ruslan Zharkov and Bogdan Plieshka for their inspiring talks! 🙌 Special shoutout to our hosts Bogdan Plieshka & Kim Ngan Le Dang and our support team - Arun Pariyar & Ravindra Chhetri. See you next time!😎

React Day Berlin
@reactdayberlin.gitnation.org

Check out the insightful talk by @steveruizok.bsky.social on the viral AI experiment "Make Real" at the past conference. Learn about the #React rollercoaster ride and the behind-the-scenes perspective. https://gitnation.com/contents/make-real-tldraws-accidental-ai-play

gitnation.comMake Real: Tldraw’s Accidental AI Play by Steve RuizI'm Steve Ruiz, the founder and CEO of Tealdraw. TLDR is a canvas app in React that allows developers to build with their SDK. TLDR pays attention to details that enhance the canvas experience and can be used to interact with different elements. TLDR's demos showcase its versatility, but may not perform well on social media. TLDR's AI collaboration features allow users to quickly turn their drawings into AI-generated images. The Make Real project helps users create user interfaces by drawing and providing prompts, generating working prototypes. The system behind Make Real can handle complex interactions and ambitious projects. OpenAI integration and the Steel Draw Computer enable building workflows and multi-stage generations. The goal is to bring the Canvas from being specialized to a primitive for the web. Teal Draw is free for open source and non-commercial use, with options to purchase licenses for additional features.
React Day Berlin
@reactdayberlin.gitnation.org

Incredible insights from @neogoose.bsky.social at the past conference talk on #Rust, #React, #Rescript, and #wasm integration for high-performance video rendering with http://fframes.studio! https://gitnation.com/contents/react-via-rust-and-rescript-why-and-how

gitnation.comReact via Rust and Rescript: Why and How? by Dmitry KovalenkoI'm here to talk about Rust and Rescript, languages in the React community that offer interesting possibilities. Writing React in different languages can improve performance and code correctness. TypeScript can be messy and has challenges in Material.UI, while Rescript offers better code quality and type safety. Rescript supports advanced React features and using functions for JavaScript APIs. The power of Rescript and WebAssembly lies in writing better React code and optimizing performance. Integrating SVG into React with Rust provides fast rendering and keeps the structure intact. Learning new languages can improve code quality. Re-script debugging and SVG performance are important considerations. React Server Components and beginner Rescript projects are discussed in the Q&A session.
React Day Berlin
@reactdayberlin.gitnation.org

Great insights from @mbarto.bsky.social on #ReactFlight and #ReactServerComponents. Understanding the new communication protocol behind RSCs is key to unlocking their powerful features. https://gitnation.com/contents/meet-react-flight-and-become-a-rsc-expert

gitnation.comMeet React Flight and Become a RSC Expert by Mauro BartolomeoliMy name is Mauro and I work for a company called Doubleloop in Italy. Today, I'm going to share my learning journey through puzzles and challenges related to React Server Components (RSC). RSC allows for server-side rendering and streaming of components. React flight, a protocol used to serialize and share rendering jobs, is a key feature of RSC. RSC can be used without a server, known as React Serverless Components. Using RSC, different types of content can be switched using the useState hook. RSC can be effectively used on a server by starting Node.js with a specific flag. Client-only components recognized by RSC can be executed on the client. React Streaming Components introduces the streaming concept and allows for continuous updates of the page. Advanced features of React Streaming Components include asynchronous rendering, suspense, and recursion. The React Strange Constraints challenge focuses on optimizing rendering by sending the initial page as HTML. The use of a proxy and RS
React Day Berlin
@reactdayberlin.gitnation.org

Astonishing insights from @hunormarton.bsky.social at the past conference talk on utilizing #SVG with #React to create diagrams, graphics, animations, games, and apps. Learn the basics of the syntax at https://svg-tutorial.com/. https://gitnation.com/contents/svg-tutorialcom

gitnation.comHow to Code Images in React with SVG by Hunor Márton BorbélyToday's Talk is about coding images in React with SVGs. SVGs are powerful when combined with JavaScript and can be used to create interactive elements. Understanding SVG syntax and positioning is important, as SVG elements are limited to SVG-specific elements. The circle element in SVG can be styled and used to create shapes. The rectangle element is commonly used for charting and can be customized. The path element offers flexibility and can be built from multiple segments. Transformations and curves can be used to create complex shapes and animations. Bezier curves, both quadratic and cubic, are useful for bending lines and creating smooth transitions. Advanced features like drawing arcs are available in SVG. For more examples and use cases, visit svgtutorial.com.
React Day Berlin
@reactdayberlin.gitnation.org

🌟 Excited to hear @willkle.in discuss winning over product developers and designers with a design system at the past conference talk! https://gitnation.com/contents/what-makes-a-design-system-win

gitnation.comWhat Makes a Design System Win by Will KleinThank you all for welcoming me here. I am giving a remote talk on testing. The community here is warm and amazing. I hope Marin does well and we hope to see him soon. Six years ago, I joined a big tech company working on improving UX and UI. We released the UX improvement to 60 million users, but overlooked leveraging the design system. Recognizing the importance of the design system, I reached out to the design system manager to address the issue. I proposed solving meeting fatigue and defined my role as an internal developer advocate. Challenges in shipping code for developers and building credibility were discussed. The importance of fostering open communication, supporting users, and expanding workshops was emphasized. Continuing conversations through office hours and release demos improved adoption. Streamlining code updates and celebrating advocacy were key strategies. The speaker now runs a developer tools company called Tool Space.
React Day Berlin
@reactdayberlin.gitnation.org

Don't miss the insightful talk by Omri Lavi on leveraging #AbstractSyntaxTrees for significant bundle size reduction. Learn key strategies and best practices to optimize your code! https://gitnation.com/contents/the-superpower-of-asts-how-we-saved-16percent-on-our-bundle-size

gitnation.comThe Superpower of ASTs: How We Saved 16% on Our Bundle Size by Omri LaviOur story is about a super tool that reduces bundle size without changing code. It removes input statements, improves performance, and reduces bundle size. ASTs are used to optimize constant files by removing references and replacing with values. Bubble is a tool for code manipulation using ASTs. Manipulating code with Bubble paths allows for removing unnecessary variable declarations. Careful handling and testing are necessary when using AST tools. Guarding assumptions and writing exec tests are key practices. Completing the AST development lifecycle ensures correct code updates. ASTs are a powerful tool for software development.
React Day Berlin
@reactdayberlin.gitnation.org

Incredible insights from Yael Balla at the past conference talk on #React caching strategies. Enhance your website performance with effective caching techniques! https://gitnation.com/contents/mastering-cache-control-optimizing-performance-for-react-applications

gitnation.comMastering Cache Control: Optimizing Performance for React Applications by Yael Balla - Video recordingToday we're going to talk about utilizing caching to optimize our web application performance. We will discuss caching data and resources outside of our React application, how to control and avoid caching problems, and the benefits of caching for improving web application loading times and reducing server load. We can cache static resources like images, media files, scripts, and CSS, as well as application data like the list of articles or posts. However, we need to be cautious with caching data that may become outdated. The service worker and browser cache can intercept network requests and load responses from their caches. Additionally, headers such as cache control and eTag can be used to control caching behavior. The CDN, a content delivery network, maintains cached resources globally and aims to deliver content efficiently. Different caching points store various types of content, improving performance and enabling offline functionality.
React Day Berlin
@reactdayberlin.gitnation.org

Check out the insightful talk by @micheluzzo.bsky.social on building mobile apps with #ReactNative and #Expo. Learn how to create customized apps quickly and efficiently for a niche user base of two! https://gitnation.com/contents/build-things-that-dont-scale-at-all

gitnation.comBuild Things That Don’t Scale at All by Michele Bonazza - Video recordingMy talk is about building things that don't scale. It starts with wanting to use a specific app and then deciding to build your own app. Building something that scales requires thinking about various factors like analytics, monetization, SEO, expansion, localization, and competition. Building fun and non-scalable apps can also be enjoyable. Examples include an app for automatically cropping screenshots and a private chat app. The use of Expo Go as a launcher for Expo apps and hosting servers for auto-updates is discussed. The creation of a Google calendar synchronizer using Expo Development Builds is also mentioned. The final takeaways are to think small, have fun with libraries but avoid using too many, and stay away from the app store for as long as possible. Visit the speaker's website for more information.
React Day Berlin
@reactdayberlin.gitnation.org

🔗Watch this talk recording! Dora Makszy presented "How to Train Your Designer?" at React Day Berlin! https://gitnation.com/contents/tips-and-tricks-for-achieving-seamless-collaboration-between-developers-and-designers

gitnation.comHow to Train Your Designer? by Dora Makszy - Video recordingHello, I'm Dora Moxie, a UX designer with experience in software development. Training a designer benefits the whole development process, ensuring smooth delivery. Designers have a unique perspective and prioritize problems by involving engineers and testing solutions. Effective communication and documentation lead to faster delivery. Designers empathize with the customer and understand the problem and business requirements. Collaboration between designers and developers is crucial for solving problems. The product trio of product management, engineering, and design work together as equal partners. Collaboration and iterative design lead to learning, growth, and stronger solutions. Be open-minded and collaborate with designers and involve users to solve real problems and increase satisfaction.

React Day Berlin reposted

Will Klein
@willkle.in

The calm before the storm. This room would soon fill up for my surprise talk on design systems at #ReactDayBerlin. I brought the chaos energy and went way over time while skipping half my content 🤣. And I am so thankful to everyone that welcomed me, listened, and found me after w/ questions. 🙇🏽