Tiger Abroditigerabrodi.blog·2 hours agoNotes from working effectively with ImagesThese are my notes from working with images. Aspect Ratio and rendering images You have a list of images e.g. search results. You wanna render them nicely. You can use a grid here. To pseudo code this quickly with html and tailwind: <div className="g...performance
Tiger Abroditigerabrodi.blog·2 hours agoPerformance PrinciplesIntroduction When I think about performance, it's not rocket science. Lately, I've been thinking a lot about what performance means and questions you can ask to identify performance improvements. Some of the stuff applies to all fields in programming...performance
Tiger Abroditigerabrodi.blog·2 hours agoI finally understand requestAnimationFrameExplaining requestAnimationFrame I knew requestAnimationFrame was a Web API that helps smooth out the animations. But I never really understood the why. How browser rendering works: Browser has to paint pixels to the screen many times per second. Thi...animation
Tiger Abroditigerabrodi.blog·2 hours agoKey optimization in ReactIntroduction When it comes to working with keys in React, this is what most developers know: const List = () => { return items.map((item) => <ListItem key={item.id} {...item} />); }; Yes, we should use keys so that React can efficiently update the...React
Tiger Abroditigerabrodi.blog·2 hours agoDebounce and ThrottleIntroduction I'm writing this post again because I had some difficulties in explaining the difference between debounce and throttle. In human words: Debounce -> "Wait until X ms have passed since the last call, then call the function". Throttle -> "C...JavaScript
Tiger Abroditigerabrodi.blog·2 hours agoBuilding a scalable file picker with React and FirebaseIntroduction I want to share my experience at my previous startup where we built a file and folder picker. This will focus on React and performance. We also used Firebase, so that's an interesting part as well. The initial approach Initially, we went...performance
Tiger Abroditigerabrodi.blog·2 hours agoBy value vs By Reference in JavaScriptIn JavaScript, parameters are passed by value or by reference. To understand the difference, let's understand how things are stored in memory on both the stack and the heap. Recap of Stack Purpose: Fast access, temporary storage Contains: Primitiv...JavaScript
Tiger Abroditigerabrodi.blog·2 hours agoA generalized debounce/search problemThe UI problem We have a login form where username needs to be unique. When you type the username, we make a request using validateUsername(username: string): Promise<boolean>. With the result of the request, we update the helper text below the input...Frontend Development
Tiger Abroditigerabrodi.blog·2 hours agoFrontend System Desigm: Chat ApplicationIntroduction We're gonna do a frontend chat system design exercise together. This is really good because it tackles a lot of nuances of frontend development. The goal is to go through the entire process of designing this and think about all the trade...performance
Tiger Abroditigerabrodi.blog·2 hours agoWhy we need DataLoader in GraphQLIntroduction Imagine this: You're building a social media app. A user loads their feed, and each post shows the author's name. Sounds simple? No... if you have 10 posts from 10 different authors, you'd normally need 10 separate database calls to fetc...Web Development
