A big thanks to @jetbrains.com for hosting and supporting this event 🙌

React Berlin Meetup: High-Performance SVG & more! | Guild Mar 24th 6:30PM: Hey, React Berlin Community! Let’s open a new chapter this spring. Mark your calendars for March 24 - we’re getting together for an evening packed with insightful talks, networking w...

👉 Register now! guild.host/events/react...

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

🤝 A huge thanks to Grammarly for their support!

💡 Got insights to share at the next event? Submit your CFP here: docs.google.com/forms/d/e/1F...

🚀 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!😎

Make Real: Tldraw’s Accidental AI Play by Steve Ruiz I'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.

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.
gitnation.com/contents/make-real-tldra...

React via Rust and Rescript: Why and How? by Dmitry Kovalenko I'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.

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
gitnation.com/contents/react-via-rust-...

Meet React Flight and Become a RSC Expert by Mauro Bartolomeoli My 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

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

How to Code Images in React with SVG by Hunor Márton Borbély Today'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.

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

What Makes a Design System Win by Will Klein Thank 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.

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

The Superpower of ASTs: How We Saved 16% on Our Bundle Size by Omri Lavi Our 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.

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!
gitnation.com/contents/the-superpower-...

🤝 Have something to share? Submit your talk proposal here: forms.gle/t98kuHgHM8mp...

Meet our
#ReactBerlinMeetup speakers🎙️

• Bogdan Plieshka - Automated Testing Layers in a Multidimensional Monorepo
• Anastasiia Mihal - Mastering UI Complexity
• Ruslan Zharkov - Animations in React and beyond

🔗 Register now: guild.host/events/react...

See you on April 10th! 👋

Mastering Cache Control: Optimizing Performance for React Applications by Yael Balla - Video recording Today 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.

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

Build Things That Don’t Scale at All by Michele Bonazza - Video recording My 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.

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!
gitnation.com/contents/build-things-th...

How to Train Your Designer? by Dora Makszy - Video recording Hello, 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.

🔗Watch this talk recording!
Dora Makszy presented "How to Train Your Designer?" at React Day Berlin!

gitnation.com/contents/tips-and-tricks...

🔗Watch this talk recording!
@phry.dev presented "Beyond React Testing Library: Testing React Libraries (and library-like code)" at React Day Berlin!

gitnation.com/contents/beyond-react-te...

🔗Watch this talk recording!
@neogoose.bsky.social presented "React via Rust and Rescript: Why and How?" at React Day Berlin!

gitnation.com/contents/react-via-rust-...

🔗Watch this talk recording!
Sergey Labuts presented "Critical CSS" at React Day Berlin!

https://gitnation.com/contents/critical-css

"Never ask if somebody needs help, always ask if they want help." 🤔Join our conversation with @swizec.com, author of the “Senior Engineer Mindset” book, and Dan Ilies, mobile SE & tech content creator.

Check it out: www.youtube.com/watch?v=VXQ3...

📣Check out the talk recording "Building Web Applications with Signals at Grammarly" by Oleksii Levzhynskyi!

Watch it here⬇️
gitnation.com/contents/bui...

📣Check out the talk recording "Making an Emulator in JavaScript?" by @nikkitaftw.wtf!

Watch it here⬇️
gitnation.com/contents/bui...

📣Check out the talk recording "React Query - The Bad Parts" by @tkdodo.eu!

Watch it here⬇️
gitnation.com/contents/rea...

Hope you're enjoying this festive holiday season🎄
Happy to share some more photos from our amazing volunteers👇

📸Photos by Chandu Sasidharan:
photos.app.goo.gl/BD5CiYX3cfsR...
📸Photos by Denis Denisov:
photos.app.goo.gl/dvKVuc1owEPM...

Are you an AI Engineer? Wait to answer! First, watch the talk recording by @tej.as.

gitnation.com/contents/rea...

It’s time to share... PHOTOS📸

React Day Berlin is buzzing with holiday cheer🎄
From the MCs in festive sweaters❤️to the warm congratulations all around, the atmosphere is filled with joy.

Save this link: photos.app.goo.gl/dsSwt1y6qCKA...

That's a wrap on an incredible in-person conference day 🎉

So many great vibes😍 A huge thank you to the speakers, attendees, MCs, program committee, partners, and team.

See you later at the party today? 🪩

We are here ❤️

A person taking a selfie outside the entrance of React Day Berlin conference venue, wearing winter clothing. A purple banner with the React logo is visible on the building facade.

Last conference of the year: @reactdayberlin.gitnation.org

#ReactDayBerlin

Photo of screen with ReactDay.berlin text

Yeap, I'm at #reactdayberlin.