6. • I am a natural coder
• I LOVE coding!
• I HOPE you feel the same way.
7. • I am a natural coder
• I LOVE coding!
• I HOPE you feel the same way.
• We have our own language. It changes fast.
8. • I am a natural coder
• I LOVE coding!
• I HOPE you feel the same way.
• We have our own language. It changes fast.
• We do abstract things.
9. • I am a natural coder
• I LOVE coding!
• I HOPE you feel the same way.
• We have our own language. It changes fast.
• We do abstract things.
• “Normal” people think of it as “magic”
10. Eye Candy Intro:
100 Tweets
http://9elements.com/io/projects/html5/canvas/
by 9elements
17. <script />
• Find out supported audio format
<audio>
18. <script />
• Find out supported audio format
<audio> • OGG vs mp3
19. <script />
• Find out supported audio format
<audio> • OGG vs mp3
• Set <audio> src accordingly
20. <script />
• Find out supported audio format
<audio> • OGG vs mp3
• Set <audio> src accordingly
Twitter Search API Req.
“html5+love”
21. <script />
• Find out supported audio format
<audio> • OGG vs mp3
• Set <audio> src accordingly
Twitter Search API Req.
• Search for 100 tweets
“html5+love”
22. <script />
• Find out supported audio format
<audio> • OGG vs mp3
• Set <audio> src accordingly
Twitter Search API Req.
• Search for 100 tweets
“html5+love” • On click, display tweet’s text
23. <script />
• Find out supported audio format
<audio> • OGG vs mp3
• Set <audio> src accordingly
Twitter Search API Req.
• Search for 100 tweets
“html5+love” • On click, display tweet’s text
• Instruct dot to move
24. <script />
• Find out supported audio format
<audio> • OGG vs mp3
• Set <audio> src accordingly
Twitter Search API Req.
• Search for 100 tweets
“html5+love” • On click, display tweet’s text
• Instruct dot to move
<canvas>
25. <script />
• Find out supported audio format
<audio> • OGG vs mp3
• Set <audio> src accordingly
Twitter Search API Req.
• Search for 100 tweets
“html5+love” • On click, display tweet’s text
• Instruct dot to move
• On every frame, draw dots
<canvas>
26. <script />
• Find out supported audio format
<audio> • OGG vs mp3
• Set <audio> src accordingly
Twitter Search API Req.
• Search for 100 tweets
“html5+love” • On click, display tweet’s text
• Instruct dot to move
• On every frame, draw dots
<canvas> • Animations are manual
27. <script />
• Find out supported audio format
<audio> • OGG vs mp3
• Set <audio> src accordingly
Twitter Search API Req.
• Search for 100 tweets
“html5+love” • On click, display tweet’s text
• Instruct dot to move
• On every frame, draw dots
<canvas> • Animations are manual
• Beat animation is precoded
29. Selected quotes
from right before launch
• “Nah. It’s not ready.”
30. Selected quotes
from right before launch
• “Nah. It’s not ready.”
• “Look at the code.”
31. Selected quotes
from right before launch
• “Nah. It’s not ready.”
• “Look at the code.”
• “I mean, LOOK AT THE CODE!”
32. Selected quotes
from right before launch
• “Nah. It’s not ready.”
• “Look at the code.”
• “I mean, LOOK AT THE CODE!”
• “Let’s add some more... Stuff?”
33. Selected quotes
from right before launch
• “Nah. It’s not ready.”
• “Look at the code.”
• “I mean, LOOK AT THE CODE!”
• “Let’s add some more... Stuff?”
• “We did similar things with Flash...
34. Selected quotes
from right before launch
• “Nah. It’s not ready.”
• “Look at the code.”
• “I mean, LOOK AT THE CODE!”
• “Let’s add some more... Stuff?”
• “We did similar things with Flash...
• ...10 years ago.”
35. Not showing what you created
is the single biggest mistake
you can possibly make.
69. WebSockets API
• Full-duplex communication channel
• Between Browser and Server
• API is simply awesome
• I can’t possibly handle more bullets
70. WebSockets API
• Full-duplex communication channel
• Between Browser and Server
• API is simply awesome
• I can’t possibly handle more bullets
• In fact, from now on, no more bullets
73. Using WebSockets
// Setup
var socket = new WebSocket("ws://www.example.com");
// Sending messages
socket.send("Feel so free without HTTP!");
74. Using WebSockets
// Setup
var socket = new WebSocket("ws://www.example.com");
// Sending messages
socket.send("Feel so free without HTTP!");
// It rhymes! Please, make a websockets song!
socket.send("There’s no HTTP ‘round me!");
75. Using WebSockets
// Setup
var socket = new WebSocket("ws://www.example.com");
// Sending messages
socket.send("Feel so free without HTTP!");
// It rhymes! Please, make a websockets song!
socket.send("There’s no HTTP ‘round me!");
// Receiving messages
socket.onmessage = function(e) { alert(e.data); }
89. # Hey,
# realizing bullets are great for informal bits,
# and not wanting to break my promise from before,
90. # Hey,
# realizing bullets are great for informal bits,
# and not wanting to break my promise from before,
# I hacked the format and put bullets into code comments!
91. # Hey,
# realizing bullets are great for informal bits,
# and not wanting to break my promise from before,
# I hacked the format and put bullets into code comments!
# Here we go :D
92. # Hey,
# realizing bullets are great for informal bits,
# and not wanting to break my promise from before,
# I hacked the format and put bullets into code comments!
# Here we go :D
#
# <3 Redis <3
93. # Hey,
# realizing bullets are great for informal bits,
# and not wanting to break my promise from before,
# I hacked the format and put bullets into code comments!
# Here we go :D
#
# <3 Redis <3
#
# A persistent key-value database
#
# // OR: //
94. # Hey,
# realizing bullets are great for informal bits,
# and not wanting to break my promise from before,
# I hacked the format and put bullets into code comments!
# Here we go :D
#
# <3 Redis <3
#
# A persistent key-value database
#
# // OR: //
#
# 21st century malloc()
# (via @hungryblank)
95. # Hey,
# realizing bullets are great for informal bits,
# and not wanting to break my promise from before,
# I hacked the format and put bullets into code comments!
# Here we go :D
#
# <3 Redis <3
#
# A persistent key-value database
#
# // OR: //
#
# 21st century malloc()
# (via @hungryblank)
#
# It can do some very useful things,
# and it does those things very good.
98. # Start redis server
$ redis-server redis.conf &
# Set value by key
$ redis-cli set foo bar
OK
99. # Start redis server
$ redis-server redis.conf &
# Set value by key
$ redis-cli set foo bar
OK
# Retrieve value by key
$ redis-cli get foo
bar
100. # Start redis server
$ redis-server redis.conf &
# Set value by key
$ redis-cli set foo bar
OK
# Retrieve value by key
$ redis-cli get foo
bar
# Redis values can also be:
101. # Start redis server
$ redis-server redis.conf &
# Set value by key
$ redis-cli set foo bar
OK
# Retrieve value by key
$ redis-cli get foo
bar
# Redis values can also be:
# - lists
102. # Start redis server
$ redis-server redis.conf &
# Set value by key
$ redis-cli set foo bar
OK
# Retrieve value by key
$ redis-cli get foo
bar
# Redis values can also be:
# - lists
# - sets
103. # Start redis server
$ redis-server redis.conf &
# Set value by key
$ redis-cli set foo bar
OK
# Retrieve value by key
$ redis-cli get foo
bar
# Redis values can also be:
# - lists
# - sets
# - ordered sets
104. # Start redis server
$ redis-server redis.conf &
# Set value by key
$ redis-cli set foo bar
OK
# Retrieve value by key
$ redis-cli get foo
bar
# Redis values can also be:
# - lists
# - sets
# - ordered sets
# - hashes (HEAD)
113. # The heart of Google Chrome?
#
# - V8, of course!
114. # The heart of Google Chrome?
#
# - V8, of course!
#
# By opening up V8, Google made not only the client better.
115. # The heart of Google Chrome?
#
# - V8, of course!
#
# By opening up V8, Google made not only the client better.
#
# Somebody put V8 on the server!
116. # The heart of Google Chrome?
#
# - V8, of course!
#
# By opening up V8, Google made not only the client better.
#
# Somebody put V8 on the server!
#
# Together with a quality non-blocking infrastructure.
117. # The heart of Google Chrome?
#
# - V8, of course!
#
# By opening up V8, Google made not only the client better.
#
# Somebody put V8 on the server!
#
# Together with a quality non-blocking infrastructure.
#
# Now, what do we have?
118. # The heart of Google Chrome?
#
# - V8, of course!
#
# By opening up V8, Google made not only the client better.
#
# Somebody put V8 on the server!
#
# Together with a quality non-blocking infrastructure.
#
# Now, what do we have?
119. So I hacked something together
It’s not great, it’s just a demo.
Started today at 5pm
Got it running at 6pm
http://github.com/evilhackerdude/beergarden
121. We lay the foundation.
Our Ideas
Raw concepts
Frameworks
122. We lay the foundation.
Useful Applications
Early Adoption
Real world usage
Our Ideas
Raw concepts
Frameworks
123. We lay the foundation.
Manifestations
Yay :-) Geo Metadata, Mobile Focus, $awesome
Nay... “2.0”, “SEO”, “Social Media”
Useful Applications
Early Adoption
Real world usage
Our Ideas
Raw concepts
Frameworks