Forem: ZhiHong Chua

Stop Burning Cash: Real-World Lessons in LLM Token Optimisation

ZhiHong Chua — Fri, 07 Nov 2025 12:11:58 +0000

There is immense hype around AI, but the real work is in making it efficient and cost-effective. This week, I had a great conversation with a friend about integrating AI into their family business, and the first barrier we hit was ensuring that deployment costs wouldn't swallow their budget.

My recent experiments in optimising Large Language Model (LLM) calls revealed critical lessons on balancing performance with operational expenditure. Here are my key findings on drastically reducing token usage and navigating API vendor choices.

1. Cost Efficiency: Cutting Token Consumption by 87%

The goal of implementing AI tools is to harness their ability to scale content production while maintaining a lower operational cost approach. In one workflow, I managed to reduce the average token usage from 4,000 tokens per request down to approximately 500. This efficiency demonstrates the power of integrating human creativity and strategic thinking with AI.

Here is the strategic breakdown of how this massive reduction was achieved:

Isolation of Deterministic Logic: The initial cut involved isolating any logic that could be handled purely by the backend. This step ensures that the LLM is only used for tasks requiring true natural language understanding or generation, reducing the prompt size significantly.
Reliance on Model Training Data: The second optimisation involved relying more heavily on the AI model's existing training data. Instead of providing extensive examples or foundational knowledge (which consumes tokens), the process focused on maintaining local context relevant to the current conversation rather than providing unnecessarily global context.
Implementing Intent Classification: Where minimal context was available, it became necessary to implement intent classification. This addition allows the system to accurately direct the query, even when the context provided to the model is small, thus preventing ambiguous results or expensive, irrelevant generations.

2. Strategic API Choice: Hugging Face vs. OpenAI

Here is a practical comparison based on testing:

Feature	Hugging Face Inference API	OpenAI API (e.g., GPT models)
Cost Model	Offers a free tier (up to 10 cents, periodically resetting, approximately once a week)	Generally requires payment; lacks a substantial free trial
Best Use Case	Excellent for small-scale testing and validating concepts due to the minimal initial cost	Best for maintaining large context efficiently in chat sessions
Context Handling	Requires the initial prompt (the system message/context) to be sent with each request (which becomes costly if your context is large)	The initial large prompt can typically be sent once only at the start of the chat session, improving efficiency and reducing recurring token expenditure

3. Looking Forward: The Move to Agentic AI

While some may categorize this optimization work strictly within the realm of generative AI, the course I completed with Vanderbilt University suggests that the field is rapidly moving toward agentic AI.

My objective is to push my knowledge deeper into agentic AI soon, focusing on building systems that can actively plan and execute tasks to deliver higher-order value!

Week 19: Halibut

ZhiHong Chua — Mon, 09 Jun 2025 02:22:28 +0000

Why halibut? It's just a random name 😂

1. JS Quiz

MON - What is NodeJS. A runtime environment for JS
WED -Compliance in Web3. How to enforce, in an open economy, sanctions and blocking funding of terrorists, and thorough code review? Memory leak from useEffect and setInterval. this in traditional vs arrow functions
THU - “display: none = None at all. Others = still takes space.”, Reading layout (eg. offsetHeight) forces the browser to "flush the pipeline" to give you a correct value.

2. Behaviour (3 daily)

MON	TUE	WED	THU	FRI
-	2	2 (live)	3	4 (live)

3. Leetcode

MON - K-th Smallest in Lexicographical Order Hard Trie question. Interesting to observe this data structure being used on numbers. I was only exposed to using it on letters (i.e word search) before.
TUE - Maximum Difference Between Even and Odd Frequency I Easy Hashmap question. Revised "Three Sum" Two Pointer question!
WED - Maximum Difference Between Even and Odd Frequency II Bitmask, Prefix Sum. Skipped the usual suspect (bitmask) part, but did 670 / 690 cases with the latter!
THU - Maximum Difference Between Adjacent Elements in a Circular Array Easy Array question
FRI - Minimize the Maximum Difference of Pairs very interesting application of Binary Search, Medium.
SAT - Maximum Difference by Remapping a Digit. An Easy Greedy question but edge cases threw me off a little.
SUN - Max Difference You Can Get From Changing an Integer Medium Greedy question.

