The Ingenious Design of the Aluminum Beverage Can

Bill details the engineering choices underlying the design of a beverage can he explains why it is cylindrical, outlines the manufacturing steps needed to created the can, notes why the can narrows near it lid, show close ups of the double-seam that hold the lid on, and details the complex operation of the tab that opens the can.

My inner geek rejoices to see how much engineering went into something we take for granted.

Remotion – Create videos programmatically in React

Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

  • Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
  • Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
  • Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

Also comes with a handy player that allows you to scrub through the timeline. And yes, that demo video above is made with Remotion … #eatyourowndogfood

Here’s another example created with Remotion:

Neat! The code behind those videos is pretty dazzling though! 😵

Remotion – Create videos programmatically in React →
Remotion Source (GitHub) →

code-server — Run VS Code on any machine anywhere and access it in the browser

code-server allows you to run on any machine, preferably on a Cloud Server, and access it from anywhere.

Yes, that means you can use VS Code on your iPad for example 😉

Once installed you’ll also need to set up authentication and the like. Alternatively you can run code-server --link and get a subdomain, protected by logging in using your GitHub account.

If you want to test it out locally, you can also install it locally using brew install, after which it’ll run on port 8080. Docker image also available.

code-server Setup Guide →

GitHub1s — One second to read GitHub code with VS Code

This tool — not endorsed nor affiliated with GitHub — lets you quickly load any GitHub repo in an online hosted Visual Studio Code environment.

Just add 1s after github and press Enter in the browser address bar for any repository you want to read.

Note that this is a *viewer* only, no editing. For that you’ll need to wait on GitHub Codespaces or run VSCode in the cloud yourself.

GitHub1s →

About Us Pop-Out Effect

Cool demo that uses clip-path: path(…);, a feature that recently shipped with Chromium, making it supported in all three major rendering engines.

See the Pen About Us Pop-Out Effect by Mikael Ainalem (@ainalem) on CodePen.

Peeking under the hood – using the SVG Path Visualizer — you can see that it’s the .container-inner that is clipped not in a circular way, but a vertical rectangle with a circular bottom. The photo of the person itself already is transparent and using scale and translate the pop-out effect is created.

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

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 →