<!doctype html>
<html lang="en">
	<head>
		
		

		<meta charset="utf-8">

		<title>Type/Code - from 2010 till &infin;</title>

		<meta name='author' content='Type/Code' />
		<meta name='description' content='Type/Code is a studio of designers and developers based in Dumbo, Brooklyn. We invent, communicate, build, and refine things with ambitious clients who want to bring powerful ideas to life.' />
		<meta name='keywords' content='type/code, typecode, typeslashcode, type code, design, web, development, frontend, front-end, interaction, interactive, studio, firm, dumbo, brooklyn, new york, new york city, nyc, parsons, princeton, instream, slated, slated.com, moma, google, currents, google currents, hops, hops chart, hopschart, voxpop, itsalmost, itsalmo.st, its almost, ian lord, andrew mahon, lev kanter, zeke shore, tyler madsen' />

		<meta property="og:title" content="Type/Code - from 2010 till &infin;"/>
		<meta property="og:type" content="website"/>
		<meta property="og:url" content="http://typecode.com/"/>
		<meta property="og:image" content="http://typecode.com/static/img/tc-logo-square.png"/>
		<meta property="og:site_name" content="Type/Code"/>
		<meta property="og:description" content="Type/Code is a studio of designers and developers based in Dumbo, Brooklyn. We invent, communicate, build, and refine things with ambitious clients who want to bring powerful ideas to life."/>

		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		
		<link rel="shortcut icon" type="images/png" href="/static/favicon.png"/>

		<link rel="alternate" type="application/rss+xml" title="Type/Code Blog RSS" href="/rss" />

		
		<link rel="stylesheet" href="/static/css/reset.css?v=43">
		<link rel="stylesheet" href="/static/symbolset/ss-standard.css">
		<link rel="stylesheet" href="/static/symbolset/ss-social.css">
		<link rel="stylesheet" href="/static/css/deviceframe.css?v=43">
		<link rel="stylesheet" href="/static/css/main.css?v=43">
		<link rel="stylesheet" href="/static/css/mobile.css?v=43">
		

		
		<!-- jQuery 1.8.1, Hosted Locally -->
		<script src="/static/js/lib/jquery-1.8.1.min.js?v=43"></script>
		

		<!--[if lt IE 9]>
			<script src='/static/js/lib/html5shiv.js'></script>
		<![endif]-->
		
		<!-- Typekit -->
		<script src="http://use.typekit.com/kmb8qqs.js"></script>
		<script>try{Typekit.load();}catch(e){}</script>

		<!-- jQuery Easing 1.3 -->
		<script src="/static/js/lib/jquery.easing.1.3.js?v=43"></script>

		<!-- jQuery ImagesLoaded plugin -->
		<script src="/static/js/lib/jquery.imagesloaded.min.js?v=43"></script>

		<!-- glMatrix - Stupidly Fast Matrix Math https://github.com/toji/gl-matrix -->
		<script src="/static/js/lib/gl-matrix/gl-matrix-min.js?v=43"></script>

		<!-- Video Support -->
		<script src="/static/js/lib/fitVids.js"></script>

		<!-- Autosize -->
		<script src="/static/js/lib/autosize.js"></script>

		<!-- Google Prettify -->
		<script src="/static/js/lib/prettify/prettify.js"></script>

		<!-- jQuery Mousewheel Plugin v3.0.6 - from https://github.com/brandonaaron/jquery-mousewheel -->
		<script src="/static/js/lib/jquery-mousewheel-3.0.6/jquery.mousewheel.min.js?v=43"></script>

		<!-- jQuery.ScrollTo v1.4.2 - from http://flesler.blogspot.com/2007/10/jqueryscrollto.html -->
		<script src="/static/js/lib/jquery.scrollTo-1.4.2-min.js?v=43"></script>

		<!-- WebGL-Debug - from http://www.khronos.org/webgl/wiki/Debugging -->
		<script src="/static/js/lib/webgl-debug.js?v=43"></script>

		<!-- Type/Code Libraries -->
		<script src="/static/js/lib/typecode-js/lib/tc.seed.js?v=43"></script>
		<script src="/static/js/lib/typecode-js/lib/tc.app.js?v=43"></script>
		<script src="/static/js/lib/typecode-js/lib/tc.anim_util.js?v=43"></script>
		<script src="/static/js/lib/typecode-js/lib/tc.validation.js?v=43"></script>
		<script src='/static/js/lib/typecode-js/lib/tc.color.js?v=43'></script>

		<script src='/static/js/lib/typecode-js/lib/tc.overlay.js?v=43'></script>

		<script src="/static/js/lib/typecode-js/lib/tc.field.js?v=43" ></script>
		<script src="/static/js/lib/typecode-js/lib/field/tc.field.dropdown.js?v=43" ></script>
		<script src="/static/js/lib/typecode-js/lib/field/tc.field.std.js?v=43" ></script>
		<script src="/static/js/lib/typecode-js/lib/field/tc.field.autocomplete.js?v=43" ></script>
		<script src="/static/js/lib/typecode-js/lib/field/tc.field.counter.js?v=43" ></script>
		<script src="/static/js/lib/typecode-js/lib/field/tc.field.hint.js?v=43" ></script>
		<script src="/static/js/lib/typecode-js/lib/field/tc.field.simple_tooltip.js?v=43" ></script>
		<script src="/static/js/lib/typecode-js/lib/field/tc.field.validator.js?v=43" ></script>

		<script src="/static/js/lib/typecode-js/lib/tc.merlin.js?v=43" ></script>
		<script src="/static/js/lib/typecode-js/lib/merlin/tc.merlin.csrf.js?v=43" ></script>
		<script src="/static/js/lib/typecode-js/lib/merlin/tc.merlin.data.js?v=43" ></script>

		

		<script>
			window.console = NI.app.getConsole(true);
			window.page = {
				classes:{},
				features:[]
			};
			window._gaq = null;
			
				window.page.GOOGLE_MAPS_API_KEY = "AIzaSyD4kj1RKFyT3YZmzlwx3NPrtlB_JmHSU-Y";
			
		</script>

		
			<script>
				var _gaq = _gaq || [];
				_gaq.push(['_setAccount', 'UA-34917662-1']);
				_gaq.push(['_setDomainName', 'typecode.com']);
				_gaq.push(['_trackPageview']);
				(function() {
					var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
					ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
					var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
				})();
			</script>
		

		

	</head>
	<body class="">

	<!--[if lte IE 7]>
		<div class="shit-browser-overlay">
			<div class="xFull region">
				<div class="the-logo"></div>
				<div class="the-error">
					<div class="bigtext"><span class="first-letter">A</span>las!</div>
					<div class="description">
						<p>The browser you are using is not supported. Please upgrade to a newer version of Internet Explorer, or better yet, get one of these awesome &amp; free browsers: <a href="http://www.google.com/chrome" target="_blank">Google Chrome</a> or <a href="http://www.firefox.com" target="_blank">Mozilla Firefox</a>.</p>
					</div>
				</div>
			</div>
		</div>
	<![endif]-->

	

		<div id="page">

			<script src="/static/js/data/data.squares.array.js?v=43" ></script>	
			<script src="/static/js/modules/mod.particles.Context.js?v=43"></script>
			<script src="/static/js/modules/mod.particles.Particle3D.js?v=43"></script>

			<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 aVertexPosition;
	attribute vec3 aVertexNormal;
	//attribute vec2 aTextureCoord;
	attribute vec4 aVertexColor;
	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;
	uniform mat3 uNMatrix;
	uniform vec3 uAmbientColor;
	uniform vec3 uLightingDirection;
	uniform vec3 uDirectionalColor;
	uniform bool uUseLighting;
	varying vec3 vLightWeighting;
	varying vec4 vColor;

	void main(void) {
		gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
		vColor = aVertexColor;
		if(!uUseLighting){
			vLightWeighting = vec3(1.0, 1.0, 1.0);
		} else {
			vec3 transformedNormal = uNMatrix * aVertexNormal;
			float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
			vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
		}
	}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
	precision mediump float;
	//varying vec2 vTextureCoord;
	varying vec3 vLightWeighting;
	varying vec4 vColor;
	uniform sampler2D uSampler;
	//uniform float uAlpha;

	void main(void) {
		float perspective_far = 1.45;
		float density = 1.75;
		float z = 1.2 - (gl_FragCoord.z / gl_FragCoord.w) / perspective_far;
		float fog_factor = density * z;
		fog_factor = clamp(fog_factor, 0.0, 1.0);
		vec4 frag_color = vec4(vColor.rgb, 1.0);
		vec4 fog_color = vec4(0.95, 0.95, 0.95, 0.0);
		gl_FragColor = mix(fog_color, frag_color, fog_factor);
	}
