Update on the aformentioned Tackling TypeScript — book on TypeScript by Dr. Axel Rauschmayer: the entire book (except for two bonus chapters) can now be read freely online.
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:
💡 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.
How I Build JavaScript Apps In 2021
Tim Daubenschütz on how he builds JavaScript Apps In 2021
- 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 😉)
How I Build JavaScript Apps In 2021 →
Via Jeremy
Convert an image to pixel “art” with Pixelr
Retro-looking tool by Sara Vieira
Pixelr →
Pixelr Source (GitHub) →
⚠️ Did notice it to be a bit buggy though: checking and then unchecking greyscale for example rendered the image still in greyscale.
PHP Curl Security Hardening
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
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…
👀
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
…
Related: Also see Sindre Sorhus’ post Get Ready For ESM
Bootstrap 5 for IE 11
Not that you should ever need it, but if you were to find yourself in such a situation: it exists.
Bootstrap 5 drops support for Internet Explorer 11, but you can add support back by simply adding a CSS file and a few JavaScript polyfills.
Find out here what’s changed in Bootstrap 5
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.