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 …

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):not(:placeholder-shown):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 …

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 …

Use an Emoji as the Mouse Cursor on a Website

Recently I saw this tweet by Marco Denic fly by: CSS tip: Did you know that you can use your own image, or even emoji as a cursor? pic.twitter.com/P25wSJ0ui6 — Marko ⚡ Denic (@denicmarko) January 6, 2021 To use an emoji as the cursor you can’t simply type in the emoji though. /* ❌ This …

CSS mix-blend-mode not working? Set a background-color!

💡 If you find your CSS mix-blend-mode not working as expected (on a white background), you need to explicitly set a background-color on the underlying element. The easiest way to do so is to apply background-color: white; on the html and body elements. html, body { background-color: #fff; } ~ Demos + Explanation Without a …