https://wellcaffeinated.net/projects/

1
2
3<!doctype html>
4<!--[if IEMobile 7 ]><html class="no-js iem7"> <![endif]-->
5<!--[if IE 7 ]><html lang="en" dir="ltr" class="no-js ie7 oldie"> <![endif]-->
6<!--[if IE 8 ]><html lang="en" dir="ltr" class="no-js ie8 oldie"> <![endif]-->
7<!--[if IE 9 ]><html lang="en" dir="ltr" class="no-js ie9"> <![endif]-->   
8<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" dir="ltr" class="no-js"> <!--<![endif]-->
9<head>
10    <meta charset="utf-8">
11    <!-- DNS prefetching -->
12    <link rel="dns-prefetch" href="//ajax.googleapis.com">
13    <link rel="dns-prefetch" href="//apis.google.com">
14    <link rel="dns-prefetch" href="//wellcaffeinated.disqus.com">
15    <link rel="dns-prefetch" href="//mediacdn.disqus.com">
16    <link rel="dns-prefetch" href="//plus.google.com">
17    <link rel="dns-prefetch" href="//plusone.google.com">
18    <link rel="dns-prefetch" href="//ssl.gstatic.com">
19    <link rel="dns-prefetch" href="//s.ytimg.com">
20    <link rel="dns-prefetch" href="//www.forkosh.com">
21    
22
23    <title>Projects | Well Caffeinated</title>
24
25    
26    <meta name="description" content="a blend of web development, science, education, and coffee">
27    
28    
29    <meta name="keywords" content="Jasper, Palfree, web, development, dance, coffee, physics, science" />
30      
31    <meta name="author" content="Jasper Palfree" />
32
33    <meta name="google-site-verification" content="mwSOMkBFE0Fivuk_9FXgV0XZBmmFvuCX51H4D9lTKxw" />
34
35    <meta name="HandheldFriendly" content="True">
36    <meta name="MobileOptimized" content="320">
37    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
38
39    <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="atom.xml" />
40
41    <!--icons-->
42    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/themes/wellcaffeinated/img/h/apple-touch-icon.png">
43    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/themes/wellcaffeinated/img/m/apple-touch-icon.png">
44    <link rel="apple-touch-icon-precomposed" href="/assets/themes/wellcaffeinated/img/l/apple-touch-icon-precomposed.png">
45    <link rel="shortcut icon" href="/assets/themes/wellcaffeinated/favicon.ico">
46
47    <meta http-equiv="cleartype" content="on">
48    <!--Google fonts--> 
49    <!-- didn't make the cut: Arimo, Antic -->
50    <link href="https://fonts.googleapis.com/css?family=Inconsolata|Alice|Metrophobic" rel='stylesheet' type='text/css'>
51
52    <!--styles-->
53    <link rel="stylesheet" href="https://yandex.st/highlightjs/7.3/styles/github.min.css">
54    <link rel="stylesheet" href="/assets/themes/wellcaffeinated/css/main.css?_v=1.0.1" media="screen" type="text/css" />
55    <link rel="stylesheet" href="/assets/themes/wellcaffeinated/css/print.css?_v=1.0.1" media="print" type="text/css" />
56
57    <!-- scripts -->
58    <!--[if !(IE)]><!-->
59    

59<script defer src="/assets/themes/wellcaffeinated/js/vendor/helper.js" type="text/javascript"></script>

59
60    <!--<![endif]-->
61
62    

62<script src="/assets/themes/wellcaffeinated/js/vendor/modernizr.custom.js?_v=1.0.1"></script>

62
63    
64    

64<script data-main="/assets/themes/wellcaffeinated/js-build/boot-index" src="/assets/themes/wellcaffeinated/js-build/vendor/require.js?_v=1.0.1"></script>

