Tan Li Hau's Blog
Frontend Developer at Shopee Singapore
Latest posts
Extract parameter types from string literal types with TypeScript
Parse and derive types from string literal types in TypeScript using the Template Literal Types, turning `'/purchase/[shopid]/[itemid]/args/[...args]'` into `{ shopid: number, itemid: number, args: string[] }`
Demystifying Transitions
Compile Svelte in your head
Building a simplified webpack clone
Contributing to Svelte - Implement {#key}
I am going to share an anecdote on how I implemented {#key} logic block in Svelte
Compile Svelte in your head (Part 4)
Looking into the Svelte Compiler
Third party CSS is not safe
Reduce minified code size by property mangling
Contributing to Svelte - Fixing issue #5012
Svelte issue #5012 - Slot containing only {@html value} renders in wrong place on update
Retry asynchronous function using the callback pattern, promise chain and async await
How to retry asynchronous function using the callback pattern, promise chain and async await. Mental model for asynchronous JavaScript.
Contributing to Svelte - Fixing issue #4392
I am going to tell you an anecdote on how I investigated and fixed a bug in Svelte. I documented down my train of thoughts as detailed as possible. I hope this gives anyone who is reading, a glimpse on how to work on the Svelte source code.
Compile Svelte in your head (Part 3)
The Svelte Compiler Handbook
The Svelte compilation process can be broken down into 4-steps, 1) parsing source code into AST, 2) tracking references and dependencies, 3) creating code blocks and fragments, and 4) generate code.
Compile Svelte in your head (Part 2)
Compile Svelte in your head (Part 1)
Hydrating text content from Server-Side Rendering
Webpack Additional Compilation Pass
Personalised Development Workspace With Chrome Extension
In this talk, I will be exploring how you can develop your Chrome extension, and how you can use it to improve your development workflow
Webpack's TemplatePlugin
Debugging Story: Build failed, error from Terser
It all started with an error message during the build: 'ERROR in bundle.xxx.js from Terser'.
Reactivity in Web Frameworks (Part 1)
Reactivity is the ability of a web framework to update your view whenever the application state has changed. How do web frameworks achieve reactivity?
Super Silly Hackathon 2019
A quick walkthrough on how I created my pet in the browser for the Super Silly Hackathon 2019.
JSON Parser with JavaScript
Step-by-step guide on implementing a JSON parser
Pause and resume a JavaScript function
A thought experiment on how you can pause and resume the execution of a JavaScript function
Short Stories working on Svelte
Short stories while working on Svelte, and some personal takeaway.
I wrote a 12-line Rollup plugin
Why would I install a package with so many files and dependencies, just to do a something simple that can be done in 12 lines of code?
Manipulating AST with JavaScript
Manipulating AST is not that hard anyway
I wrote my module bundler II
We've built a simple bundler to bundle javascript code. Let's add CSS, HTML and serve it in the browser!
Creating custom JavaScript syntax with Babel
Forking babel parser and creating your custom JavaScript syntax isn't as hard as you think.
I wrote my module bundler
In my previous article, I explained how module bundler works. In this article, I am going to show you how I wrote my module bundler...
Solving Nonogram with Code
...said me to my colleague, "If I could come up with a program to solve this, I would stop playing it"
Step-by-step guide for writing a custom babel transformation
Writing your first babel plugin
Git commits went missing after a rebase
What happened when you do a rebase
What is module bundler and how does it work?
understand how module bundler works
Git Gudder
Learn in Public
Starting my notes
How to get started in contributing to open source
Debugging Web Workers
...for Chrome, Firefox and Safari
Parsing error when calling generic function with type arguments
😱
Errors encountered upgrading Flow v0.85
and how we solved them
History of Web Development: JavaScript Modules
CSS Code Splitting
The motivation of CSS splitting arises when we try to split our CSS styles and lazily load the styles only when we actually need them. CSS code splitting is one of our many efforts where we constantly improve the performance of the application.
Who accessed my property?
How to know when object property get accessed or modified
Understand the frontend tools
About the tools frontend developer used in 2019
Codemod with babel
A template which I used
My eslint doesn’t work with for flow 0.85’s explicit type argument syntax
and how I figured out why.
The `ascii_only` option in uglify-js
that get my emoji showing in my chrome extension
Dead-code elimination
How to hint uglify-js that your function is pure