Mehdi meduzen

Audio

ffmpeg -i smb-bump.wav -c:a flac -compression_level 8 -map_metadata -1 smb-bump.flac

-c:a flac for FLAC.
-compression_level 8: 0 is low compression (faster to decode), 12 is highest, but following this thread, you should never go above 8.

This list without any logic in its order has been made after a lightning talk I gave at Creative Front-end Belgium.

Courses

Service Workies (free)
Codelabs PWA training (free)

PWA showcases

PWA Rocks

Replace Nginx server name

This works on a Digital Ocean’s server managed by Laravel Forge. What this does:

install the ngx_headers_more module
edit Nginx configuration to have a custom value for the server header.

Power off the server by connecting through ssh and running sudo poweroff.
Take a snapshot of the server in the Digital Ocean panel. If things goes wrong, it’ll help server restauration.
Warning step:

Starting step 4, instructions are largely inspired from a Stack Overflow / Server Fault answer.

Active Directory username change on macOS

Dev things will break when your macOS sessions enters the Active Directocrap. Here are some things to help.

(This supposes your user stays administrator of the computer.)

First note

You may end up by doing some find and replace in some place where the macOS username is hardcoded (like Vagrant files, Homestead.yaml or $PATH: it’s the only ones I remember). So: /Users/oldUsername should become /Users/newUsername.

Hi,

I’m playing a bit with the regular browser media queries and noticed that there’s no square value for orientation. And more surprisingly, the definition of portrait orientation includes the square orientation:

The orientation media feature is portrait when the value of the height media feature is greater than or equal to the value of the width media feature. […] Otherwise orientation is landscape.

So the only way to query a square viewport is by using the aspect-ratio media query:

@media (aspect-ratio: 1/1) {
 /* css declarations for a square visual output */

	<!-- « un neu concepteurice », says Voice Over -->
	<p>Test 1 : nous recherchons un•e concepteur•rice & rédacteur•rice francophone.</p>

	<!-- « une concepteurice », says Voice Over `(content: '•'` is ignored) -->
	<p>Test 2 : nous recherchons un<span class="content-middot"></span>e concepteur<span class="content-middot"></span>rice & rédacteur<span class="content-middot"></span>rice francophone.</p>

	<!-- `alt is ignored by macOS Voice Over -->
	<p>Test 3 : nous recherchons <span alt="un concepteur et rédacteur, ou une conceptrice et rédactrice">un•e concepteur•rice & rédacteur•rice</span> francophone.</p>

	<!-- `aria-label` or `aria-labelledby` is ignored by macOS Voice Over -->

	<?php

	namespace App\Providers;

	use Illuminate\Support\Facades\Blade;
	use Illuminate\Support\ServiceProvider;

	class ViewServiceProvider extends ServiceProvider
	{
	/**

	<html>

	<head>
	<style>
	:root {

	/* Like me, you probably add a space between the semicolon and the value.
	👇 */
	--bg: hsl(0 0% 100%);
	}

	const trackingCode = '324567890'
	const postCode = 1000
	const language = 'EN' // 'FR', 'NL', 'EN'

	let intervalId = null
	let status = null
	let deliveryWindow = null

	const deliveredPicApi = 'https://track.bpost.cloud/track/asset'

	// IE & Edge do not support :focus-within, so they ignore the 3 selectors.
	@media screen and (min-width:896px) {
	.sub-nav:target,
	.sub-nav__parent:focus-within .sub-nav,
	.sub-nav__parent:hover .sub-nav {
	opacity: 1;
	visibility: visible;
	}
	}