Benson Chen

🎯 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 #Security

🎯 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:
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

🎯 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

🧑‍💻 Client-Side:

- Load the pre-bundled client hydration script and module component by URL (e.g., Product.jsx)

- Hydrate the static HTML using React hooks and client components

- Apply the initialProps to the component to ensure consistent hydration

- Execute getServerSideProps to get initialProps

- Pre-bundle the component with the hydration script (e.g. bundled client Product component)

- Convert the Index and module React component to an HTML string by renderToString

- Respond to the client with the HTML and client hydration script URL