🎯 Journey to Big Tech #35: build Tabs II Interesting learning about a11y for Tabs: - each tab should have a `role` - tab button uses `aria-controls` to link its panel - panel uses `aria-labelledby` to reference its tab #Frontend #React #100DayOfCode

🎯 Journey to Big Tech #34: build Digital Clock Just build a simple clock to learn how to get current `hour`, `minutes`, and `seconds` to finish #Frontend #React

🎯 Journey to Big Tech #33: build Stopwatch Finally find `requestAnimationFrame` useful! Since browser frames render ~16ms apart, `setTimeout(fn, 10ms)` will not work as expected. Instead, use browser render frame timestamps to accurately track elapsed time. #Frontend #React

🎯 Journey to Big Tech #32: build Undoable Counter Build a calculator which supports undo/redo. It is interesting that what I learned from AI Google Doc project is really useful here. #Frontend #React

🎯 Journey to Big Tech #31: build TableData Just continuing another React Component challenge #Frontend #React

🎯 Journey to Big Tech #30: build TicTacToe Learned the TicTacToe winner algorithm, which is pretty interesting! #Frontend #React

🎯 Journey to Big Tech #29: build TransferList Just continuing GFE UI question #Frontend #React

🎯 Journey to Big Tech #29: build FileExplorer Practice @greatfrontend UI question, and learn a lot from the solution - instead of tree, flat structure is more performant - can separate comps by html tag Also make it cleaner from the solution is satisfied! #Frontend #React

How to build your own Next.js 🎯 Journey to Big Tech #28: How to build your own Next.js Grasping the core concepts behind SSR and understand what causes common issues like hydration errors. If you're interested, you can check the github repo: github.com/MechaChen/ne... #NextJs #frontend

🎯 Journey to Big Tech #27: Host a real AWS server — cheap & fast To learn system design by doing, without big cost. Thanks to AWS Lightsail, it's just: 1. Build Docker image locally 2. Push local image to AWS Lightsail 3. Deploy to Lightsail Container Service #AWS #systemdesign

I just finished the #GraphQL Yoga HackerNews clone tutorial by the-guild.dev/graphql/yoga...

🎯 Journey to Big Tech #26 : Post Chat app architecture & data flow knowledge on LinkedIn link: d3i9rmv5fv6cfg.cloudfront.net 💬 Chat App’s architecture, including - Critical components - Data models: client-side data - Interfaces: client and server communication #systemdesign #frontend #WhatsApp

🎯 Journey to Big Tech #25 : Post Google Doc knowledge on LinkedIn link: dw2wyy51ndwcp.cloudfront.net ⚔ Collaborative editing (like in Google Docs, Figma) without proper resolution, different users may end up seeing divergent document states. #systemdesign #frontend #GoogleDoc

🎯 Journey to Big Tech #24 : Add MCP Client & Server ✅ Add MCP Client UI to init MCP server & communicate with 3rd party service ✅ Add MCP Client by anthropic SDK ✅ Manipulate G-calendar by local Google Calendar MCP server #ai #Anthropic #MCP

🎯 Journey to Big Tech #23 : Review Sliding window, PrefixSum, Trie algorithm ✅ Learned and Completed Trie algorithm ✅ Completed Slinding Window review ✅ Almost completed PrefixSum review #algorithm #prefixsum #slidingwindow #trie

🎯 Journey to Big Tech #22 : MCP try out ✅ Build MCP weather server ✅ Build MCP command line client ✅ Integrate MCP weather server and command line client succesfully #mcp #ai #anthropic

🎯 Journey to Big Tech #21 : Phase 3.3 - Summarize diff by AI ✅ Migrating Version table schema with ai-diff column ✅ Diffing versions across server with old/new snaphost and gpt-4o-mini model ✅ Show diff summary in drawer #webdev #systemdesign #ai

🎯 Journey to Big Tech #19 : Phase 3.2 - Save version metadata & apply target version ✅ Upload version metadata to AWS PostgreSQL RDS ✅ Creat a history drawer to get all versions ✅ Get target version snaphost and apply to editor #systemdesign #webdev #AWS

🎯 Journey to Big Tech #19 : Phase 3.1 - Upload document snaphost ✅ Build version service to upload snaphost ✅ Build s3 bucket by AWS CDK to store document snaphost ✅ Buid s3 presigned-url to secure upload snaphost #systemdesign #webdev #AWS

🎯 Journey to Big Tech #18 : Phase 2 - Add local buffer ✅ Clone y-websocket to local to get onmessage ✅ Clone lexical collaboration plugin implement local buffer mechanism ✅ Show syncing status with checked ui and working #systemdesign #webdev

🎯 Journey to Big Tech #17 : Phase 1.3 - Add voice to text function ✅ Build web recording with MediaRecorder & .webm ✅ Draw sound wave with AudioContext analyzer & Canvas ✅ Parse .webm to .wav by ffmpeg ✅ Parse .wav to text by whisper model #ai #systemdesign #webdev

