Open in app

Sign In

Write

Sign In

Fred Wong
Fred Wong

22 Followers

Home

About

Published in

fredwong-it

·May 31

Storybook — configure with NextRouter

I got this error message in storybook today. Since I redesigned the code to use the router.push , it used useRouter , and storybook could not pick it up properly. Solution .storybook/main.js add storybook-addon-next-router under addons (npm install first)

Storybook

1 min read

Storybook — configure with NextRouter
Storybook — configure with NextRouter
Storybook

1 min read


Published in

fredwong-it

·May 12

Be careful with truthy check and short circuit

I wrote this piece of code and received a very good feedback from the PR review. Anyone notice the issue about this code? It’s convenience to write thing like this, truthy check with short circuit to display something we want in certain condition. It would work most of them time…

Truthy

2 min read

Truthy

2 min read


Published in

fredwong-it

·May 9

SVG Icon— icon in sync, pattern id issue

I created 2 svg icons with the same pattern id. One of them is close icon and the other is timer icon. I found out that the close icon would be changed to timer icon when the timer icon was presented in the same component. Only close icon timer icon before close icon

SVG

2 min read

SVG

2 min read


Published in

fredwong-it

·Apr 12

Setup Storybook in NextJs app

Today I need to setup storybook in the NextJs app and I faced a few challenges. 2 challenges import fonts file from the public/fonts folder properly staticDirs: ["../public"] 2. make component level css style working The current project is combined tailwind classes and custom css file which imported in the component level. When I first setup the storybook, it didn’t pick up the component level css styling, until I included this in the addons array in main.js

Nextjs

1 min read

Setup Storybook in NextJs app
Setup Storybook in NextJs app
Nextjs

1 min read


Published in

fredwong-it

·Mar 6

Emotion — apply styling on Component selectors

I tried to do this to apply styling through component selector instead of doing css selector > div. const Text = styled.div` color: red; ` const Container = styled.div` ${Text} { color: red; } ` Then I got this error. Solution install @emotion/babel-plugin as dev dependency added @emotion/babel-plugin in next-twin.js

Components

1 min read

Emotion — apply styling on Component selectors
Emotion — apply styling on Component selectors
Components

1 min read


Published in

fredwong-it

·Jan 18

Twin.marco — configure in nextjs 12 without using .babelrc

The previous story I introduced how to configue twin.marco in nextjs 12 using .babelrc . However, our team would like to stick with SWC over babel as the compiler, so I need to find another solution to configure twin.macro without using .babelrc When we add .babelrc and run npm run…

Nextjs

2 min read

Twin.marco — configure in nextjs 12 without using .babelrc
Twin.marco — configure in nextjs 12 without using .babelrc
Nextjs

2 min read


Published in

fredwong-it

·Jan 17

Emotion + Tailwind — twin.macro

The current Nextjs project uses Tailwind css and we want to bring in styled component. Our team decided to use Emotion + Tailwind. Emotion A package similar to styled-component package but works well with Tailwind css A few packages that we want to pay attention to @emotion/core: main package @emotion/react: integrate…

Emotions

1 min read

Emotions

1 min read


Published in

fredwong-it

·Dec 21, 2022

UI Testing — waitFor async in Jest test with testing-library/react

I find out this interesting thing which we need to pay attention on when testing with component with some async action This would failed. The test getState will get the old state without waiting because updateState is after await const action = () => { await xxxxx state.status…

Ui Testing

1 min read

Ui Testing

1 min read


Published in

fredwong-it

·Dec 15, 2022

NextJS — accessing environment variable

I tried to add the environment variable and accessed from both client and server side inNextJS app. Experiment This is the client side testing in chrome tool. All name in works

Nextjs

2 min read

NextJS — accessing environment variable
NextJS — accessing environment variable
Nextjs

2 min read


Published in

fredwong-it

·Dec 15, 2022

Heroku — update environment variable

Learn something from setting up the environment variable in the heroku app today. Set the environment variable in dashboard 2. Restarting your app to clear the cache

Heroku

2 min read

Heroku — update environment variable
Heroku — update environment variable
Heroku

2 min read

Fred Wong

Fred Wong

22 Followers
Following
  • saurabh chopra

    saurabh chopra

  • Devin Finzer

    Devin Finzer

See all (6)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech

Teams