alexilyaev

Style Guides

• TypeScript Deep Dive - StyleGuide
• Do's and Don'ts

Guidelines

• Avoid using any as much as possible.
  • If you want a type meaning "any object", use Record<string, unknown> instead.
• If you want a type meaning "any value", you probably want unknown instead.

alexilyaev

ESLint with Prettier Setup

Basically, when using Prettier, all ESLint styling rules should be disabled.
This can be done with eslint-config-prettier.

See .eslintrc.js example below.
In prettier.config.js you can use anything you want (see example below).

Now the tricky part is how to run them...
Usually ESLint should run first, then Prettier.

alexilyaev

CSS-in-JS

This repo uses a CSS-in-JS library called Emotion for its styling.

Why Emotion?

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows us to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues in CSS. With source maps and labels, Emotion has a great developer experience and performance with heavy caching in production.

Also, Material UI v5 will most likely use Emotion instead of JSS:
material-ui - [RFC] v5 styling solution

alexilyaev

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

alexilyaev

StackBlitz - Introducing WebContainers: Run Node.js natively in your browser

Good Things

• Really easy to start up a new project and play around with it locally (like in CodeSandbox, but supports Node.js as well).
  • Turns out CodeSandbox have an experimental support for Node.js projects as well 😳 I don't know if they run it locally or remotely, and you can't clone and existing Node repo and run it.
• Can connect to any repo on GitHub and play around with the code (if the Node.js version matches):
  • If it's my repo, I can directly commit to it. That's actually nice, cause it could be a very fast workflow for quick changes.
• Can run on a Tablet or Chromebook.

alexilyaev

eslint-plugin-unicorn v19.0.0 added unicorn/no-null by default.

The reasoning behind it:
Intent to stop using null in my JS code
Some good Pros/Cons summary from that thread:
sindresorhus/meta#7 (comment)

Important Note

The rule only restricts using null as explicit values for variables or function arguments.

alexilyaev

Volta

https://volta.sh/

A really nice tool to manage the different Node.js/npm/yarn versions between projects:

The problems it solves

• Making sure everyone who works on the project uses the same Node.js/npm/yarn version for consistent dependencies tree and Node.js execution.
• Switching the Node.js version when jumping between projects.

alexilyaev

React Folder Structure Ideas

Suggested structure

components/
  NavBar/
    BrandLogo.jsx
    NavBar.jsx
 NavBar.text.jsx

alexilyaev

CSS Styling Guidelines

• Use rem units for font-size and line-height.
  • The user preferences are respected.
  • We can change the apparent px value of rem to whatever we'd like.
• Use px, % or vw for layout purposes.
  • For example, when using margin, padding, width, height, etc.
  • Easier to implement design requirements.
  • Why not rem here as well?
• Layout can break when changing the base browser font-size.

alexilyaev

Must

• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

Recommended

• https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
• https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager