Ralf Koller rpkoller

`margin` or `padding` Candidates

Every element in current Baseline browsers that would need a margin or padding removing in a reset stylesheet:

Element	Chrome	Chrome for Android	Edge	Firefox	Firefox for Android	Safari	Safari for iOS
`body`	✔	✔	✔	✔	✔	✔	✔
`h1`	✔	✔	✔	✔	✔	✔	✔

QA testing your website(s) with free online tools

W3C classics

General

Add this as a bookmark to get a small span fixed to the top-right of the viewport. I use this to find breakpoints in designs, comments welcome.

javascript:((w, d) => {
const el=d.createElement('span'),calc=()=>{const a=w.getComputedStyle(d.body).getPropertyValue('font-size').match(/(\d+)/)[1],b=parseInt(w.innerHeight/a)+'em',c=parseInt(w.innerWidth/a)+'em';el.textContent=c+' '+b};el.style.cssText='position: fixed; right: 0; top: 0; background-color: #000; color: #fff; padding: .2em; z-index:9001',d.body.appendChild(el),w.addEventListener('resize',calc),calc();
})(window, document);

Safari Keyboard Navigation

In order to allow for full keyboard navigation of all element in Safari on macOS, make sure the following options are enabled.

All Controls in macOS

In the macOS settings, allow "All Controls" to be keyboard accessible. Enable this feature by going to:

Settings
Keyboard

<fieldset class="rating">
    <legend>Please rate:</legend>
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>

Screencast with VoiceOver

Here’s a quick how-to on recording your Mac desktop while using the VoiceOver screen reader. With this setup you’ll be able to capture both video and internal audio at the same time, and hear the audio output while recording.

Setup

For this setup we’ll be on OS X El Capitan and use QuickTime to capture the video and audio. The only extra thing required is the iShowU Audio Capture driver.

Steps

Comparison of `npm scripts` vs Gulp

`npm scripts`

Pros

npm scripts are low-level and leverage the actual library you want to use (example: "lint": "eslint ./")
package.json is a central place to see what scripts are available (also npm run will list all scripts)
When things get too complicated you can always defer to another file (example: "complex-script": "babel-node tools/complex-script.js")
npm scripts are more powerful than one might first think (pre/post hooks, passing arguments, config variables, chaining, piping, etc...)

DEPRECATED as of macOS 10.13 (High Sierra). See the new GUIDE to install nvm and yarn for macOS (updated July 2019)

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

Solution

This solution fixes the error caused by trying to run npm update npm -g. Once you're finished, you also won't need to use sudo to install npm modules globally.

	// Licence: Robert Koch-Institut (RKI), dl-de/by-2-0

	class IncidenceWidget {

	constructor() {
	this.previousDaysToShow = 31;
	this.apiUrlDistricts = (location) => `https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0/query?where=1%3D1&outFields=RS,GEN,cases7_bl_per_100k,cases7_per_100k,BL&geometry=${location.longitude.toFixed(3)}%2C${location.latitude.toFixed(3)}&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelWithin&returnGeometry=false&outSR=4326&f=json`
	this.apiUrlDistrictsHistory = (districtId) => `https://services7.arcgis.com/mOBPykOjAyBO2ZKk/ArcGIS/rest/services/Covid19_hubv/FeatureServer/0/query?where=IdLandkreis%20%3D%20%27${districtId}%27%20AND%20Meldedatum%20%3E%3D%20TIMESTAMP%20%27${this.getDateString(-this.previousDaysToShow)}%2000%3A00%3A00%27%20AND%20Meldedatum%20%3C%3D%20TIMESTAMP%20%27${this.getDateString(1)}%2000%3A00%3A00%27&outFields=Landkreis,Meldedatum,AnzahlFall&outSR=4326&f=json`
	this.stateToAbbr = {

	// Vanilla version of FitVids
	// Still licencened under WTFPL
	//
	// Not as robust and fault tolerant as the jQuery version.
	// It's BYOCSS.
	// And also, I don't support this at all whatsoever.

	;(function(window, document, undefined) {
	'use strict';