Open in app

Sign In

Write

Sign In

David Cai
David Cai

49 Followers

Home

About

Jun 2, 2022

Implement React Portals in Lit Web Components

React has a createPortal API to render a child node in a container node: ReactDOM.createPortal(child, container); The container node can be anywhere in the DOM. This enables interesting use cases such as injecting app-level overlays, e.g. Modal, Banner, and Toast to document.body : render() { return ReactDOM.createPortal(this.props.children, document.body); } How…

Web Components

2 min read

Implement React Portals in Lit Web Components
Implement React Portals in Lit Web Components
Web Components

2 min read


Aug 16, 2021

Mock GraphQL and REST in Storybook and Jest with MSW

This article is long (and dry), but at the end, you will have a setup that enables mocking GraphQL or REST responses at network level, and sharing the mocks between Storybook and Jest tests. Storybook is really good for developing components in isolation, especially for presentational (or “dumb”) components which…

Storybook

7 min read

Mock GraphQL and REST in Storybook and Jest with MSW
Mock GraphQL and REST in Storybook and Jest with MSW
Storybook

7 min read


Jun 29, 2021

React context without unwanted re-renders
120
3

Motema Pembe

This is great.

This is great. `use-context-selector` from Dai-shi (one of Zustand's contributors) does similar thing. It is proposed to the React community. Formik v3 uses it. Hopefully, in the future React `useContextSelector` hook will be offically supported.

1 min read

1 min read


Feb 23, 2021

Fix Cypress “Invalid or unexpected token” errors in parallel runs

Cypress test has been working very well for my project. But lately I started to get the mysterious “Invalid or unexpected token” errors after I changed my CI pipeline to use Cypress’ parallel testing. The error message “originated from your test code” made me think if there is any syntax…

Cypress

2 min read

Fix Cypress “Invalid or unexpected token” errors in parallel runs
Fix Cypress “Invalid or unexpected token” errors in parallel runs
Cypress

2 min read


May 28, 2020

Batch delete git tags by dates

TLDR; git for-each-ref --format '%(creatordate:iso) %(refname)' refs/tags | grep '2020-05-28 12:53' | sed -nE 's/.+refs\//:refs\//p' | xargs git push origin git fetch --prune origin +refs/tags/*:refs/tags/* The other day, I accidentally created 60 git tags, and pushed all of them to the master branch. Oops! Now I have a choice —…

Git

2 min read

Batch delete git tags by dates
Batch delete git tags by dates
Git

2 min read


Apr 30, 2020

React Testing Library and the “not wrapped in act” Errors

I recently upgraded React and React testing library. Very happy about the upgrade. But I start to see test errors like this: When testing, code that causes React state updates should be wrapped into act(...): act(() => {…

React

4 min read

React Testing Library and the “not wrapped in act” Errors
React Testing Library and the “not wrapped in act” Errors
React

4 min read


Jan 15, 2020

TypeScript 3.7 features you absolutely should use

If I have to choose the most useful features new to TypeScript 3.7, these two are on the very top of the list. Optional Chaining All of us JavaScript developers at some points of our career will unfortunately encounter this infamous error: “Uncaught TypeError: Cannot read property … of undefined” This is…

Typescript

2 min read

TypeScript 3.7 features you absolutely should use
TypeScript 3.7 features you absolutely should use
Typescript

2 min read


Dec 31, 2019

State Management in React with Reducer but not Redux

I truly believe that if React’s Context and Hook APIs came out before Redux’s inception, the adoption rate of Redux will be much lower compared to what it is now. Redux is likely overused in many projects where state management can be simply done using React’s built-in Context and Hook…

React

7 min read

State Management in React with Reducer but not Redux
State Management in React with Reducer but not Redux
React

7 min read


Feb 13, 2018

Creating a Low Cost and Highly Automated Living Style Guide

Living style guide is an essential tool for designers and developers to create re-usable components. It is a central place to demonstrate base styles, components, and modular patterns. Creating a living style guide might sound easy — it is just a HTML web page, right? …

Design

7 min read

Creating a Low Cost and Highly Automated Living Style Guide
Creating a Low Cost and Highly Automated Living Style Guide
Design

7 min read


Dec 20, 2017

CSS in JS and Test-ability

My company is in the middle of technology migration to move closer to the React ecosystem. We seek a new styling solution to replace SASS or PostCSS in order to bring more direct interplay between React components and CSS styling. We chose Styled Components — one of the main CSS-in-JS…

React

3 min read

CSS in JS and Test-ability
CSS in JS and Test-ability
React

3 min read

David Cai

David Cai

49 Followers

Gamer, hiker, reader, and programmer

Following
  • Eric Elliott

    Eric Elliott

  • Sindre Sorhus

    Sindre Sorhus

  • Alex Reardon

    Alex Reardon

  • Addy Osmani

    Addy Osmani

  • Daniel Tello

    Daniel Tello

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech