Today I Learned

TIL about a replacement for ssh, it’s mosh! mosh (Mobile shell) has more features than ssh that improve usability!

Check it out

TIL about shimmer-from-structure! A context aware skeleton loader that mirrors your rendered UI at runtime 💀.

Check it out

Don’t forget that your browser extensions can be a cause of hydration issues for your React apps. We had some false positives in production where we thought we introduced some hydration issues but it was actually one of our custom extensions causing the problem!

TIL about a self-hosted trip planner that’s just like Wanderlog!

Check it out

TIL about cnfast! A fast drop in replacement for cn! It’s roughly 3.8x faster than tailwind-merge ❤️.

Check it out

TIL about a cool new way to handle prefetching things in the browser!

Check it out

TIL about tuicr!

It’s a TUI for code review with vim keybindings (you know we love that ❤️)! More and more, I find myself living in the terminal, and my overall satisfaction with my work is increasing 😂.

Check it out

TIL about herdr! It’s a great terminal multiplexer when working with AI agents!

I’m still and probably will always be a tmux fanboy, but when working on my home server, using this over herdr has been great, because let’s be real, I ain’t gonna spend the time to throw up my entire dotfiles config in an ephemeral VM that I’ll probably delete by the end of the month lol. 😂

Check it out

TIL about a useful library for forms! It seems pretty lightweight and great for SPAs and no SPAs alike!

Check it out

TIL about reactive resume! A free open source resume builder; no more paying for my brother’s resume updates!

Check it out

TIL about skills.sh; it’s an open agent skills ecosystem!

Check it out

Product is about building the right thing. Engineering used to be (and still largely is) about building the thing right.

Building the thing right is downstream from buiding the right thing.

Foregjo (pronounced like “for-jay-oh”) is a lightweight, self-hosted github alternative. It’s free and open source! Cards on the table 😅, I reached for this project because I could not justify spending actual money on something like Laravel Cloud or Fly.io for hosting a hobby project that generates no revenue.

Forgejo ships with docker registry support so I was able to containerize my Laravel app and deploy it as a Docker container managed by Dockge. Pair this up with something like cloudflare tunnels (which we all know I’m using) and you’ve got free hosting friends!

Check it out

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