alexilyaev

Object.keys() on a typed Object loses it's keys type

Playground with examples

• [Object.keys() on a typed Object loses it's keys type](https://www.typescriptlang.org/play?pretty=true&ts=5.0.4#code/PQKhFgCgAIWh5ARgKwKYGMAuA6A1qgTwGcAKASmgHsA7aAQ2kwIAdUATBFDTaAG0qKoi0AJaYA5MPzFGLVFFjAoUYMGgAVABYjhbSkOjVKPTal7NRtTKegAzSr34B3EdQDm0ImICudTCJooEQBbZkoAJx4AbyouLABpQmEAXztwymDocUwiAFpUAA9McLoicQBuZUhUam9MgEEANzoRXjpEXlR1duEohWgAEVLNREo6cI4AXiy2YdHxtnEAGn6AVUFw4Wnxbw2ylZhoAGVUTH93LazBM9c3ff6ACTMLbdNzZahkqtdMVHDbOjoVAadoDU4tXi9foiNgALkMdUQf0qh1Y4WCOi8NCI8O81FwRic1AA2gBdFFfSBQdDYniNHQiDpdHoAWTozHhAAVxv46LwADwAJQwETY-KaEPanW6iCISxBiDBmAhRAAfKroNM+odiRLWlLmbLsEMiCMxhNSfDtdAbaI4dAAIwHW3QNEYohY6g46Bk53QZJ+3XNfVMmVEbDrP5ES3Qa22mHwgBMfptbsxAS98N9-QDnxRUE6PEEnSw7Bl8OklFsslYVeg9K8odZ7JRqhtAD0APwqNQAUQKrFLHBovAIjBsbFQtlc7Gg0mEpnCqHliG8PGsfkk9GgbBEtlsfxqPEx3nkVMgxe4ZfamugeraTaNJrNC1bai0OmgTgiuCIVRpXp0gyj5EIkMjTEgaBYHgSQkA2jLSs2zBkG+LpdlUl5DjKt7wSBYFEMSAAM5I9ho2jCACrR-ueoAQDAcAAOqaGORg8AABpQcSYPhbFpBk0BsTk+RFCUbHdvR0C5NAwqY

alexilyaev

MUI Select with custom trigger area and hidden input

• https://codesandbox.io/s/mystifying-sound-13vnyb?file=/demo.tsx

alexilyaev

SourceTree bug

Filtering branches in the sidebar doesn't work for branch names with a slash

Before Filtering

After filtering

alexilyaev

Node Version Managers

I tried nvm many years ago and it had several issues that I remember:

• Setup was not as simple compared to n at the time
• It was quite slow moving from one Node version to another
• Couldn't automatically switch the Node version when entering a folder (now they cover that)
  • In the past I used avn for that, but it was slow as well
• Global packages were lost when moving from one Node version to another
• Tbh, fnm has the same issue now, hopefully they'll add support for it soon

alexilyaev

Why not index files

Using index.{jsx,tsx} for Components or index.{js,ts} for other files

• Hard to search for a component or file based on it’s name (the index file is only on the 7th result)

• Opening several index files in the IDE results in hard to read tabs with needless index keywords

alexilyaev

Default vs. Named Exports

Named Exports Benefits

• Find Usages/Find References - Easier to search for the export across the project. Less likely to have been renamed or misspelled
• Easier refactoring of the exported name
• No need to think of a variable name. Sometimes it's unclear from the file name, especially if it's ../index.js
• Choosing a named export with IntelliSense autocomplete is faster than writing your own variable. Also prevents spelling mistakes
• If we only had named exports, it 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 or export to use

alexilyaev

Import Aliases

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

For example (anywhere in the app or src tree):

import { network } from 'lib/network';
import { colors } from 'styles/theme';
import useThrottledEvent from 'hooks/useThrottledEvent';

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

.env vs. node-config

.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):

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.