Welcome friend

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