4. JS Coding

MON - another 7 questions on Edabit (to be honest, it's more like Leetcode than JS questions like flatten array, but let's take it for today)
TUE - Data Merging and Holy Grail.
WED - Flatten in actual setting! and Throttle
THU - Flatten, Debounce, and Deep Clone
FRI - (live) diff 2 objects

5. System Design

WED - 📦 System Design Prompt: Design a File Upload System with Preview
FRI - (live) generic interface for a form

Week 18: Busy with Life

ZhiHong Chua — Mon, 02 Jun 2025 08:56:00 +0000

Many things coming up in life, going to tone this down a little, but still, for journal's sake!

1. JS Quiz

MON - Questions 11 - 20 in importance. Event Loop, this, event delegation
TUE - all other questions. Closure, hooks
THU - Top 10 Cross Browser Issues
FRI - useState vs Animated.View for optimum progress bar animation rendering

2. Behaviour (3 daily)

MON	TUE	WED	THU	FRI
2	3	3	1

3. Leetcode

MON - Hard question. Took quick look
TUE - Maximum Candies You Can Get from Boxes Hard Graph, and BFS question.
WED - Find the Lexicographically Largest String From the Box I Medium Enumeration question. That was tricky
THU - Lexicographically Smallest Equivalent String Union Find. Looks like I'm a bit rusty with implementation
FRI - Using a Robot to Print the Lexicographically Smallest String Medium Stack
SAT - Lexicographically Minimum String After Removing Stars completed a trivial solution of Greedy Medium question. My solution was O(N) space, O(N^2) time. Optimised answer is O(N^2) space, O(N) time.
SUN - Lexicographical Numbers Medium DFS with a twist. This required understanding of what lexicographical numbers meant, such as this being the sorting order... 1,10,100,101,102,103,104,105,106,107,108,109,11,110,111,112,113,114...

4. JS Coding

MON - useSet hook, mean js
FRI - useState vs Animated.View for optimum progress bar animation rendering
SAT - seven questions on Edabit
SUN - 10 / 10 questions on Binance's recommended JS questions

5. System Design

MON - 🧩 Scenario: Build a Customizable Dashboard for Airline Crew
TUE - 🛫 Design a Flight Booking Page (Multi-step Form System)

Week 17: Four months in

ZhiHong Chua — Mon, 26 May 2025 04:56:50 +0000

I think I've been jumping all over the place! The last week I seriously started getting into a few things

building an Astro side project to learn SSR
exploring work CI pipeline to see how I could optimise
considering exploring BFF to learn BE skills so it starts to feel a bit crazy.

On the other hand, the last week was packed with matters outside of work, so the journal last week was a little sparse, but onward and upward!

1. JS Quiz

MON - Responsive Web Design, JS Fundamentals. Browser, Screen Size, Device, OS Compatibility.
- float, which happens to be useful for my work!
- BrowserStack and Selenium for automated UI testing
THU - CSS, Virtual DOM, Hoisting

2. Behaviour (3 daily)

MON	TUE	WED	THU	FRI	SAT	SUN
✅	✅	✅	✅	✅

3. Leetcode

MON - Largest Color Value in a Directed Graph. Solved half the test cases (40/83) for this Hard Graph question. Completed Backtracking in 30 minutes. TLE-ed.
TUE - Divisible and Non-divisible Sums Difference Easy question. Challenged myself to improve O(N) to O(1) by arithmetic progression formula. Math.
WED - Maximize the Number of Target Nodes After Connecting Trees I Medium Tree, BFS question.
FRI - Find Closest Node to Given Two Nodes Medium Graph and BFS question. Confusing description, spent a lot of time.
SUN - Distribute Candies Among Children II Medium Math question. Mind boggling.

4. JS Coding

MON - Promise.all (JS), useDebounce (React), and Todo List (UI)
TUE - Curry (JS), useCycle (React), Progress Bar (UI @ work)
THU - Contact Form (UI), Data Merging (JS)

5. System Design

THU - Real-time Notification System
FRI - Collaborative Editor like Google Docs

Week 16: One Moment of Silence

ZhiHong Chua — Wed, 21 May 2025 01:50:05 +0000