</script>

			<script src='/static/js/modules/mod.splash.js?v=43'></script>
			<script src='/static/js/modules/mod.SplashParticles.js?v=43'></script>
			<script>
				this.page.features.push(function(app){

					app.runtime.splash_particles = new page.classes.SplashParticles({
						$e:$('#mod-particles'),
						app:app,
						hidden: true
					});

					app.runtime.splash = new page.classes.Splash({
						$e:$('#headland'),
						app:app,
						hidden: true
					});
				});
			</script>
			<div id="headland" class="region">
					<div class="splash">
						<div id='mod-particles'>
							<div class='scrim'></div>
						</div>
					</div>

					
						<div class='bar'>

							<div class='xFull clearfix'>
								<div class="logo" style='opacity:0.0;'>
									<a href="/" class='js-use-pushstate'><span>Type/Code</span></a>
								</div>

								<div class="tagline" style='opacity:0.0;'>
									We design things and make them come to life.
								</div>

								<ul class="nav">
									<li class="item work"><a id='main-nav-work' href="/work/" class='js-use-pushstate'><span>Work</span></a></li>
									<li class="item about"><a id='main-nav-about' href="/about/" class='js-use-pushstate'><span>About</span></a></li>
									<li class="item blog"><a id='main-nav-blog' href="/blog/" class='js-use-pushstate'><span>Blog</span></a></li>
								</ul>

								<select class="mobile-nav">
									<option value="" class="empty-selection">Go to&hellip;</option>
									<option value="/work/">Work</option>
									<option value="/about/">About</option>
									<option value="/blog/">Blog</option>
								</select>

							</div>
						</div>
					

					<div class="nav-indicator">
						<div class='nav-indicator-left'></div>
						<div class='nav-indicator-arrow'></div>
						<div class='nav-indicator-right'></div>
					</div>
				
			</div>

			<script src='/static/js/modules/mod.util.js?v=43'></script>
			<script src='/static/js/modules/mod.Pages.js?v=43'></script>

			<script src='/static/js/modules/mod.PortfolioPage.js?v=43'></script>

			<script src='/static/js/modules/mod.Blog.js?v=43'></script>
			<script src='/static/js/modules/mod.BlogPost.js?v=43'></script>
			<script src='/static/js/modules/mod.Map.js?v=43'></script>
			<script>
				this.page.features.push(function(app){

					if(window.history && window.history.pushState){
						
					}

					app.runtime.pages = new page.classes.Pages({
						$e:$('#mainland'),
						first_step:'blog',
						app:app
					});
				});
			</script>

			<div id='merlin-viewport'>
				<div id='mainland' class='region'>

					<div style='display:none' class='step splash'></div>
					<div style='display:none' class='step work'>
						
							<div class="spinner">
								<div class="tier">
									<img src="/static/img/spinner2_32_ffffff.gif">
								</div>
							</div>
						
					</div>
					<div style='display:none' class='step about'></div>
					<div style='display:none' class='step blog'>
						

	<div class="content-container">
		<div id='section-blog' class='xFull'>

			<div class='page-controls'>
				<a href='#' style='display:none;' class='prev-page page-btn' title="previous posts"><!--<span>previous posts</span>--><div class="spinner"><!--<span>loading the previous 5 posts</span>--><img src="/static/img/spinner2_32_ffffff.gif" alt='loading the previous 5 posts' /></div></a>
			</div>

			<div class='page-container clear'>
				
					<div class="blog-page" data-direction='1' data-n_posts='5' data-more_posts='True'>
	
		
				
	
	

	<article class="post lorem" id="perspectives-base-studio" data-published_datetime='2012-09-23T02:06:57'>

		<div class="main">
			<h1>
				<a href='/blog/perspectives-base-studio/' class='js-use-pushstate'>Perspectives by BASE studio</a>
				<a class="permalink-trigger ss-link ss-standard" href="/blog/perspectives-base-studio/" class='js-use-pushstate'></a>
			</h1>
			<h3>
			
				<strong>Zeke Shore</strong> &middot; 
			
			
				September 23rd, 2012
			
			&middot; <a  href='#perspectives-base-studio-comments' class='toggle-comments'><span>3 Comments</span></a>
			</h3>
			<div class="tags">
			
			</div>
			<div class="body">
			
				<p><img src="http://typecode.com/static/uploads/blog/base_perspectives.jpg" alt="perspectives" /></p>
