DEV Community: Sam

How to setup Next.js project with TypeScript, ESLint and Prettier

Sam — Thu, 03 Mar 2022 23:06:47 +0000

Introduction

Have you ever struggled what packages should be installed to set up a project? Should I install eslint-config-airbnb or eslint-config-airbnb-base? What is eslint-plugin-jsx-a11y? Is it still needed to install eslint-plugin-react and eslint-plugin-react-hooks?

When I start doing research, I have seen people installed a pile of packages. I always question do I really need them all.

It's good to have a cheat sheet to follow so that every time we can create a clean new project with all toolkits ready. Here is mine for a Next.js project.

The VS Code Config part is based on this post How to get ESlint and Prettier to play nice in VS Code? From which a new setting of codeActionsOnSave is introduced.

Toolkits:

Typescript
ESLint
Prettier
Editor Ruler (80,100,120, color: hotpink)

Pre-requisite

VS Code
VS Code plugin: ESLint, Prettier, Format Code Action

VS Code Config

Cmd + Shift + P to open Command Palette
Type setting
Select Preferences: Open Settings (JSON)
Add below config:

{
  "editor.rulers": [80, 100, 120],
  "workbench.colorCustomizations": {
    "editorRuler.foreground": "#FF69B4"
  },
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.formatDocument": true,
    "source.fixAll.eslint": true
  }
}

Create new project

Next.js - TypeScript
Run below command:

npx create-next-app@latest --ts <MY_APP_NAME>

With the flag --ts, Typescript related packages like @types/node and @types/react would be included. File extension would become .tsx instead of .jsx. A file tsconfig.json which is used by Typescript compiler would be prepared and with a list of default setting like "target": "es5" and "strict": true.

Setting up ESLint

Since version 11.0.0, Next.js already integrated ESLint. We neither have to install ESLint package nor create .eslintrc.json file manually.

eslint-config-next could be found in package.json which below 3 recommended rule-set are used.

eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-next

You can check eslint-config-next for more details (It's even included @typescript-eslint/parser and jsx-a11y).

Note: jsx-a11y is a static AST checker for accessibility rules on JSX elements. npm web site shows its supported rules.

So, I am happy with the built-in parser and rule-sets but it lacks the airbnb style. According to Next.js, it is not recommended to install overlapping ESLint plugin

This eliminates the risk of collisions or errors that can occur due to importing the same plugin or parser across multiple configurations.

So I only install eslint-config-airbnb-base additionally then should be good to go.

npm i -D eslint-config-airbnb-base

Add airbnb-base to .eslintrc.json

{
  "extends": ["next/core-web-vitals", "airbnb-base"]
}

Note: eslint-config-airbnb is a collection of a bunch of plugins including eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y while eslint-config-airbnb-base is only the core part of airbnb style.

If you want to customise the rules, set the rule to warn or off manually in .eslintrc.json.

{
  "extends": ["next/core-web-vitals", "airbnb-base"],
  "rules": {
    "no-unused-vars": "warn"
  }
}

Setting up Prettier

Now VS Code will alert you with the error underline. We want Prettier to help format our code nicely.

So we create a new file .prettierrc. And add below:

{
  "singleQuote": true
}

Should I specify parser in Prettier?
From Prettier:

Prettier automatically infers the parser from the input file path, so you shouldn’t have to change this setting.

Side Dish
Prettier has not yet format long string. There is a discussion on break strings in Prettier community

Conclusion

I hope you have got some basic ideas what packages we already have by default and minimised the amount of packages to be installed for basic setup. Now I have a clean project with all the toolkits I need and without packages that might cause collision.

After all, you should only install those as devDependencies and won't affect the size of production build (For Typescript, I am not sure. Official doc recommends to install globally, but someone in this discussion said global install would be an anti-pattern. What do you think? Do you install typescript globally or locally, and why? Please let me know).

Things to think about

As Prettier formats your code on save, some files like _app.tsx won't be formatted unless you open it and save it once. You can run the command npm run lint to lint whole project so that no file would be left unformatted. I wonder if there is any tools could help auto formatting after lint.
When learning typescript, there comes a term tsc means typescript compiler. I am not sure when to use it or do I need to use it manually cos I have built some typescript projects and never use it once.

Photo by SHVETS production from Pexels

How to make a Noughts and Crosses game in React

Sam — Wed, 23 Feb 2022 17:40:21 +0000

Photo by Elīna Arāja from Pexels

Introduction

Fun fact: The well known epic mini game "Tic-Tac-Toe" in Britain is called "Noughts and Crosses". While the former one is playing with consonant (T), the later one is playing with the vowel (O).

I am so excited to have it as my first React.js project. The simple game rule is just good for a junior developer to get familiar with handling logic. Let's take a look at UI design first and then the logic.

UI Design

There are 3 main parts:

Information: Showing who wins. And better show also whose turn.
Body: The 9 boxes for users to input O or X.
Button: A "Play Again" button at the end of the game

For the body, I declare a default grid for the 9 boxes:

const defaultGrid = [1, 2, 3, 4, 5, 6, 7, 8, 9];

Then a grid-container is made to contain the 3x3 grid. The gap together with background color do the trick of showing the lines like 井.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 15px;
  background-color: #444;
}

