Skip to content

Instantly share code, notes, and snippets.

Avatar

Alex Ilyaev alexilyaev

View GitHub Profile
View Default vs Named Exports.md

Default vs. Named Exports

Named Exports Benefits

  • No need to think of a variable name. Sometimes it's unclear from the file name, especially if it's ../index.js
  • Intellisense autocomplete is faster and prevents spelling mistakes
  • Easier to serach for the export across the project (less likely to have been misspelled or named differently)
  • If we only had named exports, that would be easier for new developers to learn how to use it, as there is no extra logical step of choosing which type of import to use

Default Export Benefits

View Importing Modules Setup.md

Importing Modules Setup

In an effort to keep import statements clean and easy to work with, we use import aliases.

For example (anywhere in the app tree):

import { network } from 'lib/network';
import { colors } from 'styles/theme';
import useThrottledEvent from 'hooks/useThrottledEvent';
@alexilyaev
alexilyaev / StackBlitz.md
Last active May 23, 2021
Checking out StackBlitz Web Containers
View StackBlitz.md

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.
View env-configs.md

Configs + Environment Variables

.env

Pros

  • Very simple to setup.
  • Automatically assigns configured values on top of process.env.
  • Automatically supports overriding configured values via Environment Variables.
  • Promotes best practices (FAQ):
View Volta.md

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.
View typescript-guidelines.md

Style Guides

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
alexilyaev / emotion-guidelines.md
Last active May 16, 2022
CSS in JS - Emotion Guidelines
View emotion-guidelines.md

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
alexilyaev / css-guidelines.md
Created Dec 10, 2020
CSS Styling Guidelines
View css-guidelines.md

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.
View prettier-config.md

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
alexilyaev / react-folder-structure-ideas.md
Last active Dec 10, 2020
React Folder Structure Ideas
View react-folder-structure-ideas.md

React Folder Structure Ideas

Suggested structure

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