64
65    
66
67</head>
68<body>
69<div id="container" class="container-fluid">
70    <header id="header" class="row-fluid">
71        <div class="outer">
72            <div class="inner">
73                <h1 id="site-logo"><a href="/"><span>Well</span> Caffei&shy;nated</a></h1>
74                <div class="intro"><p>a blend of web development, science, education, and coffee</p></div>
75            </div> <!-- .inner -->
76        </div>  <!-- .outer --> 
77    </header> <!-- #header -->
78    <nav id="nav-area" class="row-fluid">
79        <div class="outer">
80            <div class="inner">
81                <nav id="nav">
82                    <h1 class="hidden">navigation</h1>
83                    <ul>
84                        
85
86
87
88<li class="page-blog "><a href="/">Blog</a></li>
89<li class="page-projects active"><a href="/projects">Projects</a></li>
90<li class="page-portfolio "><a href="/portfolio">Bio/Portfolio</a></li>
91
92
93                    </ul>
94                    <a class="logo" href="/">Well Caffeinated</a>
95                </nav> <!-- #nav -->
96            </div> <!-- .inner -->
97        </div> <!-- .outer --> 
98    </nav> <!-- #subnav -->
99    <div id="middle" class="row-fluid outer">
100        <div class="span8 inner">
101            <section id="main">
102                
103
104<article>
105    <header>
106        <h1><a href="/projects/">Projects</a></h1>
107    </header>
108    
109    <div class="content">
110        
111
112
113<ul>
114
115
116
117
118
119  
120  
121    
122  
123
124  
125    
126  
127
128  
129    
130  
131
132  
133    
134  
135
136  
137    
138  
139
140  
141
142  
143    
144  
145
146  
147    
148  
149
150  
151    
152  
153
154  
155    
156  
157
158  
159
160  
161    
162  
163
164  
165    
166  
167
168  
169    
170
171      
172        
173        
174      	<li class="page-youtube subtitle explorer"><a href="/projects/youtube-subtitle-explorer">YouTube Subtitle Explorer</a></li>
175      	
176      
177
178    
179  
180
181  
182    
183  
184
185  
186    
187  
188
189  
190    
191  
192
193  
194    
195  
196
197  
198    
199  
200
201  
202    
203  
204
205  
206    
207  
208
209  
210    
211  
212
213  
214    
215  
216
217  
218    
219  
220
221  
222    
223  
224
225  
226    
227  
228
229  
230    
231  
232
233
234
235
236
237
238
239</ul>
240    </div>
241</article>
242
243
244            </section> <!-- #main -->
245        </div><!-- .inner-->
246        <aside id="sidebar" class="span4">
247                
248                <p class="icons backToTop"><a href="#" class="icon uparrow">Back to top</a></p>
249
250                <input type="text" placeholder="search" id="search-box" />
251
252                <p><a href="http://feeds.feedburner.com/wellcaffeinated" class="icon rss" title="RSS Feed" rel="nofollow" target="_blank">Subscribe via RSS</a></p>
253
254                or find me on...
255                <div class="share">
256                    <a href="//twitter.com/wellcaffeinated" target="_blank" class="icon twitter clps" title="Twitter">Twitter</a>
257                    <a href="//ca.linkedin.com/in/wellcaffeinated" target="_blank" class="icon linkedin clps" title="LinkedIn">LinkedIn</a>
258                    <a href="//plus.google.com/u/0/107472175678866696243?rel=author" class="icon googleplus clps" target="_blank" title="Google+">Google+</a>
259                </div>
260
261                <p>Like the articles? Consider buying me a coffee... </p>
262                <p>
263                    <iframe style="vertical-align: bottom; border: 0; margin: 0; padding: 0;"
264                    src="https://www.gittip.com/wellcaffeinated/widget.html"
265                    width="48pt" height="22pt"></iframe>
266                    <a href="http://flattr.com/thing/892371/Well-Caffeinated-web-development" target="_blank">
267                        <img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" />
268                    </a>
269                </p>
270
271                <!-- twitter -->
272                <a class="twitter-timeline" data-link-color="#AE3737" height="400" href="https://twitter.com/wellcaffeinated" data-widget-id="281453746578395136">Tweets by @wellcaffeinated</a>
273                <!-- /twitter -->
274
275                <h3>Recent Articles</h3>
276                <ul class="recentArticlesList">
277                    
278                        
279                    
280                        
281                    
282                        
283                    
284                        
285                    
286                        
287                    
288                        
289                    
290                        
291                    
292                        
293                    
294                        
295                    
296                        
297                    
298                </ul>
299        </aside> <!-- #sidebar -->
300    </div><!-- .outer -->
301    <footer id="footer" class="row-fluid">
302        <div class="outer">
303            <div class="inner">
304
305                <div class="span8">
306
307                    <p>
308                        <a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">