<p>International design studio <a href="http://www.basedesign.com/">BASE</a> has an awesome video side-project called <a href="http://www.basedesign.com/basemotion/perspectives/index.html">Perspectives</a>. Interviewees don’t actually say anything, leaving only body language, pauses for thought, and interjections to do the communicating.</p>
			
			
			</div>
		</div>

		

		<a class="bottom toggle-comments">
			<div class='toggle'>
				<div></div>
			</div>
			<span>
				3 Comments
			</span>
		</a>

		<div class="comments" id='perspectives-base-studio-comments'>
			<div class="stream">
				



	

<div class='xFull blog-specific comment'>
	<div class="meta">
		<h3><strong><a href='http://www.liveeventpaintings.com/'>Gail Fitzpatrick</a></strong> commented on October 5, 2012 8:24PM</h3>
	</div>
	<section>
		<p><p>So addictive. I want a way to do one of myself...</p></p>
	</section>
</div>

	

<div class='xFull blog-specific comment'>
	<div class="meta">
		<h3><strong><a href='http://12mo.com/'>MAKR</a></strong> commented on November 19, 2012 4:38AM</h3>
	</div>
	<section>
		<p><p>all to me? thx</p></p>
	</section>
</div>

	

<div class='xFull blog-specific comment'>
	<div class="meta">
		<h3><strong><a href='http://typecode.com/blog/'>xcxzc</a></strong> commented on December 10, 2012 5:15AM</h3>
	</div>
	<section>
		<p><p>fsdfsdf</p></p>
	</section>
