TIL about bolt.new
is a AI powered web agent that let’s 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
react.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>
TIL there’s a tool that can help you find out if your types are wrong for your library!
Til about raycast! The productivity tool that our macs should have shipped with ❤️
Struggling to choose the right license for your project? There’s a great tool for that!
TIL about wave app! I’m using it to track my expenses and the invoices for my company! It’s pretty cool.
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.
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',
)