Today I Learned

How to fix a render-blocking video on Safari

This is related to the MOOV atom that contains all the metadata and information about the frame locations other important information the browser needs to know about the video. For some reason, all other major browsers load it with no issues but Safari prefers to wait until the whole resource has downloaded in order to decide what to do with it.

For mp4 files, downloading FFMPEG and running the following command solved my issue:

./ffmpeg -y -i source.mp4 -movflags faststart dest.mp4

What it does is that it takes the MOOV atom from the end and adds it right at the start.

Extend Ecto's query API with your own macros

Imagine for a second this is something you're using a lot when programming Elixir and Phoenix:

	from u in User,
		where: fragment("lower(?)", u.email) == ^email

You can write your own Elixir macro to improve your flow.

defmacro lower(arg) do
	quote do: fragment("lower(?)", unquote(arg))

Then your query can be rewritten like this:

	from u in User,
		where: lower(u.email) == ^email

How to change JPEG compression rate in WordPress

Our client wants pixel perfect images in his WordPress site. Truth is WordPress is a bit agressive in compressing JPEGs.

WordPress default is 75% compression quality. A higher setting will generate better looking images, to the expense of larger filesize.

Add this to your functions.php file:

// Change JPEG compression rate - 85 is much more reasonable setting
// You can also disable it by settign it to 100
$jpeg_compression = function() { 
	return 85; 

add_filter( 'jpeg_quality', $jpeg_compression );

The importance of clear namespaced HTML attributes

Here's another reminder why expressive, namespaced ids are important. This time is about a label's for attribute.

<input id="phone">
<label for="phone"></label

This would work just as expected unless, for example, we have a svg sprite at the beginning of the document that includes an svg with a "phone" id.

<symbol id="phone" viewBox="0 0 61.4 48">...</symbol>
<input id="phone">
<label for="phone"></label

In this case, the label's for will match the first in a top-down order that has the target id.

And you will never know why clicking the label won't trigger the input.