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:
💡 Tip: To connect the Stream Deck to Google Meet you must close the native Stream Deck app.
Handy helper tool by Wes Bos: simply press any key and see the results for
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
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:
KeyboardEvent.codeproperty 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
AZERTY will yield
QWERTY will also yield
KeyQ as they’re the same physical key.
- I avoid build processes.
- I avoid transpiling.
- I avoid the new and shiny.
- I test EvErYtHiNg.
- I optimize for performance and quality.
- I use my own work
- 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 😉)
Good post — with accompanying code — on PHP.Watch on how to tighten the almighty curl:
- Limit Curl Protocols
- Do not enable automatic redirects unless absolutely necessary
- If redirects are enabled enabled, limit allowed protocols (if different from #1 above)
- If redirects are enabled, set a strict limit
- Set a strict time-out
- Do not disable certification validation, or enforce it
- Disable insecure SSL and TLS versions
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):
One thing that surprised me very much is that you can animate
visibility, but that it has special interpolation rules:
For the visibility property,
visibleis 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…
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
Related: Also see Sindre Sorhus’ post Get Ready For ESM
Not that you should ever need it, but if you were to find yourself in such a situation: it exists.
Find out here what’s changed in Bootstrap 5
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
MutationObserver sprinkled all over the post.