Day 49 of #100DayOfCode — Deployment II: Deploy Frontend Previously, on Day 48, I deployed the backend of the auth system on Vercel. For today, Day 49,… The post Day 49 of #100DayOfCode — Dep...
#Software #100daysofcode #prodsens #live #programming #tutorial #webdev
Origin | Interest | Match
#Software #100daysofcode #prodsens #live #programming #tutorial #webdev
Origin | Interest | Match
March 22, 2026 at 9:51 PM
Day 49 of #100DayOfCode — Deployment II: Deploy Frontend Previously, on Day 48, I deployed the backend of the auth system on Vercel. For today, Day 49,… The post Day 49 of #100DayOfCode — Dep...
#Software #100daysofcode #prodsens #live #programming #tutorial #webdev
Origin | Interest | Match
#Software #100daysofcode #prodsens #live #programming #tutorial #webdev
Origin | Interest | Match
Day 76 of #100DayOfCode — Building DevBoard: REST API and UI Polish Yesterday, DevBoard became a complete two-sided platform. Today I added two things that take it from a functional app to a port...
#webdev #programming #django #100daysofcode
Origin | Interest | Match
#webdev #programming #django #100daysofcode
Origin | Interest | Match
Day 76 of #100DayOfCode — Building DevBoard: REST API and UI Polish
Yesterday, DevBoard became a complete two-sided platform. Today I added two things that take it from...
dev.to
April 19, 2026 at 8:22 AM
Day 76 of #100DayOfCode — Building DevBoard: REST API and UI Polish Yesterday, DevBoard became a complete two-sided platform. Today I added two things that take it from a functional app to a port...
#webdev #programming #django #100daysofcode
Origin | Interest | Match
#webdev #programming #django #100daysofcode
Origin | Interest | Match
Technology is no longer a function; it’s the foundation of every business. #Upskilling #Gcode'26 #100dayofcode #codenewbie
April 11, 2026 at 12:53 AM
Technology is no longer a function; it’s the foundation of every business. #Upskilling #Gcode'26 #100dayofcode #codenewbie
🎯 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 #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 #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 #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
#100DayOfCode Day 49.75
I didn’t code!
I wrote a blog post.
I had two interviews. One made me cry.
I went to #BBM algo study session, we went over merge sorted arrays and I eventually cried in front of the students.
Then I went to my other interview which was better.
I also moved!
I didn’t code!
I wrote a blog post.
I had two interviews. One made me cry.
I went to #BBM algo study session, we went over merge sorted arrays and I eventually cried in front of the students.
Then I went to my other interview which was better.
I also moved!
May 1, 2025 at 3:29 AM
#100DayOfCode Day 49.75
I didn’t code!
I wrote a blog post.
I had two interviews. One made me cry.
I went to #BBM algo study session, we went over merge sorted arrays and I eventually cried in front of the students.
Then I went to my other interview which was better.
I also moved!
I didn’t code!
I wrote a blog post.
I had two interviews. One made me cry.
I went to #BBM algo study session, we went over merge sorted arrays and I eventually cried in front of the students.
Then I went to my other interview which was better.
I also moved!
Day 40 of #100DayOfCode — Building a Mini Auth System Today, for Day 40 of #100DaysOfCode , my goal was to apply all the backend topics and concepts I have learned by building something practical...
#webdev #programming #javascript #100daysofcode
Origin | Interest | Match
#webdev #programming #javascript #100daysofcode
Origin | Interest | Match
Day 40 of #100DayOfCode — Building a Mini Auth System
Today, for Day 40 of #100DaysOfCode, my goal was to apply all the backend topics and concepts I have...
dev.to
March 14, 2026 at 3:15 AM
Day 40 of #100DayOfCode — Building a Mini Auth System Today, for Day 40 of #100DaysOfCode , my goal was to apply all the backend topics and concepts I have learned by building something practical...
#webdev #programming #javascript #100daysofcode
Origin | Interest | Match
#webdev #programming #javascript #100daysofcode
Origin | Interest | Match
🎯 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
Day 48 & 49: Slow progress but I worked on "How To Deal With Side Effects" in React. I also spent a bit of time working on the CV application project. #100DayOfCode #TheOdinProject
February 6, 2025 at 7:32 PM
Day 48 & 49: Slow progress but I worked on "How To Deal With Side Effects" in React. I also spent a bit of time working on the CV application project. #100DayOfCode #TheOdinProject
🎯 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 #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 #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 #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 #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 #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 #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
day377 youtu.be/VkIJbpdTujE gaussian splatting #100dayofcode
3D Gaussian Splatting! - Computerphile
YouTube video by Computerphile
youtu.be
July 10, 2026 at 12:09 AM
day377 youtu.be/VkIJbpdTujE gaussian splatting #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
221 #100dayofcode
🍀 Updated the Landing Page, Dashboard & dealt with Next.js 12=>13 Link's breaking changes affecting Headless UI
💪 did a tiny bit of treadmill walking while coding (its hot)
🦀 no anki/banki
Vid with more details:
youtu.be/KcGaIrlYJ9g
#buildinginpublic
🍀 Updated the Landing Page, Dashboard & dealt with Next.js 12=>13 Link's breaking changes affecting Headless UI
💪 did a tiny bit of treadmill walking while coding (its hot)
🦀 no anki/banki
Vid with more details:
youtu.be/KcGaIrlYJ9g
#buildinginpublic
Refactoring: Landing Page, Dealing with Next.js Link with Headless UI, & Dashboard
Quick update video showing off the biggest progress for today for this old project that's near and dear to my heart that I'd like to release.
Biggest challenge was dealing with a breaking change for Next.js's Link from 12 to 13. I ended up using the legacy behavior flag/prop so I could still keep m
youtu.be
September 3, 2025 at 9:54 AM
221 #100dayofcode
🍀 Updated the Landing Page, Dashboard & dealt with Next.js 12=>13 Link's breaking changes affecting Headless UI
💪 did a tiny bit of treadmill walking while coding (its hot)
🦀 no anki/banki
Vid with more details:
youtu.be/KcGaIrlYJ9g
#buildinginpublic
🍀 Updated the Landing Page, Dashboard & dealt with Next.js 12=>13 Link's breaking changes affecting Headless UI
💪 did a tiny bit of treadmill walking while coding (its hot)
🦀 no anki/banki
Vid with more details:
youtu.be/KcGaIrlYJ9g
#buildinginpublic