308<img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" class="creative-commons-licence" /></a><br />
309                        <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Well Caffeinated</span> by 
310                        <a xmlns:cc="http://creativecommons.org/ns#" href="https://wellcaffeinated.net" property="cc:attributionName" rel="cc:attributionURL">Jasper Palfree</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a>.
311                    </p>
312
313                    <p>Responsive Design and Development by <a rel="author" href="/cdn-cgi/l/email-protection#caa0abb9baafb88abdafa6a6a9abacacafa3a4abbeafaee4a4afbe">Jasper Palfree</a></p>
314                    <p>
315                        <iframe style="vertical-align: bottom; border: 0; margin: 0; padding: 0;"
316                    src="https://www.gittip.com/wellcaffeinated/widget.html"
317                    width="48pt" height="22pt"></iframe>
318                        <a href="http://flattr.com/thing/892371/Well-Caffeinated-web-development" target="_blank">
319                            <img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" />
320                        </a>
321                    </p>
322                    
323
324                    
325                </div>
326
327                <div class="span4">
328                    
329                    <h5>Contact</h5>
330
331                    <ul class="contact unstyled">
332                        <li><a rel="author" target="_blank" href="/cdn-cgi/l/email-protection#5832392b283d2a182f3d34343b393e3e3d3136392c3d3c76363d2c" class="icon email">email</a></li>
333                        <li><a href="//twitter.com/wellcaffeinated" target="_blank" class="icon twitter" title="Twitter">Twitter</a></li>
334                        <li><a href="//ca.linkedin.com/in/wellcaffeinated" class="icon linkedin" target="_blank" title="LinkedIn">LinkedIn</a></li>
335                        <li><a href="//plus.google.com/u/0/107472175678866696243?rel=author" target="_blank" class="icon googleplus" title="Google+">Google+</a></li>
336                    </ul>
337                </div>
338            </div>
339        </div>
340    </footer><!-- #footer -->
341</div> <!-- #container -->

341
342
343<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

343<script>
344    // <![CDATA[
345    if(window.MBP){
346        window.onload = function(){
347            MBP.scaleFix();
348        };
349    }
350    // ]]>
351</script>

351
352
353
354
355
356  

356<script type="text/javascript">
357  var _gaq = _gaq || [];
358  _gaq.push(['_setAccount', 'UA-28341644-1']);
359  _gaq.push(['_trackPageview']);
360
361  (function() {
362    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
363    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
364    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
365  })();
366</script>

366
367
368
369
370

371<script src="https://yandex.st/highlightjs/7.3/highlight.min.js"></script>

371

372<script>hljs.initHighlightingOnLoad();</script>

372
373

374<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

374

375<script>window.MathJax || document.write('

375<script src="/assets/themes/wellcaffeinated/js/vendor/MathJax.js"><\/script>')</script>

375
376

377<script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script>

377

378<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50884fe340c4ef63"></script>

378
379

380<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

380
381
382<!--[if lte IE 8]>
383  

383<script type="text/javascript" src="/assets/themes/wellcaffeinated/js/vendor/selectivizr-min.js"></script>

383
384<![endif]-->
385
386<!--[if lt IE 7]>
387    <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
388<![endif]-->

389<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"37b521bb6c9c47ee9d94e7114422767e","r":1,"spa":2}' crossorigin="anonymous"></script>

389
390</body>
391</html>