🏆 Road to Top-Tier #4: Hands-on with Codex CLI
Started building Goal Together with Codex CLI.
Using:
- GitHub Speckit for big-feature planning & clarifying
- Codex Plan mode for mid-level tasks
Loving how smooth and powerful it is. Thanks OpenAI!
#Codex #OpenAI
🏆 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
🏆 Road to Top-Tier #2: Discover and install Claude plugin
Learned:
- 2 step to install plugin: add market -> add plugin from market
- plugins types includes (Anthropic official):
- Code intelligence
- MCP Servers
- Workflows
- Output styles
#Claude #plugin
🏆 Road to Top-Tier #1: Build a Claude Code plugin
Learned:
- build a simple plugin with skill
- build a complex plugin with skill, lsp
#Claude #Skill
🎯 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 #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
