Skip to content

Instantly share code, notes, and snippets.

Avatar

Alex Ilyaev alexilyaev

View GitHub Profile
@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 Jul 14, 2021
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
@alexilyaev
alexilyaev / settings.json
Last active Jan 5, 2021
VS Code Common Settings
View settings.json
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},