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…

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

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

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

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…

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…

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…

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

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