Skip to content

Instantly share code, notes, and snippets.

Federico Brigante bfred-it

Block or report user

Report or block bfred-it

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
mattdesl /
Last active Feb 27, 2018
Texel + Saving Canvas PNG

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
mwpastore /
Last active Jun 28, 2019
Lightning Fast WordPress: Caddy+Varnish+PHP-FPM


This gist assumes you are migrating an existing site for — 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 and 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 / escaopeHTMLTag.js
Created Nov 14, 2016
Example of safe HTML escaping using template literals
View escaopeHTMLTag.js
/* Example:
var someUnsafeStr = '<img>';
var result = escapeHTMLTag`<input value="${someUnsafeStr}">`;
console.log(result); // <input value="&lt;img&gt;">
// Questions? rob {at}
// */
function escapeHTML(str) {
// Note: string cast using String; may throw if `str` is non-serializable, e.g. a Symbol.
Rich-Harris /
Last active Jul 19, 2019
Stuff I wish I'd known sooner about service workers

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

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.

View Element Query.txt
paulirish /
Last active Jul 18, 2019
What forces layout/reflow. The comprehensive list.

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.


Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()

NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.

I'd like to hear how you approach this: @valuedstandards or comment on this gist.

The issue

You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':

![Touch Icon Links](

bendc / functional-utils.js
Last active Jun 29, 2019
A set of pure ES2015 functions aimed to make functional JavaScript more idiomatic.
View functional-utils.js
// array utils
// =================================================================================================
const combine = (...arrays) => [].concat(...arrays);
const compact = arr => arr.filter(Boolean);
const contains = (() => Array.prototype.includes
? (arr, value) => arr.includes(value)
: (arr, value) => arr.some(el => el === value)
brugnara /
Created Jan 3, 2015
Extract meteor deploy mongo credential and execute mongodump for you.
# Daniele Brugnara
# usage:
# meteor mongo --url | ./
read mongo_auth
addyosmani / package.json
Last active Jun 26, 2019
npm run-scripts boilerplate
View package.json
"name": "my-app",
"version": "1.0.0",
"description": "My test app",
"main": "src/js/index.js",
"scripts": {
"jshint:dist": "jshint src/js/*.js",
"jshint": "npm run jshint:dist",
"jscs": "jscs src/*.js",
"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js",
You can’t perform that action at this time.