/
index.html
1987 lines (1326 loc) · 138 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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
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
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>HTML5 Hacks</title>
<meta name="author" content="Jesse Cravens and Jeff Burtoft">
<meta name="description" content="At the beginning of November, I was given an opportunity to give two talks in Malmö, Sweden at the Øredev conference. First of all, I have to say I …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://html5hacks.github.io/">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<link href="/atom.xml" rel="alternate" title="HTML5 Hacks" type="application/atom+xml">
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic
" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28132474-1']);
_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 >
<header role="banner"><hgroup>
<h1><a href="/">HTML5 Hacks</a></h1>
<h2>Hacking Next Generation Web Technologies</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:html5hacks.github.io" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">Blog</a></li>
<li><a href="/blog/archives">Archives</a></li>
<li><a href="/about">About the Hackers</a></li>
<li><a href="/training">Training</a></li>
<li><a href="/join">Join Us</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div class="blog-index">
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/12/07/html5-and-ember-dot-js-at-oredev-2013-the-arts-in-malmo/">HTML5 and Ember.js at Øredev 2013:The Arts in Malmö, Sweden</a></h1>
<p class="meta">
<time datetime="2013-12-07T23:25:00-06:00" pubdate data-updated="true">Dec 7<span>th</span>, 2013</time>
| <a href="/blog/2013/12/07/html5-and-ember-dot-js-at-oredev-2013-the-arts-in-malmo/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>At the beginning of November, I was given an opportunity to give two talks in Malmö, Sweden at the Øredev conference. First of all, I have to say I was extremely impressed with the conference. Although the theme was the Arts, I found it to be a developer’s conference with an artsy edge. The speakers I had a chance to see were developer’s developers, one of my favorites being a talk on Meteor by Chris Mather (@eventedmind) of <a href="http://eventedmind.com">eventedmind.com</a>. I’ve maintained a peripheral view of Meteor, so it was good to get a beginner to intermediate overview of its capabilities. Given that I have been doing <a href="http://www.mongodb.com/">MongoDB</a> / <a href="https://github.com/emberjs/data">Ember-data</a> client work as of lately, I am particularly interested in exploring <a href="https://github.com/slacy/minimongo">minimongo</a>.</p>
<p><img class="imgR400" alt="Øredev 2013 HTML5 Hacks" src="/images/oredev/html5hacks-oredev.jpg"></p>
<p>The city of <a href="http://en.wikipedia.org/wiki/Malm%C3%B6">Malmö</a> was also a pleasure to experience, and as you might imagine, the people of Sweden were very welcoming. One of the highlights for me was the speaker dinner at the <a href="http://en.wikipedia.org/wiki/File:Jorchr-Malm%C3%B6_r%C3%A5dhus.jpg">Malmö City Hall</a>, originally constructed in the Middle Ages. On a side note, I finally had a chance to meet and have dinner with <a href="http://www.crockford.com/">Douglass Crockford</a>, a long time inspiration and virtual mentor, who was in town to give the keynote on <a href="http://oredev.org/2013/wed-fri-conference/managing-asynchronicity-with-rq">Managing Async with RQ</a>.</p>
<iframe src="//player.vimeo.com/video/78847391" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>
<a href="http://vimeo.com/78847391">Building Web Applications with Ember.js and Ruby On Rails</a>
from
<a href="http://vimeo.com/user4280938">Øredev Conference</a>
on
<a href="https://vimeo.com">Vimeo</a>
.
</p>
<p>My first talk was a preview of my new book <a href="https://github.com/emberjsbook">O’Reilly’s Building Web Apps with Ember.js</a>. I shared the stage with co-author and fellow frog, <a href="http://bashmodernquantity.com/about/">Thomas Q. Brady</a>. We took the audience through the creation of <a href="https://github.com/emberjsbook/rocknrollcall">RocknRollCall</a>, an intermediate level <a href="http://emberjs.com/">Ember.js</a> application that fills in many of the blanks that most of the ‘Getting Started’ applications don’t.</p>
<p><img class="imgL400" alt="O'Reilly's Building Web Apps with Ember.js" src="/images/oredev/ember_cover_600.png"></p>
<p>Some of the highlights of the book, and the talk, cover topics such as: a survey of Ember tooling, debugging with the <a href="https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en">Ember Inspector</a>, Ember boilerplates, app initializers, promises in Ember, the needs API, Ember components, 3rd Party JavaScript Integration (<a href="http://jquery.com/">jQuery</a>, <a href="http://d3js.org/">D3</a>), Ember testing, SPA authentication, <a href="https://github.com/emberjs/data">Ember-data</a> and other client-side persistence solutions, and remote data persistence with Ruby On Rails and Node.js.</p>
<p>My second talk was <a href="http://html5hacks.com/">HTML5 Hacks</a> Evolved, where I continue to share more hacks from by first book <a href="http://html5hacks.com">HTML5 Hacks</a>, and <a href="http://html5hacks.com/">html5hacks.com</a>. This talk is culmination of HTML5 specifications that will have you rethinking browser-based applications. Some of the highlights of this talk included: Web Workers, WebSocket w/ GeoLocation, Device Orientation, and LeapJS, Web Components / Polymer / Ember Components (Custom Elements, Shadow DOM, HTML Imports, Model Driven Views, and Local Storage.</p>
<iframe src="//player.vimeo.com/video/78912115" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>
<a href="http://vimeo.com/78912115">HTML5 Hacks</a>
from
<a href="http://vimeo.com/user4280938">Øredev Conference</a>
on
<a href="https://vimeo.com">Vimeo</a>
.
</p>
<p>In 2014, I’m retiring the HTML5 Hacks talks, to begin focusing solely on Single Page Application development in 2014. My hope is to kick out an early release of <a href="https://github.com/emberjsbook">Building Web Apps with Ember.js</a> very soon, and finish the book in early 2014. After that I’ll be in Louisville, KY at <a href="http://www.codepalousa.com/">Code PaLOUsa</a> to continue the Ember.js roadtrip.</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/10/04/javascript-makers-how-js-is-helping-drive-the-maker-movement/">JavaScript Makers: How JS Is Helping Drive the Maker Movement</a></h1>
<p class="meta">
<time datetime="2013-10-04T19:02:00-05:00" pubdate data-updated="true">Oct 4<span>th</span>, 2013</time>
| <a href="/blog/2013/10/04/javascript-makers-how-js-is-helping-drive-the-maker-movement/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>This post is mirrored from: <a href="http://jessecravens.com/blog/2013/10/04/javascript-makers-how-js-is-helping-drive-the-maker-movement/">jessecravens.com</a></p>
<p><img class="imgR300" alt="ok200 Conference" src="/images/200ok/200ok1.jpg"></p>
<p>I spend my days writing a lot of JavaScript, and helping companies deliver ambitious UX focused applications to the web. I <a href="http://shop.oreilly.com/product/0636920026273.do?cmp=af-code-book-product_cj_9781449334994_7080585">author books</a> on the subject, blog, and <a href="http://lanyrd.com/profile/jdcravens/">speak at conferences</a> as often as I can.</p>
<p>I work for <a href="http://frogdesign.com">frog</a>, a product design firm, that for the last forty years has been helping increase the profiles of brands like Sony and Apple through iconic design.</p>
<p>I work within a culture that has deep roots into <a href="http://en.wikipedia.org/wiki/Maker_culture">the Maker Movement</a>; A culture that was making before the Maker Movement was cool, the “original makers” if you will. Written upon our walls and slide decks is the tag, <a href="https://vimeo.com/24940735">‘Love What You Make’</a>, and as you might expect many of the frogs that sit around me are craftsfolk, DIYourselfers, and tinkerers. It is not uncommon to see a flying quadcopter, a mesh sensor network of Arduinos, 3D printed prototypes, explorations in next generation gesture with the Leap Motion and Kinect, video production, motion studies, 3D modeling, along with the standard artistic mood boards and web and native mobile application wireframes. Let’s just say there is no shortage of creativity across every medium imaginable.</p>
<h2>Sharing My Craft with my Children</h2>
<p><img class="imgL300" alt="ok200 Conference - setting up" src="/images/200ok/200ok2.jpg"></p>
<p>All of that being said, I’m a parent of two young children. My little ones constantly challenge me to find ways to share quality time with them. The parents reading this know the juggling act.</p>
<p>What I try to do is architect bridges between my children’s curiosity and the passions of others that have explored their crafts in a deep way. Myself, and my wife, being the most important of those craftsfolk.</p>
<p>If I’m doing it right, when I spend time with my children, they should share in my excitement and passion. If I’m doing it wrong, I’m overwhelmed and exhausted from work. In my vision, my children should be witnessing a model of how to wake up everyday with the goal of embracing opportunity to create a combination of function and beauty within the world around them.</p>
<p><img class="imgR200" alt="Maker Faire" src="/images/200ok/Maker_Faire.gif"></p>
<p>So it is in this context, that I met up with Mozilla’s Luke Crouch, and <a href="http://makerfairetulsa.com/">Tulsa Mini Maker Faire</a>’s Scott Phillips to put together <a href="http://200ok.us/schedule/javascript-makers/">the closing keynote at the 200ok conference</a> .</p>
<h2>JavaScript Makers: How JS is Helping Drive the Maker Movement</h2>
<p>The <a href="http://200ok.us/schedule/javascript-makers/">200ok conference</a> is on track to become Oklaoma’s premier web conference attracting a sold out crowd of web professionals from all over Oklahoma and the neighboring states. Going in, I felt as though I knew my audience well. In other words, if I spoke to them about languages they would understand, JavaScript and HTML5, my message would easily resonate. I also knew that given their location, Tulsa, OK, a presentation that touched upon work life balance and family values would immediate strike a chord as well.</p>
<p>So in the spirit of authenticity, I pretended as if getting prepared for a closing keynote dependent on hacked together hardware and software demos wasn’t challenging enough; I made the decision to include my 6 year old son, Carter with a flying drone and a custom configured Minecraft server accessible over conference wifi. I knew this would ensure that the presentation dangled on the brink of disaster, mirroring the chaotic reality of both open hacking and parenting.</p>
<p>My thinking was that a presentation on this topic should be authentic, and reflect the reality of my proposition, not be an ivory tower, academic/authoritative talk about how to share your craft with your children. I also made sure to not prep Carter. With a loose structure in place, we took the stage and worked our way through a story that consisted of 12 open software and hardware demos that showcased JavaScript as a primary scripting language, and a table full of hardware that ranged from a drone, a dissected wifli helicopter and erector set, a leap motion, and numerous prototyping boards.</p>
<script async class="speakerdeck-embed" data-slide="10" data-id="78b4c9300a8801313e8202078d31cabc" data-ratio="1.2994923857868" src="//speakerdeck.com/assets/embed.js"></script>
<p>Here are some of the highlights:</p>
<h2>JavaScript and Prototyping Boards</h2>
<p>Earlier this year I did a presentation at HTML5.tx that focused on building an <a href="http://www.youtube.com/watch?v=H00_BGRkBRM">Internet of Things with JavaScript</a> and various open hardware prototyping boards such as Arduino, BeagleBone, and the Raspberry Pi. It was in that talk that I made a connection that eventually led to an introduction to Luke. So, given that the HTML5.tx content was of interest I started the presentation with a demo of the Arduino, <a href="https://github.com/rwaldron/johnny-five">Johnny Five</a>, the original Beaglebone and <a href="https://github.com/jadonk/bonescript">BoneScript</a>.</p>
<figure class='code'><figcaption><span>bonescript.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'> <span class="p">...</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">require</span><span class="p">(</span><span class="s1">'bonescript'</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">ledPin</span> <span class="o">=</span> <span class="nx">bone</span><span class="p">.</span><span class="nx">P8_3</span><span class="p">;</span>
</span><span class='line'> <span class="nx">ledPin2</span> <span class="o">=</span> <span class="nx">bone</span><span class="p">.</span><span class="nx">P8_4</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="p">...</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">app</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/motion'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">,</span> <span class="nx">next</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">[</span><span class="s1">'eventType'</span><span class="p">]);</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">'Motion data collected for '</span> <span class="o">+</span> <span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">[</span><span class="s1">'eventType'</span><span class="p">]</span> <span class="o">+</span> <span class="s1">' event'</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">[</span><span class="s1">'eventType'</span><span class="p">]</span> <span class="o">==</span> <span class="s2">"motionstart"</span><span class="p">){</span>
</span><span class='line'> <span class="nx">digitalWrite</span><span class="p">(</span><span class="nx">ledPin2</span><span class="p">,</span> <span class="nx">HIGH</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">req</span><span class="p">.</span><span class="nx">body</span><span class="p">[</span><span class="s1">'eventType'</span><span class="p">]</span> <span class="o">==</span> <span class="s2">"motionend"</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">digitalWrite</span><span class="p">(</span><span class="nx">ledPin</span><span class="p">,</span> <span class="nx">HIGH</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'>
</span></code></pre></td></tr></table></div></figure>
<h2>Nodecopter and the Leap Motion</h2>
<p>I started with the basics of the <a href="https://github.com/felixge/node-ar-drone">node-ar-drone module</a>:</p>
<figure class='code'><figcaption><span>ar-drone.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'> <span class="kd">var</span> <span class="nx">arDrone</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'ar-drone'</span><span class="p">);</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">client</span> <span class="o">=</span> <span class="nx">arDrone</span><span class="p">.</span><span class="nx">createClient</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">client</span><span class="p">.</span><span class="nx">takeoff</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">client</span>
</span><span class='line'> <span class="p">.</span><span class="nx">after</span><span class="p">(</span><span class="mi">7000</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="k">this</span><span class="p">.</span><span class="nx">animate</span><span class="p">(</span><span class="s1">'flipRight'</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span>
</span><span class='line'> <span class="k">this</span><span class="p">.</span><span class="nx">animateLeds</span><span class="p">(</span><span class="s1">'blinkRed'</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
</span><span class='line'> <span class="p">})</span>
</span><span class='line'> <span class="p">.</span><span class="nx">after</span><span class="p">(</span><span class="mi">3000</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="k">this</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
</span><span class='line'> <span class="k">this</span><span class="p">.</span><span class="nx">land</span><span class="p">();</span>
</span><span class='line'> <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>Later, a crowd favorite was mapping the gestures from the <a href="https://www.leapmotion.com/">Leap Motion</a> to the <a href="http://ardrone2.parrot.com/">Parrot AR drone</a>, so that a one finger clockwise gesture triggered a nodecopter takeoff. A counter clockwise gesture then landed it. I was able to put this together using the leapJS and node-ardrone node modules, based on some initial hacking by <a href="https://twitter.com/markuskobler">Markus Kobler</a>, where he pulled this off at a <a href="https://github.com/markuskobler/nodecopter-london">Nodecopter London event</a>.</p>
<iframe src="//player.vimeo.com/video/75616363" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p> <p><a href="http://vimeo.com/75616363">Jesse Cravens blowing minds with a JS-driven copter.</a> from <a href="http://vimeo.com/user21333523">Michael Gorsuch</a> on <a href="https://vimeo.com">Vimeo</a>.</p></p>
<h2>ScriptCraft: Running JavaScript from within Minecraft</h2>
<p><img class="imgL300" alt="ok200 Conference" src="/images/200ok/200ok3.jpg"></p>
<p>Later, I showed how to script inside of the Minecraft virtual world, using <a href="https://twitter.com/walter">Walter Higgins’</a> great <a href="https://github.com/walterhiggins/ScriptCraft">ScriptCraft library</a>. I wasn’t expecting the conference wifi, and single access point, to suffice in allowing Carter and I to interact within virtual world. I was also concerned about the dynamic IP, and having to change it on the fly, start/restart the server, etc. So I made the decision 10 minutes before to not have Carter log in, and I would just speak to the possibility instead. In true 6 year old fashion, he rebelled and logged onto my server, popping up in front of me wearing a Creeper mask, as I was mid stream explaining how to script wooden signs with his 1st grade sight words as a homework exercise.</p>
<figure class='code'><figcaption><span>sightwords.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">Drone</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="s1">'sightwords'</span><span class="p">,</span><span class="kd">function</span> <span class="p">(){</span>
</span><span class='line'>
</span><span class='line'> <span class="kd">var</span> <span class="nx">wordsArr</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"have"</span><span class="p">,</span> <span class="s2">"black"</span><span class="p">,</span> <span class="s2">"three"</span><span class="p">,</span> <span class="s2">"want"</span><span class="p">,</span> <span class="s2">"get"</span><span class="p">,</span> <span class="s2">"how"</span><span class="p">,</span> <span class="s2">"two"</span><span class="p">,</span> <span class="s2">"ten"</span><span class="p">,</span> <span class="s2">"come"</span><span class="p">,</span> <span class="s2">"went"</span><span class="p">,</span> <span class="s2">"into"</span><span class="p">,</span> <span class="s2">"know"</span><span class="p">,</span> <span class="s2">"my"</span><span class="p">,</span> <span class="s2">"do"</span><span class="p">,</span> <span class="s2">"down"</span><span class="p">,</span> <span class="s2">"who"</span><span class="p">,</span> <span class="s2">"must"</span><span class="p">,</span> <span class="s2">"let"</span><span class="p">,</span> <span class="s2">"with"</span><span class="p">,</span> <span class="s2">"red"</span><span class="p">,</span> <span class="s2">"find"</span><span class="p">,</span> <span class="s2">"will"</span><span class="p">,</span> <span class="s2">"new"</span><span class="p">,</span> <span class="s2">"live"</span><span class="p">,</span> <span class="s2">"five"</span><span class="p">,</span> <span class="s2">"you"</span><span class="p">,</span> <span class="s2">"funny"</span><span class="p">,</span> <span class="s2">"yes"</span><span class="p">,</span> <span class="s2">"no"</span><span class="p">,</span> <span class="s2">"may"</span><span class="p">];</span>
</span><span class='line'>
</span><span class='line'> <span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span><span class="nx">i</span> <span class="o"><</span> <span class="nx">wordsArr</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
</span><span class='line'> <span class="k">this</span><span class="p">.</span><span class="nx">right</span><span class="p">(</span><span class="mi">0</span><span class="o">+</span><span class="nx">i</span><span class="p">).</span><span class="nx">sign</span><span class="p">(</span><span class="nx">wordsArr</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span><span class="mi">68</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">move</span><span class="p">(</span><span class="s1">'sightwords'</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>Needless to say, his innapropriate behavior was a crowd favorite. I have to admit, it was mine as well.</p>
<p><img class="imgR300" alt="ok200 Conference" src="/images/200ok/200ok4.png"></p>
<p>Going into the talk, I knew I’d either be trying this again in the future or abandoning it as ‘one of those ideas’ that sounded good in theory, but was just not going to work. Where did I land? Well, let’s just say that Carter and I are looking for our next opportunity to share our experiences with other parents/web professionals.</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/09/06/debugging-modern-web-applications-part-1/">Debugging Modern Web Applications Part 1</a></h1>
<p class="meta">
<time datetime="2013-09-06T19:43:00-05:00" pubdate data-updated="true">Sep 6<span>th</span>, 2013</time>
| <a href="/blog/2013/09/06/debugging-modern-web-applications-part-1/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>As JavaScript-centric web applications continue to become the standard, and the browser continues to evolve into a full-featured web application platform, developers need powerful debugging tools to help quickly troubleshoot issues and fix them efficiently. Issues can range from HTML/CSS browser inconsistencies, JavaScript exceptions, and a myriad of performance issues that range from DOM access to network latency.</p>
<p>There a number of tools that web developers can use to help make debugging front end applications less painful.</p>
<p><img class="imgR400" alt="Debugging Modern Web Applications" src="http://tpstatic.com/img/usermedia/KRuw_KM2X0GCCs9xf497KA/original.png"></p>
<p>In this tutorial, we will walk through the top tools available and how to use these tools by addressing some of the most common issues faced in modern web application. This is a beginner to intermediate level tutorial for web developers getting started with debugging the web, or programmers coming from other languages who want to better understand how to troubleshoot client side JavaScript, the DOM, performance, and network calls.</p>
<p>To demonstrate we will be debugging a simple web application. The source code is available here: <a href="https://github.com/jessecravens/techpro-debugging.">https://github.com/jessecravens/techpro-debugging.</a></p>
<p>Read more at: <a href="http://tech.pro/tutorial/1404/debugging-modern-web-applications-part-1">http://tech.pro/tutorial/1404/debugging-modern-web-applications-part-1</a></p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/08/26/web-worker-patterns/">Web Worker Patterns</a></h1>
<p class="meta">
<time datetime="2013-08-26T14:03:00-05:00" pubdate data-updated="true">Aug 26<span>th</span>, 2013</time>
| <a href="/blog/2013/08/26/web-worker-patterns/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>JavaScript is executed in a single thread. If you’re not familiar with threads, what this means is that JavaScript can only execute one block of code at a time. If code is already executing, any interaction by the user will instantiate an asynchronous event that is queued up for later execution. Other events like those from XMLHttpRequests and timers, are also added to the queue.</p>
<p>So, as you might expect, a single-threaded architecture can be problematic to the user experience if a particular script takes a long time to complete.</p>
<p>Read more at: <a href="http://tech.pro/tutorial/1487/web-worker-patterns">http://tech.pro/tutorial/1487/web-worker-patterns</a></p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/07/25/building-next-generation-widgets-with-web-components/">Building Next Generation Widgets With Web Components</a></h1>
<p class="meta">
<time datetime="2013-07-25T03:41:00-05:00" pubdate data-updated="true">Jul 25<span>th</span>, 2013</time>
| <a href="/blog/2013/07/25/building-next-generation-widgets-with-web-components/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><img class="imgL400" alt="Nerdclustr" src="http://tpstatic.com/img/usermedia/9ylQdMSRLUiffrQPG4hHJw/original.png"></p>
<p>For SXSWi and FluentConf this year, <a href="http://twitter.com/boyofgreen">@boyofgreen</a> and I created a demo application to showcase some of the hacks that we included in our book OReilly’s HTML5 Hacks.</p>
<p>The demo application, Nerdclustr, is an HTML5 mobile application that brings ‘nerds’ of all types together conferences and provides a visual map that updates in real time. The application was written with Node.js and the Express web framework. It demonstrates the following specifications: HTML5 Web Forms, Geo Location API, WebSocket, Canvas, CSS3 transforms.</p>
<p>Given, the attention that Web Components and <a href="http://www.polymer-project.org/polymer.html">Polymer.js</a> have been getting lately, I felt this was a good opportunity to demonstrate some of the exciting new specifications that are making their way to modern browsers. For the sake of this tutorial, I’ll be using and providing screenshots of Google Chrome, but it should be worth your time to explore the status of each of the specifications in other modern browsers as well.</p>
<p>In this tutorial, we will take a look at the HTML5 specs mentioned above in detail. Then, we will explore Polymer.js and build out an example application.</p>
<p>Read more at: <a href="http://tech.pro/tutorial/1421/building-next-generation-widgets-with-web-components">http://tech.pro/tutorial/1421/building-next-generation-widgets-with-web-components</a></p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/06/17/add-narration-to-your-slide-deck-with-html5-audio/">Add Narration to Your Slide Deck With HTML5 Audio</a></h1>
<p class="meta">
<time datetime="2013-06-17T10:11:00-05:00" pubdate data-updated="true">Jun 17<span>th</span>, 2013</time>
| <a href="/blog/2013/06/17/add-narration-to-your-slide-deck-with-html5-audio/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><strong>Most presenter will share their slide deck on the web after their presentation. But many times the slides are only a shell of the real talk. Fortunately, with HTML5 audio, we can add our voice back to our slides and recreate the real presentation.</strong></p>
<h2>Sample Example</h2>
<p>To show what we’re trying to accomplish, I’ve created <a href="http://kevinlamping.com/deck.narrator.js/sample/sample.html">a very basic slide deck with audio narration</a> which briefly describes the issue at hand.</p>
<h2>Audio on the Web</h2>
<p>Back when the web was just taking off, it was common (bad) practice to include audio on your page. I’m not talking about a Flash-based music player, but rather the more primitive audio solution: <code><bgsound></code>. Those who were programming back when HTML 3.2 came out will be familiar with this oft-forgotten tag.</p>
<p>Luckily for us, <code><bgsound></code> isn’t the end of the story. According to <a href="http://www.w3.org/wiki/HTML/Elements/bgsound">the latest W3C spec</a>, <code><bgsound></code> has a much friendlier HTML5 alternative that you’ve likely heard of: the <code><audio></code> tag.</p>
<p>So what benefits does <code><audio></code> bring us? Well, <code><bgsound></code> was an IE only property. <code><audio></code> on the other hand has wide support, with only IE 7 & 8 lacking functionality. <code><audio></code> also allows API access so that we can control playback, seek through the audio, and even manipulate the data with the <a href="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a>. Plus, the <code><audio></code> tag allows you to use native controls and/or provide your own customized controls.</p>
<h2>File formats</h2>
<p>Before getting in to the details on how we’re going to use the <code><audio></code> tag, we need to talk a little about file formats. The MP3 format has gained tremendous popularity over the last decade and a half, but unfortunately due to licensing requirements, relying on MP3’s for our audio is a messy situation.</p>
<p>Luckily for us, the <code><audio></code> tag supports multiple formats gracefully. This means we can create a patchwork of audio file formats to gain full browser support. And we’ll need a patch work because no one format is currently supported across all browsers.</p>
<p>For our needs, we’ve created two files: an MP4/AAC file and an OggVorbis file.</p>
<p>If you’d like to read more on the subject, I highly recommend <a href="https://www.scirra.com/blog/44/on-html5-audio-formats-aac-and-ogg">Ashley Gullen’s post ‘On HTML5 audio formats – AAC and Ogg’</a>.</p>
<h2>How to Use It?</h2>
<p>We can load our audio files by adding in two <code><source></code> tags with information about our two audio files inside of the <code><audio></code> tag:</p>
<figure class='code'><figcaption><span>index.html </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><audio</span> <span class="na">controls</span> <span class="na">id=</span><span class="s">"myPlayer"</span><span class="nt">></span>
</span><span class='line'> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"myAudio.m4a"</span> <span class="na">type=</span><span class="s">"audio/mp4"</span> <span class="nt">/></span>
</span><span class='line'> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"myAudio.ogg"</span> <span class="na">type=</span><span class="s">"audio/ogg"</span> <span class="nt">/></span>
</span><span class='line'> Your browser does not support HTML5 audio.
</span><span class='line'><span class="nt"></audio></span>
</span></code></pre></td></tr></table></div></figure>
<p>There are two attributes for each <code><source></code> tag. The ‘src’ attribute, whose value is the path to the audio file, and the ‘type’ attribute, whose value is the MIME type of the file.</p>
<p>Again, the browser will choose whichever file it supports without you having to do any detective work. Very nice.</p>
<h2>Starting/Stopping</h2>
<p>Okay, so now if we load this into a webpage we’ll get a simple audio player that we can manually control. What’s nice is that since we used the ‘controls’ attribute, the audio player controls are built for us by the browser. This makes allowing manual control of our audio very simple.</p>
<p>For our needs, we want to control the playback of the audio programmatically. To do this, let’s take a look at the API for starting and stopping playback. The element has two built-in methods for this, ‘play’ and ‘pause’. Calling those methods is straightforward:</p>
<figure class='code'><figcaption><span>audio.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">var</span> <span class="nx">audioPlayer</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myPlayer'</span><span class="p">);</span>
</span><span class='line'><span class="nx">audioPlayer</span><span class="p">.</span><span class="nx">play</span><span class="p">();</span>
</span><span class='line'><span class="nx">audioPlayer</span><span class="p">.</span><span class="nx">pause</span><span class="p">();</span>
</span></code></pre></td></tr></table></div></figure>
<p>These methods will come in handy in a moment when we want to start playing our audio after we change slides.</p>
<h2>Seeking</h2>
<p>The other part of the equation is the ability to seek to different locations in our audio. Again, this is very simple. Our element has a ‘currentTime’ property that can be both get and set (in seconds).</p>
<figure class='code'><figcaption><span>audio.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">audioPlayer</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span> <span class="c1">// returns 0 since we haven't started playing the audio yet</span>
</span><span class='line'><span class="nx">audioPlayer</span><span class="p">.</span><span class="nx">currentTime</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span> <span class="c1">// move to 10 seconds into the audio</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">audioPlayer</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span> <span class="c1">// returns 10</span>
</span><span class='line'>
</span><span class='line'><span class="nx">audioPlayer</span><span class="p">.</span><span class="nx">play</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">audioPlayer</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span> <span class="c1">// returns 11</span>
</span><span class='line'><span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>As you can see, getting and setting the current time is a trivial process. In the Part 2, we’ll put this functionality to use by adding narration to slides.</p>
<h2>Implementing Slide Narration</h2>
<p>So now we’ve got the building blocks for implementing a slide narrator. To make things easier, we’re going to use the fantastic <a href="http://imakewebthings.com/deck.js/">‘Deck.js’ project</a> as our HTML slide framework. Deck.js supports extensions, which allows you to add functionality to your slides beyond what’s already provided.</p>
<p>We’ll be creating a new extension called Narrator. For brevity’s sake, I won’t get into the details of Deck.js or creating extensions, but you can check out the code in <a href="https://github.com/klamping/deck.narrator.js">the deck.narrator.js GitHub repo</a>.</p>
<p>Our extension boils down to one requirement: It should automatically play a defined section of audio on each slide.</p>
<p>That might sound simple, but we need to figure out a couple of things first:</p>
<ul>
<li>How will we define what audio to play for each slide?</li>
<li>How will we stop the audio after it gets to the end of the section</li>
</ul>
<h2>Defining Audio Stops</h2>
<p>There are a couple of ways to define what segment of the audio each slide plays. You could define a start time and a stop time for each slide, but that seems like too much work. Instead we’ll just define how long each slide should play for, and then calculate the implied start and stop timestamps for each slide.</p>
<p>To store our audio duration, we’ll take advantage of <a href="http://ejohn.org/blog/html-5-data-attributes/">HTML5 data-* attributes</a> by creating a custom ‘data-narrator-duration’ attribute. The value of this will be the number of seconds to play the audio for. Here’s a sample slide element for a Deck.js HTML file.</p>
<figure class='code'><figcaption><span>index.html </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><section</span> <span class="na">class=</span><span class="s">"slide"</span> <span class="na">data-narrator-duration=</span><span class="s">"2"</span><span class="nt">></span>
</span><span class='line'> ...
</span><span class='line'><span class="nt"></section></span>
</span></code></pre></td></tr></table></div></figure>
<p>Then, upon page initialization, we’ll loop through each slide element and calculate the proper start/stop timestamps for each slide. This is important in case our viewer wants to move through the slides in a non-linear fashion. Here’s the basic code:</p>
<figure class='code'><figcaption><span>deck.narrator.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">// create an array for our segment timestamps </span>
</span><span class='line'><span class="kd">var</span> <span class="nx">segments</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// create a placeholder for our audio element reference </span>
</span><span class='line'><span class="kd">var</span> <span class="nx">audio</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// we'll get to this variable later</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">segmentEnd</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">function</span> <span class="nx">init</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="c1">// get the audio element we added to our page</span>
</span><span class='line'> <span class="nx">audio</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'audioNarration'</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// use deck.js built-in functionality to get all slides and current slide</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">$slides</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">deck</span><span class="p">(</span><span class="s1">'getSlides'</span><span class="p">);</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">$currentSlide</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">deck</span><span class="p">(</span><span class="s1">'getSlide'</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// set initial values for time position and index</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">position</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">currentIndex</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// now loop through each slide</span>
</span><span class='line'> <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">$slides</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">$el</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="c1">// get the duration specified from the HTML element</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">duration</span> <span class="o">=</span> <span class="nx">$el</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'narrator-duration'</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// this determines which slide the viewer loaded the page on</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">$currentSlide</span> <span class="o">==</span> <span class="nx">$el</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">currentIndex</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// push the start time (previous position) and end time (position + duration) to an array of slides</span>
</span><span class='line'> <span class="nx">segments</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="nx">position</span><span class="p">,</span> <span class="nx">position</span> <span class="o">+</span> <span class="nx">duration</span><span class="p">]);</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// increment the position to the start of the next slide</span>
</span><span class='line'> <span class="nx">position</span> <span class="o">+=</span> <span class="nx">duration</span><span class="p">;</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<h2>Adding Playback Automatically on Slide Change</h2>
<p>Now that we’ve got our segment timestamps defined, let’s look at playing that audio on each slide transition. Deck.js fires a ‘deck.change’ event when the slide is changed, so we can hook into that and have it call our changeSlides function, which looks like this:</p>
<figure class='code'><figcaption><span>deck.narrator.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">changeSlides</span> <span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">from</span><span class="p">,</span> <span class="nx">to</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="c1">// check to make sure audio element has been found</span>
</span><span class='line'> <span class="k">if</span><span class="p">(</span><span class="nx">audio</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="c1">// move the playback to our slides start</span>
</span><span class='line'> <span class="nx">audio</span><span class="p">.</span><span class="nx">currentTime</span> <span class="o">=</span> <span class="nx">segments</span><span class="p">[</span><span class="nx">to</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// define the end of our section</span>
</span><span class='line'> <span class="nx">segmentEnd</span> <span class="o">=</span> <span class="nx">segments</span><span class="p">[</span><span class="nx">to</span><span class="p">][</span><span class="mi">1</span><span class="p">];</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>Most of the code makes sense, but I do want to talk about the ‘segmentEnd’ line and what it’s doing.</p>
<h2>Playing Segments of Audio</h2>
<p>Unfortunately, you can’t give the <code>play()</code> function an amount of time to play for. Once you start playing, it will keep going until it runs out of audio or you tell it to pause. Thankfully, the audio element emits a ‘timeupdate’ event which we can listen to in order to pause playback once our segment timestamp has been reached. We can add that listener just like any other event listener:</p>
<figure class='code'><figcaption><span>deck.narrator.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">audio</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'timeupdate'</span><span class="p">,</span> <span class="nx">checkTime</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>Our ‘checkTime’ function is very small. All it does is check to see if currentTime in the audio is greater than the segmentEnd time. If so, it pauses our audio:</p>
<figure class='code'><figcaption><span>deck.narrator.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">checkTime</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">audio</span><span class="p">.</span><span class="nx">currentTime</span> <span class="o">>=</span> <span class="nx">segmentEnd</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">audio</span><span class="p">.</span><span class="nx">pause</span><span class="p">();</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<h2>Automatically Moving Through Slides</h2>
<p>Now that we’ve got our audio hooked up to our slides, we can take advantage of the other extensions already written for Deck.js. <a href="deck.automatic.js">https://github.com/rchampourlier/deck.automatic.js/</a> is an extension that makes your slides run automatically. By including this extension with our presentation, we can recreate that ‘presentation’ feel to our slides.</p>
<p>Aside from the going through the steps of adding the automatic extension, we also need to make sure that if a user starts/stops the audio, we start/stop the slideshow playback. To do this, we’ll sync up <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Media_events">the ‘play’ and ‘pause’ events of our audio element</a> with the automatic extension. For simplicity, we’re going to control all slide playback using our audio controls and leave off the deck.automatic.js playback control.</p>
<p>Deck.automatic.js adds some events to the mix, including ‘play’ and ‘pause’ events. By triggering these events when our similarly named audio events fire, we can make sure our slides are in sync with our content.</p>
<p>We add two simple functions to our extension:</p>
<figure class='code'><figcaption><span>deck.narrator.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="kd">function</span> <span class="nx">startSlides</span> <span class="p">(</span><span class="nx">ev</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">$</span><span class="p">.</span><span class="nx">deck</span><span class="p">(</span><span class="s1">'play'</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="kd">function</span> <span class="nx">stopSlides</span> <span class="p">(</span><span class="nx">ev</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">$</span><span class="p">.</span><span class="nx">deck</span><span class="p">(</span><span class="s1">'pause'</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>And then add our event listeners in the deck.init callback:</p>
<figure class='code'><figcaption><span>deck.narrator.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">$d</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'deck.init'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// ... other code here ...</span>
</span><span class='line'>
</span><span class='line'> <span class="c1">// Sync audio with slides</span>
</span><span class='line'> <span class="nx">audio</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'play'</span><span class="p">,</span> <span class="nx">startSlides</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</span><span class='line'> <span class="nx">audio</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'pause'</span><span class="p">,</span> <span class="nx">stopSlides</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>Also, since our slides automatically advance, we need to comment out the ‘timeupdate’ event listener which would pause our audio at the end of a slide.</p>
<p>With those things taken care of, our slides and audio automatically transition to create a seamless experience.</p>
<h2>Next Steps</h2>
<p>One thing the code doesn’t take into consideration is if the user navigation the audio themselves. We could add this by listening to the ‘seeked’ event from the audio element and calculating where in the slide deck we should move to.</p>
<p>There is also some duplication around defining the duration of the as a result of adding in the automatic slide advancement extension. The other extension is looking for a data-duration attribute on each slide. This can be easily fixed by updating our code to look for that attribute instead.</p>
<p>Finally, we need to add in some captioning for folks who either cannot hear the audio or are in a public place and simply forgot their headphones. There is <a href="http://www.w3.org/wiki/HTML/Elements/track">a new <code>track</code> tag</a> that can handle this for us, so that’s a likely route we can go down.</p>
<h2>Summing Up</h2>
<p>That’s the majority of the code. I left out a few details in relation to some deck.js configurations, so again check out <a href="https://github.com/klamping/deck.narrator.js">the GitHub repo for the full example</a>.</p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/06/04/ember-dot-js-views-and-live-templates-with-handlebars-dot-js-part-1/">Ember.js Views and Live Templates With Handlebars.js Part 1</a></h1>
<p class="meta">
<time datetime="2013-06-04T11:05:00-05:00" pubdate data-updated="true">Jun 4<span>th</span>, 2013</time>
| <a href="/blog/2013/06/04/ember-dot-js-views-and-live-templates-with-handlebars-dot-js-part-1/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><img class="imgL" alt="Tech-pro Ember.js Views" src="http://tpstatic.com/img/usermedia/cHI1WdevsEyBJ7dLfmVUdA/cropped-w220-h220.png"></p>
<p>This is an exploration of Handlebars.js template library when used with Ember.js views. Many of the Handlebars.js tutorials on the web discuss the Handlebars API, but not in the specific context of using Handlebars with Ember.js. In addition to filling that void, I’ll also give a brief background of JavaScript templating in general to provide perspective as to the problems it is solving.</p>
<p>This tutorial will be divided into two parts. In Part 1, you should gain a clear understanding of JavaScript templates, the capabilities of Handlebars expressions and helpers, and how to write your own Handlebars helpers.</p>
<p>Read more at: <a href="http://tech.pro/tutorial/1308/emberjs-views-and-live-templates-with-handlebarsjs-part-1">http://tech.pro/tutorial/1308/emberjs-views-and-live-templates-with-handlebarsjs-part-1</a></p>
</div>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/2013/05/13/rich-input-data-from-w3c-pointer-events/">Utilize Rich Input Data From W3C Pointer Events</a></h1>
<p class="meta">
<time datetime="2013-05-13T01:42:00-05:00" pubdate data-updated="true">May 13<span>th</span>, 2013</time>
| <a href="/blog/2013/05/13/rich-input-data-from-w3c-pointer-events/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>The W3C Pointer Events specification allows you to develop for a single event model that supports various input types. Instead of writing code for multiple event types, or having to use feature detection on page load that forces one event model over the other, Pointers allows you to write one event model that works everywhere. To make the transition easy, Pointer Events builds upon the Event Model of Mouse Events. This means that code that’s written for mouse events is going to be very easy to upgrade to Pointers.</p>
<p>There’s a lot of great content out there on how to implement pointers. Microsoft’s original post on pointer event implementation in IE10 and Windows 8 Apps is a great place to start learning about Pointers. To see an example of how to convert a current mouse based app into a pointers based app, I suggest you check out my channel 9 video on pointers. In this post I want to focus on a different aspect of pointers. Along with the multiple input support, and ease of implementation, Pointer Events also provide a wealth of new data values that can be quite useful in your applications. This post will look in depth at that data.</p>
<p>The code samples will all use the W3C spec pointer names such as “pointermove” and “pointerup”, however in practice this spec is not finalized, so the working code samples will be using the prefixed version such as “MSPointerMove” and “MSPointerUp”.</p>
<h2>The Pointer Event Object</h2>
<p>The Pointer Event object is modeled directly off the Mouse Event object, meaning all the values, and all the methods available in a mouse event model, will be present inside a Pointer Event Model. Let’s look at an example you might implement for the Mouse Event Model:</p>
<figure class='code'><figcaption><span>More poiner.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'> <span class="kd">var</span> <span class="nx">myY</span><span class="p">,</span> <span class="nx">myX</span><span class="p">;</span>
</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myElement'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'mouseup'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">myY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">offsetY</span><span class="p">;</span>
</span><span class='line'> <span class="nx">myX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">offsetX</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>
<p>This same code will also run with Pointer Events:</p>
<figure class='code'><figcaption><span>More poiner.js </span></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'myElement'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'pointerup'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">myY</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">offsetY</span><span class="p">;</span>
</span><span class='line'> <span class="nx">myX</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">offsetX</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="p">});</span>