if you need to inject a message into a wall of text printed to the screen, like when starting jekyll or astro or rails server, you can read lines and print it at the appropriate time.

#!/bin/bash

pnpm run dev | while read line
do
  echo "$line"
  if [[ "$line" == *"Local"* ]]; then
    echo "✅ Your site is live! 🎉"
  fi
done

Interesting links from week 3 of 2024.

Here are some interesting things I’ve found this week. I’m just getting started with this, so it may be a slow ramp up.

Elixir

• Use Repo.transact instead of Ecto.Multi
• Code related anti-patterns
• Edit liveview content in place

TIL

• Monotonic unique integers with Elixir
• Change git remotes
• Keep your structure.sql updated in your Phoenix project

Running mix ecto.dump creates a structure.sql file in ./priv/repo.

This is easy to forget to keep updated, so one easy way is to add this in the aliases() function in mix.exs:

"db.migrate": ["ecto.migrate", "ecto.dump"]
"db.rollback": ["ecto.rollback", "ecto.dump"]

I keep forgetting how to change the remote for a git repo.

1) View existing remotes

git remote -v

2) Change the ‘origin’ remote’s URL

git remote set-url origin https://github.com/user/repo2.github

3) Verify new remote URL

git remote -v

How to get a random number in Elixir.

iex(1)> :rand.uniform(6)

iex(2)> Enum.random(1..6)

Sometimes you need a unique integer, and of course Elixir has you covered. This is very useful for Factories if you want to implement something like sequences to avoid errors due to database unique constraints.

iex(1)> System.unique_integer(~w[monotonic positive]a)
1
iex(2)> System.unique_integer(~w[monotonic positive]a)
2
iex(3)> System.unique_integer(~w[monotonic positive]a)
3

Another css example I want to hang on to.

It’s pushable!

Code:

<button
  class="mb-4 p-2 w-32 transition ease-in-out duration-100 outline outline-1 shadow-[0_5px_0px_0px_rgba(0,0,0,0.6)] active:shadow-none active:translate-y-1 "
>
  pushable button
</button>

There’s a lot of more examples at Josh Comeau’s site and hnldesign

quick example of some css tailwind stuff when hovering over an image