Updates

关于责任心的一些粗略想法

Learn about OpenAPI, a tool that is popular for API development, and can be used to help with frontend development.

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.

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 architecture using Module Federation can be a powerful approach for microfrontend.

Solving CSS conflicts when using TailwindCSS with Module Federation

Creating CV using HTML with CSS is straightforward if you know them, but making it exportable as PDF is more involving

My experience migrating production angular applications to React and lessons learnt in the process

Translations of terminology in Flutter to React

My takeaway while reading The 4 Disciplines of Execution

How to use TypeScript in Module Federation without overengineering

How to render into any subtree in React

I started live-streaming on Youtube and Facebook recently, and I kinda like it.

A book review

The bad of good things and the good of bad things

A frontend developer's answer for the question.

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.

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.

Every time you try to use race to making a us-versus-them comparison, you are introducing the risk of becoming a racist.

Use Typescript ReturnType to reduce your Redux connect boilerplate

Use @content to inject arbitrary content into your SASS @mixin

Instead of separating container-presenter components based on arbitrary rules, separate components into business components and UI components.

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.

Embracing graceful degradation in Gatsby site by providing fallback UI without JS with useLayoutEffect hooks

Premature optimization is not just bad for programming, it's bad for life decision too.

Personal notes on my recent experience of joining Can You Hack It hackathon.

A list of unorganized random thoughts on automated testing

How to create an event bus to coordinate multiple section of your Javascript app.

How to add custom types for npm packages that doesn't have declaration nor DefinitelyTyped support.

小学时期种红豆的故事

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 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.

You can have typesafe callAll utility in Typescript 3

Using custom type guard allow us to create reusable checking that narrow down the type of a variable

My experience on developing a web-scraping application that will notify subscribers for any changes of a government website

By being more thoughtful, we can have a file input that is beautiful but still accessible.

A note on my first technical talk on React. I find the act of preparing and delivering the talk satisfying.

To bargain successfully in marketplace, make abrupt concession and threaten to flip-table effectively.

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.

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

拥有一份喜爱的工作的关键并不在于找到自己的热情在哪里，而是专注于提升自己的能力，掌握好自己的专业后获得一份好工作，热情才会随之而来。

理解对能力的两种心态，以及它们如何影响我们对学习和努力的态度。透过提醒自己要秉持成长心态，可以让我们对挫折和努力秉持更健康的心态。

Using typescript allow static typechecking and intellisense in your React application, and it is easy to get started.

Note to remind myself of my working philosophy

A journal on my first Meetup experience