Back to the drawing board again, it seems. The effort into this endeavour is huge, but the payoff seems distant.

1. JS Quiz

2. Behaviour

MON - practiced 3
THU - done 3

3. Leetcode

MON - Daily question
TUE - Daily question. Medium, sweep-line prefix sum.
WED - Set Matrix Zeroes. Medium Matrix question. O(M*N) time. O(M+N) space achieved, didn't figure the O(1) space solution... though it seemed a bit extreme.
THU - Zero Array Transformation III. Heap + Prefix Sum, it's too difficult!
SAT - easy question
SUN - medium Palindrome Longest Palindrome by Concatenating Two Letter Words

4. JS Coding

5. System Design

TUE - analyse the existing pipeline's most recent 30 errors
THU - first SSR hydration component implemented on Astro! It sounds so technical, but just means a Javascript-infused HTML element / component.

Week 15: What

ZhiHong Chua — Tue, 13 May 2025 05:36:53 +0000

A slow start after a long weekend

1. JS Quiz

TUE - Did a W3Schools React Quiz. Also viewed a common React questions YouTube video. These raised a few interesting points such:
- What happens when useEffect dependencies is empty?
- Why is React designed with immutable state in mind?
- Why is Pure Component an important design pattern in React?
WED - Reviewed past weeks' content, SEO and speed. Studied Server Components too, seems it is like Astro Islands. But it seems a lot of effort for minor value... worked out a 4-week plan to investigate and implement projects that might have some value.
FRI - Reviewed the past 30 CI pipelines. In-depth analysis to follow

2. Behaviour

TUE - revised 3 questions. Finding blind spots...
WED - another 3
THU - did 3
FRI - speaking louder in practice instead of whisper feels good! Did 3.

3. Leetcode

TUE - Total Characters in String After Transformations I had the Medium, string solution, turns out they only wanted brute force, not optimised generic formula (it was hard to get to!)
WED - Total Characters in String After Transformations II, at least got the brute force Hard, string method working well!
THU - Longest Unequal Adjacent Groups Subsequence II. Breezed through the Easy version of this question and did this Medium, backtracking
FRI - repeated the question yesterday, managed to pass the backtracking solution. Couldn't figure out the dynamic programming solution though. Practiced going from recursion to memoization to dynamic programming! House Robber
SAT - Sort Colors a Medium sorting question. Learnt about the 3-pointer Dutch National Flag problem

4. JS Coding

TUE - Setup astro website! Going to finish the tutorial tomorrow to make a working example of SSR & hydration.
WED - Revised 2 questions

5. System Design

TUE - Subdomains. en.wikipedia.org and ads.google.com are both examples of sub-domains. Cloud servers can spin up and allocate the resources where required.
WED - TODO: continue building the astro website

Week 14: Momentum

ZhiHong Chua — Mon, 05 May 2025 01:35:59 +0000

I don't know if I've been more hardworking after returning from holidays, or it so happened that the weeks of studying bits and pieces finally came together last week... I've finished some milestones in studying!

JS Quiz - completed all high priority questions
JS Coding - completed all relevant questions
Behavioural - practiced speaking

System Design and Leetcode remains a little unstable, but I think we are getting better! This week will mostly focus on recap.

1. JS Quiz

MON - (15/63 revised) box-sizing, display, React, event loop, hoisting, event delegation, this
- mistakes: box-sizing measures? position: relative means? What's this?
TUE - (42/63 revised) closure, constructors, cookies, Virtual DOM.
- mistakes: CSS selectors? translate() vs absolute position? Event bubbling? Z-index?
WED - 63 revised! What shall I explore tomorrow? Perhaps spend more time on weaker areas (Leetcode / JS Coding).
- mistakes: HTTP Cache Headers?
THU - Gemini-generated list of 15+ questions. Like useLayoutEffect vs useEffect, or Error Boundary.
- Strict Mode - wrap the root of app with this. Runs twice the ref / effects, to detect if forgot to cleanup.
- Controlled vs Uncontrolled Components is mainly difference in form state; whether use form.submit() or setData. Really is just up to preference...?

2. Behaviour

MON - spoke 3!
TWO - spoke 2! Speak on phone seems to work smoother
WED - spoke 3! But could tighten answer
THU - done 3

3. Leetcode

