jonathantneal

/* These rules are ignored when ui-monospace is supported. */
@font-face { font-family: ui-monospace; src:
	/* MacOS (El Capitan +) */
	local(Menlo-Regular),
	/* Windows (11 +) */
	local(CascadiaCode-Regular),
	/* Windows (Vista +) */
	local(Consolas),
	/* Android */
	local(RobotoMono-Regular),

sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

tmonjalo

#! /usr/bin/env python3

"""
List all Firefox tabs with title and URL

Supported input: json or jsonlz4 recovery files
Default output: title (URL)
Output format can be specified as argument
"""

mattdesl

Saving GIF/MP4 Frames with Texel

The above GIF was rendered with Canvas2D and JavaScript. I used texel, a tool I am developing but have not yet released.

If you want to try this very experimental tool, install the latest working version like so:

npm install texel@1.0.15 --global

pirate

#!/usr/bin/env node

/*
Submit code from stdin to carbon.now.sh and return a url to a new tweet containing a screenshot

carbon.now.sh authors: https://dawnlabs.io/
carbonify author: Nick Sweeting <git@nicksweeting.com>
MIT License 2017
*/

mwpastore

README

This gist assumes you are migrating an existing site for www.example.com — ideally WordPress — to a new server — ideally Ubuntu Server 16.04 LTS — and wish to enable HTTP/2 (backwards compatibile with HTTP/1.1) with always-on HTTPS, caching, compression, and more. Although these instructions are geared towards WordPress, they should be trivially extensible to other PHP frameworks, other FastCGI backends, and even non-FastCGI backends (using proxy in lieu of fastcgi in the terminal Caddyfile stanza).

Quickstart: Use your own naked and canonical domain names instead of example.com and www.example.com and customize the Caddyfile and VCL provided in this gist to your preferences!

These instructions target Varnish Cache 4.1, PHP-FPM 7.0, and Caddy 0.10. (I'm using MariaDB 10.1 as well, but that's not relevant to this guide.)

Rob--W

/* Example:
var someUnsafeStr = '<img>';
var result = escapeHTMLTag`<input value="${someUnsafeStr}">`;
console.log(result); // <input value="&lt;img&gt;">

// Questions? rob {at} robwu.nl
// */

function escapeHTML(str) {
    // Note: string cast using String; may throw if `str` is non-serializable, e.g. a Symbol.

Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

snookca

https://github.com/Snugug/eq.js
https://github.com/tysonmatanich/elementQuery
http://eqcss.github.io/eqcss/

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent