Today I Learned

TIL that you can use scroll-margin to define outsets for the defined scroll area. It’s very much like margin but it only applies it whenever there is a scroll to mechanism.

.scroll-margin-top {
	scroll-margin-top: 100px;
}

Check it out

TIL that within the cotenxt of the Fetch API, you can use the credentials property to specify whether or not the request should extra data long with the request that the server can use to authenticate the user.

// always include credentials, even cross-origin.
fetch('https://jsonplaceholder.typicode.com/todos/1', {
	credentials: 'include',
})

// never send credentials in the request or include credentials in the response.
fetch('https://jsonplaceholder.typicode.com/todos/1', {
	credentials: 'omit',
})

// (the default): only send and include credentials for same-origin requests.
fetch('https://jsonplaceholder.typicode.com/todos/1', {
	credentials: 'same-origin',
})

Check it out

TIL about Stitch, an AI-powered tool that helps application developers (like me 😎) build pretty high-quality UIs that we can then export to Figma.

I’m using it right now to help me build out a UI for a course platform for our jiu-jitsu school.

Check it out

TIL about :user-valid and :user-invalid pseudo-class selectors! They function similarly to :valid and :invalid but :user-valid and :user-invalid are only applied only after a user has significantly interacted with the input.

In the example below, you’ll notice that the first two inputs will not have any border styling applied until the user has interacted with the input. Conversely, the last two inputs will have border styling applied immediately 🫢.

Check it out

TIL about this neat little tool that lets you test your CSS nth-child and nth-of-type selectors.

Check it out

TIL about the Beacon API! It’s a way to send asynchronous and non-blocking requests to a web server.

It’s useful for sending analytics data to a server before the page is unloaded!

document.addEventListener('visibilitychange', () => {
	if (document.visibilityState === 'hidden') {
		navigator.sendBeacon('/log', analyticsData)
	}
})

Check it out

TIL that you can convert ebooks to audiobooks with audiblez 📚!

Check it out

TIL about dyad, a free and open source alternative to things like V0, Lovable, and Bolt. If you don’t know what these tools are, they’re basically AI powered web app builders that allow people to create apps with natural language.

Check it out

TIL about es-toolkit, a modern alternative to lodash and underscore.

It promises improved performance (potentially 2-3 times faster), smaller bundle size (~97% less than lodash), and even offers a comptability layer to ease the transition for existing codebases from lodash to es-toolkit.

import { chunk } from 'es-toolkit/array'

// Splits an array of numbers into sub-arrays of length 2
chunk([1, 2, 3, 4, 5], 2)
// Returns: [[1, 2], [3, 4], [5]]

// Splits an array of strings into sub-arrays of length 3
chunk(['a', 'b', 'c', 'd', 'e', 'f', 'g'], 3)
// Returns: [['a', 'b', 'c'], ['d', 'e', 'f'], ['g']]

Check it out

TIL about tldr; a community driven endeavour that compliments the traditional man pages!

~/blog main !1 ?1 > tldr clear                                                                                                                                                          11:35:28
warning: 1 page(s) found for other platforms:
1. windows (tldr --platform windows clear)

  clear

  Clears the screen of the terminal.
  More information: https://manned.org/clear.

  Clear the screen:

    clear

  Clear the screen but keep the terminal's scrollback buffer (equivalent to pressing <Ctrl l> in Bash):

    clear -x

  Indicate the type of terminal to clean (defaults to the value of the environment variable TERM):

    clear -T type_of_terminal

  Display the version of ncurses used by clear:

    clear -V

Check it out

TIL about Resume Matcher, a full stack web app, that you have to run locally, that will reveal your resumes compatibility score and crucial keywords 😎.

It’s still in active development, and to be honest, I had to do a little finagling to get it to work locally, but I’m really excited to see how it evolves. With the resumes I’ve used and job descriptions I’ve uploaded, I think the original scores that I got were pretty good but the updates the app suggested, like adding numerical data and percentages, definitely would have improved the overall appeal of my resume.

TIL about infisical, an open source secrets management platform.

It allows you to easily store and manage your secrets across your team and tech stack. And oh, did I mention that you can self-host it too? 😎

Check it out

TIL about clipboard.js, a library that allows you to copy text to the clipboard.

It’s pretty simple to use, it’s also pretty lightweight, and it’s declarative af.

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
	<img src="assets/clippy.svg" alt="Copy to clipboard" />
</button>

Today I learned about Supabase, an open source alternative to Firebase. It being open source also means I can self-host it, which I love ❤️.

But anyways, I played around with it this weekend in an attempt to build out a proof of concept for a course platform I want to build out for my Brazilian Jujutsu business, and I have to say I’m quite impressed 🤯.

Check it out

Okay, I know what you’re thinking. Another today I learned about Raycast 😅. But hear me out, this YouTube video that I’m about to link you to is bonkers. Like I said before, this is the tool that our Macs should have shipped with because finder just can’t compare!

There are over a hundred cool things you can do with Raycast… and I’ve just scratched the surface because, oof, there’s so much cool stuff and so little time 😂.

TIL about Threadreader, a tool that helps you read Twitter threads way more easily. Oh sorry, it’s not Twitter anymore, it’s X. Whatever, Elon.

Whatever the hell it’s called now, Threadreader will unroll the tweet storm into a single, cohesive, consumable chunk of content.

Check it out

TIL about ts-reset - it’s like CSS resets but for TypeScript! Shout out to Matt Pocock (and the team) for this!

Here’s an example of one of the rules:

import '@total-typescript/ts-reset/array-includes'

const users = ['matt', 'sofia', 'waqas'] as const

// .includes now takes a string as the first parameter
// BEFORE, it would have complained about the type of the first parameter
users.includes('bryan')

There are way more rules so I encourage you to give it a read and maybe incorporate it into your project!

Check it out

TIL that you can utilize npx react-router routes to see all the routes in your app!

For my site, here’s what I get:

<Routes>
  <Route file="root.tsx">
    <Route path="newsletter/rss.xml" file="routes/_extras.newsletter.rss[.xml].tsx" />
    <Route path="action/old-refresh-cache" file="routes/action.old-refresh-cache.tsx" />
    <Route path="blog/rss.xml" file="routes/_extras.blog.rss[.xml].tsx" />
    <Route path="til/rss.xml" file="routes/_extras.til.rss[.xml].tsx" />
    <Route path="action/theme-switcher" file="routes/action.theme-switcher.tsx" />
    <Route path="action/refresh-cache" file="routes/action.refresh-cache.tsx" />
    <Route path="action/newsletter" file="routes/action.newsletter.tsx" />
    <Route path="blog" index file="routes/blog._index/route.tsx" />
    <Route path="tags" index file="routes/tags._index.tsx" />
    <Route path="blog/:slug" file="routes/blog.$slug/route.tsx" />
    <Route path="tags/:slug" file="routes/tags.$slug.tsx" />
    <Route path="inngest" file="routes/inngest.ts" />
    <Route index file="routes/_index.tsx" />
    <Route path="health" file="routes/health.tsx" />
    <Route path=":page" file="routes/$page.tsx" />
    <Route path="about" file="routes/about/route.tsx" />
    <Route path="til" file="routes/til/route.tsx" />
    <Route path="*" file="routes/$.tsx" />
  </Route>
</Routes>

TIL about headless ui - a library from tailwindlabs that gives you access to unstyled ui components that integrate beautifully with tailwind. If you’re wondering how I found out about this, Wapplyzer revelead it to me 😆!

Check it out

TIL about c15t, a new consent management framework with some awesome React support! You can even self-host it (which is a major win for nerds like me)

Check it out