Today I Learned

TIL about react joyride! A sick way to add in a tour to your app!

Check it out

TIL about a neat website that helps you get cool custom transition timing functions for your css needs; it even gives you Tailwind classes that you can use!

Check it out

TIL about @starting-style; it lets you define the initial styles of an element before its first style is applied — essentially giving you a “from” state for CSS transitions on elements that are being added to the DOM or transitioning from display: none.

.card {
	transition:
		opacity 0.3s,
		transform 0.3s;

	@starting-style {
		opacity: 0;
		transform: translateY(10px);
	}
}

TIL about the Impeccable skills; a design fluency for our AI harnesses! Let’s see how she goes.

Check it out

TIL about React Flow! A customizable React component for building node-based editors and interactive diagrams (yes, this was pulled directly from their website)😆.

Check it out

TIL about npmx; a fast, modern browswer for the npm registry!

I think a lot of the hype around it is that it’s cool people doing cool things together. That adage of “you can just do stuff” really encompasses what npmx is about. They want to make things better and they want to do it with a team of real humans that really care.

Check it out

TIL about a handy mathematical formula for determining and calculating CSS specificity. It’s a triad: A, B, C.

A is id-like (#main), B is class-like (.yolo), and C is element-like (div). It’s often represented as (A, B, C) notation. There are even handy calculators to use online!

/* (0, 0, 1) */
p { color: red; }

/* (0, 1, 0) */
.intro { color: blue; }

/* (0, 1, 1) */
p.intro { color: green; }

/* (1, 0, 0) */
#main { color: purple; }

Check it out

TIL about a tool that’ll help you generate sick color palettes as well as the CSS variables for your tailwind v4 config!

Check it out

TIL about modern-css.com; it’s a website meant to show us how to STOP writing CSS like it’s 2015! No more hacks; we have useful CSS properties we can apply now. Here’s a freebie for you 😆:

/* babe, babe, it's so easy to center stuff now! */
display: grid;
place-items: center;
/* no more nasty transforms */

Check it out

TIL about a nifty new way to add some nice creativity and slick animations/experiences to your react app. React Bits ain’t just another component library; it’s for cool stuff like descrambling text or blob cursors!

Check it out

TIL about a cool place to check out example box-shadows that you can totally use in your own apps!

Check it out

TIL about favicon farm; it lets you get cool little emojis for your favicons.

Check it out

TIL about the light-dark function in CSS! It allows us to set two color values for a property, returning one based on if the developer has set a light or dark color scheme or the user has requested a light or dark color scheme. 🤩

:root {
	color-scheme: light dark;
}

body {
	color: light-dark(#333b3c, #efefec);
	background-color: light-dark(#efedea, #223a2c);
}

Check it out

TIL about the OKLCH colour model! It’s designed to be perceptually uniform meaning that we get colours that are more accurate in how humans perceive them! Honestly, just check out the below link to get a better understanding but be forewarned, you might end up going down a truly deep rabbit hole 🐇.

Check it out

TIL that shadcn has public registries! This means folks can create and share their components via the shadcn cli so that we all can benefit from their awesome work!

Check it out

TIL about the output tag! The <output> element represents the result of a calculation performed by the application, or the result of a user action.

<form id="example-form">
	<input type="range" id="b" name="b" value="50" />
	+
	<input type="number" id="a" name="a" value="10" />
	=
	<output name="result" for="a b">60</output>
</form>

<script>
	const form = document.getElementById('example-form')
	const a = form.elements['a']
	const b = form.elements['b']
	const result = form.elements['result']

	function updateResult() {
		const aValue = a.valueAsNumber
		const bValue = b.valueAsNumber
		result.value = aValue + bValue
	}

	form.addEventListener('input', updateResult)

	updateResult()
</script>

Check it out

Babe, babe, ArkRegex just droppped 🎉!

It improves the ergonomics of regexes by providing a type-safe API for building regexes.

import { regex } from 'arkregex'

const ok = regex('^ok$', 'i')
// Regex<"ok" | "oK" | "Ok" | "OK", { flags: "i" }>

const semver = regex('^(\\d*)\\.(\\d*)\\.(\\d*)$')
// Regex<`${bigint}.${bigint}.${bigint}`, { captures: [`${bigint}`, `${bigint}`, `${bigint}`] }>

const email = regex('^(?<name>\\w+)@(?<domain>\\w+\\.\\w+)$')
// Regex<`${string}@${string}.${string}`, { names: { name: string; domain: `${string}.${string}`; }; ...>

Check it out

You know how people say don’t roll your own auth? Well, maybe, now with passkeys, you could roll your own auth and stop paying for things like Auth0, Okta, etc.

That’s not me saying that, that’s Kyle Simpson 😅.

TIL about will-change in CSS. It’s a way to hint to browsers that certain CSS properties of an element are likely to change. It’s mostly used for animations, but it can be used for other things too.

It should be noted that it should be used sparingly but if you’re ever coming across a janky animation, remember that you should be animating transforms and opacities and maybe throw in a will-change for good measure. Maybe even consider removing will-change after animations complete, since leaving it on can waste memory.

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

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>
	)
}