TIL about Magnesium Glycinate, a supplement that helps promotes better sleep! I’ve been having a tough time
falling asleep lately, especially after a tough Brazilian Jiu Jitsu practice, or an intense workout. One of my
friends recommended Magnesium Glycinate as a way to help me sleep better. Let’s see how it works… I just ordered
some today 😆!
TIL about Fontsource, a free Vercel resource that provides you with information on how to easily
install and self-host web fonts. They support all Google Fonts, as well as open sources ones!
TIL: Tanner Linsley, the creator of TanStack Query, Router, and Start, just dropped TanStack Form!
True to form, it’s framework-agnostic, headless, and has zero dependencies. It also handles deeply nested objects out of the box, making it a powerful alternative to traditional form libraries.
TIL about a growing movement on the web where people are choosing to use system fonts instead of loading custom fonts. Over the years, the default system fonts included with operating systems have become quite robust and visually appealing. If you’re concerned about performance or don’t require a fancy web font, this could be a great solution for you.
This one’s pretty sweet and I’ve been reaching for it a lot lately at work!
Rather than having multiple className conditions, you can use a
data-attribute to manage your state.
This is not only a great way to keep your component clean but also allows you
to target any state pertinent to your component without JavaScript! Mind you,
I’m assuming you’re using something like Tailwind for your styling.
// no reliance on utility functions like `twMerge`
<div
data-state-can-scroll={canScroll}
className="data-[state-can-scroll=false]:hidden"
>
Hidden when canScroll is false!
</div>
TIL about wxt! It’s like Nuxt but for web extensions.
TIL about a local first tool for image compression called sqoosh. No more
sending images to random servers just to compress them! 😆.
TIL about bolt.new, an AI-powered web agent that lets you deploy apps via
Stackblitz. It’s a pretty sick way to throw up a demo of a new app to illustrate
a concept.
TIL about the following…
/* top, left, right, button, are all set to to the same value */
.box {
inset: 0;
}
inset property is a shorthand for top, right, bottom, and left
properties.absolute and z-index will create a stacking
context.isolation property allows you to create a stacking context. We can add
this to a parent element and then we can forget about having to add a
position: relative and z-index to the children. It is the lightest weight
way to create a stacking context.z-index property can be used in a flexbox the same way as it can be
used with a positioned element.TIL about the stacking context inspector. It’s a tool that allows you to inspect the stacking context of an element.
More of a public service announcement and a reminder to myself (especially for
my personal projects), to leave comments on any funky things you’re doing in
code. I wasted an hour battling a bug in my blog because I didn’t leave a
comment regarding a @ts-ignore directive.
Leave. Comments. Please.
Kent showed me a great way to have a stable id for my react components, between server and client renders.
Ideally, you would be reaching for useId from react but if you’re using an
older version of react, like 17 or 16, then you can use auto-id from
reach.tech instead.
Til about zoxide which is a faster and more robust cd alternative; it lets
you navigate your filesystem faster and more reliably.
z ~/Documents/new-blog
z ~/Documents/rehype-code-titles
# Go back to the last directory (new-blog)
z -
# Go to the `new-blog` directory
z rehype-code-titles
# Go back to your home directory
z
# open a fzf menu of possible entries that begin with `re`
zi re<SPACE><TAB>
TIL about the Standard Schema! It’s an effort to standardize the interface of TypeScript validation libraries.
To pull directly from the docs, The goal is to make it easier for ecosystem tools to accept user-defined type validators, without needing to write custom logic or adapters for each supported library.
TIL that you can edit the whole document with document.designMode = 'on'!
Toggle document.designMode
Happiness = results - expecations-unknown
Today I learned about the with method on the Array.prototype object. This
method is used to create a shallow copy of an array but with one element
replaced at a given index.
const arr = [1, 2, 3]
const newArr = arr.with(0, 5)
console.log(arr) // [1, 2, 3]
console.log(newArr) // [5, 2, 3]
This is useful when you want to replace elements in an array without mutating the original array.
So it’s even easier now to add a documentation website to your project! While
looking over the Zod github repo, I saw that they were using docsify to
house their documentation. It’s pretty slick and I intend to use it for my own
projects… well at least the work ones 😆.
If you’re not using a meta framework like Next.js or Remix, I’d high suggest you check out react-error-boundary.
Seriously, Taran, use this at work.
TIL about how one can use satisfies in typescript, without satisfy at all!
// taken right from Kent's blog
type OperationFn = (left: number, right: number) => number
// this is a restriction on the operations object
// but with satisfies, I leave myself room to add more operations and don't need to manage another type
const operations = {
'+': (left, right) => left + right,
'-': (left, right) => left - right,
'*': (left, right) => left * right,
'/': (left, right) => left / right,
} satisfies Record<string, OperationFn>