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.

Read More

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',
)

Read More

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
'

Read more

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!

Read more

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

Read more

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.

Read more

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!

Read more

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 ❤️!

Read more

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.

width looks up the tree but height looks down the tree. An element’s width is calculated based on its parent’s size, but an element’s height is calculated based on its children.

Thanks Josh Comeau!

😆 while going through a CSS workshop, I came across this list of CSS mistakes. Be humble folks. We all mistakes.

Here’s a list (probably not complete) set of inheritable css properties.

TIL, from Dom Farolino that he’s trying to make addEventListener extinct with the observables api!

// Filtering and mapping:
element
  .on('click')
  .filter(e => e.target.matches('.foo'))
  .map(e => ({x: e.clientX, y: e.clientY}))
  .subscribe({next: handleClickAtPoint})