Chak Shun Yu's Blog & Guest Contributions

Storybook is one of the greatest development tools in frontend development. However, adopting Storybook isn't a trivial decision to make for a team. This article provides an overview of practical factors to consider based on personal experience, business value, and long-term impact.

CSS styling plays an integral role in the development of React components. One of the most interesting challenges is designing a component's API around styling features. The most common way is exposing a className prop, but is that a good idea and are there better options?

NPM packages are essential to our jobs as React developers. However, with over 1.3 million packages on the registry and varying degrees of quality, picking the most suitable one isn't always straightforward. To help, this article goes over 5 important aspects to NPM React libraries that you should pay attention to before picking them.

In the world of React development, there are so many third-party libraries Because of that, it's easy to get lost in deciding which library to use. This article looks into 3 different libraries for implementing an accordion while going over requirements, what to consider, and drawing comparisons.

It's hard to imagine React development without TypeScript nowadays. However, being a good React developer doesn't automatically translate into being a good TypeScript developer. This article goes over 7 different utility types that are helpful to React developers on a daily basis.

Every React developer will know of the useCallback hook and have tried to integrate it with TypeScript. However, there are various ways to do so. This article covered three different ways, namely by typing only the callback parameter(s), typing the returning value, or the call itself.

In the realm of JavaScript development, it's common to filter out nullable values from an array. However, doing this with TypeScript doesn't always result in the expected typings. This article covers how to sort that out.

No matter whether you're new to React or an experienced developer, the world of CSS can be quite daunting to explore. This article covers the 5 CSS concepts that I think every React developer should know based on my experience using React on a daily basis.

An integral part of CSS styling resolves around the CSS box model, which is the interaction between the content area, paddings, border, and margins. Contrary to the default model, using the border-box box model has my preference for creating more intuitive styling.

Multiline text truncation is a common user interface design. It allows for saving precious screen estate, making UI more uniform, and prioritization of information for the user. This article explores how to implement it using CSS's line-clamp.

Shallow comparison is a concept all over React development and documentation. It plays a key role in React's internals, but it's not often explained. This article covers how it works by diving into the source code and finishes with some interesting takeaways.

Since React v17.0, you don't have to import React anymore in your JSX files. But why was this seemingly unused import when creating React components necessary in the first place? And why isn't it anymore now?

For memoization in React, we have 2 extremely similar hooks useCallback and useMemo. But is there a difference or are they only wrappers around the same logic with different names for the sake of convenience?

After several years, Suspense will finally be officially released with React 18. But what is it, why do we need it, what issues does it address, and what are the benefits?

React 18 will introduce a new and exciting mechanism called concurrent rendering. It opens up a world of opportunities for React developers to control user experiences, but what is it exactly and why do we need it?

This article shows you how to mock the return value of an imported function in Jest, either with mockImplementation or mockReturnValue.

With the release of React 18 on the horizon, familiarize yourself with three new APIs that should help make concurrent rendering a reality.

It can very difficult to decide whether a certain frontend framework or library is worth it to pick up. There are so many choices and the field changes on a frequent basis. But even in 2022, there are still plentiful reasons to hop onto the React train if you haven't already.

While the year has just started, 2022 is looking extremely exciting for the world of React development. This article goes over the topics that I think will make an enormous impact on the field of React development and that you should definitely look out for in 2022.

You can't do React without JavaScript, there's no way around it. But that doesn't mean you have to master JavaScript before learning React. It's recommended, but not required.

After nearly a full year of writing technical about code readability, I learned a lot about it. But the most important thing that I learned about writing readable code is that it isn't for myself, but for others.

Although behaviour testing is extremely relevant in the field of React, not every developer will have equal familiarity and mastery of it. This article discusses a set of fundamental questions related to behaviour testing in React based on experience in multiple React engineering teams.

State management is one of the most important aspects of React development. However, not every state update should result in a re-render. This article covers how to prevent unnecessary state update re-renders by avoiding the state update or triggering the state update with the existing state.

