til >

tl;dr

So today I learned that you can use a <input list="option-list"> in combination with a <datalist id="option-list"><option value="a"/></datalist> for the often required use case of a text input with a list of available options and you no longer need to implement that manually all the time.

tl;dr

In css, you can use the users color scheme by simply setting the color-scheme on the :root element:

:root {
  color-scheme: light dark;
}

tl;dr

When merging css files using postcss-import don’t forget to add semicolons after each import statement, or else postcss will only import the first file and for some reason add a @media directive in front of the next import and stop processing of further imports.

tl;dr

If you’ve set the RELEASE_NODE in when starting your server with mix start and then want to connect to it using mix remote, you must first export the same value in RELEASE_NODE in your current shell as well.

tl;dr

My site.manifest were not loaded with Elixir Phoenix 1.6. It turned out I have to add the file to the whitelist.

tl;dr

I’ve got a problem where Phoenix.Channel.Server receives an unexpected message to be pushed to my client via a channel. However that message is very long, and some of the important information is only printed at the very bottom of the log message that has been truncated.

tl;dr

On this blog the dates were formatted incorrectly, i.e. 2022-08-30 would be printed as 30-88-022. The solution was that the format strings look like they are just some random date, i.e. .Date.Format "Monday, 01.11.2006", but actually the values for date, month and year are hardcoded like dd.mm.yyyy in nearly every other language. Correct would be .Date.Format "Monday, 02.01.2006".

tl;dr

In Phoenix 1.6.x you now need to start the server explicitly by setting the PHX_SERVER=true environment variable.

tl;dr

If you’ve got a heex template where you want to insert some data attribute like true, make sure that you convert it to a string first. Otherwise a blank string "" is inserted.

tl;dr

Just discovered that you parentheses in Elixsir are optional.

Saw this example on the ecto documentation page:

case MyRepo.insert %Post{title: "Ecto is great"} do
  {:ok, struct}       -> # Inserted with success
  {:error, changeset} -> # Something went wrong
end

tl;dr

If you’ve got a dependency that one of your apps in your umbrella project depends on, do not put it in the main mix.exs file at the base of the umbrella project. It will not be included in relases in that case.

tl;dr

When using responsive images using <picture> and the sizes attribute is not enough to force the browser to use a small image on mobile. Instead you need to provide multiple <source> tags with the media="(max-width: 200px)" attribute set.

tl;dr

After migrating to Ecto 3, the following code did not work:

Ecto.assoc_loaded?(“e9d7edb4-3aef-45d6-851c-e77a464ef352”)

The Ecto.assoc_loaded?() does not accept any objects, check manually before you call assoc_loaded?()

tl;dr

Searching for a domain for your new project? Try

• instantdomainsearch.com - Check all tlds at the same time
• namecheck.com - Checks social media user names at the same time

tl;dr

Ecto by default logs all queries as debug to the console when developing. To disable simply add log: false to your ecto config.

tl;dr

Nice trick to deal with disk full issues on a server:

After setting up the server, create an empty 8GB file in /spacer.img.

Why? In case the server goes out of space, simpley delete the file.

That gives you more to fix the actual issue.

tl;dr

The guys at diode.io have build a wrapper around the BEAM so that you can run it as a native app on Android and iOS, using LiveView locally on the device.

tl;dr

Digested files in priv/static can be cleaned up using mix phx.digest.clean --all.

tl;dr

Running custom background watchers with e.g. watchexec will lead to zombie processes if not wrapped in custom shell script that kills the process once elixir quits.

tl;dr

Of the dozens of variants to parse a number in JS, the unary plus operator is the preferred method.

tl;dr

Do not try to nest <a> tags in Firefox, that will cause Firefox to mangle up the layout.

tl;dr

Get an array of all elements at the specified coordinates, relative to the viewport, using Document.elementsFromPoint().

tl;dr

Eine Studie hat gezeigt, dass eine Stellenanzeige mit der Formulierung “Geschäftsführerin oder Geschäftsführer (m/w/d)” mehr Bewerbungen von Frauen und insgesamt mehr Bewerbungen bringt als die Formulierung “Geschäftsführer (m/w/d)”.

tl;dr

When migrating to a new phone, you can copy most app data using the apt backup and restore function.

tl;dr

You can perform a reduce using for by using the reduce: [] opt.

tl;dr

On Safari in iOS the event beforeunload does not exist, but it does on Safari for MacOS. Add a global event listener on all clicks on anchor tags as a workaround.

tl;dr

If you are using mix release with a different erts version, the path must point to the erts-x.x.x directory inside the erlang installation.

tl;dr

Use simulator.app from XCode to test your websites on iOS devices.

tl;dr

If you’ve got a migration that has ex as its extension instead of exs its silently skipped.