rowan-m

// Only match Chrome user-agents we know we can reduce
// https://www.chromium.org/updates/ua-reduction#TOC-Reduced-User-Agent-String-Reference
const chromeUAs = /^Mozilla\/5\.0 \(((?<platform>Lin|Win|Mac|X11; C|X11; L)+[^\)]+)\) AppleWebKit\/537.36 \(KHTML, like Gecko\) Chrome\/(?<major>\d+)[\d\.]+(?<mobile>[ Mobile]*) Safari\/537\.36$/;
const matched = chromeUAs.exec(navigator.userAgent);

if (matched) {
  // Map detected platform to reduced value
  const unifiedPlatform = {
    'Lin': 'Linux; Android 10; K',
    'Win': 'Windows NT 10.0; Win64; x64',

rowan-m

const express = require('express');
const app = express();

app.use(function (req, res, next) {
  if (req.secure) {
    res.set('Strict-Transport-Security', 'max-age=63072000; includeSubdomains; preload');
    return next();
  }
  
  res.redirect(301, 'https://' + req.headers.host + req.url);

rowan-m

  const template = document.createElement('template');
  template.innerHTML = `...✂️`;
  
  // 1. Prepare template!
  window.ShadyCSS && ShadyCSS.prepareTemplate(template, 'input-knob');

  class InputKnob extends HTMLElement {
    constructor() {
      super();

rowan-m

#container {
  --angle: 0rad;
  transform: rotate(var(--angle));
  will-change: transform;
}

rowan-m

_onTouchstart(e) {
  e.preventDefault();
  this._touchX = e.changedTouches[0].clientX;
  this._touchY = e.changedTouches[0].clientY;
  this._rotationStart();
  this.addEventListener('touchmove', this._onTouchmove);
  this.addEventListener('touchend', this._onTouchend);
  this.addEventListener('touchcancel', this._onTouchend);
}
_onTouchmove(e) {

rowan-m

_onMousedown(e) {
  this._touchX = e.clientX;
  this._touchY = e.clientY;
  this._rotationStart();
  document.addEventListener('mousemove', this._onMousemove);
  document.addEventListener('mouseup', this._onMouseup);
}
_onMousemove(e) {
  e.preventDefault();
  this._touchX = e.clientX;

rowan-m

// disconnectedCallback
if ('PointerEvent' in window) {
  this.removeEventListener('pointerdown', this._onPointerdown);
} else {
  this.removeEventListener('touchstart', this._onTouchstart);
  this.removeEventListener('mousedown', this._onMousedown);
}

rowan-m

// connectedCallback()
if ('PointerEvent' in window) {
  this.addEventListener('pointerdown', this._onPointerdown);
} else {
  this.addEventListener('touchstart', this._onTouchstart);
  this.addEventListener('mousedown', this._onMousedown);
}

rowan-m

_onPointerdown(e) {
  e.preventDefault();
  this._touchX = e.clientX;
  this._touchY = e.clientY;
  // ✂️ Chop out existing code, extract into new method
  this._rotationStart();
  this.setPointerCapture(e.pointerId);
  this.addEventListener('pointermove', this._onPointermove);
  this.addEventListener('pointerup', this._onPointerup);
  this.addEventListener('pointercancel', this._onPointerup);

rowan-m

// _onPointermove(e)
this._touchX = e.clientX;
this._touchY = e.clientY;
this._angle =
  // initial rotation of the element
  this._initialAngle
  // subtract the starting touch angle
  - this._initialTouchAngle
  // add the current touch angle
  + Math.atan2(this._touchY - this._centerY, this._touchX - this._centerX);