Open in app

Sign In

Write

Sign In

Thor Chen
Thor Chen

308 Followers

Home

About

Published in

JavaScript in Plain English

·Pinned

Dependency Injection for Serverless Applications

A brief introduction to DI and Serverless with example setup using node.js, TypeScript and AWS — What is Dependency Injection? Dependency Injection (DI) is a software design pattern that addresses how components obtain their dependencies. In this context, the term “dependency” often refers to an object used to handle some logic that is not the responsibility of the client code where it is used. It is probably easier to explain…

JavaScript

7 min read

Dependency Injection for Serverless Applications
Dependency Injection for Serverless Applications
JavaScript

7 min read


Published in

Bits and Pieces

·Pinned

Rethinking Code Reuse

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…

JavaScript

8 min read

Rethinking Code Reuse
Rethinking Code Reuse
JavaScript

8 min read


Published in

Bits and Pieces

·Pinned

React Design Patterns: Return Component From Hooks

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…

JavaScript

6 min read

React Design Patterns: Return Component From Hooks
React Design Patterns: Return Component From Hooks
JavaScript

6 min read


Jun 14

TypeScript, Zod, and MongoDB: A Guide to Data Access Layer without ORM

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…

Typescript

6 min read

TypeScript, Zod, and MongoDB: A Guide to Data Access Layer without ORM
TypeScript, Zod, and MongoDB: A Guide to Data Access Layer without ORM
Typescript

6 min read


Published in

JavaScript in Plain English

·May 9

Stream Chat Completion with OpenAI API using JavaScript Fetch

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.

JavaScript

5 min read

Stream Chat Completion with OpenAI API using JavaScript Fetch
Stream Chat Completion with OpenAI API using JavaScript Fetch
JavaScript

5 min read


Published in

Bits and Pieces

·Apr 12

The Pitfalls of Using <Guard> or <If> Components in React

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 ? …

React

7 min read

The Pitfalls of Using <Guard> or <If> Components in React
The Pitfalls of Using <Guard> or <If> Components in React
React

7 min read


Published in

AWS in Plain English

·Feb 28

Deploy React Web App on AWS S3 and CloudFront using CloudFormation (via AWS SAM CLI)

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…

AWS

6 min read

Deploy React Web App on AWS S3 and CloudFront using CloudFormation (via AWS SAM CLI)
Deploy React Web App on AWS S3 and CloudFront using CloudFormation (via AWS SAM CLI)
AWS

6 min read


Published in

JavaScript in Plain English

·Dec 11, 2022

Understand Google reCAPTCHA with Diagrams and Code Examples

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…

JavaScript

8 min read

Understand Google reCAPTCHA with Diagrams and Code Examples
Understand Google reCAPTCHA with Diagrams and Code Examples
JavaScript

8 min read


Published in

JavaScript in Plain English

·Feb 7, 2022

Polyfill CSS using styled-components mixins in React

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

JavaScript

3 min read

Polyfill CSS using styled-components mixins in React
Polyfill CSS using styled-components mixins in React
JavaScript

3 min read


Published in

JavaScript in Plain English

·Feb 5, 2022

How to listen to Formik onChange event in React?

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…

React

3 min read

How to listen to Formik onChange event in React?
How to listen to Formik onChange event in React?
React

3 min read

Thor Chen

Thor Chen

308 Followers

Passionate JavaScript/TypeScript Developer with a Full-stack Background

Following
  • Sunil Sandhu

    Sunil Sandhu

  • Tinyfool

    Tinyfool

  • Felix Paul Kühne

    Felix Paul Kühne

  • php.net

    php.net

See all (13)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech

Teams