🎯 Journey to Big Tech #54: HTTPS Learned: 👀 Sniffing: attacker intercepts your key 🔑🔑 Asymmetric keys: stolen public key can’t decrypt data 🥷 MITM: hacker sends a fake public key to trick you 🏅 CA: 3rd party confirm server public key is real #Frontend #HTTPS

🎯 Journey to Big Tech #53: Python & DOM Learned: - Python list methods, like unpacking, join, and sorted - use DOM property instead of DOM attribute to increase performance, preventing from HTML structure change to reduce CPU usage #Frontend #Backend #Python

🎯 Journey to Big Tech #52: build React How React works⚛️ 🔄 1. React handle diffing calculation in the browser idle time 🌲 2. Convert every virtual DOM into a Fiber 🏰 3. After render, React commits to the real DOM simple react: https://t.co/RlpaWCwl7o #Frontend #React

🎯 Journey to Big Tech #51: build Data Table II Learned · Sort entire data before pagination · String can use localCompare() #Frontend #React #100DayOfCode

🎯 Journey to Big Tech #50: build Progress Bars IV Learned · Control every bar's progress using array type state · Filter to get current unfilled progress bars · Incrementally updating unfilled bars under concurrency limit count #Frontend #React #100DayOfCode

🎯 Journey to Big Tech #49: build Image Carousel III Learned · Only require 2 images (cur, next) for smooth transition · Transition is cur go left, next start at right, then go left · Make DOM show first, transition happen at next frame to get smooth animation #Frontend #React

🎯 Journey to Big Tech #48: build Image Carousel II Learned · translateX with -(curIndex * 100%) to shift to next image #Frontend #React #100DayOfCode

🎯 Journey to Big Tech #47: build Signup Form Learned · We can use pure HTML for powerful form validation, like `required`, `minlength`, `pattern` · we can retrieve form values directly from the form DOM #Frontend #100DayOfCode

🎯 Journey to Big Tech #46: build FileExplorer III Just a few lines to make it more performant with a flat structure: · Extract the nested FileList out of FileObject · Make FileList root a Fragment #Frontend #React #100DayOfCode

🎯 Journey to Big Tech #45: build FileExplorer II A11y learned ∙FileTree as role=tree ∙FileList as role=group ∙FileItem as role=treeitem ↳ aria-expanded=true/false when has children ↳ aria-level, aria-setsize, aria-posinset for x-y position #Frontend #100DayOfCode

🎯 Journey to Big Tech #44: build FlightBooker Learned · Date input only accept string value · https://t.co/CN03UvsDIV() return timestamp in millseconds · How to write formateDate with Date object #Frontend #React #100DayOfCode

🎯 Journey to Big Tech #43: build Modal IV A11y learned · Trap focus inside modal  ↳ Shift+Tab on first → ❌default() + focus last  ↳ Tab on last → ❌default() + focus first · Restore focus on close (Escape / button)  ↳ Save activeElement to ref → focus ref on unmount

🎯 Journey to Big Tech #42: build Modal III A11y learned · Close modal on 'Escape' key via useOnKeyDown hook · Detect if clicking outside by <modalRef>.contains(clicked element) · Fixed open(button)/close conflict by registering outside click on mousedown #React #100DayOfCode

🎯 Journey to Big Tech #41: build Modal III A11y learned · role="modal" to tell that this is a modal · aria-modal="true" to tell that background is inert · aria-labelledby="XXX" to find the modal title · aria-describedby="XXX" to find the modal description #React #100DayOfCode

🎯 Journey to Big Tech #40: build ProgressBar III Learned · How to limit the concurrency? - by adding MAX_UNFILLED_COUNT > index > filledBarCount + MAX_UNFILLED_COUNT (e.g. 5th bar can tolerate only 3 filled, remaining 2 unfilled, and start transitioning) #React #100DayOfCode

🎯 Journey to Big Tech #39: build ProgressBar II Learned · How to wait for previous bars to finish? - when currentIndex === filledCount, it means bars 0~currentIndex-1 are filled — now can fill the current one. #Frontend #React #100DayOfCode

🎯 Journey to Big Tech #38: build Nested Checkboxes Learned · Checkbox has `indeterminate` state · Checkboxes state should be lift up to top · Use layered indices to locate target checkbox · Parent state depends on 1st layer children’s state #Frontend #React #100DayOfCode

🎯 Journey to Big Tech #37: build Accordion II, III Follow WAI-ARIA best practices: · Arrow keys navigate headers · `aria-expanded = true` when open · Header links panel id via `aria-controls` · Panel links header id via `aria-labelledby` #Frontend #React #100DayOfCode

🎯 Journey to Big Tech #36: build Tabs III Keyboard a11y: - `tabIndex="-1"` make only active tab focusable - `tabIndex="0"` make tab panel <div> focusable - Record element via callback ref. - Avoid `focus()` inside onFocus—it can trigger twice. #Frontend #React #100DayOfCode

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