Skip to content

Instantly share code, notes, and snippets.

@edwinwebb
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);
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
liamcurry / html5video.sh
Created May 14, 2012 — forked from markupboy/html5video.sh
automated conversion of a file to all three html5 compatible video formats - h.264, ogg, and webm
View html5video.sh
#!/bin/sh
# Output file for HTML5 video
# requirements: ffmpeg .6+
# usage: ./html5video.sh infile.mp4 640x360
target_directory='converted'
file=`basename $1`
filename=${file%.*}
filepath=`dirname $1`
@MadRabbit
MadRabbit / gist:996893
Created May 28, 2011
Cubic Bezier function emulator
View gist:996893
/**
* Cubic Bezier CSS3 transitions emulator
*
* See this post for more details
* http://st-on-it.blogspot.com/2011/05/calculating-cubic-bezier-function.html
*
* Copyright (C) 2011 Nikolay Nemshilov
*/
function Bezier(p1,p2,p3,p4) {
// defining the bezier functions in the polynomial form
@branneman
branneman / svg-classes.js
Created Jan 15, 2014
SVG — hasClass, addClass, removeClass, toggleClass
View svg-classes.js
//
// SVG — hasClass, addClass, removeClass, toggleClass
// Source:
// https://gist.github.com/branneman/8436956
// Taken and adapted from:
// http://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/
//
if (SVGElement && SVGElement.prototype) {
@danielberndt
danielberndt / load-from-json.js
Last active Feb 26, 2020
load pixi.js sprite sheet jsons via webpack
View load-from-json.js
`
this allows you to use all of webpack's goodness to load your sprites.
here's some benefits:
- saving one roundtrip since webpack's json-loader will inline the json data into the script. Thus it doesn't need to be loaded from the server first
- use a lot of the file-loader power and beyond to create cache-busting urls, and apply image-minification via e.g. image-webpack-loader
`
import PIXI from "pixi.js";
@gre
gre / EasingFunctions.json
Last active Feb 26, 2020
DEPRECATED Please use http://github.com/gre/bezier-easing for latest vrrsion.
View EasingFunctions.json
{
"ease": [0.25, 0.1, 0.25, 1.0],
"linear": [0.00, 0.0, 1.00, 1.0],
"ease-in": [0.42, 0.0, 1.00, 1.0],
"ease-out": [0.00, 0.0, 0.58, 1.0],
"ease-in-out": [0.42, 0.0, 0.58, 1.0]
}
View gist:4b23f60fc451e7e8c59e
ffmpeg -i intro.mov -vf "boxblur=5:1" intro-blur.mov
@maxfenton
maxfenton / a-new-mac-setup.md
Last active Jul 29, 2020
System setup stuff for a new mac
View a-new-mac-setup.md

New computer setup

a/o 2020-05-29

--

Format the drive

  1. Restart with Cmd-R or Cmd-D
  2. Erase drive / 3x if second-hand
  3. Reinstall MacOS
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