paulirish

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

chriscoyier

How WordPress Plugins Should Handle Front End Resources

This is a WORK IN PROGRESS intended for fleshing out and feedback

It's very common for people to be unhappy with how a WordPress plugin adds front end resources to their site. If a plugin needs CSS, the plugin will add a <link> element to that CSS. If the plugin needs JavaScript, it will add a <script> to that JavaScript.

Plugins do this because it works. It's damn important for a WordPress plugin to work, even in adverse conditions. They rightfully want good ratings and little customer support.

But this comes at the cost of additional HTTP requests. In optimizing front end performance of a site, reducing the number of HTTP requests is a huge thing. Front end developers want to decide and control how front end resources are being handled, and WordPress plugins don't typically make this easy on them.

neoswf

<!-- 
    Image is a 87px height & 200px width long.
    I'm calling an image from DB, but if it fails to load, im listening to the Error event, and than call an image from DB.
    Big thing here is this guy: `onerror="this.href.baseVal='pathTo_placeholder_fallback_image'"`
    
    `this.href.baseVal`
    
    This guy enables you to overright the SVG image source, with the fallbacl one.
-->

bfillmer

// Liked what Chris Coyier showed off in this blog post:
// http://codepen.io/chriscoyier/blog/some-mini-sass-mixins-i-like
// Decided to make LESS versions really quickly.

.coverer() {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

jacobdubail

@mixin center-align($dir: false) {
	$map: (
		top:  ( Y ),
		left: ( X )
	);

	@if map_get($map, $dir) != null {
		#{$dir}: 50%;
		transform: #{"translate#{map_get($map,$dir)}(-50%)"};
	} @else {

hdragomir

<script type="text/javascript">
    (function () {
      "use strict";
      // once cached, the css file is stored on the client forever unless
      // the URL below is changed. Any change will invalidate the cache
      var css_href = './index_files/web-fonts.css';
      // a simple event handler wrapper
      function on(el, ev, callback) {
        if (el.addEventListener) {
          el.addEventListener(ev, callback, false);

funzeye

<figure>
  <?php 
  $image = get_field('your_image_field_name');
  $atts = array(
    'imageid' => $image, 
    'size1' => '0', 
    'size2' =>'600', 
    'size3' =>'1000'
  );  
  echo tevkori_responsive_shortcode($atts) ; ?>              

ruandre

/***************************
 NOT MAINTAINED! from ~2014
****************************/

// cs4+ script for resizing objects proportionally to fit inside artboard
// based on: https://forums.adobe.com/message/4164590
// usage: create a new document with desired artboard size, paste object, select it, run this script
// bugs: centering does not work after changing artboard size

var activeDoc = app.activeDocument

travismillerweb

/*

Sass - Line On Side Headers

Reference Link: http://css-tricks.com/line-on-sides-headers/

Implementation Example: <h1 class="fancy"><span>Title</span></h1>

*/

getify

// the old way :/

$.ajax({
  url: "http://codepen.io/chriscoyier/pen/b2ad8b9a336845dd7b11d4bed34f4256.html",
  complete: function(resp) {
    
    // This HTML needs to be there first
    $("body").append(resp.responseText);
    
    // Because this script is going to do something with it.