Avoid Wrong Abstraction through Encapsulation and Composition — Every now and then, we see debates on how to structure the codebase to make it more maintainable, and I would say having agreement upon what would be the right direction of “code reuse” or “what is reusable code” is a significant milestone to conquer during these discussions. In our…

A Potential New Pattern Inspired by “Partial Application”: With practical examples using Material-UI and TypeScript — Hooks have been introduced to the React community many years, and there are many new coding patterns emerged because of that. In this article, I would like to share my journey of exploring a potential pattern inspired by the concept of “partial application” — I call it “Return Component From…

Embracing New Paradigms for Enhanced Data Consistency and Type Safety — In this article, we’re going to discuss an alternative approach to handling data access layer in TypeScript with MongoDB, without using ORM. Traditionally, developers leverage Object-Relational Mapping (ORM) tools to map between data types in databases and object-oriented programming languages. However, ORM may sometimes lead to performance issues, complex configurations…

Build your own ChatGPT with React in a typewriter style — When you request for a chat completion using OpenAI API, it will send the entire message in a single response by default.

Use Logical AND Operator (&&) or Babel Plugin Instead — Background Like many React developers, I prefer concise JSX syntax. When it comes to conditional rendering, many of us may wish to have a component that expresses control flow in JSX. That is to say, compared to the syntax below: <div> {condition ? …

What are we going to achieve? In this article, we will walk through a demo project that uses CloudFormation to create a minimum set of cloud infrastructure resources on AWS to host a React web app. The following diagram illustrates the major components: That is, we will store static files (HTML, JavaScript, CSS, etc.) on an…

Code examples are written in React, TypeScript, and Node.js Even in 2022, over a decade since reCAPTCH been invented, I find it is still not super straightforward to understand how Google reCAPTCHA works and integrates with a web app if this is the first time looking at it, thanks to…

With an example of flex gap polyfill — Brief intro of styled-components and flex gap Styled-components is a modern way to add styles to React projects. …

I have been asked this question several times recently: I am using Formik in my React project I want to observe (or listen to) the changes of form values But <Formik> does not provide a prop for onChange callback How do I do that? Well, I would like to share…