Skip to content

Instantly share code, notes, and snippets.

Bran van der Meer branneman

Block or report user

Report or block branneman

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
@branneman
branneman / scale.js
Last active Nov 26, 2015
Map a value in a range to another range
View scale.js
/**
* Map a value in a domain to a value in a range
*/
function scale(domainMin, domainMax, value, rangeMin, rangeMax) {
var perc = (value - domainMin) / (domainMax - domainMin)
return ((rangeMax - rangeMin) * perc) + rangeMin
}
scale(50, 100, 75, 100, 200) //=> 150
scale(10, 110, 50, 200, 300) //=> 240
@branneman
branneman / mixin-before-after.scss
Last active Dec 16, 2015
SASS Mixin — Single/double colon generated content
View mixin-before-after.scss
@mixin before-after {
@if $old-ie {
&:before, &:after {
@content;
}
} @else {
&::before, &::after {
@content;
}
}
@branneman
branneman / _rem.scss
Last active Dec 24, 2015
Sass (scss) rem function and mixin. Based on and improved upon: https://github.com/bitmanic/rem
View _rem.scss
//
// Sass rem function and mixin
// https://gist.github.com/branneman/6762906
// Based on and improved upon https://github.com/bitmanic/rem
//
// Baseline, measured in pixels
// The value should be the same as the font-size value for the html element
// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
// then the variable below would be 10px.
@branneman
branneman / articles.js
Last active Dec 30, 2015
Example code style I use of a Node.js module. Uses @felixge's Node Style Guide and some more conventions on naming and formatting.
View articles.js
//
// Articles controller
// Optional module description line.
//
'use strict';
var fs = require('fs');
var path = require('path');
@branneman
branneman / howto.md
Last active Jan 3, 2016
Howto install Ruby & DevKit on Windows
View howto.md

Howto install Ruby & DevKit on Windows

  1. Install Ruby 2, x64
    inside a directory without spaces

  2. Install a matching Ruby DevKit, instructions here
    inside a directory without spaces

  3. Install extra dependencies:

@branneman
branneman / 0-usage.js
Last active Jan 25, 2016
JavaScript Mixins
View 0-usage.js
/**
* Original class
*/
class Todo {
constructor(name) {
this.name = name || 'Untitled';
this.done = false;
}
do() {
this.done = true;
@branneman
branneman / _position.scss
Last active Apr 5, 2016
[Sass] Mixin to provide short-hand positioning syntax
View _position.scss
//
// Mixin to provide short-hand positioning syntax
// https://gist.github.com/branneman/9248961
//
// Usage:
// @include position(0 false 0 20rem);
// @include position(absolute, 0 false 0 20rem);
//
@mixin position ($position: relative, $coordinates: 0 0 0 0) {
View getElementCoordinates.js
/**
* @param {HTMLElement} element - The element's coordinates to calulate
* @param {HTMLElement} relativeElement - An optional relative element, defaults to `document.body`
* @returns {{ offsetY: Number, offsetX: Number }}
*/
const getElementCoordinates = function(element, relativeElement = document.body) {
const relativeRect = relativeElement.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
const offsetY = elementRect.top - relativeRect.top;
const offsetX = elementRect.left - relativeRect.left;
@branneman
branneman / getFormElementValue.js
Last active Apr 22, 2016
getFormElementValue() - Returns the value of a form element, given it's name and type
View getFormElementValue.js
/**
* getFormElementValue()
* Returns the value of a form element, given it's name and type
*
* @param {String} name - An element's `name=""` attribute
* @param {String} type - An element type string, e.g. 'text', 'radio', 'select'
* @returns {String|Boolean}
*/
const getFormElementValue = (function(){
const getElement = name => document.querySelector('[name="' + name + '"]');
@branneman
branneman / detects-flexbox.js
Last active May 12, 2016
Feature detect Flexbox support with JavaScript
View detects-flexbox.js
define(function() {
var cssomPrefixes = 'Moz O ms Webkit'.split(' ');
var modElem = {
elem: document.createElement('modernizr')
};
var mStyle = {
style: modElem.elem.style
};
You can’t perform that action at this time.