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
'
Interpolation is defined as “the insertion of something of a different nature into something else.”
TIL that there’s a tool to help you apply color filters to your dom nodes!
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
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.
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!
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 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})
Check out this dope tool for understanding the React internals! So dope!
Never make a decision in anger, and never make a promise in happiness
-Imam Ali Ibn Abi Talib
TIL about an app that’ll edit your prose for you! Hemingway App should be able to help me write with better clarity and conciseness. I’m a wordy son of a gun.
Got a node_module giving you a headache? Need to give it a band-aid? Thank
your lucky stars for
patch-package.
It’s a vital band-aid for the bleeding edge!
You must be willing to suffer the anger of your opponent, and yet not return anger. You must not become bitter. No matter how emotional your opponents are, you must be calm.
Anger is incompatible with joy.