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
mattdesl / about.md
Last active Feb 27, 2018
Texel + Saving Canvas PNG
View about.md

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
mwpastore / 00README.md
Last active Apr 18, 2019
Lightning Fast WordPress: Caddy+Varnish+PHP-FPM
View 00README.md

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
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} robwu.nl
// */
function escapeHTML(str) {
// Note: string cast using String; may throw if `str` is non-serializable, e.g. a Symbol.
@Rich-Harris
Rich-Harris / service-workers.md
Last active May 20, 2019
Stuff I wish I'd known sooner about service workers
View service-workers.md

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.

View Element Query.txt
https://github.com/Snugug/eq.js
https://github.com/tysonmatanich/elementQuery
http://eqcss.github.io/eqcss/
@paulirish
paulirish / what-forces-layout.md
Last active May 24, 2019
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
View pragmatic-touch-icons.md

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](https://o.twimg.com/2/proxy.jpg?t=HBj6AWh0dHBzOi8vcGhvdG9zLTYuZHJvcGJveC5jb20vdC8yL0FBRGFGY1VRN1dfSExnT3cwR1VhUmtaUWRFcWhxSDVGRjNMdXFfbHRJWG1GNFEvMTIvMjI3OTE2L3BuZy8xMDI0eDc2OC8yL18vMC80L1NjcmVlbnNob3QlMjAyMDE1LTA0LTE0JTIwMTYuNTYuMjYucG5nL0NNejBEU0FCSUFJZ0F5Z0JLQUkvNGR1eDZnMzZmYnlzYWI3

@bendc
bendc / functional-utils.js
Last active Apr 21, 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
brugnara / do.sh
Created Jan 3, 2015
Extract meteor deploy mongo credential and execute mongodump for you.
View do.sh
#!/bin/sh
#
# Daniele Brugnara
#
# usage:
# meteor mongo xyz.meteor.com --url | ./do.sh
#
read mongo_auth
@addyosmani
addyosmani / package.json
Last active Apr 8, 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.