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

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

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

trailingComma: es5 (default)

https://prettier.io/docs/en/options.html#trailing-commas

When set to none...

• Often forgetting to add a comma when adding entries to an Object.
• Commenting a property in an object currently removes the comma from the property above it.
• Moving the last property of an object up requires an extra step to add a comma at the end.
• Messes up Git diff and sometimes creates conflicts.

alexilyaev

React Folder Structure Ideas

Suggested structure

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

alexilyaev

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

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

alexilyaev

Moment.js is deprecated and date-fns issues

Synopsis

Moment.js is now considered a legacy project (see Moment.js Project Status).
Here's a comparison between the alternatives:

• https://github.com/you-dont-need/You-Dont-Need-Momentjs
• https://blog.logrocket.com/4-alternatives-to-moment-js-for-internationalizing-dates/

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

#!/usr/bin/env bash

# References:
# https://docs.travis-ci.com/user/environment-variables
#
# Inspired by:
# https://gist.github.com/willprice/e07efd73fb7f13f917ea
# But using SSH keys instead of Personal Access Token:
# https://gist.github.com/alexilyaev/2672fe6d99756377fbffaabad6db1f45