trepmal

<?php
/*
Plugin Name: Toggle Debug
Description: Proof-of-concept for an admin-bar debug mode toggle. Needs some UX love.
*/
/*
// In wp-config.php, wrap debug constants in a cookie conditional
if ( isset( $_COOKIE['wp-debug'] ) && $_COOKIE['wp-debug'] == 'on' ) {
	define('WP_DEBUG', true);
}

bendc

const shuffle = (arr, mixed = [], pool = arr.slice()) => {
  const remaining = pool.length;
  if (!remaining) return mixed;
  const index = Math.floor(Math.random() * remaining);
  const el = pool.splice(index, 1).pop();
  mixed.push(el);
  return shuffle(arr, mixed, pool);
};

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

MadeByMike

/* To add more icons just copy these three lines */

.icon-tomato,
.icon-left-tomato:before,
.icon-right-tomato:after{
	background-image:  url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/131442/tomato.svg);
}

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)); };

akras14

Git Cheat Sheet

Commands

Getting Started

git init

or

bendc

function car() {
  return {
    start: function() {
      console.log("Engine on.")
    },
    accelerate: function() {
      console.log("Let's go!")
    }
  }
}

ericelliott

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

p3t3r67x0

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

frontendbeast

<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);