Skip to content

Instantly share code, notes, and snippets.

@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
@robweychert
robweychert / frame-based-animation.md
Last active Jan 2, 2020
A simple Sass function for frame-based CSS animation
View frame-based-animation.md

A simple Sass function for frame-based CSS animation

If you have experience with animation in other media, CSS animation’s percentage-based keyframe syntax can feel pretty alien, especially if you want to be very precise about timing. This Sass function lets you forget about percentages and express keyframes in terms of actual frames:

@function f($frame) {
  @return percentage( $frame / $totalframes )
}
@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) {
@localpcguy
localpcguy / swipeFunc.js
Created Nov 17, 2011
Simple Mobile Swipe function to get the swipe direction
View swipeFunc.js
var swipeFunc = {
touches : {
"touchstart": {"x":-1, "y":-1},
"touchmove" : {"x":-1, "y":-1},
"touchend" : false,
"direction" : "undetermined"
},
touchHandler: function(event) {
var touch;
if (typeof event !== 'undefined'){
View module-es2015.js
const Application = ((d) => {
const privateVariable = 'Private content'
const __private = {
cache: () => {
this.link = d.querySelector('.link')
},
bind: () => {
this.link.addEventListener('click', this.showContent, false)
@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]
}
@paulirish
paulirish / readme.md
Last active Apr 20, 2020
resolving the proper location and line number through a console.log wrapper
View readme.md

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.

@joaocunha
joaocunha / How To Hide The Select Arrow On Firefox.md
Last active Apr 22, 2020
How to hide <select> dropdown's arrow in Firefox when using "-moz-appearance: none;".
View How To Hide The Select Arrow On Firefox.md

This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.

How to remove hide the select arrow in Firefox using -moz-appearance:none;

TL;DR (or, the fix)

  1. Set -moz-appearance to none. This will "reset" the styling of the element;
  2. Set text-indent to 0.01px. This will "push" the text a tiny bit[1] to the right;
@hdragomir
hdragomir / sm-annotated.html
Last active Apr 22, 2020
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
View sm-annotated.html
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
You can’t perform that action at this time.