</div>

			</div>
			<div class='comment-form merlin'>
				<div class='step form'>
					<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='klHDzPtABHu22z7IUrNSCbPYHlSmxbOH' /></div>
					<div class="tier">
						<div class="box"><input id="id_name" type="text" name="name" maxlength="50" /></div>
						<div class="box"><input type="text" name="email" id="id_email" /></div>
						<div class="box"><input type="text" name="url" id="id_url" /></div>
					</div>
					<div class="tier">
						<div class="tc-field">
							<textarea id="id_comment" rows="10" cols="40" name="comment"></textarea>
							<span class="count"></span>
						</div>
						<input type="hidden" name="content_type" value="blog.post" id="id_content_type" />
						<input type="hidden" name="object_pk" value="42" id="id_object_pk" />
						<input type="hidden" name="timestamp" value="1356966776" id="id_timestamp" />
						<input type="hidden" name="security_hash" value="78b8c7d0676f1abd7aa99d2096965ae978076ab9" id="id_security_hash" />
						<p class='markdown-notice'>You can use <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>.</p>
					</div>
					<div class="tier">
						<a href='#' class='comment-form-next btn'>Submit</a>
					</div>
				</div>
				<div class='step saving'>
					<div>
						<p>Saving Comment&hellip;</p>
					</div>
				</div>
				<div class='step thanks'>
					<div>
						<p>Thanks for your comment!</p>
					</div>
				</div>
			</div>
		</div>

		<script>
			(function() {
				var $e;
				if(typeof app != 'undefined'){
					$e = $('#perspectives-base-studio');
					if (! $e.attr("data-initialized")) {
						new page.classes.BlogPost({
							$e: $e,
							app: app,
							comment_form_target: '/comments/post/'
						});
					}
				} else {
					page.features.push(function(app){
						$e = $('#perspectives-base-studio');
						if (! $e.attr("data-initialized")) {
							new page.classes.BlogPost({
								$e: $e,
								app: app,
								comment_form_target: '/comments/post/'
							});
						}
					});
				}
			}());
		</script>

	</article>

	
		
				
	
	

	<article class="post lorem" id="manhattan-bridge" data-published_datetime='2012-06-15T21:16:18'>

		<div class="main">
			<h1>
				<a href='/blog/manhattan-bridge/' class='js-use-pushstate'>Manhattan Bridge</a>
				<a class="permalink-trigger ss-link ss-standard" href="/blog/manhattan-bridge/" class='js-use-pushstate'></a>
			</h1>
			<h3>
			
				<strong>Zeke Shore</strong> &middot; 
			
			
				June 15th, 2012
			
			&middot; <a style='display:none;' href='#manhattan-bridge-comments' class='toggle-comments'><span>0 Comments</span></a>
			</h3>
			<div class="tags">
			
			</div>
			<div class="body">
			
				<p><img src="http://typecode.com/static/uploads/blog/bridge.jpg" alt="Manhattan Bridge" /></p>
