Skip to content

Instantly share code, notes, and snippets.

@srdjan
srdjan / 100+ different counter apps...
Last active Sep 6, 2020
More than 100 different counter applications...
View 100+ different counter apps...
100+ different js counter applications...
@morsdyce
morsdyce / reactive2016_lightning_talk.md
Last active Mar 7, 2019
Introduction to BDSM - ReactiveConf Lightning talk proposal
View reactive2016_lightning_talk.md

This is a proposal for a lightning talk at the Reactive 2016 conference.

🌟Star this gist if you want to see it on the conference.

Introduction to BDSM

Every day we work with multiple teams to build our products, communication and sync are key factors to deliver your product on time without compromising quality.

In this talk I will introduce BDSM a new mocking tool that will change the way you coordinate between client and server teams minimizing friction allowing each team to work at its own pace while keeping in sync.

@bendc
bendc / easing.css
Created Sep 23, 2016
Easing CSS variables
View easing.css
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
@zspecza
zspecza / amok_browserify_gulpfile.js
Last active Sep 29, 2019
Live inject CSS, Javascript & HTML with BrowserSync, Watchify, Amok & Gulp (excuse the messiness, still a WIP)
View amok_browserify_gulpfile.js
/*=====================================*\
build tasks
\*=====================================*/
/**
* This gulpfile is optimised for developing
* React.js apps in ES6 through Babel, and is
* designed to live-inject CSS, HTML and even JavaScript
* changes so maintaining state in an application when
* editing code is super easy.
@pdaoust
pdaoust / higher-order-functions.scss
Last active Nov 12, 2018
Higher-order functions for Sass 3.3 -- now that we've got the `call()` function in Sass, we can start to compose functions. We don't have the benefit of anonymous functions, of course, but this is real functional programming, folks!
View higher-order-functions.scss
// 'map', 'transform', 'select', or 'project' function. Iterate over a list,
// performing a function on each item, and collecting the new items. Each
// function takes an item as a first argument and returns a transformed item.
// You can pass additional arguments to the function too, which is a decent poor
// man's function composition.
// (I didn't call this f-map because the term 'map' is already used in Sass to
// denote a hash or dictionary.)
@function f-apply($func, $list, $args...) {
$new-list: ();
@each $item in $list {
@nijikokun
nijikokun / about.md
Last active Dec 27, 2015
The easiest, and most comprehensible class system for JavaScript using prototypal inheritance and Object.create. Also contains an additional chaining method, that isn't required but simplifies your code. Outputs the cleanest objects as far as Class Systems go.
View about.md

Hello,

After looking for a simple Class system in JavaScript, and looking at all the horrible libraries, forced upon terrible syntax, cluttered objects and prototypes... I'd like to introduce a simple alternative.

This is a very bare-bones, and yet one of the more powerful class systems in JavaScript. Built on-top of Object.create and prototype inheritance using the methods that everyone suggests is the best way to do classes in JavaScript ported over to a nicer syntax.

It doesn't clutter the properties or the prototype aside from a single method which is extends, and even this method is sugar and not required!

Check out zoo.js for an in-depth example of how to use Class. No matter how deep down the rabbit hole you go, it should keep references so you can do instanceof checks on children of a parent of a grand-parent and so forth.

@james2doyle
james2doyle / scrollTo.js
Last active Sep 24, 2020
a native scrollTo function in javascript that uses requestAnimationFrame and easing for animation
View scrollTo.js
// easing functions http://goo.gl/5HLl8
Math.easeInOutQuad = function (t, b, c, d) {
t /= d/2;
if (t < 1) {
return c/2*t*t + b
}
t--;
return -c/2 * (t*(t-2) - 1) + b;
};
View frontend-tools.md

Articles, Styletiles & Styleguide

Frameworks

View dci.js
// allows easily making an Actor with a Role
// if it's already an actor the context will be attached.
Object.defineProperty(Object.prototype, "as", {enumerable: false, value : function(role){
// this will add a role to the object
if(this.__isActor__) {
this.__addRole__(role);
return this;
}
// if this is not an actor -
@davatron5000
davatron5000 / gist:2254924
Created Mar 30, 2012
Static Site Generators
View gist:2254924

Backstory: I decided to crowdsource static site generator recommendations, so the following are actual real world suggested-to-me results. I then took those and sorted them by language/server and, just for a decent relative metric, their Github Watcher count. If you want a heap of other projects (including other languages like Haskell and Python) Nanoc has the mother of all site generator lists. If you recommend another one, by all means add a comment.

Ruby

You can’t perform that action at this time.