Disable Hardware Media Keys Support in Chrome

A new feature that landed in Chrome 73 is support for hardware Media Keys. Whenever you press one of the play/pause/next/prev buttons on your keyboard, Chrome can now respond to this.

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

~

Whilst this might be a good addition for many, it doesn’t work me, as I’m constantly playing music through iTunes. With iTunes jingling around, here’s my experience:

  • Open a site with a video and watch it play
  • Hit (keyboard) pause button to pause iTunes
  • Not iTunes but the video in the browser gets paused (😠)
  • CMD+TAB into iTunes
  • Hit (keyboard) pause button to pause iTunes
  • Video in the browser resumes playback (with iTunes still playing too) (😡)

Looks like the browser (or macOS?) isn’t properly releasing/giving the focus, redirecting all media keys’ keystrokes to Chrome (instead of the focussed iTunes).

~

Thankfully, one can disable the support for Hardware Media Keys through some flags.

  1. Visit chrome://flags/#hardware-media-key-handling
  2. Set the dropdown value to “Disabled”
  3. Restart Chrome

Ah, much better now!

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Not your typical map: “Where is all the poop on the moon?”

Ever wondered what the astronauts that landed on the moon did with their waste? Well, they ditched them on the moon itself.

It’s been nearly 50 years since the Apollo 11 moon landing. Neil Armstrong’s iconic footprint is still there, undisturbed; there’s no atmosphere, no wind on the moon to blow it away.

But the bigger human footprint on the moon is, arguably, the 96 bags of human waste left behind by the six Apollo missions that landed there.

Yes, our brave astronauts took dumps on their way to the moon, perhaps even on the moon, and they left behind their diapers in baggies, on humanity’s doorstep to the greater cosmos.

Just look at the big white bag right underneath the lunar lander:

💩💩

Apollo astronauts left their poop on the moon. We gotta go back for that shit. →

👨‍🚀 That’s not all what’s been left on the moon. If you were to land on the moon, you’d also find Hammers, Earplugs, Batteries, Camera Systems, etc. Check out the full Catalogue of Manmade Material on the Moon (PDF) (with coordinates) if you’re interested. The catalogue is from 2012, so SpaceIL’s crashed Beresheet Lander is not included on it.

Fading out siblings on hover in CSS

Nice one by Trys Mudford:

Hover states traditionally run on the element being hovered on (makes sense, right?). But we can also listen for the hover event on the parent element.

That’s the crux of this ‘trick’, we fade out all children when the parent is hovered, and attach another hover handler the child, fading it back in.

And with some pointer-events manipulation, it’s prevented that all items fade out when hovering the gaps between the items.

.parent:hover > * {
  opacity: 0.5;
}

.parent:hover > *:hover {
  transform: scale(1.1);
  opacity: 1;
}

.parent {
  pointer-events: none;
}

.parent > * {
  pointer-events: auto;
}

Fading out siblings on hover in CSS →

Tiny Mirror – Mirror your Webcam into the Favicon

Fun little experiment that mirrors your webcam into your favicon.

Tiny Mirror →

🔥 The aforementioned favico.js (from 2013!) also comes with a “Webcam video to icon” option. Next to mirroring the webcam into your favicon it also supports badges, videos, etc.

🍰 Looking to display (pie)charts in your favicon? Piecon can do that for you!

Direction Aware Hover Effect

A thing I commonly see nowadays are animated lines underneath menus and links:

Show Pen

One issue with that though: when hovering over an item the animation does not start from the place where you hover, but from a fixed point (here: bottom-center).

Try hovering an item from one of its edges and you’ll see: the animation is disconnected from your point of entry. This can feel weird, especially for wide items.

Thanks to CSS Custom Properties (aka CSS Variables) and a little bit of JavaScript, the animation can be enhanced. Here’s a demo by Tobias Reich:

Show Pen

Also feels really smooth when moving your cursor horizontally over the items.

Direction Aware Hover Effect Demo (CodePen) →

