Skip to content

Instantly share code, notes, and snippets.

View yckart's full-sized avatar

Yannick Albert yckart

53 followers · 14 following
View GitHub Profile
@yckart
yckart / LICENSE.txt
Last active August 29, 2015 13:59 — forked from 140bytes/LICENSE.txt
Getting the document width and height in less than 140 bytes.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2014 Yannick Albert <http://yannick-albert.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
@yckart
yckart / README.md
Last active August 29, 2015 14:06
A simple function to get the viewport-dimensions, including some pre-calculated values.
Property Description
ww Window Width
wh Window Height
dw Document Width
dh Document Height
pw Page Width
ph Page Height
fw Factor Width (A value between 0-1, which represents the percentage-value)
fh Factor Height (A value between 0-1, which represents the percentage-value)
@yckart
yckart / README.md
Created October 16, 2014 10:39
Helpful utility to get array-items based on indexOf. 
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
function take (item, array, context) {
@yckart
yckart / README.md
Last active August 29, 2015 14:07
A nice way to go through an array, step by step. 
var array = [1, 2, 3, 4, 5, 6, 7, 8];
var iterator = 0;

console.log( array.slice(iterator, iterator += 1) ); // => [1]
console.log( array.slice(iterator, iterator += 2) ); // => [2, 3]
console.log( array.slice(iterator, iterator += 3) ); // => [4, 5, 6]

The usage, with the utility-function below, is quite simple:

@yckart
yckart / LICENSE.txt
Last active August 29, 2015 14:10 — forked from 140bytes/LICENSE.txt
Polyfill for "Object.is" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Polyfill
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2015 Yannick Albert <http://yannick-albert.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
@yckart
yckart / README.md
Last active August 29, 2015 14:12
Fast property naming, by hand.

Try to rename these properties, right in this kind of fashion:

this._x = this.x;  =>  this.x = this._x;
this._y = this.y;  =>  this.y = this._y;
this._w = this.w;  =>  this.w = this._w;
this._h = this.h;  =>  this.h = this._h;

Read and sort horizontal, as usually.

@yckart
yckart / README.md
Last active August 29, 2015 14:12
Unchanging Array Functions

I had the need for some simplicity, to work with methods like push, pop, shift, unshift from Arrays prototype, that do not change itself.

Concept

The basic concept would look like something like this. I just implemented some basic methods to illustrate my thoughts. However, there are more possibilities. Read the note below.

Array#pop

array = array.slice(0, -1);
@yckart
yckart / README.md
Last active August 29, 2015 14:13
The most important notes from http://lamb.cc/typograph/, for me.

Base font size

Most users won’t adjust their browser’s font settings, so the most common default font-size – the one to generally design against – is 16px. For some texts, this size works well, for others, something larger or smaller might be more suitable.

Regardless, the font-size of the <body> should be declared using the % unit of measure, even if the value is 100%. For example, to set the main text, on average, to 12px, use the following expression (keeping in mind that 12px is 75% of 16px)

Base line height

Whenever possible, line-height values should be set as a number, without any units. Applied to the <body> element, this will insure consistency in the proportion of line-height throughout the document, regardless of variations to font-size.

For example, if the <body> line-height is set to 1.25, then the computed line-height will always be 1.25 × the font-size of the element, unless stated otherwise. If the <body> font-size is set to 100%, it will typically have a computed siz

@yckart
yckart / index.html
Last active August 29, 2015 14:14
SASS/SCSS Coloury
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a class="button button--gold">Pushy</a>
<a class="button button--crimson">Hazey</a>
<hr>
@yckart
yckart / README.md
Last active August 29, 2015 14:16
SASS Type Lib