<p>Our studio looks out over the Manhattan bridge… this is what it was starting to look like on June 5th, 1908. via <a href="http://twitter.com/idaimages">@idaimages</a></p>
			
			
			</div>
		</div>

		

		<a class="bottom toggle-comments">
			<div class='toggle'>
				<div></div>
			</div>
			<span>
				Add a Comment
			</span>
		</a>

		<div class="comments" id='manhattan-bridge-comments'>
			<div class="stream">
				



			</div>
			<div class='comment-form merlin'>
				<div class='step form'>
					<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='klHDzPtABHu22z7IUrNSCbPYHlSmxbOH' /></div>
					<div class="tier">
						<div class="box"><input id="id_name" type="text" name="name" maxlength="50" /></div>
						<div class="box"><input type="text" name="email" id="id_email" /></div>
						<div class="box"><input type="text" name="url" id="id_url" /></div>
					</div>
					<div class="tier">
						<div class="tc-field">
							<textarea id="id_comment" rows="10" cols="40" name="comment"></textarea>
							<span class="count"></span>
						</div>
						<input type="hidden" name="content_type" value="blog.post" id="id_content_type" />
						<input type="hidden" name="object_pk" value="30" id="id_object_pk" />
						<input type="hidden" name="timestamp" value="1356966776" id="id_timestamp" />
						<input type="hidden" name="security_hash" value="b6f29c299a73ba6c7ed096c780b7828cb49f2cf7" id="id_security_hash" />
						<p class='markdown-notice'>You can use <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>.</p>
					</div>
					<div class="tier">
						<a href='#' class='comment-form-next btn'>Submit</a>
					</div>
				</div>
				<div class='step saving'>
					<div>
						<p>Saving Comment&hellip;</p>
					</div>
				</div>
				<div class='step thanks'>
					<div>
						<p>Thanks for your comment!</p>
					</div>
				</div>
			</div>
		</div>

		<script>
			(function() {
				var $e;
				if(typeof app != 'undefined'){
					$e = $('#manhattan-bridge');
					if (! $e.attr("data-initialized")) {
						new page.classes.BlogPost({
							$e: $e,
							app: app,
							comment_form_target: '/comments/post/'
						});
					}
				} else {
					page.features.push(function(app){
						$e = $('#manhattan-bridge');
						if (! $e.attr("data-initialized")) {
							new page.classes.BlogPost({
								$e: $e,
								app: app,
								comment_form_target: '/comments/post/'
							});
						}
					});
				}
			}());
		</script>

	</article>

	
		
				
	
	

	<article class="post lorem" id="stroopwafel" data-published_datetime='2012-01-26T02:08:26'>

		<div class="main">
			<h1>
				<a href='/blog/stroopwafel/' class='js-use-pushstate'>Stroopwafel</a>
				<a class="permalink-trigger ss-link ss-standard" href="/blog/stroopwafel/" class='js-use-pushstate'></a>
			</h1>
			<h3>
			
				<strong>Ian Lord</strong> &middot; 
			
			
				January 26th, 2012
			
			&middot; <a  href='#stroopwafel-comments' class='toggle-comments'><span>2 Comments</span></a>
			</h3>
			<div class="tags">
			
			</div>
			<div class="body">
			
				<p><img src="http://typecode.com/static/uploads/blog/stroopwafel.png" alt="Stroopwafel" /></p>
			
			
			</div>
		</div>

		

		<a class="bottom toggle-comments">
			<div class='toggle'>
				<div></div>
			</div>
			<span>
				2 Comments
			</span>
		</a>

		<div class="comments" id='stroopwafel-comments'>
			<div class="stream">
				



	

