Today I Learned

TIL there’s a tool that can help you find out if your types are wrong for your library!

Check it out

Til about raycast! The productivity tool that our macs should have shipped with ❤️

Check it out here

Struggling to choose the right license for your project? There’s a great tool for that!

Check it out

TIL about wave app! I’m using it to track my expenses and the invoices for my company! It’s pretty cool.

Check it out

Sick of seeing truncated Objects in Node? I got you bro (well Matt Pocock has got you).

let deepNesting = {
  level1: {
    level2: {
      level3: {
        level4: {
          level5: {
            name: 'Moderately Nested Object',
            value: 42,
            attributes: {
              created: '2023-10-01',
              modified: '2023-10-15',
              tags: ['demo', 'test', 'nested'],
              metadata: {
                author: 'Jane Doe',
                version: '1.0',
                license: 'MIT',
              },
            },
            items: [
              {
                id: 1,
                description: 'First item',
                status: 'active',
              },
              {
                id: 2,
                description: 'Second item',
                status: 'inactive',
              },
            ],
          },
        },
      },
    },
  },
}

// logs: { level1: { level2: { level3: [Object] } } }
console.log(deepNesting)

// You get the whole object!
console.dir(deepNesting, {depth: Infinity})

Matt is the man!

TIL there’s a useful github repo for bulletproof react!

It gives you a bunch of useufl tips and explanantions on how to make your react code bulletproof.

Check it out

TIL that you can use console.log with color!

console.log(
  'This is %cMy stylish message',
  'color: yellow; font-style: italic; background-color: blue;padding: 2px',
)

Check it out

Need a tool to help you manage your versioning and changelogs? Check out changesets!

Today I learned how to create multiple Neovim Configs. I’ve set up a home and work config respectively.

TIL about git recent by Paul Irish. It’s a command that shows you your latest local git branches! Super useful when you’re at work and got a lot of stuff on the go.

 git recent

# example output
:'
* main                         7167899 (19 hours ago) Taranveer Bains
                               new til

  feature/partytown            548eaf3 (2 days ago) Taranveer Bains
                               chore(dev-server): update dev script
'

Check it out

Interpolation is defined as “the insertion of something of a different nature into something else.”

TIL about orbstack — a fast and lightweight way to run containers on a Mac!

TIL that there’s a tool to help you apply color filters to your dom nodes!

Check it out

TIL that Storybook has a way to specify the behavior of args — ArgeTypes. This is a great way to constrain the values that your component can accept and provides information about args that aren’t explicitly set in the story.

// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
import type {Preview} from '@storybook/your-renderer'

const preview: Preview = {
  argTypes: {
    // 👇 All stories expect a label arg
    label: {
      control: 'text',
      description: 'Overwritten description',
    },
  },
}

export default preview

Check it out

Keep away from people who try to belittle your ambitions. Small people always do that, but the really great make you feel that you, too, can become great.

-Mark Twain

TIL about e18e (Ecosystem Performance). It’s an initiative to connect folks and projects working on improving JS package performance.

Check it out

TIL that if we want to make a deepClone of an object in JS, there’s a built in method in most browsers: structuredClone!

The old one (which works but doesn’t account for things like Set and Map or even Date)

const originalObject = {
  name: "John",
  age: 30,
  date: new Date(),
  details: {
    hobbies: ["reading", "gaming"],
    address: {
      city: "New York",
      zip: "10001",
    },
  },
};

const clonedObjectOldWay = JSON.parse(JSON.stringify(originalObject));

// what do you think happened to the date? 😏
// hint... no longer a string!
console.log(clonedObjectOldWay);

console.log(originalObject.date instanceof Date); // true
console.log(clonedObjectOldWay.date instanceof Date); // false (Date is not preserved)

Shout out to Matt Pocock — the person behind Total Typescript — for the twitter thread that exposed me to this function!

Check it out

Don’t forget this brother. My guy hit me hard with this; it was too damn early in the morning for them ninjas to be chopping onions 🥲!

Do what matters with who matters, while it matters.

-Mark Techson

TIL that the button html element accepts a form attribute. This is cool because it allows you to associate a button with any form, even if it’s not a direct ancestor of our button! How cool is that ❤️!

Check it out

TIL margin is meant to increase the distance between siblings. It is not meant to increase the gap between a child and its parent’s bounding box; that’s what padding is for.