🎯 Journey to Big Tech #16 : Phase 1.2 - Connect real server + load balancer ✅ Create AWS EC2 collab y-websocket service with AWS CDK (Infrastructure as Code) ✅ Connect to EC2 collab service and test editor ✅ Create AWS Load balancer and test editor #webdev #systemdesign

🎯 Journey to Big Tech #15 : Phase 1.1 - collaboration ✅ Created y-websocket collaboration server ✅ Combined lexical/yjs to collaborate on editor #systemdesign #webdev

🎯 Journey to Big Tech #14 : Phase 0 - autocomplete with AI ghost text ✅ Finished connecting to OpenAI model ✅ Finished creating ai ghost-text with context ✅ Finished show ai-ghost-text on editor and "Tab" to accept #webdev #systemdesign

🎯 Journey to Big Tech #13 : Phase 0 - Custom editor style ✅ Finished add new lexical custom node ✅ Finished "Enter" to new paragraph ✅ Finished "Backspace" to remove custom node #webdev #systemdesign

🎯 Journey to Big Tech #12 : Phase 0 - Implement basic editor ✅ Finished adding heading format ✅ Finished adding unordered/ordered list format #webdev #systemdesign

🎯 Journey to Big Tech #11 : Design Google Doc ✅ Finish Phase 2 design (Basic Scalable Collaboration Protocol) ✅ Finish Phase 3 design (Persistence, History & Reconnect Support) #webdev #systemdesign

🎯 Journey to Big Tech #10 : Design Google Doc ✅ Finish Phase 1 design (1 user editor + AI hint) ✅ Finish Phase 2 design (multi users editor + AI Voice to Text) #webdev #systemdesign

🎯 Journey to Big Tech #10 : Design Google Doc ✅ Know Google Doc send update timing, by local updates buffer, server ACK ✅ Know pros & cons of OP (✅perf, causality ❌complicated), CRDT (✅easy, non-central ❌spacy) ✅ Know back of envelope calculations #webdev #systemdesign

🎯 Journey to Big Tech #9 : Design Google Doc - Frontend ✅ Grasp Rendering rich text can utilize Canvas, super interesting ✅ Grasp Concurrency control model, like Locks, Version-detection ✅ Grasp Conflict resolution approach, like OP, CRDT #webdev #systemdesign

🎯 Journey to Big Tech #8 : WebRTC - try out and more ✅ Try out WebRTC build connection and send message ✅ Know more beyond basics, like media API to send video/audio message, and `addicecandidate` to update SDP ✅ Know you can customize you webRTC STUN, TURN servers #webdev #systemdesign

🎯 Journey to Big Tech #7 : WebRTC - understand how to build WebRTC connection ✅ Understand what is ICE, SDP ✅ Understand the process of building WebRTC connection ✅ Understand the Pros & Cons of WebRTC (fast but complex mesh connections) #webdev #systemdesign

🎯 Journey to Big Tech #6 : WebRTC - understand STUN and TURN ✅ Understand how WebRTC connect througth STUN ✅ Understand STUN cannot work under symmetric NAT ✅ Understand TURN can help under symmetric NAT #webdev #systemdesign

🎯 Journey to Big Tech #5 : Chat App - Message Status Control ✅ Optimistic Update: Use Map + client message_id to quick lookup and show in_flight message instantly. ✅ Store Failed: Save failed messages in IndexedDB. ✅ Retry : Retry failed messages and update state on success. #webdev #systemdesign

🎯 Journey to Big Tech #4 : Chat App - Store draft text and image ✅ Create chat room indexedDB database ✅ Create draftMessage objectStore(table) with keyPath: ${userId}_${roomId} to save draft text and image messages ✅ Show draft message when re-open chat room #webdev #systemdesign

🎯 Journey to Big Tech #3 : Chat App - Ｍulti-tabs with single connection ✅ Use a SharedWorker to manage the WebSocket connection and ensure all functions work. ✅ Ensure multiple tabs/windows share one connection. ✅ Disconnect WebSocket when all tabs/windows close. #webdev #systemdesign

🎯 Journey to Big Tech #2 : Chat App - Multiplayer chat app ✅ Updated room creation to allow selecting multiple users instead of a single user. ✅ Updated room list UI to display multiple users. ✅ Tested that multiple users can send messages to each other in real time. #webdev #systemdesign

🎯 Journey to Big Tech #1 : Chat App - Tackling Basics To dive into the chat system at #greatfrontend, I built mini chat with basic requirements : ✅ Create & login email-based account ✅ Create chat room & display rooms ✅ Join a room to send messages #webdev #systemdesign

Hi everyone, did anyone even study a lot of browser mechanism, like page life cycle and critical rendering path, but being confused about the overlapping part and the timeline of these two. Here is an article which organizing these informaiton, hope it help! benson-chen.co/docs/Plan/pa...