React/NextJS — SSR and Responsive Design

I have ran into this for trying to build the responsive design with SSR feature in NextJS.

Here I captured the steps when I worked through to the end solution.

1. tried to build responsive GridLayout. with…

Sequelize — sort another Model in include by using order

I am using the postgres and sequelize the current project. I tried to join the team model with member model in a query, and the member needed to be sort by workYears ascending order.

React — build SVG components with styled components

I worked with a project and we used SVG for icons. SVG is called Scalable Vector Graphics and it provides a lot of benefits as an image type/extension, it is scalable and the size is very small comparing to png and other image type.

NextJS /Typescript — how to import md file

We used the markdown for the Terms and Conditions page and planned to get the content…

Heroku — update environment variable

Learn something from setting up the environment variable in the heroku app today.

Sequelize — returns a string for decimal/numeric type

I am not very familiar with postgres and sequelize and just realized that it would return the decimal/numeric type as string in the code.

Svg icon — issues with mask style

I came across this issue when I created the SVG icon component in Next.js.

Problem

Solution

Reference

NextJS — accessing environment variable

I tried to add the environment variable and accessed from both client and server side…

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

React — css styled component

I started to work with styled component in React and want to capture my learning here.

• First we need to install the npm package npm i styled-components
• import import styled, { css } from 'styled-components' at the top