<div class='xFull blog-specific comment'>
	<div class="meta">
		<h3><strong><a href='http://typecode.com/'>Zeke Shore</a></strong> commented on September 24, 2012 2:08PM</h3>
	</div>
	<section>
		<p><p>Yeah, we eat a lot of these.</p></p>
	</section>
</div>

	

<div class='xFull blog-specific comment'>
	<div class="meta">
		<h3><strong><a href='http://www.rodesk.nl/'>Laurens</a></strong> commented on October 16, 2012 10:48AM</h3>
	</div>
	<section>
		<p><p>We eat a lot of those as well, typical Dutch product :-) Thanks again for your stickers, very very cool you send them to us, respect. </p></p>
	</section>
</div>

			</div>
			<div class='comment-form merlin'>
				<div class='step form'>
					<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='klHDzPtABHu22z7IUrNSCbPYHlSmxbOH' /></div>
					<div class="tier">
						<div class="box"><input id="id_name" type="text" name="name" maxlength="50" /></div>
						<div class="box"><input type="text" name="email" id="id_email" /></div>
						<div class="box"><input type="text" name="url" id="id_url" /></div>
					</div>
					<div class="tier">
						<div class="tc-field">
							<textarea id="id_comment" rows="10" cols="40" name="comment"></textarea>
							<span class="count"></span>
						</div>
						<input type="hidden" name="content_type" value="blog.post" id="id_content_type" />
						<input type="hidden" name="object_pk" value="31" id="id_object_pk" />
						<input type="hidden" name="timestamp" value="1356966776" id="id_timestamp" />
						<input type="hidden" name="security_hash" value="230a9a1e243827e81d887b14909a7b32a6585891" id="id_security_hash" />
						<p class='markdown-notice'>You can use <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>.</p>
					</div>
					<div class="tier">
						<a href='#' class='comment-form-next btn'>Submit</a>
					</div>
				</div>
				<div class='step saving'>
					<div>
						<p>Saving Comment&hellip;</p>
					</div>
				</div>
				<div class='step thanks'>
					<div>
						<p>Thanks for your comment!</p>
					</div>
				</div>
			</div>
		</div>

		<script>
			(function() {
				var $e;
				if(typeof app != 'undefined'){
					$e = $('#stroopwafel');
					if (! $e.attr("data-initialized")) {
						new page.classes.BlogPost({
							$e: $e,
							app: app,
							comment_form_target: '/comments/post/'
						});
					}
				} else {
					page.features.push(function(app){
						$e = $('#stroopwafel');
						if (! $e.attr("data-initialized")) {
							new page.classes.BlogPost({
								$e: $e,
								app: app,
								comment_form_target: '/comments/post/'
							});
						}
					});
				}
			}());
		</script>

	</article>

	
		
				
	
	

	<article class="post lorem" id="ads-google" data-published_datetime='2012-01-10T01:59:13'>

		<div class="main">
			<h1>
				<a href='/blog/ads-google/' class='js-use-pushstate'>Ads @ Google</a>
				<a class="permalink-trigger ss-link ss-standard" href="/blog/ads-google/" class='js-use-pushstate'></a>
			</h1>
			<h3>
			
				<strong>Zeke Shore</strong> &middot; 
			
			
				January 10th, 2012
			
			&middot; <a style='display:none;' href='#ads-google-comments' class='toggle-comments'><span>0 Comments</span></a>
			</h3>
			<div class="tags">
			
			</div>
			<div class="body">
			
				<p><img class="small" src="http://typecode.com/static/uploads/blog/google_ads_infographic.png" /></p>