MON - Domino and Tromino Tiling, a medium DP question. Figured there was a pattern but couldn't write out the entire generalised formula :(
TUE - Build Array from Permutation easy, but interesting to draw on concept of in-place array modification.
WED - Find Minimum Time to Reach Last Room I... Djikstra? No. Just use simple DFS if I can't work up to it.
THU - Find Minimum Time to Reach Last Room II, Djikstra again... Should practice DFS tomorrow maybe.
SAT - Minimum Equal Sum of Two Arrays After Replacing Zeros medium greedy!
SUN - did the Easy daily question, then noped the hell out of Mathematical Induction proof medium question
MON - did the Easy daily question, then optimised it from O(N^3) to O(N^2)

4. JS Coding

MON - revised Squash Object, still have issues with Map Async Limit
TUE - * DOM API, State Management, Security, Event Loop, HTTP Error Codes
WED - Event Emitter and useDebounce. This gets boring... where find new questions? 👀
SAT - QRT Sample JS Coding Quiz had two questions: (1) Write a class that extends an EventEmitter for a search API, and (2) React useState list view page
- the latter had a tiny gotcha, which is you need to destructure or shallow copy the previous state of articles list, ensuring you're not mutating state directly. React may not re-render if the same array reference is reused, even if its contents are changed via .sort().
SAT - Session 2 of QRT Test. Things I learnt:
- height: 100% doesn't work with display: flex. Need to use align-items: stretch
- fetch API's response needs to be parsed with response.json()
- CSS with spacebar just means 2 different class names
- text-decoration helps with underline

5. System Design

