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.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 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,
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…
👀
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.