Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 JavaScript On Crack (v4)

Kyle Simpson
PRO
August 20, 2012
Programming
7
1.2k

HTML5 JavaScript On Crack (v4)

Let's take a deep dive into the ugly nitty gritty details of some of the most complicated and advanced JavaScript APIs that HTML5 has to offer, including, but not limited to:

*
* History API
* localStorage/sessionStorage
* appCache
* Web Sockets
* Local Files + XHR2
* Web Workers
* Native Drag & Drop
* getUserMedia /

Kyle Simpson
PRO

August 20, 2012
Tweet

More Decks by Kyle Simpson

See All by Kyle Simpson
Love/Hate: Upgrading to Web2.5 with Local-First
getify
PRO
0
71
Zero Server Data Security
getify
PRO
1
100
Imperative vs Declarative: Weathering the storm
getify
PRO
0
380
Confessions from an Impostor
getify
PRO
0
210
On the job interview... Composition
getify
PRO
0
82
Mo'Problems, Mo'Nads
getify
PRO
1
3.5k
FOUC, and the Death of Progressive Enhancement
getify
PRO
6
2.1k
Keep Betting On JS
getify
PRO
19
5k
Cancel All My Appointments!
getify
PRO
12
1.1k

Other Decks in Programming

See All in Programming
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
510
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
110
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
630
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
210
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
460
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.7k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
240
Realtime API 入門
riofujimon
0
140
弊社の「意識ﾁｮｯﾄ低いアーキテクチャ」10選
texmeijin
5
24k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
190
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
290

Featured

See All Featured
Faster Mobile Websites
deanohume
305
30k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
RailsConf 2023
tenderlove
29
890
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
GraphQLとの向き合い方2022年版
quramy
43
13k
Writing Fast Ruby
sferik
627
61k
Agile that works and the tools we love
rasmusluckow
327
21k
How STYLIGHT went responsive
nonsquared
95
5.2k

Transcript

  1. HTML5 JavaScript On Crack Kyle Simpson http://getify.me @getify

  2. + HTML5 & Friends

  3. let's build a game: We Puzzle It!

  4. http:// ogp.geti.fi/github/wepuzzleit code for today

  5. Getting hooked on “gateway drugs” • localStorage / sessionStorage •

    History • appCache • <canvas>

  6. localStorage / sessionStorage

  7. History API

  8. History API

  9. appCache

  10. <canvas>

  11. <canvas>

  12. <canvas>

  13. <canvas>

  14. <canvas>

  15. <canvas>

  16. Now for the hardcore stuff • Native Drag & Drop

    • Local Files + XHR2 • Web Sockets (socket.io) • Web Workers

  17. Native Drag & Drop

  18. Native Drag & Drop

  19. Native Drag & Drop

  20. Native Drag & Drop

  21. Local Files

  22. Local Files

  23. Local Files

  24. Local Files + XHR2

  25. addicted yet?

  26. Web Sockets

  27. Web Sockets (socket.io client)

  28. Web Sockets (socket.io client)

  29. Web Sockets (socket.io server)

  30. Web Workers

  31. Web Workers (main page)

  32. Web Workers (main page)

  33. Web Workers (ww.js)

  34. Web Workers (ww.js)

  35. Web Workers (shim)

  36. one more thing

  37. getUserMedia & <video>

  38. getUserMedia & <video>

  39. getUserMedia & <video>

  40. http:// hpi.geti.fi/wepuzzleit/game play!

  41. Kyle Simpson http://getify.me @getify