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

New Mac Guidelines

Setup

• Install Dropbox
  • Used for syncing configs between several computers
  • Make available offline
    • Finder > Dropbox > Settings
• Install VS Code and VS Code Insiders
• Turn on Settings Sync for VS Code

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

Import Aliases 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

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

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

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

.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

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