jonbuda

/*
  A Revised Font Stack
  from A Way Back
  http://www.awayback.com/revised-font-stack/

*/



/*

ilkka

module Jekyll
  class TagCloudTag < Liquid::Tag
    safe = true
    
    def initialize(tag_name, text, tokens)
      super
    end

    def render(context)
      html = ""

dannygarcia

// Sample grunt-jekyll grunt.js file
// https://github.com/dannygarcia/grunt-jekyll

/*global module:false*/
module.exports = function(grunt) {

	// Project configuration.
	grunt.initConfig({

		jekyll: {

bergantine

img:hover {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
} 

img {

willurd

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000

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;

exogen

// Put this file at ~/Library/KeyBindings/DefaultKeyBinding.dict
// You may need to run: mkdir ~/Library/KeyBindings
{
    "~[" = (insertText:, "\U2018"); // Option-[ inserts left single quote
    "~]" = (insertText:, "\U2019"); // Option-] inserts right single quote
    "~{" = (insertText:, "\U201c"); // Option-Shift-[ inserts left double quote
    "~}" = (insertText:, "\U201d"); // Option-Shift-] inserts right double quote
}

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

coopy

Good Git Practices

1. Commit often!

• Each commit in a final pull request should contain one logical change, and tests + checks should run.
• While you're working on a branch, you should commit often, but you don't have to follow these rules. Instead, once your work is complete, you can use interactive rebase or reset to create new, better organized commits.

2. Squashing commits: No rebase required

claus

Mobile Safari's 100% Height Dilemma

Whether you're developing a web application with native-ish UI, or just a simple modal popup overlay that covers the viewport, when it comes to making things work on iDevices in Mobile Safari, you're in for a decent amount of pain and suffering. Making something "100% height" is not as easy as it seems.

This post is a collection of Mobile Safari's gotchas and quirks on that topic, some with solutions and fixes, some without, in good parts pulled from various sources across the internets, to have it all in one place. Things discussed here apply to iOS8, iOS9 and iOS10.

The Disappearing Browser Chrome

Screen real estate on smartphones is limited, so Mobile Safari collapses the browser chrome (address bar and optional tab bar at the top, and tool bar at the bottom) when the user scrolls down. When you want to make something span exactly the height of the viewport, or pin something to the bottom of the screen, this can get tricky because the viewport changes size (or