chriseppstein

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

mathewbyrne

function slugify(text)
{
  return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}

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'];

tbranyen

// Get the argument names from a given function
Function.prototype.args = function() {
  // First match everything inside the function argument parens
  var args = this.toString().match(/function\s.*?\(([^)]*)\)/)[1];

  // Split the arguments string into an array comma delimited
  return args.split(", ").map(function(arg) {
    // Ensure no inline comments are parsed and trim the whitespace
    return arg.replace(/\/\*.*\*\//, "").trim();
  }).filter(function(arg) {

liamcurry

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

ekrembk

function otomatikBul() {
	// Browser desteğini kontrol et
	if( ! navigator.geolocation ) {
		console.log( 'Broserınız desteklemiyor. Lütfen manual seçim yapınız.' );

		return;
	}

	// Uyarı
	console.log( 'Koordinatlar alınıyor...' );

alexcican

/* future proof retina targetting */
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx), {

}

paulirish

// starting with current element, look up the DOM ancestor tree to see if anything matches the given selector

// returns element if found
// returns false if not found

function closest(elem, selector) {

   var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector;

    while (elem) {

matthiasg

/* Side notes for calling out things
-------------------------------------------------- */

/* Base styles (regardless of theme) */
.bs-callout {
  margin: 20px 0;
  padding: 15px 30px 15px 15px;
  border-left: 5px solid #eee;

ademilter

/**
* 1. http://www.paulirish.com/2012/box-sizing-border-box-ftw/
*    http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*    http://fatihhayrioglu.com/css3-box-sizing-ozelligi/
*
* 2. http://aestheticallyloyal.com/public/optimize-legibility/
*
* 3. http://maxvoltar.com/archive/-webkit-font-smoothing
*
* 4. http://maximilianhoffmann.com/posts/better-font-rendering-on-osx