pom421

/*https://dev.to/gajus/my-favorite-css-hack-32g3*/

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }

pom421

function undefined() {
  // problem solved
}

From: https://dmitripavlutin.com/7-tips-to-handle-undefined-in-javascript/
#js #undefinedNullHell

pom421

ESLint and Prettier are 2 importants tools in the JS tools belt. How to make them aware of each other? Here is how.

From:

• https://gist.github.com/bradtraversy/aab26d1e8983d9f8d79be1a9ca894ab4
• https://dev.to/chgldev/getting-prettier-eslint-and-vscode-to-work-together-3678

VSCode - ESLint, Prettier & Airbnb Setup

1. Install ESLint & "Prettier - Code formatter" extensions for VSCode

pom421

# Create a user named ozon, for example
create user ozon with encrypted password 'ozon';

# Create a database (see LC_CTYPE and LC_COLLATE if needed)
create database ozon with owner ozon encoding 'UTF8';

pom421

//https://codesandbox.io/s/quirky-hermann-1xzju?file=/src/App.js

import React, { useState, useEffect } from "react";
import "./styles.css";

const useAuth = Component => {
  const [isAuthed, setAuth] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setAuth(true);

pom421

// try it : https://codesandbox.io/s/sample-next-ts-rhf-zod-9ieev

import React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

import type { FieldError } from "react-hook-form";

// JSON.stringify(error) will not work, because of circulare structure. So we need this helper.

pom421

Create a Next.js TS project

mkdir new-project && yarn create next-app --typescript

For an already Next project

touch tsconfig.json

pom421

Quick procedure to have ESLint + Prettier + automatic VSCode lint in a Next JS app.

Next.js

yarn create next-app

Next.js comes with an ESlint.

pom421

import { SWRConfig } from "swr";
import { fetcher } from "@services/apiClient";

// Your fetcher need to throw error with an statusCode.

const MyApp = () => {

 return (
  <SWRConfig
      value={{

pom421

Nota bene

You have to install the multi-command extension in VS Code, because VS Code doesn't handle internally to trigger multiple commands.