thegitfather

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

bartholomej

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - desktop (default grid)
   1024-768    - tablet landscape
   768-480     - tablet 
   480-less    - phone landscape & smaller
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }
 
@media all and (min-width: 768px) and (max-width: 1024px) { }

SleepWalker

var touchstartX = 0;
var touchstartY = 0;
var touchendX = 0;
var touchendY = 0;

var gesuredZone = document.getElementById('gesuredZone');

gesuredZone.addEventListener('touchstart', function(event) {
    touchstartX = event.screenX;
    touchstartY = event.screenY;

domenic

This article has been given a more permanent home on my blog. Also, since it was first written, the development of the Promises/A+ specification has made the original emphasis on Promises/A seem somewhat outdated.

You're Missing the Point of Promises

Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style:

getTweetsFor("domenic", function (err, results) {
 // the rest of your code goes here.

paulirish

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];

certainlyakey

//does not work with colors containing alpha
@function encodecolor($string) {
	@if type-of($string) == 'color' {
        $hex: str-slice(ie-hex-str($string), 4);
        $string:unquote("#{$hex}");
    }
    $string: '%23' + $string;
	@return $string;
}

dalgard

// Always return an array of DOM elements
function queryAll(selector) {
  var id_sel = selector.match(/^#([\w-]*)$/),
      class_sel = !id_sel && selector.match(/^\.([\w-]+)$/),
      tag_sel = !class_sel && selector.match(/^[\w-]+$/);

  if (id_sel) {
    var elem = document.getElementById(id_sel[1]);
    return (elem ? [elem] : []);  // Always return an array
  }

cletusw

{
  // http://eslint.org/docs/rules/

  "ecmaFeatures": {
    "binaryLiterals": false,                    // enable binary literals
    "blockBindings": false,                     // enable let and const (aka block bindings)
    "defaultParams": false,                     // enable default function parameters
    "forOf": false,                             // enable for-of loops
    "generators": false,                        // enable generators
    "objectLiteralComputedProperties": false,   // enable computed object literal property names

dustinboston

/* This is a small sampling of the various approaches to media queries. The 
   point is: they're all over the board. Part of the "issue" (if you can call
   it that) may be due to the intended audience of each site/framework. Another
   may be that it's really difficult to test for a lot of different devices.
   Regardless, it would be really nice if there was standard baseline that 
   could be used as a starting point for maximum compatibility and coverage. */

/* ==========================================================================
   Frameworks
   ========================================================================== */

hurjas

/**
 * Return a timestamp with the format "m/d/yy h:MM:ss TT"
 * @type {Date}
 */

function timeStamp() {
// Create a date object with the current time
  var now = new Date();

// Create an array with the current month, day and time