Then loop the grid array in JSX.

<div className="grid-container">
  {defaultGrid.map((boxNumber) => (
    <button
      type="button"
      key={boxNumber}
      value={boxNumber}
      onClick={handleClick}
    >
      {boxNumber}
    </button>
  ))}
</div>

Logic

There should be 3 status for each box:

Empty
O
X

Winning criteria is defined:

const winArrays = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [1, 4, 7],
    [2, 5, 8],
    [3, 6, 9],
    [1, 5, 9],
    [3, 5, 7],
  ];

Two array is created to contain a list of box number that has been clicked by each side during the game.

const [noughtsArr, setNoughtsArr] = useState<number[]>([]);
const [crossesArr, setCrossesArr] = useState<number[]>([]);

Flow of the program:

Clicking one of the 9 buttons
Insert clicked box number to corresponding array
Toggle turn

Winner calculation takes place in useEffect(), which keep watching at the states of the Noughts Array and Crosses Array.

I found a function array.every() in ES6 very helpful for the calculation. On MDN website it has provided an example to check if an array is a subset of another array. So my thought is to check each of the possible win array whether it is a subset of Noughts or Crosses clicked numbers or not. E.g. if the X side has clicked box 1,2,6,9, then crossesArr would be [1,2,6,9]. Neither [1, 2, 3] nor [3, 6, 9] in winArrays is a subset of crossesArr so Crosses has not been qualified to win yet.

const isSubset = (xoArr: number[], winArr: number[]) =>
    winArr.every((number) => xoArr.includes(number));

const noughtResult: number[][] = winArrays.filter(
  (winArray) => isSubset(noughtsArr, winArray)
);
const crossResult: number[][] = winArrays.filter(
  (winArray) => isSubset(crossesArr, winArray)
);

filter() will return value that passed isSubset() checking. So the last thing to do is to check the length of noughtResult and crossResult and see which is larger than 0 then that is the winner.

Lesson Learned

Array handling. There is quite a number of arrays to handle and calculate. It is also a good exercise for spread operation.

Functional Programming. Tried applying the concepts of functional programming like immutability and separation of data and functions. And I found Single-responsibility principle(SRP) make the testing much easier.

The code below is showing...

two higher order functions are created to get correct box status and render a corresponding icon (X/O) by a given box number.
one higher order function to paint the win icon dynamically.

<button
  ...
  style={{ color: getWinBoxStyle(boxNumber) }}
  ...
>
  {withIcon(getStatus(boxNumber))}
</button>

Grid and Flex in CSS. To build a table like layout in a modern way.

Typescript. This is my first typescript project with ESLint and I am getting mad with so many errors in my code to solve! Time spending on solving typescript errors is probably more than coding the program logic itself. After all, it would still only be a small taste of typescript to me as I didn't do all the variable type and check type.

GitHub Pages. Setting up GitHub Pages workflow for CI/CD. It does a list of actions like build, test and deploy every time I push the code.

Thing to think about

Extreme Case handling. Think about 2 extreme cases:

All 9 boxes clicked and X win
All 9 boxes clicked but draw game.

I would not be happy if X win but a "Draw Game!" message is shown. In useEffect() I thought the logic was in sequential order so I tried to put "Handle Draw" after checking winner but it did not work as expected. Below is the code that works fine. I lift "Handle Draw" up to the top so the program can check win before handle draw game as expected. But the order of code goes a bit strange. I'm not sure if anything I missed.
For a quick check, You can try below order of box clicking:
1 2 3 4 5 6 8 9 7 for X win at 9th box.
1 2 3 7 8 9 4 5 6 for draw game.

const [winner, setWinner] = useState('');
...
useEffect(() => {
  // Handle Draw
  const combinedArr = [...crossesArr, ...noughtsArr];
  if (!winner && combinedArr.length === 9) {
    setWinner('Draw');
  }
  // Check who is eligible to win
  const noughtResult: number[][] = winArrays.filter(
    (winArray) => isSubset(noughtsArr, winArray)
  );
  const crossResult: number[][] = winArrays.filter(
    (winArray) => isSubset(crossesArr, winArray)
  );

  // Setting Winner
  if (noughtResult.length > 0) {
    setWinner('Noughts');
    const result = [...noughtResult];
    setWinResult(result);
  } else if (crossResult.length > 0) {
    setWinner('Crosses');
    const result = [...crossResult];
    setWinResult(result);
  }
}, [noughtsArr, crossesArr]);

Nought and Crosses:

Github
Live site

2022-02-27 Update:
I added a variable thisWinner for "Handle Draw" to refer to. So that the flow would look better and make more sense.

