alexilyaev

/**
 * Convert a time string to a decimal value
 *
 * @param {string} argv e.g. 142h13m, 142 h 13 min
 */
function run(argv) {
  const query = argv[0];

  const [, hours, minutes] = query.match(/\s*(?:(\d+)\s*h)?\s*(?:(\d+)\s*m)?/)
  let decimal = 0;

alexilyaev

The blog post on Next.js 9.3

export async getStaticProps

• Runs at build time only, meaning if there’s no getInitialProps, the page will be served as a static file (no SSR).
• Can pass data to the page component as props.
• In development runs on every request

export async getStaticPaths

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

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

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

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

React Folder Structure Ideas

Suggested structure

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

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

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

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.