Patrick Haney notasausage

Working With Github Pages

The FAQ maintained by Github covers most stumbling blocks, some other tips and tricks supplied here.

Gitignore

Add _site to .gitignore. The generated site should not be uploaded to Github since its gets generated by github.

Working With Code Partials

Some early thoughts on img@srcset in the real world

Many agree that the newly proposed srcset attribute is much less syntactically intuitive than the widely appreciated picture element. I hope that the WHATWG and W3C review all of the efforts that the web dev community have put into the picture element proposal in their own community group and go back on this recent addition.

Syntax aside... if srcset was here to stay regardless of what we want, is there any way we could make it work in existing browsers without introducing unnecessary overhead or potentially buggy markup? At a glance, it looks shaky to me.

The main problem is request overhead, and attempting to work around that.

Given the following markup, existing browsers will prefetch/fetch the image referenced in the src attribute, and JavaScript can not prevent that request from going out. This means larger screen devices will request an unnecessary image for every imgset on a page - not good.

Share Counts

I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.

If you want to roll up all of these into a single jQuery plugin check out Sharrre

Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.

Twitter

	<style>
	/* ... */
	/--- Preheader declaration in style block in addition to inline for Outlook /
	.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
	</style>
	</head>

	<body>
	<!-- PRE-HEADER TEXT -->
	<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, & more: 75 text char limit</span>

	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<meta charset="windows-1252">
	<title>Keep webform data persistent</title>
	<!-- jQuery CDN -->
	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<style type="text/css">
	/Float the form labels to the left and allow them 40% of the width of the form/

	// Declare the color as RGB; SASS will treat this as hex
	$green: rgb(27,224,63);
	// Declare an alpha
	$alpha: .5;
	// Declare another color variable as a color with an alpha
	$greenAlpha: rgba($green, $alpha);

	body {
	/* As RGB (which SASS actually ouputs as HEX) */
	background: $green;

	<?php

	/**
	* Fix compatibility issues with The Event Calendar and Posts 2 Posts WordPress Plugins
	* Issue arrises with how nested select queries function when P2P expects a single column.
	*/

	function tribe_to_p2p_pre_get_posts_20121001( $query ){
	if(isset($query->_p2p_capture) && $query->_p2p_capture) {
	add_filter( 'posts_fields', 'tribe_to_p2p_setupFields_20121001', 20);

	tell application "System Events"
	set frontmostProcess to name of first item of (processes whose frontmost is true)
	tell process frontmostProcess
	tell window 1
	set oldSize to get size
	-- change + to - for shrinking
	-- change 100 to 5 for fine-tune mode
	set newWidth to (item 1 of oldSize) + 100
	set size to {newWidth, item 2 of oldSize}
	end tell

	<!doctype html>
	<html>
	<head>

	<title>CSS Media Check</title>

	<style type="text/css">
	#mediaquery{
	-webkit-transition: width .001s;
	-moz-transition: width .001s;

	#!/usr/bin/env sh

	##
	# This is script with usefull tips taken from:
	# https://github.com/mathiasbynens/dotfiles/blob/master/.osx
	#
	# install it:
	# curl -sL https://raw.github.com/gist/2108403/hack.sh \| sh
	#