Today I Learned

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

TIL about a role based access control (RBAC) library in JavaScript. CASL is a library that allows us to declaratively restrict access to resources based on roles and permissions.

import { createContext } from 'react'
import { createContextualCan } from '@casl/react'

export const AbilityContext = createContext()
export const Can = createContextualCan(AbilityContext.Consumer)

export default () => {
	const createTodo = () => {
		/* logic to show new todo form */
	}
	const ability = useContext(AbilityContext)

	return (
		<div>
			{ability.can('create', 'Todo') && (
				<button onClick={createTodo}>Create Todo</button>
			)}
		</div>
	)
}

TIL, it’s pretty easy to stack elements in CSS, without having to use positioning! It’s a litle bit more verbose to do it in tailwind, but it’s the same idea.

.parent {
  display: grid;
}

.child {
  grid-area 1 / 1
}

TIL about feed, an npm package that allows you to quickly generate an RSS feed for your website!

I used it to generate an RSS feed for my blog and my TIL feeds! It’s pretty simple and super easy to plug into your existing project.

Check it out

TIL about coolors.co — a superfast color palette generator. If you’re anything like me, you’ll probably use it whenever you need to generate a color palette for your side projects, you know, those side projects that you’re totally working on and not abandoning for a while.

Check it out

I learned this hard lesson today. Optional chaining is for uncertain values — not uncertain existence.

If I’m not sure if a global object exists, I can’t rely on optional chaining to access it. I have to check for existence first.

// 👇 this is a valid expression in node
// we check to see if window exists
if (typeof window !== 'undefined') {
	window.localStorage.setItem('key', 'value')
}

// 👇 this is not a valid expression in node
// window is undefined (its existence is uncertain)
window?.localStorage.setItem('key', 'value')

TIL about the node-modules-inspector — a package that allows you to visualize your node_modules folder, inspect your dependencies, and so much more 🤯! I’m a big fan of the visualizations, since I’m more of a visual kinda person. You can use it in your own project with this simple command: npx node-modules-inspector.

Check it out

TypeScript’s compiler is being reimagined. Currently at version 5.8, TypeScript is still written in TypeScript itself, but there are plans to port it to Go for version 7.

This change promises to improve compilation times—by up to 10 times faster! True, the speed boost is something we probably won’t see for a few months or years, but I’m super excited to see Go get some much needed love and attention, since you know, it’s my secondary language of choice.

TIL about Magnesium Glycinate, a supplement that helps promote 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 source ones!

Check it out

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.

Check it out

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.

Check it out

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>