<p>Infographic we did for Google was just featured on <a href="http://mashable.com/2011/12/19/online-advertising-2011-google/">Mashable</a>. Many thanks <a href="http://www.riegner.co/">Ryan Riegner</a> for the design support. </p>
			
			
			</div>
		</div>

		

		<a class="bottom toggle-comments">
			<div class='toggle'>
				<div></div>
			</div>
			<span>
				Add a Comment
			</span>
		</a>

		<div class="comments" id='ads-google-comments'>
			<div class="stream">
				



			</div>
			<div class='comment-form merlin'>
				<div class='step form'>
					<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='klHDzPtABHu22z7IUrNSCbPYHlSmxbOH' /></div>
					<div class="tier">
						<div class="box"><input id="id_name" type="text" name="name" maxlength="50" /></div>
						<div class="box"><input type="text" name="email" id="id_email" /></div>
						<div class="box"><input type="text" name="url" id="id_url" /></div>
					</div>
					<div class="tier">
						<div class="tc-field">
							<textarea id="id_comment" rows="10" cols="40" name="comment"></textarea>
							<span class="count"></span>
						</div>
						<input type="hidden" name="content_type" value="blog.post" id="id_content_type" />
						<input type="hidden" name="object_pk" value="32" id="id_object_pk" />
						<input type="hidden" name="timestamp" value="1356966776" id="id_timestamp" />
						<input type="hidden" name="security_hash" value="f4a0380fded7000920a8b591791936e20e61852c" id="id_security_hash" />
						<p class='markdown-notice'>You can use <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>.</p>
					</div>
					<div class="tier">
						<a href='#' class='comment-form-next btn'>Submit</a>
					</div>
				</div>
				<div class='step saving'>
					<div>
						<p>Saving Comment&hellip;</p>
					</div>
				</div>
				<div class='step thanks'>
					<div>
						<p>Thanks for your comment!</p>
					</div>
				</div>
			</div>
		</div>

		<script>
			(function() {
				var $e;
				if(typeof app != 'undefined'){
					$e = $('#ads-google');
					if (! $e.attr("data-initialized")) {
						new page.classes.BlogPost({
							$e: $e,
							app: app,
							comment_form_target: '/comments/post/'
						});
					}
				} else {
					page.features.push(function(app){
						$e = $('#ads-google');
						if (! $e.attr("data-initialized")) {
							new page.classes.BlogPost({
								$e: $e,
								app: app,
								comment_form_target: '/comments/post/'
							});
						}
					});
				}
			}());
		</script>

	</article>

	
		
				
	
	

	<article class="post lorem" id="how-magazine" data-published_datetime='2011-12-22T01:58:21'>

		<div class="main">
			<h1>
				<a href='/blog/how-magazine/' class='js-use-pushstate'>How Magazine</a>
				<a class="permalink-trigger ss-link ss-standard" href="/blog/how-magazine/" class='js-use-pushstate'></a>
			</h1>
			<h3>
			
			
				December 22nd, 2011
			
			&middot; <a  href='#how-magazine-comments' class='toggle-comments'><span>1 Comment</span></a>
			</h3>
			<div class="tags">
			
			</div>
			<div class="body">
			
				<p><img src="http://typecode.com/static/uploads/blog/luc_how_1.jpg" /></p>
<p><img src="http://typecode.com/static/uploads/blog/luc_how_2.jpg" /></p>
<p>via <a href="http://www.loveandwar.com">Love and War</a>, New York:</p>
<blockquote>
<p><em><a href="http://www.paganandsharp.com">Lucas Sharp</a> is one of ‘16 inspiring young creatives’ in HOW magazine this month - proud of the entire TypeCode crew and looking forward to more collaborations in 2012!</em></p>
</blockquote>
<p>(Source: <a href="http://www.paganandsharp.com">paganandsharp.com</a>)</p>
			
			
			</div>
		</div>

		

		<a class="bottom toggle-comments">
			<div class='toggle'>
				<div></div>
			</div>
			<span>
				1 Comment
			</span>
		</a>

		<div class="comments" id='how-magazine-comments'>
			<div class="stream">
				



	

<div class='xFull blog-specific comment'>
	<div class="meta">
		<h3><strong><a href='http://kkirilukdesign.wix.com/graphics'>Kevin</a></strong> commented on October 3, 2012 5:38PM</h3>
	</div>
	<section>
		<p><p>Woah! Loving the wood design for the front cover and typography. It really highlights the magazine.</p></p>
	</section>
