Tomáš Hubelbauer
@hubelbauer.net
Full snack developer by day. Sleeper by night.
To get VS Code's TypeScript language server to stop complaining about TLA when your runtime supports it (e.g.: Bun) without having to add `export {}`, use this TSConfig:
February 28, 2024 at 7:53 PM
To get VS Code's TypeScript language server to stop complaining about TLA when your runtime supports it (e.g.: Bun) without having to add `export {}`, use this TSConfig:
TIL: in VS Code, you can F2 to rename files (and images) referenced in MarkDown links. It renames the link URL as well as the file name on disk. Very useful with the ability to paste an image into a MarkDown document from the clipboard to set the file name right after the paste.
February 8, 2024 at 3:45 PM
TIL: in VS Code, you can F2 to rename files (and images) referenced in MarkDown links. It renames the link URL as well as the file name on disk. Very useful with the ability to paste an image into a MarkDown document from the clipboard to set the file name right after the paste.
I wish the Git CLI allowed one to use a branch name pattern in `switch`. The `branch` command let's one use patterns without `grep` with the `-l "*pattern*"` option, but `switch` doesn't, so unergonomic concoctions with `xargs` have to be conjured.
January 19, 2024 at 11:09 AM
I wish the Git CLI allowed one to use a branch name pattern in `switch`. The `branch` command let's one use patterns without `grep` with the `-l "*pattern*"` option, but `switch` doesn't, so unergonomic concoctions with `xargs` have to be conjured.
TIL: To enable Copy as PNG in Figma on Firefox, enable `dom\.events.asyncClipboard.clipboardItem` (without the slash) in `about:config`. This let's JavaScript `write` other stuff to your clipboard than just text: caniuse.com/mdn-api_clip...
January 15, 2024 at 12:40 PM
TIL: To enable Copy as PNG in Figma on Firefox, enable `dom\.events.asyncClipboard.clipboardItem` (without the slash) in `about:config`. This let's JavaScript `write` other stuff to your clipboard than just text: caniuse.com/mdn-api_clip...
I've revisited the world of streamed HTML documents after a few years and it looks like as of today, this is how long browsers take to start rendering the partial HTML document while it is still streaming :
- Firefox: 700 B or ~1 minute
- Chrome: 0 B
- Safari: ∞ B or ~1 minute
- Firefox: 700 B or ~1 minute
- Chrome: 0 B
- Safari: ∞ B or ~1 minute
January 5, 2024 at 4:31 PM
I've revisited the world of streamed HTML documents after a few years and it looks like as of today, this is how long browsers take to start rendering the partial HTML document while it is still streaming :
- Firefox: 700 B or ~1 minute
- Chrome: 0 B
- Safari: ∞ B or ~1 minute
- Firefox: 700 B or ~1 minute
- Chrome: 0 B
- Safari: ∞ B or ~1 minute
This is gonna be painfully obvious to anyone with all but the most surface level knowledge of shells, but as a shell non-enjoyer, I was happy to learn how to run a command in a different directory on a single line with no need to walk back (and thus up-arrow + Enter repeatable):
January 5, 2024 at 3:09 PM
This is gonna be painfully obvious to anyone with all but the most surface level knowledge of shells, but as a shell non-enjoyer, I was happy to learn how to run a command in a different directory on a single line with no need to walk back (and thus up-arrow + Enter repeatable):
Came across this incredibly strange behavior where #Elixir's String.to_integer/1 would seemingly convert a string to a char instead of a number for some numbers. Turns out it is an Erlang hold-over in the behavior of IO.inspect formatting! stackoverflow.com/a/30039460/2...
![IO.inspect(["33"] |> Enum.map(&String.to_integer/1))
# ~c"!"
IO.inspect(Enum.map(["33"], &String.to_integer/1))
# ~c"!"
x = fn string -> String.to_integer(string) end
IO.inspect(Enum.map(["33"], fn s -> x.(s) end))
# ~c"!"
IO.inspect(String.to_integer("33"))
# 33](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:q7evktt72ljhhql4ifahjayd/bafkreic56rk5mbuby3nnfitw73ueh6f6pemct2ghlzmf3y42cjhpffj3yi@jpeg)
December 4, 2023 at 9:28 PM
Came across this incredibly strange behavior where #Elixir's String.to_integer/1 would seemingly convert a string to a char instead of a number for some numbers. Turns out it is an Erlang hold-over in the behavior of IO.inspect formatting! stackoverflow.com/a/30039460/2...
I've released an #OpenSCAD module for drawing cubes with their faces, edges and corners optionally made invisible. Useful to visualize seams between blocks sat flush one next to another when approximating more "organic" cube parts with imperfect edges. github.com/TomasHubelba...
December 2, 2023 at 11:08 PM
I've released an #OpenSCAD module for drawing cubes with their faces, edges and corners optionally made invisible. Useful to visualize seams between blocks sat flush one next to another when approximating more "organic" cube parts with imperfect edges. github.com/TomasHubelba...
The Washington Post daily crossword puzzle has no chill today.
November 28, 2023 at 3:56 PM
The Washington Post daily crossword puzzle has no chill today.
I wish all battery-powered devices with a screen had this type of a feature where you can tell the current consumption and battery metrics at a glance.
November 23, 2023 at 2:52 PM
I wish all battery-powered devices with a screen had this type of a feature where you can tell the current consumption and battery metrics at a glance.
TIL: Option-clicking the Wi-Fi icon in the macOS menu bar shows diagnostics information about the network interface and the connected wireless network. Extremely useful for fine-tuning directional antenna placement for best signal strength and noise levels.
October 29, 2023 at 10:12 PM
TIL: Option-clicking the Wi-Fi icon in the macOS menu bar shows diagnostics information about the network interface and the connected wireless network. Extremely useful for fine-tuning directional antenna placement for best signal strength and noise levels.
My train got delayed and I missed the connecting bus, so now I'm forced to touch grass for two hours. But at least it's beautiful fall weather outside, the city I'm at has a nice park and the robotic lawn mower they have cutting the grass here provides sufficient entertainment.
October 28, 2023 at 12:51 PM
My train got delayed and I missed the connecting bus, so now I'm forced to touch grass for two hours. But at least it's beautiful fall weather outside, the city I'm at has a nice park and the robotic lawn mower they have cutting the grass here provides sufficient entertainment.
There is no way I'll ever stop getting my ass kicked by one of these every now and then.
October 23, 2023 at 2:52 PM
There is no way I'll ever stop getting my ass kicked by one of these every now and then.
Supabase tip: select only rows whose array field value is not an empty array.
In the Dashboard:
Filter > "+ Add Filter" > ${column} > "[<>] not equal" > "{}" (Postgres empty array literal)
In the Supabase JS SDK:
In the Dashboard:
Filter > "+ Add Filter" > ${column} > "[<>] not equal" > "{}" (Postgres empty array literal)
In the Supabase JS SDK:
October 21, 2023 at 12:09 PM
Supabase tip: select only rows whose array field value is not an empty array.
In the Dashboard:
Filter > "+ Add Filter" > ${column} > "[<>] not equal" > "{}" (Postgres empty array literal)
In the Supabase JS SDK:
In the Dashboard:
Filter > "+ Add Filter" > ${column} > "[<>] not equal" > "{}" (Postgres empty array literal)
In the Supabase JS SDK:
I need to bump quoting all identifiers higher on the list of things to try when Postgres gives me confusing or circular errors. Or just learn when quoting is required or not.
October 21, 2023 at 10:36 AM
I need to bump quoting all identifiers higher on the list of things to try when Postgres gives me confusing or circular errors. Or just learn when quoting is required or not.
A CSS flex layout switching between having four children on one line in landscape mode and popping the second child (the search bar) out to its own line in portrait mode. I wonder if this can be done using grid layout as well. I'd expect that's possible, too.
![<div class="flex flex-wrap items-center gap-4 bg-slate-500 p-2 text-white">
<img src="https://fav.farm/🤙" class="h-4 w-4" alt="App logo image" />
<input
class="order-4 basis-full px-2 md:order-[unset] md:flex-1 md:basis-[unset]"
placeholder="Search…"
/>
<span class="ml-auto" title="Logged in as Tomas Hubelbauer">🤓 Tom</span>
<button class="bg-white text-slate-800 px-2 rounded">Log out</button>
</div>
<main class="mx-auto max-w-[80ch] p-2 flex flex-col gap-4">
<p>
This layout demonstrates a search bar which is a part of the header line
and stretches to fill the available space, but when the space becomes too
limited (detemined by a Tailwind responsive design breakpoint here), the
search field switches to be on a line of its own.
</p>
<p>
This is achieved by using CSS to flip the header row child order to make the
search bar go last in the mobile breakpoint and setting its <code>basis</code>
to 100% so its is forced to be standalone](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:q7evktt72ljhhql4ifahjayd/bafkreifndf75edd2chmnstvwj2dksgkkxmn6erefihl5p2wkdpzsq2jdsq@jpeg)
October 15, 2023 at 9:49 AM
A CSS flex layout switching between having four children on one line in landscape mode and popping the second child (the search bar) out to its own line in portrait mode. I wonder if this can be done using grid layout as well. I'd expect that's possible, too.
Archery is not a hobby for trypophobiacs LOL. Also, I need to remember not to use the ladder I use as the target stand for climbing anymore, could end badly. 😁
October 14, 2023 at 3:49 PM
Archery is not a hobby for trypophobiacs LOL. Also, I need to remember not to use the ladder I use as the target stand for climbing anymore, could end badly. 😁
A quick tip for folks running `next build` in a pre-commit hook and finding it breaks their `next dev` experience (HMR, file watching, …). Next uses the same `.next` directory for both and the `next build` step replaces the `next dev` supporting files. Here's a precommit I use:
September 29, 2023 at 2:13 PM
A quick tip for folks running `next build` in a pre-commit hook and finding it breaks their `next dev` experience (HMR, file watching, …). Next uses the same `.next` directory for both and the `next build` step replaces the `next dev` supporting files. Here's a precommit I use:
Chilling with the guitar amp case I made for my girlfriend. Nice Sunday evening project. Next step: wood treatment. #diy
September 24, 2023 at 10:55 PM
Chilling with the guitar amp case I made for my girlfriend. Nice Sunday evening project. Next step: wood treatment. #diy
TIL that removing the Tailwind base layer (`@@tailwind base;`) will aside from the default Tailwind styles also remove the CSS variables with filter defaults, breaking filters. No wonder my backdrop-filter wasn't working when the same exact code worked in Tailwind Play.
September 22, 2023 at 6:34 PM
TIL that removing the Tailwind base layer (`@@tailwind base;`) will aside from the default Tailwind styles also remove the CSS variables with filter defaults, breaking filters. No wonder my backdrop-filter wasn't working when the same exact code worked in Tailwind Play.
Just got this email from Bluesky which AFAICT is legit, but I am a bit surprised to see it considering I've already joined with this email months ago from someone else's invite. @jay.bsky.team is this actually a legit email and if so, would it be possible to filter out people who already joined?
September 13, 2023 at 8:18 AM
Just got this email from Bluesky which AFAICT is legit, but I am a bit surprised to see it considering I've already joined with this email months ago from someone else's invite. @jay.bsky.team is this actually a legit email and if so, would it be possible to filter out people who already joined?
I'm surprised I haven't run into this much sooner, but today I was finally forced to learn the solution to allowing passing inline functions as callback arguments to custom React hooks without rendering useCallbacks within the hook useless and looping forever: with useRef!
![// 🔴 The BAD solution
import { useCallback, useEffect } from "react";
export default function useVisibilityChange(
onVisible: () => void | Promise<void>,
onHidden?: () => void | Promise<void>
) {
// `onVisible` and `onHidden` are always a different instance when the hook
// is used like so:
// ```
// useVisibilityState(() => {
// setUnrelatedState(…); // Cause a render in response to this callback
// });
// ```
// As a result this callback will never be memoized and will itself be an
// instance of a different function on each render and will be virtually
// useless
const handleDocumentVisibilityChange = useCallback(async () => {
switch (document.visibilityState) {
case "visible": {
await onVisible();
break;
}
case "hidden": {
await onHidden?.();
break;
}
}
}, [onVisible, onHidden]);
// As a result of that, this effect will have an always changing dependency
// and will be virtually use](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:q7evktt72ljhhql4ifahjayd/bafkreidcigruvbmoul37posptbjn7ndtdztkw5uofvydzu3skr2mhtrlza@jpeg)
![// 🟢 The GOOD solution
import { useCallback, useEffect, useRef } from "react";
export default function useVisibilityChange(
onVisible: () => void | Promise<void>,
onHidden?: () => void | Promise<void>
) {
// Use refs to keep a stable track of the (possibly) inline function callbacks
const onVisibleRef = useRef<typeof onVisible>();
const onHiddenRef = useRef<typeof onHidden>();
useEffect(() => {
onVisibleRef.current = onVisible;
onHiddenRef.current = onHidden;
}, [onVisible, onHidden]);
// This callback's dependencies don't change and it itself is memoized
// It can call the always changing callback argument function through the refs
// effectively having access to their latest render's versions each time
const handleDocumentVisibilityChange = useCallback(async () => {
switch (document.visibilityState) {
case "visible": {
await onVisibleRef.current?.();
break;
}
case "hidden": {
await onHiddenRef.current?.()](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:q7evktt72ljhhql4ifahjayd/bafkreiblgl7twblqainyaezzjnwtpztugg2dkle4li4t33zr7foaqsfv2m@jpeg)
September 9, 2023 at 5:45 PM
I'm surprised I haven't run into this much sooner, but today I was finally forced to learn the solution to allowing passing inline functions as callback arguments to custom React hooks without rendering useCallbacks within the hook useless and looping forever: with useRef!
How to find what commands a macOS application accepts via Apple Script? Go to Applications > App > right-click > See package contents > Contents > Resources > App.sdef (Option + Command + C to copy path). It is a readable and easily understandable XML structure.
August 28, 2023 at 8:01 PM
How to find what commands a macOS application accepts via Apple Script? Go to Applications > App > right-click > See package contents > Contents > Resources > App.sdef (Option + Command + C to copy path). It is a readable and easily understandable XML structure.
I just spent a few minutes searching through the GitHub Changelog website for an announcement about Note/Important/Warning blockquotes having special rendering in GFM now(ish).
Turns out there was only a Community post: https://github.com/orgs/community/discussions/16925. Here's how it looks:
Turns out there was only a Community post: https://github.com/orgs/community/discussions/16925. Here's how it looks:
![A screenshot of the GitHub Community repository discussion post showing the Markdown blockquote syntax with special heading and the corresponding look in the rendered Markdown output. This is the code on the page:
> [!NOTE]
> Highlights information that users should take into account, even when skimming.
> [!IMPORTANT]
> Crucial information necessary for users to succeed.
> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:q7evktt72ljhhql4ifahjayd/bafkreib4dzyeh3nsayogbalg5ctxb4s27teotgyxjp5gopudpihrpniuom@jpeg)
August 11, 2023 at 8:14 PM
I just spent a few minutes searching through the GitHub Changelog website for an announcement about Note/Important/Warning blockquotes having special rendering in GFM now(ish).
Turns out there was only a Community post: https://github.com/orgs/community/discussions/16925. Here's how it looks:
Turns out there was only a Community post: https://github.com/orgs/community/discussions/16925. Here's how it looks:
There is now an app store in the mobile app for the Flipper Zero! There was already an apps catalog but when I tried it the apps weren't built for my up-to-date Flipper firmware and I've been stalling on compiling them myself. Now I don't have to 🥳
August 7, 2023 at 9:15 AM
There is now an app store in the mobile app for the Flipper Zero! There was already an apps catalog but when I tried it the apps weren't built for my up-to-date Flipper firmware and I've been stalling on compiling them myself. Now I don't have to 🥳