Days 34 and 35 of 100 days of code. Working building my own project. Turns out this whole react thing is a lot harder without guided tutorials. Who would have thought? Anyway, I managed to get filters work for some data I’m mapping over from a json file.
#100DayOfCode #LearnInPublic
🎯 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
🎯 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
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
Day 9/100 - Took a day off for family, but returned today to get in some more Codewars practice. Also added READMEs to my Codewars and 100 Days course repositories. Tomorrow we get back to coursework.
#100DayOfCode #Python
Day 8/100 - Back onto Codewars today to work on a few more problems. I do all the work in VS Code so I get to write the function calls, with test data, to test my solutions. Does make things a bit more interesting.
#100DayOfCode #Python
#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!
Day 26 of #100DayOfCode!
I finished my snake game! It was pretty challenging but I used a ton of OOP concepts in this which was kinda wild how much easier it made it. Without OOP I'd be beyond confused and everything would be spaghetti.
(I'm not very good at snake)
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
guide for #nodejs #javascript is already live at otelic.com/open-telemet...
spend 10min on it to level up your logging and tracing for production env 🔥
#webdev #100days #indiehacker #indie #100dayofcode
Day 40 of #100DayOfCode
- I wrote some functions in the Go programming language today. I learned more about compiler and runtime errors.
- I learned when to use naked returns versus named returns.
- I also learned the guard clause and how it provides a linear approach to logic trees.
