Welcome friend

Flushing the DNS cache on a Mac turns out to be very easy.

dscacheutil -flushcache

After updating a Cloudflare DNS CNAME record to point to a Railway app, I had to flush the DNS cache to be able to verify that the change was successful.

Railway docs on setting up a Cloudflare root domain to point to a Railway app.

I’ve been playing around with Hammerspoon for automating my Mac with Lua.

One of the functions which Hammerspoon (hs) exposes is hs.application.launchOrFocusByBundleID(bundleID), but how do you know what that bundleID is?

mdls -name kMDItemCFBundleIdentifier $PATH_TO_APP

Ta-da!

mdls – lists the metadata attributes for the specified file

Who would have guessed that Slack’s is com.tinyspeck.slackmacgap…

Async React client side components

…are actually possible

// testcomp.tsx
export default async function TestComponent() {
  // some client side promise
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return <div>Test</div>;
}

And then import it with lazy

// some other component file
let TestComp = lazy(async () => {
  const comp = await import("./testcomp");
  // await the component itself
  const res = await comp.default();
  // must return default key, with the result wrapped in a closure
  return { default: () => res };
});

// render the lazy component, wrapped in Suspense
<Suspense fallback={<div>Loading...</div>}>
  <TestComp />
</Suspense>;

This pattern will run the async component exactly once. Which could be useful for certain use cases 🤔

You can run Postgres in the browser now!

https://github.com/electric-sql/pglite

You can literally open the JS console and run the following

const { PGlite } = await import("https://cdn.jsdelivr.net/npm/@electric-sql/pglite/dist/index.js");
const db = new PGlite();
await db.query("select 'hi mum' as message");
// { rows: [{ message: 'hi mum' }]}

🤯

In Ecto you can bulk replace string content in a database field. This is useful if you need to update a column across multiple rows without needing to do any manipulation on the Elixir side.

I came across this when needing to efficiently bulk anonymise chat message content for GDPR, but its a handy little transferable trick to know.

thirty_days_ago = Timex.now() |> Timex.shift(months: -1)

from(
  m in Message,
  where: m.inserted_at < ^thirty_days_ago,
  update: [set: [
    content: fragment("REGEXP_REPLACE(content, '[^ ]', 'a', 'g')")
  ]]
)
|> Repo.update_all([])

Moving compute to the database can be a great performance win, so tricks like this one are great to have in your back pocket.

TIL how to move to a specific spot in vim

:call cursor(x, y)

This is particularly helpful when exploring compiled bundles of Javascript, you can hope right to the column / row the code which threw the error is located.

The image-set property in CSS lets you control displaying a different image dependent on the resolution of the <img> tag.

Cool additional things it can handle are gradients as well as handling is a specific image format is supported by the browser.

Am I the only one who missed that scale got upgraded to its own property in CSS?!

MDN doc on scale

No more delving into transform for that one!

Oh snap, i just found rotate as well

Here’s the MDN page for that one

Whilst doing some reading on fonts I came across this gem! A font which automatically censors bad language!

Scunthorpe Sans

Its crazy what you can do with variable fonts 🤩

The below React Router actually doesn’t wait for the top loader to resolve before starting the second loader 🤯

{
    path: '/contacts'
    element: <ContactLayout />,
    loader: async (params) => {
        console.log('loader 1');
        return new Promise((resolve) => setTimeout(() => resolve(true), 3000));
    },
    children: [
        path: '/contacts/:userId/topics',
        loader: (params) => {
            console.log('loader 2');
            return "foo";
        },
        element: <Topics />,
    ]
}

So you don’t get nested loading spinners sadly, but you do get parallel-ish loading

Framer exit animations gotcha

I was having issues with the exit animation prop just not running.

The fix was to wrap the element I was removing in an <AnimatePresence> component.

Although there was actually one higher in the tree, adding this seems to fix the exit animation nicely.

In Tailwind you can do the whole text overflow elipsi… thing with a single class name: truncate 💁

Tailwind docs on Truncate