Brad Dougherty bdougherty

Hashtag abuse

Three or more hashtags.

#[^#]+#[^#]+#

Long hashtags (15+ characters): #hashtagpunchline

Web Performance Power Tool: HTTP Archive (HAR) - blog post with video and details about the projects we covered.

The HAR Show GDL episode on YouTube

HAR Spec: http://www.softwareishard.com/blog/har-12-spec/
HTTP Archive (powered by HAR files): www.httparchive.org
HAR Viewer: http://code.google.com/p/harviewer/

This article has been given a more permanent home on my blog. Also, since it was first written, the development of the Promises/A+ specification has made the original emphasis on Promises/A seem somewhat outdated.

You're Missing the Point of Promises

Promises are a software abstraction that makes working with asynchronous operations much more pleasant. In the most basic definition, your code will move from continuation-passing style:

getTweetsFor("domenic", function (err, results) {
 // the rest of your code goes here.

Snow in canvas land

Other people's code is awful, and your own code from months previous counts as someone else's. With this and the festive spirit in mind, I dug up a canvas snow demo I made two years ago to see how bad my code really was.

Turns out the performance landscape has changed quite a bit, but after applying a couple of workarounds, best practices, and memory management, I got the demo running smoother than it ever did.

Ugh, I can't believe I just wrote "performance landscape". Anyway...

How does the demo work?

I'm having trouble understanding the benefit of require.js. Can you help me out? I imagine other developers have a similar interest.

From Require.js - Why AMD:

The AMD format comes from wanting a module format that was better than today's "write a bunch of script tags with implicit dependencies that you have to manually order"

I don't quite understand why this methodology is so bad. The difficult part is that you have to manually order dependencies. But the benefit is that you don't have an additional layer of abstraction.

	<!doctype html>
	<html>
	<head>

	<title>CSS Media Check</title>

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

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../libs/mocha.css" type="text/css" media="screen" title="no title" charset="utf-8">
	</head>
	<body>
	<div id="mocha"></div>
	<script src="../libs/mocha.js" type="text/javascript" charset="utf-8"></script>

	<script language="JavaScript" type="text/javascript">
	// Comcast Cable Communications, LLC Proprietary. Copyright 2012.
	// Intended use is to display browser notifications for critical and time sensitive alerts.
	var SYS_URL='/e8f6b078-0f35-11de-85c5-efc5ef23aa1f/aupm/notify.do';
	// var image_url='http://servicealerts.comcast.net:8080/images/mt';
	var image_url='http://xfinity.comcast.net/constantguard/BotAssistance/notice/images';
	var headertext1='<strong>Comcast Courtesy Notice</strong>';
	var textline1='You have reached 90% of your <b>monthly data usage allowance</b>.';
	var textline2='Please sign in for more information and to remove this alert.';
	var acknowledgebutton='<a href=\"#\" onClick="document.location.href=\''+SYS_URL+'?dispatch=redirect&redirectName=login&paramName=bmUid\'" title="Sign in to acknowledge" style="color: #FFFFFF;"><img alt="Sign in to acknowledge" src="'+image_url+'/mt_signin.png"/></a>';

	// javascript:var%20style%20=%20%27*%20{-webkit-font-smoothing:%20auto%20!important}%27;var%20link_element%20=%20document.createElement(%27link%27);link_element.rel%20=%20%27stylesheet%27;link_element.href%20=%20%27data:text/css,%27%20+%20escape(style);document.getElementsByTagName(%22head%22)[0].appendChild(link_element);

	var style = '* {-webkit-font-smoothing: auto !important}';
	var link_element = document.createElement('link');
	link_element.rel = 'stylesheet';
	link_element.href = 'data:text/css,' + escape(style);
	document.getElementsByTagName("head")[0].appendChild(link_element);

	function whichTransitionEvent(){
	var t;
	var el = document.createElement('fakeelement');
	var transitions = {
	'transition':'transitionend',
	'MSTransition':'msTransitionEnd',
	'MozTransition':'transitionend',
	'WebkitTransition':'webkitTransitionEnd'
	}