gblazex

IMPORTANT

Please duplicate this radar for a Safari fix! 
This will clean up a 50-line workaround.

  rdar://22376037 (https://openradar.appspot.com/radar?id=4965070979203072)

//////////////////////////////////////////////////////////////////////////////

(Now available as a standalone repo.)

branneman

Better local require() paths for Node.js

Problem

When the directory structure of your Node.js application (not library!) has some depth, you end up with a lot of annoying relative paths in your require calls like:

const Article = require('../../../../app/models/article');

Those suck for maintenance and they're ugly.

Possible solutions

tobek

/* open up chrome dev tools (Menu > More tools > Developer tools)
 * go to network tab, refresh the page, wait for images to load (on some sites you may have to scroll down to the images for them to start loading)
 * right click/ctrl click on any entry in the network log, select Copy > Copy All as HAR
 * open up JS console and enter: var har = [paste]
 * (pasting could take a while if there's a lot of requests)
 * paste the following JS code into the console
 * copy the output, paste into a text file
 * open up a terminal in same directory as text file, then: wget -i [that file]
 */

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

emilebosch

  def mixin(name, &block)
    @mixins ||= {}
    @mixins[name] = block

    method = %{
      def #{name}(*args, &block)
        call_mixin(:#{name}, *args, &block)
      end    
    }
    eval(method)

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

bobbygrace

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

---

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

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;

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

BinaryMuse

import express from "express";

/**
 * Takes a route handling function and returns a function
 * that wraps it after first checking that the strings in
 * `reserved` are not part of `req.body`. Used for ensuring
 * create and update requests do not overwrite server-generated
 * values.
 */
function checkReservedParams(routeHandler, ...reserved) {