SlideShare a Scribd company logo

Building Great Stuff Using Web Technologies

Stephan Seidt
Stephan Seidt

The document discusses four emerging web technologies: WebSockets API, Canvas 2D API, Redis, and V8. WebSockets API allows for full-duplex communication between a browser and server without HTTP. Canvas 2D API enables drawing shapes and animations on an HTML canvas element. Redis is an open-source, in-memory data structure store that can be used as a database, cache, and message broker. V8 is the JavaScript engine behind Google Chrome that has also been adopted for server-side use cases when combined with non-blocking infrastructure.

Technology
1 of 125
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
How to build Great Stuff (using Web Technologies)
How do I know?
Building Great Stuff Using Web Technologies
• I am a natural coder
• I am a natural coder • I LOVE coding!
• I am a natural coder • I LOVE coding! • I HOPE you feel the same way.
• I am a natural coder • I LOVE coding! • I HOPE you feel the same way. • We have our own language. It changes fast.
• 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.
• 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”
Eye Candy Intro: 100 Tweets http://9elements.com/io/projects/html5/canvas/ by 9elements
“Somebody set up us the bomb DOM!”
“Somebody set up us the bomb DOM!” <script type="text/javascript" />
“Somebody set up us the bomb DOM!” <script type="text/javascript" /> <audio />
“Somebody set up us the bomb DOM!” <script type="text/javascript" /> <audio /> <canvas />
<script />
<script /> <audio>
<script /> • Find out supported audio format <audio>
<script /> • Find out supported audio format <audio> • OGG vs mp3
<script /> • Find out supported audio format <audio> • OGG vs mp3 • Set <audio> src accordingly
<script /> • Find out supported audio format <audio> • OGG vs mp3 • Set <audio> src accordingly Twitter Search API Req. “html5+love”
<script /> • Find out supported audio format <audio> • OGG vs mp3 • Set <audio> src accordingly Twitter Search API Req. • Search for 100 tweets “html5+love”
<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
<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
<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>
<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>
<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
<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
Selected quotes from right before launch
Selected quotes from right before launch • “Nah. It’s not ready.”
Selected quotes from right before launch • “Nah. It’s not ready.” • “Look at the code.”
Selected quotes from right before launch • “Nah. It’s not ready.” • “Look at the code.” • “I mean, LOOK AT THE CODE!”
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?”
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...
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.”
Not showing what you created is the single biggest mistake you can possibly make.
Because you never know.
Because you never know.
Because you never know. A quarter million. In four days.
Because you never know. A quarter million. In four days. For an HTML5 Canvas Audio Experiment.
Because you never know. A quarter million. In four days. For an HTML5 Canvas Audio Experiment. Not so bad.
Because you never know. A quarter million. In four days. For an HTML5 Canvas Audio Experiment. Not so bad. (We’re not a porn site)
Self-referential Praise Nearly all of the 100 Tweets linked back to ourselves. It felt good.
Reason for Success? Made developers see what is possible.
Purpose Make developers see what is possible.
Lessons learned
Lessons learned • Know and love your tools
Lessons learned • Know and love your tools • Be enthusiastic about an idea
Lessons learned • Know and love your tools • Be enthusiastic about an idea • Enthusiasm is what will drive you!
Lessons learned • Know and love your tools • Be enthusiastic about an idea • Enthusiasm is what will drive you! • Do it in your spare time
“The future is here. It's just not evenly distributed yet.” - William Gibson
So what is our job?
Distribute future.
Future ==== Technology Operator of super-convenient equality
ActiveRecord, anyone? class Future has_many :innovations, :through => :technologies end
It is too easy ;-)
It is too easy ;-) • Free technology
It is too easy ;-) • Free technology • Open technology
It is too easy ;-) • Free technology • Open technology • Mostly based open standards
It is too easy ;-) • Free technology • Open technology • Mostly based open standards • Widely adopted technology
It is too easy ;-) • Free technology • Open technology • Mostly based open standards • Widely adopted technology • So please, just do it.
Building Great Stuff Using Web Technologies
Let’s do that right now.
Four technologies, explained briefly.
One.
WebSockets API
WebSockets API • Full-duplex communication channel
WebSockets API • Full-duplex communication channel • Between Browser and Server
WebSockets API • Full-duplex communication channel • Between Browser and Server • API is simply awesome
WebSockets API • Full-duplex communication channel • Between Browser and Server • API is simply awesome • I can’t possibly handle more bullets
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
Using WebSockets
Using WebSockets // Setup var socket = new WebSocket("ws://www.example.com");
Using WebSockets // Setup var socket = new WebSocket("ws://www.example.com"); // Sending messages socket.send("Feel so free without HTTP!");
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!");
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); }
Two.
Canvas 2D API
Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'),
Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d');
Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height);
Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height); // Or images (image being successfully loaded) context.drawImage(image, 25, 25);
Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height); // Or images (image being successfully loaded) context.drawImage(image, 25, 25); // Animations? (ohh, SUSPENSE!)
Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height); // Or images (image being successfully loaded) context.drawImage(image, 25, 25); // Animations? (ohh, SUSPENSE!) window.setTimeout(function() { }, 1000/max_fps);
Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height); // Or images (image being successfully loaded) context.drawImage(image, 25, 25); // Animations? (ohh, SUSPENSE!) window.setTimeout(function() { context.clearRect(0, 0, canvasWidth, canvasHeight); context.fillRect(x++, y++, width, height); }, 1000/max_fps);
Three.
Building Great Stuff Using Web Technologies
# Hey,
# Hey, # realizing bullets are great for informal bits,
# Hey, # realizing bullets are great for informal bits, # and not wanting to break my promise from before,
# 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!
# 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
# 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
# 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: //
# 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)
# 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.
Building Great Stuff Using Web Technologies
# Start redis server $ redis-server redis.conf &
# Start redis server $ redis-server redis.conf & # Set value by key $ redis-cli set foo bar OK
# 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
# 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:
# 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
# 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
# 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
# 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)
Four.
Building Great Stuff Using Web Technologies
“Hey Apache, here are 5000 concurrent requests I need you to handle.”
“Hey Apache, here are 5000 concurrent requests I need you to handle.” “And keep them all open!”
Building Great Stuff Using Web Technologies
It cannot work due to the way Apache httpd’s request handling is designed. (Admitted, at least not out of the box)
Building Great Stuff Using Web Technologies
# The heart of Google Chrome?
# The heart of Google Chrome? # # - V8, of course!
# The heart of Google Chrome? # # - V8, of course! # # By opening up V8, Google made not only the client better.
# 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!
# 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.
# 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?
# 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?
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
We lay the foundation.
We lay the foundation. Our Ideas Raw concepts Frameworks
We lay the foundation. Useful Applications Early Adoption Real world usage Our Ideas Raw concepts Frameworks
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
Do. Not. Hesitate. MAKE!
> thanks && this { "author": new Person("Stephan Seidt", {twitter: "evilhackerdude"}), "date": new Date(2010, 2, 22), // wtfjs: january = 0 "license": new License.CC("by", "sa"), "url": "http://www.slideshare.net/evilhackerdude/", "sources": [ "http://en.wikipedia.org/wiki/File:SouthParkChef.png", "http://dev.w3.org/html5/websockets/", "http://dev.w3.org/html5/canvas-api/canvas-2d-api.html", "https://developer.mozilla.org/en/Canvas_tutorial", "http://code.google.com/p/redis/", "http://github.com/antirez/redis", "http://nodejs.org/", "http://s3.amazonaws.com/four.livejournal/20091117/jsconf.pdf", "http://github.com/guille/node.websocket.js/", "http://github.com/fictorial/redis-node-client" ] } // thanks == true and honest!

More Related Content

Similar to Building Great Stuff Using Web Technologies (20)

KEY
Webapp security testing
Tomas Doran
 
KEY
Webapp security testing
Tomas Doran
 
PDF
DefCamp 2013 - Http header analysis
DefCamp
 
KEY
Looking into HTML5 + CSS3
Christopher Schmitt
 
PDF
TypeScript와 Flow: 
자바스크립트 개발에 정적 타이핑 도입하기
Heejong Ahn
 
PPT
API 101 - Understanding APIs
3scale
 
PPT
API 101 - Understanding APIs.
Kirsten Hunter
 
PDF
ExpOn 2011 - Cassiano Travareli - A Base para Link Building
DOGSCAMP Summit
 
KEY
HTML5 and CSS3 for Teachers
Jason Hando
 
PPTX
HTML5
Ana AbdElzaher
 
PDF
Html5 - the new kid on the block
Marian Borca
 
KEY
Principles Of Web Design Workshop
Gavin Elliott
 
PPTX
Build your own analytics power tools
Alban Gérôme
 
KEY
Tropo: Telephony in the Cloud
Wes Gamble
 
PDF
Making drupal beautiful with web fonts
Four Kitchens
 
PPTX
Scaling with swagger
Tony Tam
 
ZIP
Html5 public
doodlemoonch
 
PPTX
A Holistic Approach to HTML5 Game Design & Development
Karl Bunyan
 
PDF
Japanese CloudSearch Use-Cases and Tech Deep Dive
Eiji Shinohara
 
PDF
6 reasons Jubilee could be a Rubyist's new best friend
Forrest Chang
 
Webapp security testing
Tomas Doran
 
Webapp security testing
Tomas Doran
 
DefCamp 2013 - Http header analysis
DefCamp
 
Looking into HTML5 + CSS3
Christopher Schmitt
 
TypeScript와 Flow: 
자바스크립트 개발에 정적 타이핑 도입하기
Heejong Ahn
 
API 101 - Understanding APIs
3scale
 
API 101 - Understanding APIs.
Kirsten Hunter
 
ExpOn 2011 - Cassiano Travareli - A Base para Link Building
DOGSCAMP Summit
 
HTML5 and CSS3 for Teachers
Jason Hando
 
HTML5
Ana AbdElzaher
 
Html5 - the new kid on the block
Marian Borca
 
Principles Of Web Design Workshop
Gavin Elliott
 
Build your own analytics power tools
Alban Gérôme
 
Tropo: Telephony in the Cloud
Wes Gamble
 
Making drupal beautiful with web fonts
Four Kitchens
 
Scaling with swagger
Tony Tam
 
Html5 public
doodlemoonch
 
A Holistic Approach to HTML5 Game Design & Development
Karl Bunyan
 
Japanese CloudSearch Use-Cases and Tech Deep Dive
Eiji Shinohara
 
6 reasons Jubilee could be a Rubyist's new best friend
Forrest Chang
 

Recently uploaded (20)

PDF
Building Resilience with Digital Twins : Lessons from Korea
SANGHEE SHIN
 
PDF
Why Orbit Edge Tech is a Top Next JS Development Company in 2025
mahendraalaska08
 
PDF
Human-centred design in online workplace learning and relationship to engagem...
Tracy Tang
 
PDF
July Patch Tuesday
Ivanti
 
PDF
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
PDF
Predicting the unpredictable: re-engineering recommendation algorithms for fr...
Speck&Tech
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PPTX
Building a Production-Ready Barts Health Secure Data Environment Tooling, Acc...
Barts Health
 
PDF
Impact of IEEE Computer Society in Advancing Emerging Technologies including ...
Hironori Washizaki
 
PPT
Interview paper part 3, It is based on Interview Prep
SoumyadeepGhosh39
 
PDF
Complete JavaScript Notes: From Basics to Advanced Concepts.pdf
haydendavispro
 
PDF
Smart Air Quality Monitoring with Serrax AQM190 LITE
SERRAX TECHNOLOGIES LLP
 
PPTX
MSP360 Backup Scheduling and Retention Best Practices.pptx
MSP360
 
PDF
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
PDF
SFWelly Summer 25 Release Highlights July 2025
Anna Loughnan Colquhoun
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PDF
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
PDF
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
PPTX
Extensions Framework (XaaS) - Enabling Orchestrate Anything
ShapeBlue
 
Building Resilience with Digital Twins : Lessons from Korea
SANGHEE SHIN
 
Why Orbit Edge Tech is a Top Next JS Development Company in 2025
mahendraalaska08
 
Human-centred design in online workplace learning and relationship to engagem...
Tracy Tang
 
July Patch Tuesday
Ivanti
 
Women in Automation Presents: Reinventing Yourself — Bold Career Pivots That ...
DianaGray10
 
Predicting the unpredictable: re-engineering recommendation algorithms for fr...
Speck&Tech
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
Building a Production-Ready Barts Health Secure Data Environment Tooling, Acc...
Barts Health
 
Impact of IEEE Computer Society in Advancing Emerging Technologies including ...
Hironori Washizaki
 
Interview paper part 3, It is based on Interview Prep
SoumyadeepGhosh39
 
Complete JavaScript Notes: From Basics to Advanced Concepts.pdf
haydendavispro
 
Smart Air Quality Monitoring with Serrax AQM190 LITE
SERRAX TECHNOLOGIES LLP
 
MSP360 Backup Scheduling and Retention Best Practices.pptx
MSP360
 
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
SFWelly Summer 25 Release Highlights July 2025
Anna Loughnan Colquhoun
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
Extensions Framework (XaaS) - Enabling Orchestrate Anything
ShapeBlue
 
Ad

Building Great Stuff Using Web Technologies

  • 1. How to build Great Stuff (using Web Technologies)
  • 2. How do I know?
  • 4. • I am a natural coder
  • 5. • I am a natural coder • I LOVE coding!
  • 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
  • 11. “Somebody set up us the bomb DOM!”
  • 12. “Somebody set up us the bomb DOM!” <script type="text/javascript" />
  • 13. “Somebody set up us the bomb DOM!” <script type="text/javascript" /> <audio />
  • 14. “Somebody set up us the bomb DOM!” <script type="text/javascript" /> <audio /> <canvas />
  • 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
  • 28. Selected quotes from right before launch
  • 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.
  • 38. Because you never know. A quarter million. In four days.
  • 39. Because you never know. A quarter million. In four days. For an HTML5 Canvas Audio Experiment.
  • 40. Because you never know. A quarter million. In four days. For an HTML5 Canvas Audio Experiment. Not so bad.
  • 41. Because you never know. A quarter million. In four days. For an HTML5 Canvas Audio Experiment. Not so bad. (We’re not a porn site)
  • 42. Self-referential Praise Nearly all of the 100 Tweets linked back to ourselves. It felt good.
  • 43. Reason for Success? Made developers see what is possible.
  • 44. Purpose Make developers see what is possible.
  • 46. Lessons learned • Know and love your tools
  • 47. Lessons learned • Know and love your tools • Be enthusiastic about an idea
  • 48. Lessons learned • Know and love your tools • Be enthusiastic about an idea • Enthusiasm is what will drive you!
  • 49. Lessons learned • Know and love your tools • Be enthusiastic about an idea • Enthusiasm is what will drive you! • Do it in your spare time
  • 50. “The future is here. It's just not evenly distributed yet.” - William Gibson
  • 51. So what is our job?
  • 53. Future ==== Technology Operator of super-convenient equality
  • 54. ActiveRecord, anyone? class Future has_many :innovations, :through => :technologies end
  • 55. It is too easy ;-)
  • 56. It is too easy ;-) • Free technology
  • 57. It is too easy ;-) • Free technology • Open technology
  • 58. It is too easy ;-) • Free technology • Open technology • Mostly based open standards
  • 59. It is too easy ;-) • Free technology • Open technology • Mostly based open standards • Widely adopted technology
  • 60. It is too easy ;-) • Free technology • Open technology • Mostly based open standards • Widely adopted technology • So please, just do it.
  • 62. Let’s do that right now.
  • 64. One.
  • 66. WebSockets API • Full-duplex communication channel
  • 67. WebSockets API • Full-duplex communication channel • Between Browser and Server
  • 68. WebSockets API • Full-duplex communication channel • Between Browser and Server • API is simply awesome
  • 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
  • 72. Using WebSockets // Setup var socket = new WebSocket("ws://www.example.com");
  • 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); }
  • 76. Two.
  • 78. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'),
  • 79. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d');
  • 80. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height);
  • 81. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height); // Or images (image being successfully loaded) context.drawImage(image, 25, 25);
  • 82. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height); // Or images (image being successfully loaded) context.drawImage(image, 25, 25); // Animations? (ohh, SUSPENSE!)
  • 83. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height); // Or images (image being successfully loaded) context.drawImage(image, 25, 25); // Animations? (ohh, SUSPENSE!) window.setTimeout(function() { }, 1000/max_fps);
  • 84. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height); // Or images (image being successfully loaded) context.drawImage(image, 25, 25); // Animations? (ohh, SUSPENSE!) window.setTimeout(function() { context.clearRect(0, 0, canvasWidth, canvasHeight); context.fillRect(x++, y++, width, height); }, 1000/max_fps);
  • 88. # Hey, # realizing bullets are great for informal bits,
  • 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.
  • 97. # Start redis server $ redis-server redis.conf &
  • 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)
  • 105. Four.
  • 107. “Hey Apache, here are 5000 concurrent requests I need you to handle.”
  • 108. “Hey Apache, here are 5000 concurrent requests I need you to handle.” “And keep them all open!”
  • 110. It cannot work due to the way Apache httpd’s request handling is designed. (Admitted, at least not out of the box)
  • 112. # The heart of Google Chrome?
  • 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
  • 120. We lay the foundation.
  • 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
  • 125. > thanks && this { "author": new Person("Stephan Seidt", {twitter: "evilhackerdude"}), "date": new Date(2010, 2, 22), // wtfjs: january = 0 "license": new License.CC("by", "sa"), "url": "http://www.slideshare.net/evilhackerdude/", "sources": [ "http://en.wikipedia.org/wiki/File:SouthParkChef.png", "http://dev.w3.org/html5/websockets/", "http://dev.w3.org/html5/canvas-api/canvas-2d-api.html", "https://developer.mozilla.org/en/Canvas_tutorial", "http://code.google.com/p/redis/", "http://github.com/antirez/redis", "http://nodejs.org/", "http://s3.amazonaws.com/four.livejournal/20091117/jsconf.pdf", "http://github.com/guille/node.websocket.js/", "http://github.com/fictorial/redis-node-client" ] } // thanks == true and honest!

Editor's Notes

  • #3: Two things.