One of my favorite features that shipped with Chrome 80 — apart from Optional Chaining — is the ability to link to text-fragments. By default Chrome will highlight those in yellow: 💡 To easily create text-fragment links there’s this Chromium Plugin you can use. ~ As tweeted before, coming to Chromium 89 is the ability …
Category Archives: Original Content
Style the target text from text-fragment links using the
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 …
Continue reading “Apache .htaccess disable access to site during Maintenance Mode / Deployment”
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} …
Continue reading “Apache .htaccess trim www. prefix from domain name”
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 …
Continue reading “WebHID Demo: Elgato Stream Deck Daft Punk Soundboard”
What’s new in ES2021
With the January meeting of TC39 behind us, the Stage-4 features that will make it into ES2021 have been selected. The following features will be part of ES2021, which will be formalised mid-2021: String.prototype.replaceAll Promise.any WeakRefs + FinalizationRegistry Logical Assignment Operators Numeric Separators Apart from the linked-to posts above, Pawel Grzybek has done a writeup …
Animating a CSS Gradient Border
Recently, Stephanie Eckles sent out a call to revive the use of CSS border-image. Not to use it with images — which requires a pretty nasty syntax — but to create Gradient Borders in CSS. 🎉 Time to revive an old CSS property! When `border-image` was announced, I was off-put b/c the syntax was so …
Form Validation: You want :not(:focus):invalid, not :invalid
The built-in browser form validation mechanism can be frustrating as it will mark fields invalid while still entering text. Using only CSS this can be circumvented, so that validations happen afterwards.
Cancel JavaScript Event Listeners with AbortController
One of the new features that was added in Chrome 88 is the ability to pass an AbortController‘s signal into addEventListener. const controller = new AbortController(); const { signal } = controller; document.querySelector(‘…’).addEventListener(‘foo’, (e) => { // … }, {signal}); By calling controller.abort();, you can remove the listener from the event target, just like when …
Continue reading “Cancel JavaScript Event Listeners with AbortController“
CSS Properties Memory Test
Remember that HTML Tags Memory Test from before? Šime Vidas recently joked that a similar Memory Test but for CSS Properties should exist. Of course I couldn’t resist, so here is the CSS Properties Memory Test 🤪 See the Pen CSS Properties Memory Test by Bramus (@bramus) on CodePen. In total there are 653 properties …