🤩 I really like this JS/CSS Custom Properties combo, it’s so powerful … that’s one of the reasons why I and others are really excited about CSS Custom Properties

💡 You could keep this pure CSS, but that would mean injecting lots of extra elements to detect the direction.

Star Wars: Episode IX – Teaser Trailer

No One Is Ever Really Gone.

Also: Lando in the Falcon! 😎

Unsafe SQL functions in Laravel

Recently the folks from Spatie released a security update for their laravel-query-builder package. Turns out it was vulnerable to SQL Injection.

At the core of the vulnerability is the fact that Laravel offers a shorthand for querying only certain fields of JSON data, but that these do not get escaped when converted to a json_extract function.

Brent has a detailed writeup on this:

Instead of manually writing json_extract, we can use the simplified -> syntax, which Laravel will convert to the correct SQL statement.

Blog::query()
    ->addSelect('title->en');
SELECT json_extract(`title`, '$."en"') FROM blogs;

Be careful though: Laravel won’t do any escaping during this conversion.

If you were to change title->en – which could come from a URL or user input – to title->en'#, you’re in …

Thankfully by now a fix authored by Brent has landed in Laravel 5.8.11 🙂

Unsafe SQL functions in Laravel →
An important security release for laravel-query-builder

HTML slides without frameworks, just CSS

Creating a slidedeck with CSS is not really that difficult. Stack all slides on top of each other, and then make good use of the :target pseudo-class selector:

We adjust the z-index for the active slide to be higher than all the other inactive slides with our trusty :target selector.

section {
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: 0;
}

section:target {
  z-index: 1;
}

Sprinkle some more CSS on top, and you can also build in transitions.

HTML slides without frameworks, just CSS →

💁‍♂️ Mostly the :target selector is used to highlight the anchor you just jumped to. But did you know it can also be used to change the entire layout of your site?

Automatic GitHub Changelog Generator

If your code/project always uses Pull Requests to add/fix stuff in your code (e.g. no direct commits on master), then Changelog Generator will come in handy. It’s a CLI tool (written in PHP) that automatically fetches all closed PRs and Issues between the targetted and the previously tagged release.

Installation is possible using Composer:

$ composer require jwage/changelog-generator

Once installed, run it like so:

$ changelog-generator generate --user=jwage --repository=changelog-generator --milestone=0.0.7

The snippet above will check all closed PRs and Issues that landed in between the 0.0.7 release and the one before (e.g. 0.0.6) of the repo jwage/changelog-generator.

0.0.7
=====

- Total issues resolved: **1**
- Total pull requests resolved: **4**
- Total contributors: **3**

Improvement
-----------

 - [47: Upgrade Doctrine Coding Standards to 5.0](https://github.com/jwage/changelog-generator/pull/47) thanks to @jwage
 - [43: Generate alternative (Setext, without #) Markdown format for headers](https://github.com/jwage/changelog-generator/pull/43) thanks to @Majkl578
 - [38: Fix: Provide missing required php version in composer](https://github.com/jwage/changelog-generator/pull/38) thanks to @prisis
 - [32: Upgrade PHPStan to 0.10](https://github.com/jwage/changelog-generator/pull/32) thanks to @jwage

Adding the --prepend --file=CHANGELOG.md options, will automatically prepend its output to CHANGELOG.md.

💡 In case you don’t always want to type the arguments you could define it as a custom composer command/script into your own project, or use a config file which is also supported.

Generate a Markdown Changelog from a GitHub milestone. →

AV1, the video codec of the future

Next to praising the AV1 Codec and providing conversion examples (using ffmpeg), Andrey Sitnik also gives a good overview on containers and codecs – concepts every web developer who embed video should know imho – in his post on the subject:

File extensions for video (.mp4, .wmv, .webm or .mov) barely represent containers. When you see a .mp4 extension, the only thing you can be sure about is that the MP4 container had been used to package a file. The choice of codec depends entirely on a creator: it can be H.264/AAC, or AV1/Opus, or something else.

Better web video with AV1 codec →