bogvsdev

{% set the_image = item.content['#field_collection_item'].field_featurette_image %}
<img src="{{ file_url(the_image.entity.uri.value) }}" alt="{{ the_image.alt }}" title="{{ the_image.title }}">

or

<img src="{{file_url(node.field_hotel_image.entity.uri.value)}}" alt="3242">

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

cuth

Debug Horizontal Scroll

(function (d) {
    var w = d.documentElement.offsetWidth,
        t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
 if (b.right > w || b.left < 0) {

patik

@mixin breakpoint($size: "", $maxWidth: false) {
    @if $size == "" {
        $size: 20em; // Put your "main" or most-used breakpoint here to use it as a default
    }

    // Default, `min-width` media query
    @if $maxWidth == false {
        @media (min-width: $size) { @content; }
    }
    // Alternative `max-width` media query

davatron5000

Make it useful

• Install Package Control. For SublimeText 2, paste the following in Terminal:

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

From here on out, use Package Control to install everything. ⌘+Shift+P, then type Install to get a list of installable packages you can 'livesearch through. After installing plugins, they should be running.

PaulKinlan

(function() { 
  var CSSCriticalPath = function(w, d, opts) {
    var opt = opts || {};
    var css = {};
    var pushCSS = function(r) {
      if(!!css[r.selectorText] === false) css[r.selectorText] = {};
      var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
      for(var i = 0; i < styles.length; i++) {
        if(!!styles[i] === false) continue;
        var pair = styles[i].split(": ");

esteinborn

<?php 
  $part = '[node:field_episode_part]'; // First we assign the tokenized value to a new PHP variable

  $partstring = '[node:' . 'field_episode_part]'; // Sometimes, especially when you are running a mass-update, you need to check for the literal string value, but you need to split it up in order for token to not intercept the value

  if((empty($part)) || ($part == $partstring)) { // Next, we check if that new variable is an empty string OR it equals the literal token string value
    return; // It is good form to return, even if your code returns no value. 
  } else { 
    return " (Part " . $part . ")"; // The formatted string that will be returned. 
  }

cowboy

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>author</key>
	<string>Jacob Rus</string>
	<key>comment</key>
	<string>Created by Jacob Rus.  Based on ‘Slate’ by Wilson Miner</string>
	<key>name</key>
	<string>Cowboy - Presentation</string>

rmurphey

What's wrong with Netmag's "Optimize your JavaScript" post

Update: The original post on Netmag has been updated since this was written.

I tweeted earlier that this should be retracted. Generally, these performance-related articles are essentially little more than linkbait -- there are perhaps an infinite number of things you should do to improve a page's performance before worrying about the purported perf hit of multiplication vs. division -- but this post went further than most in this genre: it offered patently inaccurate and misleading advice.

Here are a few examples, assembled by some people who actually know what they're talking about (largely Rick Waldron and Ben Alman, with some help from myself and several others from the place that shall be unnamed).

Things that are just plain wrong

thulstrup

$sprites: sprite-map("sprites/*.png");
$sprites-retina: sprite-map("sprites-retina/*.png");

@mixin sprite-background($name) {
  background-image: sprite-url($sprites);
  background-position: sprite-position($sprites, $name);
  background-repeat: no-repeat;
  display: block;
  height: image-height(sprite-file($sprites, $name));
  width: image-width(sprite-file($sprites, $name));