Mocking React components is a crucial skill for creating proper React tests. This article will show you how to mock your React components in different scenarios using Jest, namely default exported components, named exported, components that come from ES6 modules and including the props with them.

As a React developer, reviewing is part of our daily responsibilities. However, knowing what to focus on during React reviews isn't a trivial task. This article shares all the questions that I ask myself when reviewing React code and will help you navigate your way through React reviews.

Besides development, React design patterns can also be used to increase the quality of code reviews. However, doing so isn't trivial and requires a different understanding. This article covers how to easily integrate several common React patterns into your React reviews.

As code proposers and members of a team, we have the responsibility to set up our reviewers for success. This article covers 6 concrete tips that will make your React pull requests easier to review and allow you to receive higher-quality reviews today.

As code proposers, we try to pass all the checkmarks of the reviewer. Oftentimes the focus is on the code, but there's more to a PR than just the code. This article covers 5 non-code related mistakes that developer make that leads to their PRs becoming more difficult to review.

Testing components is important in React development but is also often overlooked and neglected. After several years of not knowing what to test or how to approach it, I came up with a testing checklist. This article shares that checklist, discusses the topics, and will help you reach better tested React components.

Everyone hates meetings, especially bad ones. But in the current pandemic situations, remote meetings are part of our work more than ever. This article shares 5 actionable tips that helped us increase the efficiency of our meetings as an engineering team.

This article shows you how to spy on an exported function, imported function, named export, or named import in Jest.

Reviewing is a core process in software development, but not all code reviews are created equally. This article shares 5 actionable tips that helped me deliver higher quality code reviews and will help you take your code reviews to the next level.

Snapshot testing your React components is convenient, easy, and low effort, but they are also unreliable, unrealistic, and volatile. Over the years, they have fallen out of favour in the field of React testing. This article looks into the remaining proper use cases for snapshot testing React components.

One of the most common usages of TypeScript in a React codebase is typing a component's props. But have you ever thought about how readable your component's props typing is? Let's find out by analysing three different implementation approaches.

Showing UI elements conditionally and implementing logic flows are essential to make any React app interactive. This ultimate guide covers inline conditional rendering, custom hooks implementation, and content state management in React, analyzing their level of readability and clean code practices.

Hooks are an important aspect of any React project and mocking them in tests is not always straightforward. This article will show you how to navigate the spectrum between the control and effort of mocking and the representability of your tests so you can create your own solutions.

Being a junior developer isn't easy and not much is expected from them. But with the right mindset and actions, juniors can actually provide a lot of value to a team from the moment they join. You are not a liability, but an asset.

Writing proper behaviour tests in React with Enzyme and Jest is not a trivial task. I have spent three years on this topic and in this article, I will share my learnings and guidelines to how you can get more useful, reliable, and meaningful behaviour tests for your React code.

Pair programming as a concept bears tremendous potential. This article goes over 5 ways that will help you make pair programming sessions more effective.

In this article, I will three tips for when it makes sense to mock and how to approach mocking in your tests that will help you with mocking.

Pair programming is not only fun, but also helps teams with productivity, truck factor, levelling out knowledge gaps, onboarding newcomers, and quality of work.

In this article, I go over the different available mocking approaches, the differences between them, and the different use cases for mocking one particular function from an imported module in Jest.

A story, self reflection, and learning from an early stage in my engineering job about how I totally forgot about the most important audience of all: reviewers.

A story from an early stage in my engineering job about how I tried too much to come up with the perfect solution, rather than keeping it simple and not unnecessarily wasting time, and a reflection of what I could've done different.

Why using the second argument of Redux's `connect` function will lead to more maintainable and higher quality React code, as well as significantly improving how you're able to test your components.

Statement and reflection on what, why, and how a post graduate student will attempt to learn as much as possible form his first front-end developer job.

When I started to write this post, I had finished my first serious week of contributing to open source. I mainly contributed to the project Storybook. This post will describe the contributions and interactions that took place this week. It will also focus on the path that led up to this week.