kangax

console.highlight = function(text, sample) {
  var escapedSample = sample.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  var reSample = new RegExp(escapedSample, 'g');
  var args = [''];
  var highlightedText = text.replace(reSample, function(match) {
    args.push('background-color: #ffc', 'background-color: none');
    return '%c' + match + '%c';
  });
  args[0] = highlightedText;
  console.log.apply(console, args);

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

gulpfile.js

'use strict';
// generated on 2014-06-20 using generator-gulp-webapp 0.1.0

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

// load plugins
var $ = require('gulp-load-plugins')();

rodneyrehm

some tools for diagrams in software documentation

Diagrams For Documentation

Obvious Choices

• Graphviz
• Pandoc

ASCII

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

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] {

rauchg

Effective transpiling of ES6

After publishing my article on ECMAScript 6, some have reached out to ask how I exactly I make it all work.

I refrained from including these details on the original post because they're subject to immiment obsoletion. These tools are changing and evolving quickly, and some of these instructions are likely to become outdated in the coming months or even weeks.

The main tool

When evaluating the available transpilers, I decided to use 6to5, which has recently been renamed to Babel. I chose it based on:

nolanlawson

// Promise.all is good for executing many promises at once
Promise.all([
  promise1,
  promise2
]);

// Promise.resolve is good for wrapping synchronous code
Promise.resolve().then(function () {
  if (somethingIsNotRight()) {
    throw new Error("I will be rejected asynchronously!");

bevacqua

<table>
  <thead>
    <tr>
      <th>PID</th>
      <th>Level</th>
      <th>Message</th>
      <th>When</th>
    </tr>
  </thead>

AllThingsSmitty

.nav-tab {
  ...
  // instead of putting it on
  border-right: 1px solid #424242;
  &:last-child {
    border-right: 0; // and then taking it off
  }
  // use CSS not() to only apply to the elements you want
  &:not(:last-child) {
    border-right: 1px solid #424242;