Benson Chen
@bnyue.bsky.social
🌐 https://benson-chen.co
Sr. Frontend @ Tomofun
Sr. Frontend @ Tomofun
🎯 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
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
November 10, 2025 at 3:50 PM
🎯 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
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
Learned
· Sort entire data before pagination
· String can use localCompare()
#Frontend #React #100DayOfCode
November 9, 2025 at 6:05 PM
🎯 Journey to Big Tech #51: build Data Table II
Learned
· Sort entire data before pagination
· String can use localCompare()
#Frontend #React #100DayOfCode
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
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
November 8, 2025 at 3:24 PM
🎯 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
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
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
November 7, 2025 at 5:31 PM
🎯 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
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
Reposted by Benson Chen
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
Full video: youtu.be/bzogTYPv65M
November 7, 2025 at 2:01 AM
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
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
Learned
· translateX with -(curIndex * 100%) to shift to next image
#Frontend #React #100DayOfCode
November 5, 2025 at 5:07 PM
🎯 Journey to Big Tech #48: build Image Carousel II
Learned
· translateX with -(curIndex * 100%) to shift to next image
#Frontend #React #100DayOfCode
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
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
November 4, 2025 at 5:29 PM
🎯 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
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
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
November 4, 2025 at 5:24 PM
🎯 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
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
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
November 2, 2025 at 4:19 PM
🎯 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
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
Learned
· Date input only accept string value
· Date.now() return timestamp in millseconds
· How to write formateDate with Date object
#Frontend #React #100DayOfCode
November 1, 2025 at 5:12 PM
🎯 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
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
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
October 31, 2025 at 6:08 PM
🎯 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
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.contains(clicked element)
· Fixed open(button)/close conflict by registering outside click on mousedown
#React #Frontend #100DayOfCode
A11y learned
· Close modal on 'Escape' key via useOnKeyDown hook
· Detect if clicking outside by
· Fixed open(button)/close conflict by registering outside click on mousedown
#React #Frontend #100DayOfCode
October 30, 2025 at 5:28 PM
🎯 Journey to Big Tech #42: build Modal III
A11y learned
· Close modal on 'Escape' key via useOnKeyDown hook
· Detect if clicking outside by.contains(clicked element)
· Fixed open(button)/close conflict by registering outside click on mousedown
#React #Frontend #100DayOfCode
A11y learned
· Close modal on 'Escape' key via useOnKeyDown hook
· Detect if clicking outside by
· 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
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
October 29, 2025 at 5:54 PM
🎯 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
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
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
October 26, 2025 at 6:22 AM
🎯 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
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
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
October 26, 2025 at 6:10 AM
🎯 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
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
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
October 24, 2025 at 3:59 PM
🎯 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
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
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
October 24, 2025 at 1:51 PM
🎯 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
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
Keyboard a11y:
- `tabIndex="-1"` make only active tab focusable
- `tabIndex="0"` make tab panel
focusable
- Record element via callback ref.
- Avoid `focus()` inside onFocus—it can trigger twice.
#Frontend #React #100DayOfCode
- Record element via callback ref.
- Avoid `focus()` inside onFocus—it can trigger twice.
#Frontend #React #100DayOfCode
October 23, 2025 at 5:18 PM
🎯 Journey to Big Tech #36: build Tabs III
Keyboard a11y:
- `tabIndex="-1"` make only active tab focusable
- `tabIndex="0"` make tab panel
Keyboard a11y:
- `tabIndex="-1"` make only active tab focusable
- `tabIndex="0"` make tab panel
focusable
- Record element via callback ref.
- Avoid `focus()` inside onFocus—it can trigger twice.
#Frontend #React #100DayOfCode
- 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
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
October 22, 2025 at 5:50 PM
🎯 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
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
English
300
Connect Bluesky
Enter your Bluesky handle and app password to unlock posting, likes, and your Following feed.
Need an app password? Open Bluesky, go to Settings > App passwords, and create a new one.
Connect with Bluesky
Sign in with your Bluesky account to unlock posting, likes, and your Following feed.