Skip to content

Instantly share code, notes, and snippets.

Shaw shshaw

Block or report user

Report or block shshaw

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
svlasov-gists / gist:2383751
Created Apr 14, 2012 — forked from padolsey/gist:272905
JavaScript: merge two objects
View gist:2383751
function merge(target, source) {
/* Merges two (or more) objects,
giving the last one precedence */
if ( typeof target !== 'object' ) {
target = {};
for (var property in source) {
staltz /
Last active Dec 28, 2018
How to show migration guides in GitHub Markdown

How to show migration guides in GitHub Markdown

Use the diff code highlighting tag.

  - foo
  + bar


edwinwebb / gist:5155504
Last active Feb 1, 2019
A simple less loop with comments and simple from, to syntax.
View gist:5155504
/* Define two variables as the loop limits */
@from : 0;
@to : 10;
/* Create a Parametric mixin and add a guard operation */
.loop(@index) when(@index =< @to) {
/* As the mixin is called CSS is outputted */
div:nth-child(@{index}) {
top: unit(@index * 100, px);
remy /
Last active Feb 6, 2019
requestAnimationFrame helper


A simple script with a few niceties that allows for multiple requestAnimationFrame calls, and FPS pinning.

How it works

The script polyfills rAF if required, then overloads requestAnimationFrame and cancelAnimationFrame with a process that allows multiple frames to be queued up for rAF to run.

This is useful if there are multiple animations running on the page, you want all the callbacks to happen at once, and not on multiple rAF calls. This script is meant as a drop-in solution to that problem.

	/* Where the box is placed */
	position: ;
	z-index: ;
	float: ;
	place-self: ;
	justify-self: ;
	align-self: ;
	vertical-align: ;

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](

View punk.js
const CODES = ['o', 'W', 'X', 'H', 'i', 'a', 'l', 's', 's','Q', 'v', 'y'];
console.log(`/${CODES.filter((c,i) => i % 3 == 0).join('')}`)
liamcurry /
Created May 14, 2012 — forked from markupboy/
automated conversion of a file to all three html5 compatible video formats - h.264, ogg, and webm
# Output file for HTML5 video
# requirements: ffmpeg .6+
# usage: ./ infile.mp4 640x360
file=`basename $1`
filepath=`dirname $1`
p3t3r67x0 /
Last active Nov 5, 2019
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;

video /deep/ input[type=range] {
View gist:4b23f60fc451e7e8c59e
ffmpeg -i -vf "boxblur=5:1"
You can’t perform that action at this time.