MON - design airlines flight staff assignment dashboard
TUE - * find errors in TodoList / Polling-Cancel code
WED - Study 2 concepts: Critical Rendering Path Optimization, State Hydration and Partial Hydration
- minification for quicker load (but that's handled by Webpack usually).
- Astro for SSR / hydration

Week 13: Renewed Vigor after Holidays

ZhiHong Chua — Sun, 27 Apr 2025 14:55:38 +0000

Two weeks in Australia in both the rural and city areas taught me this: the dream of a beautiful countryside life is not without it's struggles.

I was lucky to have chanced upon a lady running a wine vineyard, who committed to the Tasmanian countryside during covid to escape from the hustle of Melbourne city life. It seemed it was plenty hard work, even though it looked beautiful for her at the start.

I also had the chance to meet small town folk - a blacksmith at a Gold Rush era theme park. It wasn't a skill that paid well, but he enjoyed it so much that working was fun for him. A retired operations employee at the Cape Otway Lighthouse emanates a similar glow.

In the city, people are dreary. Overcrowding causes people to have short fuses. I witnessed a man stop his bicycle at a traffic light, only to have another inattentive cyclist knocking into him lightly from behind. He cursed like there was no tomorrow.

Yet, there is still little bits of enthusiasm in the city. Like a hotel receptionist that went beyond her job scope and helped us become a "human weighing scale" for our luggage since she used to work for an airlines before. Or an excitable lady doing what she loves, selling books and book-related stuff like crochets and reading socks.

Life is more of what you make it, than where you live, it feels. With that I find newfound resolve to find my ikigai, or for romanticism's sake, raison d'etre.

1. Leetcode

SUN - easy question
MON - had trouble with hard Sliding Window question Count Subarrays With Score Less Than K. Revise an easy SW question
TUE - medium SW question Count Subarrays Where Max Element Appears at Least K Times but still had trouble with it. Couldn't quite get this Medium SW question either. But I did get the hang of the Easy SW question
WED - Easy Find Numbers with Even Number of Digits. Did another Math Easy, but got stumped by Medium DP / Math problem.
THU - PH rest
FRI - Push Dominoes. It's a medium question I couldn't solve in 2022, but could do it now! It isn't super clean, but working from problem to 6 base cases and implementing the if-else sounds like a win!
- Interesting follow up on prefix sum
SAT - Medium Greedy Minimum Domino Rotations For Equal Row but worked it out!

2. JS Coding

SUN - throttle, function.prototype.call, curry
MON - revised flatten, promise.all. Attempt useMediatedState.
TUE - attempt useWindowSize. Revised memoize.
- useEffect to addEventListener on mount, and removeEventListener on unmount.
WED - revised promisify, useDebounce and Throttle.
THU - PH rest
FRI - COMPLETED useMediatedState and revised something else.
SAT - Completed JSON.stringify, HTML Serialiser and Middlewares.

3. System Design

SUN - speedrun
MON - Design a system that allows users to bookmark videos for later viewing.
- JWT or OAuth token validation on server
TUE - Notification Center. Good, quick run
WED - displaying real-time stock market data, such as price changes and volume, for a user's watchlist. Gave ChatGPT better instructions to prompt me instead of giving full answers after my initial response
THU - PH rest
FRI - What started from the idea of creating a post to illustrate and compare optimisations from system design optimisations ended in exploring an old project using Next.js and React. Hope to complete it today, but maybe it will extend into the weekend.

4. JS Theory

SUN - HOC, Ref, React 18 (Suspense, Batching)
MON - React 18 revision (suspense, batching, useTransition), and study useDeferredValue. Study useLayoutEffect.
TUE - React 19 useOptimistic, practice writing custom hook. Also learnt how to upgrade React versions. Key to releasing v19 after v18.2 is to release a v18.3 non-breaking minor version at the same time as v19.0. This version adds console.error to allow developers to run in local and resolve any issues before fully committing to v19
WED - revised benefits of React. Studied benefits of hooks, and rules of hooks. Went beyond the basic explanation for the last point!
THU - Arrow Syntax VS Traditional Function Pretty sure I've encountered this before, but in a different form.
- Arrow Syntax has this to be fixed at function creation. Traditional Functions allow for this to be modified by bind, apply, call.
FRI - reviewed difference between call and apply. Studied Prototype Inheritance
SAT - speedrun through about 10 questions. Reviewed about 5 more. To re-test these 5 high importance questions, and I'll have completed all the high importance questions! 🥳

5. Behavioural

SUN - rest
MON - rehearsed 3 questions with GPT, saving some of the 10 free messages for system design practice. It's the first time doing it without referring to my .docx file for the onsite and it's going well.
TUE - 3 questions. Speak verbally before typing in.
WED - 3 questions. Used the 3 stories that I've not used as much. Tomorrow can try speaking into GPT speech-to-audio
THU - PH rest
FRI - tried speech-to-text, and turns out I use a lot of filler words and / or sound uncertain. Need more practice!

Week 10: Pre-Holiday

ZhiHong Chua — Mon, 07 Apr 2025 03:15:30 +0000

It's a pretty rewarding week, learning various stuff and even applying some concepts to my personal website. I'm off for holidays next week though, looking forward!

But for now, here are the topics again:

Leetcode
JS Coding
System Design / JS Theory
Behavioural

1. Leetcode

[Mon] Partition Equal Subset Sum Dynamic Programming, seemingly a 0/1 knapsack problem. DP is difficult still :x
[Tue] Easy question, so I did another Medium. Good day!
[Wed] Done Minimum Operations to Make Array Values Equal to K (E). Attempted Smallest Range II (M)
[Thu] Attempted Count the Number of Powerful Integers (H)
[Fri] Easy question

2. JS Coding

[Mon] Did useInputControl (M) and useClickAnywhere (E)! Re-attempted Map Async Limit successfully!
[Tue] Attempted Middlewares, Cycles, and useCounter II!
[Wed] Did useCycle, useSet and useTimeout!
[Thu] Min By (E) and Count By (M)! Attempted getElementsByClassName (M)
[Fri] work problems... Using a ref to pass between data

3. System Design / JS Theory

[Mon] Try quick-fire 10 questions.
- Revised 6: == vs ===, event delegation, Virtual DOM, cookies, localStorage & sessionStorage, hoisting, and <script / async / defer>
  - cookies are sent on every request, first sent by server
- Studied 4: func.bind, event capturing, What's JSX, error handling for async functions
[Tue] Quick-fire optimisations! UX: Lazy Loading, Skeleton Loading, Silent Loading, Image fixed width and height for CLS, Error Prompts, Virtualised Lists, Caching (Redis / LocalStorage). Accessibility: Dark Mode, Aria Labels / Lang for screen reader, Button navigation and execution. Security: disable CORS, sanitize inputs (React default). SEO: meta tag with description.
- Content-Security-Policy HTTP Header to define trusted source of scripts and resources, reducing change of XSS attacks. A good resource. Example: Content-Security-Policy: script-src ‘self’
[Wed] Yesterday's security article and a bit on keyloggers, and some CSRF best practices by OWASP, basically a per-request token sent in the HTTPS headers.
[Thu] -rest-

4. Behavioural

[Mon] 4 questions with back-and-forth answered today! Feeling confident
[Tue] 5 questions today! Feels great, and I find I have more stories as the questions come along. But perhaps I should constrain myself to the 7 - 10 stories I have and apply them to different questions. Otherwise I might not be able to follow STAR format
[Wed] 4 questions!
[Thu] -rest-
[Fri] -rest-

Week 9: Back to the Grind

ZhiHong Chua — Tue, 01 Apr 2025 16:01:09 +0000

Wow. It's already the 9th week since I resolved to study and improve my frontend skills. We've come quite far since Chinese New Year. The previous posts were all pretty haphazard, so here's hoping that it'll be more organised from here on out.

Each post will be a summary of 4 study areas:

Leetcode
JS Coding
System Design / JS Theory
Behavioural

1. Leetcode

[Tue] Solving Questions with Brainpower. Dynamic Programming skills is rusty. Revised Fibonacci Sequence (Easy) and Jump Game (Medium) for DP.
[Wed] Maximum Value of an Ordered Triplet I . Greedy and Prefix Sum eludes me. But based on algomonster it seems rare, so I shan't study too hard.
[Thu] Maximum Value of an Ordered Triplet II solved yesterday, so I tried a random Medium question Thought to solve with Trie and DP, but couldn't combine. Revised Trie concept with Count Prefix and Suffix Pairs I. Can try to optimise for II.
[Fri] Lowest Common Ancestor of Deepest Leaves DFS, Binary Tree question. Not optimal because couldn't code out post-order traversal, but got it!

2. JS Coding

[Tue] GFE new hooks questions useBoolean and useArray. EZ
[Wed] 2 Medium -- Tried useQuery medium question, revised Promise.all
[Thu] useMediaQuery (new) and useDebounce
[Fri] Revised, re-studied curry

3. System Design / JS Theory

[Tue] Design Netflix. This was rather interesting, as it resembled my daily work. But to draft all the flow charts in 45 minutes is crazy, guess I'll stick to greatfrontend's format.
- WebP -- this is a format of image that is well supported on most browsers, takes up less space than PNGs.
- HTTP2 -- seems multiplexing where concurrent requests can be sent is the main improvement (see here)
[Wed] Design a Poll Widget
- Offline Retry / Exponential Backoff - helpful for a highly-loaded server to reduce 429 Too Many Requests when it has transient downtime.
- rems instead of pixels -- root EMs are relative to root font size, so will look correct on different devices. Pixels are fixed width.
[Thu] Studied design patterns
- Singleton seems useful if you need a global instance. Perhaps a common tracking class with default values so save memory when recreate
- Proxy doesn't seem useful if you can directly perform validations in the object.
- Dark Mode implemented for my website!
[Fri] Data Table component but many things feel abstract. I might have to implement them to get a hang of it. Perhaps Monday's System Design will be considering work product.
[Sun] Chrome LightHouse experiments on my personal site!
- SEO: Added meta description to headers
- Accessibility: HTML element does not have a language attribute

4. Behavioural

[Tue] It seems my resentment for the current workplace is strong, and ChatGPT suggests reframing it as a lesson learnt for the future, rather than focusing on emotions.
[Wed] Read a few quick guides and practiced 3 more questions. Looks good today!
[Thu] Did 1 question back-and-forth. Felt more realistic
[Fri] 30 minutes back-and-forth, 2 signpost questions. GPT has limit of 10 messages in 4 hours, but that's just nice for this.

Frontend Fundamentals 16: System Design Intensive

ZhiHong Chua — Sun, 16 Feb 2025 06:14:43 +0000

Previous post in the series has been rather cluttered and maybe I should dedicate a single post to all things related to this topic.

1. Design JIRA Sprint Board

Requirements

create, edit, delete tasks
update task progress
view dashboard

Architecture

VIEW: Editor + Dashboard
CONTROLLER: Cache + Business Logic

Data Model / Interface

Edit task UI (form for filling description etc, button for updating task progress)

input: { description?: string; daysRequired?: number; ... }
output: { status?: "SUCCESS" | "FAIL" | "PENDING" }

Dashboard Summary

input: filters = { user: string; startDate: string; endDate: string }
output: columns = { daysRequired: number; title: string ; ... }

Optimisation

Error Handling / UIUX

Cache for offline view.
Hooks to display offline banner if user internet is disconnected.
Since it's not urgent like a stocks trading app, update on refresh page is good enough.
To handle concurrent updates (rare but possible), Keep a history log of updates (i.e each request needs to be sent with the timestamp), or do a check with BE data to see if user's previousData and nextData is correct, if somehow the previousData is outdated because someone else already changed it, throw user a popup error to say it has been modified and needs change.

Accessibility

No need for mobile-view since we won't expect people to update their tasks on their phone... coding tasks done on PC so it should be easier to update on PC. This simplifies code maintainability, since no need for media-queries. Perhaps if screen size detected is in the range of tablets to phones, then show a blank page saying it isn't supported.
Filter support. Different stakeholders need to see different data, and having this to allow them to see only relevant columns is important.

Security

Validate user credentials on login, and send them via each request. This is so that outsiders cannot access the data privy to the company using this dashboard.

🚨 Review (source):

Consider images
What network protocol is best?

Consider studying from FrontendLead: https://frontendlead.com/

Frontend Fundamentals 11, 12, 13, 14, 15 (Wtf is `this`?)

ZhiHong Chua — Mon, 10 Feb 2025 05:01:39 +0000

1. Understanding `this`, `apply`, `call`, and `bind` with ChatGPT.

So I told GPT I was unsure of these concepts and made it test me with some questions then evaluate my answers. Here are my takeaways.

call uses comma-separated arguments, and apply uses array of arguments
this refers to (1) object itself in object methods, (2) newly created instance in constructor methods, and (3) global object (window) in global function non-strict mode
arrow functions inherit this from lexical context, while traditional functions inherit this from where it is called
bind() helps us attach a context to a function that will be used later

2. Sample 3 JS `this` questions to solidify understanding

🚨 Promise Time Limit
Promise.all

3. Open-ended Discussions

STAR framework
7 to 10 good stories
interest, enthusiasm

Things people are interested in:

Will this person be a superstar, driven teammate? e.g. communicates well, resourceful and independent in solving problems, able to manage stakeholders, proactive and works hard in enacting new initiatives to drive the team forward.
Will this person be easy to manage? e.g. takes feedback well, likable, sociable and does not give you problems.

4. Answer 16 Common Questions on ChatGPT and Evaluate Answers

🚨 + how does this learning point lead to future improvements
🚨 anticipate follow up questions

5. Prepare 7 to 10 Stories

Credit Card Flip Animation
~~QA that likes to test extreme edge case~~
Reduce bundle size 7% via CV
~~Reducing possible investment states with PM~~
Guiding a junior engineer / writing es lint
RichText component cross-market
Optimising homepage load times (8. Cybersecurity project) (9. Gitlab CICD for website crash) (10. Supporting BE - reduce data load by 200%, debugging shared system) (11. Script to reduce transify bugs)

Frontend Fundamentals 12

1, 2, and 3. JS Questions

Revisiting some old problems like

Debounce ✅
Function.prototype.call ✅
Curry ✅
Promisify ✅ 🚨 Need to work on more in-depth understanding

4. System Design 1: Global Payments Dashboard

Websockets provide low latency
Caching strategies in high-update environment (Cache for non-laggy UI, fetch in background for clean UX)
Handling race conditions in high-update environment (Optimistic update, for quicker UI response. Version and timestamp, to ensure updates are applied in correct order)

5. System Design 2: Internal Corporate Messaging Platform

🚨 What do big companies use?

Frontend Fundamentals 13: Taking a step back

Taking a step back, I realise I might have been too focused on practice questions. A holistic approach to understanding such as trying questions specific to my existing knowledge and required tasks may be helpful. ChatGPT created a list of 9 questions for this, and my takeaways were:

virtualised lists keeps the Virtual DOM clean by hiding items not rendered, and removing items scrolled-past.
BFF, Apollo Client / GraphQL

And then I got another 5 questions:

CSP and CSRF token-based protection

FF 14: Revision Time

This time a focus on 2 random JS questions from the internet for practice on knowledge application, and revision on 3 alarm bell items on my past notes might be helpful.

1. Flatten Array ✅

2. GFE Medium

First Bad Version
Memoize (with resolver function)
Implement Queue using Stack (🚨 I wrote the same code but it don't return)
sum() curry (🚨 func.valueOf() is unstable)

3. BFF / Apollo Client / GraphQL

BFF handled by FE team allows them to customize response for each device type (eg. Less data required for mobile). This is also something GraphQL provides, sort of as intermediate backend. Apollo Client helps with that. I think no need to study this since it's a framework that can be learnt when required.

4. Big Tech's Approach to High Update Messaging

Seems that Telegram use MTProto (websocket), Whatsapp use MQTT (pub/sub). But none of it relies on the basic transport protocol. They seem to stack a lot more to achieve their business needs.

Websocket provides low latency but potentially less safe, unless you add things on top of it. Pub/Sub is uni-directional and may need deconflicting in an actual app...

5. CSP / CSRF token protection

OWASP has a guide on Synchronizer Token Pattern, which require a per-session valid token for every network request so we can ensure token used is from the actual user, not forged.

FF15 and later: (a) 2 JS questions, and (b) 2 SD/B questions, per day

1. JS Questions (Medium)

array.prototype.flat()
decode message
string.trim()

2. React (Hooks) Questions

usePrevious
useTimeout

🚨 Need to work on my hooks debugging skills

3. CSS Questions

🚨 Need to work on my CSS debugging skills

Forem: ZhiHong Chua

Stop Burning Cash: Real-World Lessons in LLM Token Optimisation

1. Cost Efficiency: Cutting Token Consumption by 87%

2. Strategic API Choice: Hugging Face vs. OpenAI

3. Looking Forward: The Move to Agentic AI

Week 19: Halibut

1. JS Quiz

2. Behaviour (3 daily)

3. Leetcode

4. JS Coding

5. System Design

Week 18: Busy with Life

1. JS Quiz

2. Behaviour (3 daily)

3. Leetcode

4. JS Coding

5. System Design

Week 17: Four months in

1. JS Quiz

2. Behaviour (3 daily)

3. Leetcode

4. JS Coding

5. System Design

Week 16: One Moment of Silence

1. JS Quiz

2. Behaviour

3. Leetcode

4. JS Coding

5. System Design

Week 15: What

1. JS Quiz

2. Behaviour

3. Leetcode

4. JS Coding

5. System Design

Week 14: Momentum

1. JS Quiz

2. Behaviour

3. Leetcode

4. JS Coding

5. System Design

Week 13: Renewed Vigor after Holidays

1. Leetcode

2. JS Coding

3. System Design

4. JS Theory

5. Behavioural

Week 10: Pre-Holiday

1. Leetcode

2. JS Coding

3. System Design / JS Theory

4. Behavioural

Week 9: Back to the Grind

1. Leetcode

2. JS Coding

3. System Design / JS Theory

4. Behavioural

Frontend Fundamentals 16: System Design Intensive

1. Design JIRA Sprint Board

Requirements

Architecture

Data Model / Interface

Optimisation

🚨 Review (source):

Frontend Fundamentals 11, 12, 13, 14, 15 (Wtf is `this`?)

1. Understanding this, apply, call, and bind with ChatGPT.

2. Sample 3 JS this questions to solidify understanding

3. Open-ended Discussions

4. Answer 16 Common Questions on ChatGPT and Evaluate Answers

5. Prepare 7 to 10 Stories

Frontend Fundamentals 12

1, 2, and 3. JS Questions

4. System Design 1: Global Payments Dashboard

5. System Design 2: Internal Corporate Messaging Platform

Frontend Fundamentals 13: Taking a step back

FF 14: Revision Time

1. Flatten Array ✅

2. GFE Medium

3. BFF / Apollo Client / GraphQL

4. Big Tech's Approach to High Update Messaging

1. Understanding `this`, `apply`, `call`, and `bind` with ChatGPT.

2. Sample 3 JS `this` questions to solidify understanding