eyecatchup

# Block Skype ads
127.0.0.1 *.msads.net
127.0.0.1 *.msecn.net
127.0.0.1 *.rad.msn.com
127.0.0.1 a.ads2.msads.net
127.0.0.1 ac3.msn.com
127.0.0.1 ad.doubleclick.net
127.0.0.1 adnexus.net
127.0.0.1 adnxs.com
127.0.0.1 ads1.msn.com

wilddeer

Невероятные приключения флексбокса в фаерфоксе

• Блок с прокруткой в вертикальном флексбоксе не работает — ставить max-height: 100% на контейнер
• word-wrap: break-word не работает внутри флексбокса — спасает min-width: 0 на элементе флексбокса (overflow-x: hidden тоже работает)
• Флексбокс не работает на кнопке — класть внутрь блок и на нем делать флексбокс
• Элемент флексбокса с ellipsis расфигачивает все по ширине — min-width: 0 на флексбокс / max-width: 100% на самого верхнего разъехавшегося родителя
• Элементы флексбокса не выравниваются по базовой линии, если внутри еще один флексбокс — использовать inline-flex

О других невероятных приключениях вы узнаете в следующей серии

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

paulirish

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

1. Launch quicktime player
2. do Screen recording

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

praveenvijayan

/*****************************************************************
 *
 * Copy Layer text 1.0 - by Praveen Vijayan! - http://www.decodize.com/
 *
 * Compatibility above Photoshop CS6
 *
 * Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
 * 
 *****************************************************************/
 

pravj

#!/usr/bin/env bash

# bash script to generate tree structure of a directory
# Pravendra Singh (@hackpravj)

pwd=$(pwd)
find $pwd -print | sed -e "s;$pwd;\.;g;s;[^/]*\/;|__;g;s;__|; |;g"

irazasyed

Homebrew Permissions Denied Issues Solution

sudo chown -R $(whoami) $(brew --prefix)/*

eyecatchup

// ABC - a generic, native JS (A)scii(B)inary(C)onverter.
// (c) 2013 Stephan Schmitz <[email protected]>
// License: MIT, http://eyecatchup.mit-license.org
// URL: https://gist.github.com/eyecatchup/6742657
var ABC = {
  toAscii: function(bin) {
    return bin.replace(/\s*[01]{8}\s*/g, function(bin) {
      return String.fromCharCode(parseInt(bin, 2))
    })
  },

mjackson

/**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSL representation