useEffect(() => {
    // Check who is eligible to win
    const noughtResult: number[][] = winArrays.filter((winArray) => isSubset(noughtsArr, winArray));
    const crossResult: number[][] = winArrays.filter((winArray) => isSubset(crossesArr, winArray));

    // Setting Winner
    let thisWinner = '';
    if (noughtResult.length > 0) {
      thisWinner = 'Noughts';
      const result = [...noughtResult];
      setWinResult(result);
    } else if (crossResult.length > 0) {
      thisWinner = 'Crosses';
      const result = [...crossResult];
      setWinResult(result);
    }
    setWinner(thisWinner);

    // Handle Draw
    const combinedArr = [...crossesArr, ...noughtsArr];
    if (!thisWinner && combinedArr.length === 9) {
      setWinner(`Draw`);
    }
  }, [noughtsArr, crossesArr]);

Becoming A Front End Developer

Sam — Thu, 17 Feb 2022 00:41:47 +0000

A whole new world?
If you are fond of travelling, you would be quite upset these years due to the pandemic. Meanwhile, 2022 is the year I move from Hong Kong to UK. Despite how exciting I would be since there would be lots of things to explore, it is also challenging to settle down in a new place. After all, it would also be a good time for me to re-think my career at the moment.

First things first, HTML and CSS.
Although IT was not my first choice in the university, I got a related bachelor degree more than 10 years ago. At the beginning of my first job, I don't even know much about HTML and CSS. But I got a task to revamp the school website which is full of table layout, embedded javascript and Adobe Flash. I found it is the part of the job I mostly enjoy among all the tasks from adhoc hardware support to movie editing.

I remember there was a website called CSS Zen Garden. I was caught by the beauty of the tidiness and simplicity of the layout, and the possibility of CSS. So I learnt HTML and CSS at that time as well as some concepts of separation of HTML, CSS and JS. And I dreamed of building a successful website. After two years, I was able to find a Java related job in a government department as an IBM Web Sphere portal support staff.

Here comes the Java
Again, I don't know any of Java. Not to mention J2EE, and many of enterprise level applications. But I have was again caught by the power of JSP and servlet. So I learnt Java SE and got a SCJP. Later on, I took a J2EE course to learn those MVC frameworks like Struts, Spring and JSF.

After some years, I was able to find a Java developer job in a QUANGO. This is the time I feel like I am an IT professional finally. As the team was running Scrum model, I have to keep tracking on my tasks on Kanban board and attend stand up meeting everyday. In fact I feel like if I want to build a professional full functions website, I have to be a full stack developer, or even more of a back-end developer to deal with servlet and EJB logics. I had to learn gangs of four design pattern, and ACID principle of database as well.

One thing very basically make me not feeling confidence of using Java is my struggling to "Object Oriented". When I practice myself, I often think the object I have designed is not good enough. And falling in the loop of abstraction to make the tight-coupling loose.

Taking a breath
A year later, my former supervisor ask me to help with retirement of the Portal. I want to take a breath so I came back, regardless there is not much coding in the system support role. Until last year, I feel a bit lost and in a bottleneck of my career. Plus something unpleasant happened in my home country, so I decided to go to UK.

Leaving the old world
I would like to do any part-time job to earn a living. But for full time job, this time, I don't want to rush for a job only because I want a job. As my skills are almost outdated (I am a SCJP6 holder), I have to catch up with the latest skill. And I found Spring is in my pocket, so I spend some time to catch up with Spring Boot and hoping to continue my Java career, and there come a word micro service. From my very rough understanding, it would be like they concentrate on building middleware like Restful API. That means Java has already fade out from the front end. No more JSP.

Yes, a whole new world!
It's good to know what is outdated and what is still alive. There is a period of time last month I keep on googling "Is XXX dead?" (e.g. is JSP dead, is jQuery dead, is CSS dead). For Angular and React, I know the name of these hot front-end frameworks for long time but just didn't try it (as my main is Java). So I would like to pick one to start. I made a decision after doing a search in Stack Overflow Trend. Last month I started to learn React and I was deeply attracted! Despite React has been released for years, I don't know front-end framework like this could change the game totally. And there seems no more jQuery, which has been so hot before. Though there are lots of concepts like declarative VS imperative, Virtual Dom, Component base, JSX...I don't have any feeling of overwhelming like I learn Java before. Another thing that I am amazed and feel thankful is functional programming, which save me from OO!

It's never too late to learn new thing.
Now I have already launch my portfolio website with Next.js, a React framework (It is interesting to me that very often there is a framework on top of a framework.) which seems concerning the issues like Server Side Rendering (SSR) ,Static Site Generation (SSG) and SEO. I am so exciting that I coded my personal website.

I also find lots of UI Libraries like MUI, Chakra, Tailwind...oh...when I mention Tailwind, that would lead to a question, how should I do the styling stuff now, and where should I put CSS to. Are those CSS pre-processor like SASS and LESS dead? Should I use Tailwind CSS, Styled Components or Styled props of emotion? While I might finally pick one, I would like to try them one by one in my own projects.

I feel refreshed and feeling more comfortable for frontend development with updated tech.

What's Next?
Typescript. My first project is Tic-tac-toe (knowns as Noughts and Crosses in UK). And I would take this project as my typescript exercise.

Happy hacking!