Use the Elgato Stream Deck in Google Meet with this Chrome Plugin

Recently I purchased an Elgato Stream Deck which comes in handy during video calls: toggling the camera and microphone on/off by means of a dedicated button sure is handy.

As Google Meet is web-based, there are no plugins for the Stream Deck app to use. However, thanks to the WebHID API it is possible to have your browser talk directly to a Stream Deck device.

With this knowledge in hand Pete LePage — whom you might know as Developer Advocate for Chrome — created a Chrome plugin for use with Google Meet. Once your Stream Deck is connected you’ll get some handy buttons to use:

Meet + Stream Deck Helper →

💡 Tip: To connect the Stream Deck to Google Meet you must close the native Stream Deck app.

Easily see the JavaScript Keyboard Event KeyCodes with keycode.info

Handy helper tool by Wes Bos: simply press any key and see the results for KeyboardEvent.which, KeyboardEvent.key,KeyboardEvent.code, etc.

As a user with an AZERTY keyboard layout I often have a broken experience on sites that respond to first row of keys, e.g. QWERTY. As those sites respond to KeyboardEvent.key — which differs from layout to layout — I cannot simply use the first row, but have to reach for the Q and W keys on the second and third row.

To properly implement key presses independent of the keyboard layout, it’s recommended to use e.keyCode as that will yield the same keyCode. As per MDN:

The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value that isn’t altered by keyboard layout or the state of the modifier keys.

For example: pressing A on AZERTY will yield KeyQ. Pressing Q on QWERTY will also yield KeyQ as they’re the same physical key.

JavaScript Event KeyCodes →

How I Build JavaScript Apps In 2021

Tim Daubenschütz on how he builds JavaScript Apps In 2021

  1. I avoid build processes.
  2. I avoid transpiling.
  3. I avoid the new and shiny.
  4. I test EvErYtHiNg.
  5. I optimize for performance and quality.
  6. I use my own work
  7. I use open source to my advantage.

Don’t agree 100% with the third point though, as React Hooks and Function Components — the example he mentions — are a big step ahead to me.

What I don’t do is try to keep up with all other frameworks though — an impossible task — but focus on one of them (e.g. React) and go really deep in it. (And of course I’m also going all-in on VanillaJS, a very safe bet to make 😉)

How I Build JavaScript Apps In 2021 →

Via Jeremy

PHP Curl Security Hardening

Good post — with accompanying code — on PHP.Watch on how to tighten the almighty curl:

  1. Limit Curl Protocols
  2. Do not enable automatic redirects unless absolutely necessary
  3. If redirects are enabled enabled, limit allowed protocols (if different from #1 above)
  4. If redirects are enabled, set a strict limit
  5. Set a strict time-out
  6. Do not disable certification validation, or enforce it
  7. Disable insecure SSL and TLS versions

PHP Curl Security Hardening →

The Surprising Things That CSS Can Animate

Back in June, Will Boyd wondered what things CSS can animate, which turns out to be quite a lot.

This articles explores some of the unexpected things that CSS can animate and some nifty things you can do by animating them.

I like this demo where you choose between two options (in which a z-index is animated):

See the Pen
Overlapping Sushi Cards
by Will Boyd (@lonekorean)
on CodePen.

One thing that surprised me very much is that you can animate visibility, but that it has special interpolation rules:

For the visibility property, visible is interpolated as a discrete step where values of p between 0 and 1 map to visible and other values of p map to the closer endpoint…

👀

The Surprising Things That CSS Can Animate →

CommonJS to ESM in Node.js

With Node 12 and up supporting ES Modules natively and Node 10 — the last version to not support it unflagged — going EOL, it’s time to start migrating your code to ES Modules. Aral Balkan took the time to convert his tool “Place” to embrace them and documented his work:

Yesterday, I refactored Place, which is a non-trivial Node.js app, to use ECMAScript Modules (ESM). Here’s a diff of the full set of changes.

This is the approach I took and some of the issues I ran into, in case it helps someone else

First step: set "type": "module" in your package.json

CommonJS to ESM in Node.js →

Observing Rendered DOM Nodes

Sam Thorogood has been looking into all kinds of changes that can happen to DOM Nodes:

This post will explain how to be notified when:

  • an element is added or removed from the DOM
  • the bounding box of an element changes (i.e., resizes)
  • an element moves around the page for any reason

Expect some ResizeObserver, IntersectionObserver, and MutationObserver sprinkled all over the post.

Observing rendered DOM nodes →

Related: On Twitter Denis Radin chimed in with his StyleObserver.js to track style changes.