</div>

			</div>
			<div class='comment-form merlin'>
				<div class='step form'>
					<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='klHDzPtABHu22z7IUrNSCbPYHlSmxbOH' /></div>
					<div class="tier">
						<div class="box"><input id="id_name" type="text" name="name" maxlength="50" /></div>
						<div class="box"><input type="text" name="email" id="id_email" /></div>
						<div class="box"><input type="text" name="url" id="id_url" /></div>
					</div>
					<div class="tier">
						<div class="tc-field">
							<textarea id="id_comment" rows="10" cols="40" name="comment"></textarea>
							<span class="count"></span>
						</div>
						<input type="hidden" name="content_type" value="blog.post" id="id_content_type" />
						<input type="hidden" name="object_pk" value="33" id="id_object_pk" />
						<input type="hidden" name="timestamp" value="1356966776" id="id_timestamp" />
						<input type="hidden" name="security_hash" value="098b502b2377edb92c2a96795d65d261bbb6a90d" id="id_security_hash" />
						<p class='markdown-notice'>You can use <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>.</p>
					</div>
					<div class="tier">
						<a href='#' class='comment-form-next btn'>Submit</a>
					</div>
				</div>
				<div class='step saving'>
					<div>
						<p>Saving Comment&hellip;</p>
					</div>
				</div>
				<div class='step thanks'>
					<div>
						<p>Thanks for your comment!</p>
					</div>
				</div>
			</div>
		</div>

		<script>
			(function() {
				var $e;
				if(typeof app != 'undefined'){
					$e = $('#how-magazine');
					if (! $e.attr("data-initialized")) {
						new page.classes.BlogPost({
							$e: $e,
							app: app,
							comment_form_target: '/comments/post/'
						});
					}
				} else {
					page.features.push(function(app){
						$e = $('#how-magazine');
						if (! $e.attr("data-initialized")) {
							new page.classes.BlogPost({
								$e: $e,
								app: app,
								comment_form_target: '/comments/post/'
							});
						}
					});
				}
			}());
		</script>

	</article>

	
		
	
</div>
				
			</div>

			<div class='page-controls'>
				<a href='#' style='display:none;' class='next-page page-btn'><!--<span>next posts</span>--><div class="spinner"><!--<span>loading the next 5 posts</span>--><img src="/static/img/spinner2_32_ffffff.gif"></div></a>
			</div>

			<script>
				if(typeof app != 'undefined'){
					app.runtime.blog = new page.classes.Blog({
						$e: $('#section-blog'),
						app: app
					});
				} else {
					this.page.features.push(function(app){
						app.runtime.blog = new page.classes.Blog({
							$e: $('#section-blog'),
							app: app
						});
					});
				}
			</script>

		</div>

	</div>

	<div id="footland" class="region footland">
	<div class="xFull lorem">
		<div class="xWide">
			<div class="tagline text">
				We design things and make them come to life.
			</div>
			<div class="mail text">
				<a href="mailto:hello@typecode.com">hello@typecode.com</a>
			</div>
		</div>
		<div class="address text">
			20 Jay Street, Suite 924, Brooklyn, NY 11201
		</div>
	</div>
</div><!-- end #footland -->


					</div>
				</div><!-- end #mainland -->
			</div><!-- end #merlin-viewport -->

		</div><!-- end #page -->

		<p class='particle-ui' style="position: fixed; right: 5px; bottom: 5px; z-index: 1000; ">Build #: 43</p>

		<script src='/static/js/modules/mod.Reactor.js?v=43'></script>
		<script src='/static/js/modules/mod.PushStateHelper.js?v=43'></script>
		<script src='/static/js/modules/mod.DeviceFrameManager.js?v=43'></script>
		<script src='/static/js/modules/mod.LinkManager.js?v=43'></script>
		<script>

			this.page.features.push(function(app){
				app.runtime.reactor = new page.classes.Reactor({
					app:app
				});
				
				app.runtime.pushstate_helper = new page.classes.PushStateHelper({
					app:app,
					use_hash: (window.history && window.history.pushState ? false : true)
				});

				app.runtime.device_frame_manager = new page.classes.DeviceFrameManager({
					app:app
				});

				app.runtime.link_manager = new page.classes.LinkManager({
					app: app
				});
			});
		
			jQuery(document).one('ready', function() {
				window.app = new NI.App({page: page});
			});
		</script>

		<!-- Symbolset -->
		<script src="/static/symbolset/ss-standard.js"></script>
		<script src="/static/symbolset/ss-social.js"></script>

		
	</body>
</html>