Today I Learned
Get the RSS feed for Today I Learnedoutput tag
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>
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}`; }; ...>
will-change
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.
scroll margin top
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;
}
Fetch Credentials
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',
})
google stitch
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.
:user-valid and :user-invalid
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 🫢.
Input Validation States Demo
css nth tester
TIL about this neat little tool that lets you test your CSS nth-child and nth-of-type selectors.
Beacon API
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)
}
})
ebooks to audiobooks
TIL that you can convert ebooks to audiobooks with audiblez 📚!
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.
es-toolkit
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']]
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
Ai Resume Matcher
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.
open source secrets management
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? 😎
clipboard.js
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 🤯.
So. Much. Raycast
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 😂.
threadreader
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.