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 …

Apache .htaccess disable access to site during Maintenance Mode / Deployment

Because I have to look this up from time to time, a note to myself: Add the contents below to your .htaccess to have Apache respond with a “Temporarily Unavailable” message in case a .maintenance file exists. — Handy during deploys RewriteEngine On # Show “Temporarily Unavailable” page if there’s a .maintenance file present RewriteCond …

Apache .htaccess trim www. prefix from domain name

Because I have to look this up from time to time, a note to myself: Add the contents below to your .htaccess to have Apache trim the www. prefix from URLs while preserving the rest of the URL (domain name, querystring, etc). RewriteEngine On # Trim www prefix RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] RewriteRule ^ https://%1%{REQUEST_URI} …

Apache .htaccess enforce HTTPS

Because I have to look this up from time to time, a note to myself: Add the contents below to your .htaccess to have Apache enforce HTTPS while preserving the rest of the URL (domain name, querystring, etc). RewriteEngine On # Enforce HTTPS (everywhere) RewriteCond %{HTTPS} off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] ~

WebHID Demo: Elgato Stream Deck Daft Punk Soundboard

Sparked by Pete LePage’s work on talking to a Elgato Stream Deck device from within the browser, I wanted to play with WebHID myself. First thing that came to my mind was to create a DrumPad. What first started out as a simple/classic DrumPad … 🔥 Have been playing with the #WebHID API tonight, connecting …

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 …

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 …