Benson Chen
@bnyue.bsky.social
🌐 https://benson-chen.co Sr. Frontend @ Tomofun
🏆 Road to Top-Tier #3: Claude Code hooks Learned: - hooks trigger points: timing + matcher - PreToolUse, PostToolUse, Stop, Write|Edit...etc - hooks usage: automatically format, sending prompts, call subagents...etc #ClaudeCode #hooks
🎯 Journey to Big Tech #55: build my webpack Learned: - traverse to get file's dependency graph - get file's dependency from AST tree - execute order: go child first to get import data, execute code, than exports to parent github.com/MechaChen/we... #Frontend #Webpack
🎯 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: github.com/MechaChen/re... #Frontend #React #100DayOfCode
🎯 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 #100DayOfCode
Astro's @sarah11918.rainsberger.ca shares practical advice on how to make impactful contributions to open-source projects, focusing on the non-code ways to get started, such as improving documentation, testing, and being a good community member. Full video: youtu.be/bzogTYPv65M
🎯 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 #React #100DayOfCode
🎯 Journey to Big Tech #44: build FlightBooker Learned · Date input only accept string value · Date.now() 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 #React #Frontend #100DayOfCode
🎯 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 #Frontend #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 #Frontend #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) #Frontend #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 · Nested 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 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
