- OpenAPI: A backend developer's tool, a frontend developer's friend
Learn about OpenAPI, a tool that is popular for API development, and can be used to help with frontend development.
- Using View Transition API in React App
Discover how to use the View Transition API in your React apps to create engaging and fluid navigational experiences. This API simplifies the process of animating shared elements and can be used in various practical scenarios, such as showcasing product images, animating modals, and more.
- Automating Refactoring with Codemod
Simple refactoring, when applied to large-scale codebase requires huge amount of manual work. Fortunately, you can make them manageable by using codemod - code transformations that runs on the codebase.
- A Plugin-Based Frontend using Module Federation
A plugin-based frontend architecture using Module Federation can be a powerful approach for microfrontend.
- Using TailwindCSS with Module Federation
Solving CSS conflicts when using TailwindCSS with Module Federation
- How to Create CV using HTML
Creating CV using HTML with CSS is straightforward if you know them, but making it exportable as PDF is more involving
- Migrating Large Angular Apps to React
My experience migrating production angular applications to React and lessons learnt in the process
- Flutter for React Developers
Translations of terminology in Flutter to React
- On Running
- On Expanding Purpose
- Tips for Newbie Frontend Engineer
- How to Make Things Happen
My takeaway while reading The 4 Disciplines of Execution
- Using TypeScript with Module Federation
How to use TypeScript in Module Federation without overengineering
- Starting a New Blog (Again)
- No Perfect Time
- React Portal to Subtree
How to render into any subtree in React
- How to Keep Creating
- Live Streaming
I started live-streaming on Youtube and Facebook recently, and I kinda like it.
- Upstream: The Quest to Solve Problems Before They Happen
A book review
- The Coin Always Has Two Sides
The bad of good things and the good of bad things
- How Does That Scale?
A frontend developer's answer for the question.
- Interview as a Learning Tool
- A Chapter A Day
- Next.js: First Impression
Next.js is very versatile compared to GatsbyJS or Create React App. This flexibility is very appealing as you can evolves your application architecture as requirements change.
- Trying Playwright: Cross-Browser Testing
The testing tools that are easiest to setup are still Jest and Cypress. Playwright has slight advantage over puppeteer as it supports more browsers, but the tooling around it is still lacking at the moment.
- Empathize with Backend Developer
- Self Doubt
- How to Become a Racist
Every time you try to use race to making a us-versus-them comparison, you are introducing the risk of becoming a racist.
- Reduce redux-connect Typescript boilerplate
Use Typescript ReturnType to reduce your Redux connect boilerplate
- @content: SASS equivalent of React children
Use @content to inject arbitrary content into your SASS @mixin
- Container-Presenter Pattern Revisited
Instead of separating container-presenter components based on arbitrary rules, separate components into business components and UI components.
- Comfort Zone
- Custom Hooks: useTransientState
A custom hooks to declare state that will restore to its steady-state value after some delay. This will be useful when you want to show some UI element temporarily and then hide it after some delay.
- On Giving
- Provide Fallback UI with useLayoutEffect in Gatsby
Embracing graceful degradation in Gatsby site by providing fallback UI without JS with useLayoutEffect hooks
- Choose What Allows You to Proceed Now, Optimize Later
Premature optimization is not just bad for programming, it's bad for life decision too.
- Joining a Hackathon
Personal notes on my recent experience of joining Can You Hack It hackathon.
- Thoughts on Testing
A list of unorganized random thoughts on automated testing
- Creating a Simple Event Bus
- Adding Types for npm Packages
How to add custom types for npm packages that doesn't have declaration nor DefinitelyTyped support.
- Be Human While You Code
Even when your colleague or boss doesn't care, write accessible code. Because you can. Because you should. Because you're human, and you care about other human too.
- Using Web Component With React
Using web component in React requires some boilerplates to make it work, trying to abstract that boilerplate has a limitation. With React hooks, it's much less boiletplate and the abstraction is no longer needed.
- Type-Safe callAll
You can have typesafe callAll utility in Typescript 3
- Using Typescript Type Guard to Narrow Down Type
Using custom type guard allow us to create reusable checking that narrow down the type of a variable
- Monitoring Government Website for Content Change
My experience on developing a web-scraping application that will notify subscribers for any changes of a government website
- Accessible HTML File Input
By being more thoughtful, we can have a file input that is beautiful but still accessible.
- My First Tech Talk: Render Props & Higher Order Components
A note on my first technical talk on React. I find the act of preparing and delivering the talk satisfying.
- How to bargain in marketplace like a tactful auntie
To bargain successfully in marketplace, make abrupt concession and threaten to flip-table effectively.
- How to say no to friends and family that want to borrow money
When friends/family want to borrow money from you, instead of asking how much they want to borrow first, ask why they want to borrow, and respond accordingly.
- React Patterns: Container-Presenter
There are a few design patterns of React component, and the easiest one is the Component-Presenter pattern, which is actually to separate mapping/states/transformation from the rendered content
- Introduction to React with Typescript
Using typescript allow static typechecking and intellisense in your React application, and it is easy to get started.
- The best way is to Improve Yourself
Note to remind myself of my working philosophy
- My first Meetup
A journal on my first Meetup experience
- Bash & Linux
- Crafting Interpreters: Reading Note
- Docker Swarm
- Finite State Machine and Statechart
- Malcolm's Frontend Project Assignment Checklist
- React fundamentals
- React Server Component
- Sorting Without Library
- Jest Mock in TypeScript
- Make Input as Flex Item
- Assert console.error call times when mocking it
- Function constructor can be used as safe alternative to eval
- Script versus Module in TypeScript
- Extending Global or Third Party Library Typing
- Ambient means No Implementation In TypeScript
- Use Overload to Type Dynamic Function Signature
- There is no way to type "as" props properly in TypeScript currently