Your SlideShare is downloading. ×
  • Like
  • Save
Building Great Stuff Using Web Technologies
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Building Great Stuff Using Web Technologies

  • 8,684 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,684
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
99
Comments
0
Likes
30

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

  • Two things.












































































































Transcript

  • 1. How to build Great Stuff (using Web Technologies)
  • 2. How do I know?
  • 3. • I am a natural coder
  • 4. • I am a natural coder • I LOVE coding!
  • 5. • I am a natural coder • I LOVE coding! • I HOPE you feel the same way.
  • 6. • I am a natural coder • I LOVE coding! • I HOPE you feel the same way. • We have our own language. It changes fast.
  • 7. • 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.
  • 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. • “Normal” people think of it as “magic”
  • 9. Eye Candy Intro: 100 Tweets http://9elements.com/io/projects/html5/canvas/ by 9elements
  • 10. “Somebody set up us the bomb DOM!”
  • 11. “Somebody set up us the bomb DOM!” <script type="text/javascript" />
  • 12. “Somebody set up us the bomb DOM!” <script type="text/javascript" /> <audio />
  • 13. “Somebody set up us the bomb DOM!” <script type="text/javascript" /> <audio /> <canvas />
  • 14. <script />
  • 15. <script /> <audio>
  • 16. <script /> • Find out supported audio format <audio>
  • 17. <script /> • Find out supported audio format <audio> • OGG vs mp3
  • 18. <script /> • Find out supported audio format <audio> • OGG vs mp3 • Set <audio> src accordingly
  • 19. <script /> • Find out supported audio format <audio> • OGG vs mp3 • Set <audio> src accordingly Twitter Search API Req. “html5+love”
  • 20. <script /> • Find out supported audio format <audio> • OGG vs mp3 • Set <audio> src accordingly Twitter Search API Req. • Search for 100 tweets “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” • On click, display tweet’s text
  • 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 • Instruct dot to move
  • 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 <canvas>
  • 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 • On every frame, draw dots <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> • Animations are manual
  • 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 • Beat animation is precoded
  • 27. Selected quotes from right before launch
  • 28. Selected quotes from right before launch • “Nah. It’s not ready.”
  • 29. Selected quotes from right before launch • “Nah. It’s not ready.” • “Look at the code.”
  • 30. Selected quotes from right before launch • “Nah. It’s not ready.” • “Look at the code.” • “I mean, 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!” • “Let’s add some more... Stuff?”
  • 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?” • “We did similar things with Flash...
  • 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... • ...10 years ago.”
  • 34. Not showing what you created is the single biggest mistake you can possibly make.
  • 35. Because you never know.
  • 36. Because you never know.
  • 37. Because you never know. A quarter million. In four days.
  • 38. Because you never know. A quarter million. In four days. For an HTML5 Canvas Audio Experiment.
  • 39. Because you never know. A quarter million. In four days. For an HTML5 Canvas Audio Experiment. Not so bad.
  • 40. 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)
  • 41. Self-referential Praise Nearly all of the 100 Tweets linked back to ourselves. It felt good.
  • 42. Reason for Success? Made developers see what is possible.
  • 43. Purpose Make developers see what is possible.
  • 44. Lessons learned
  • 45. Lessons learned • Know and love your tools
  • 46. Lessons learned • Know and love your tools • Be enthusiastic about an idea
  • 47. Lessons learned • Know and love your tools • Be enthusiastic about an idea • Enthusiasm is what will drive you!
  • 48. Lessons learned • Know and love your tools • Be enthusiastic about an idea • Enthusiasm is what will drive you! • Do it in your spare time
  • 49. “The future is here. It's just not evenly distributed yet.” - William Gibson
  • 50. So what is our job?
  • 51. Distribute future.
  • 52. Future ==== Technology Operator of super-convenient equality
  • 53. ActiveRecord, anyone? class Future has_many :innovations, :through => :technologies end
  • 54. It is too easy ;-)
  • 55. It is too easy ;-) • Free technology
  • 56. It is too easy ;-) • Free technology • Open technology
  • 57. It is too easy ;-) • Free technology • Open technology • Mostly based open standards
  • 58. It is too easy ;-) • Free technology • Open technology • Mostly based open standards • Widely adopted technology
  • 59. It is too easy ;-) • Free technology • Open technology • Mostly based open standards • Widely adopted technology • So please, just do it.
  • 60. Let’s do that right now.
  • 61. Four technologies, explained briefly.
  • 62. One.
  • 63. WebSockets API
  • 64. WebSockets API • Full-duplex communication channel
  • 65. WebSockets API • Full-duplex communication channel • Between Browser and Server
  • 66. WebSockets API • Full-duplex communication channel • Between Browser and Server • API is simply awesome
  • 67. WebSockets API • Full-duplex communication channel • Between Browser and Server • API is simply awesome • I can’t possibly handle more bullets
  • 68. 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
  • 69. Using WebSockets
  • 70. Using WebSockets // Setup var socket = new WebSocket("ws://www.example.com");
  • 71. Using WebSockets // Setup var socket = new WebSocket("ws://www.example.com"); // Sending messages socket.send("Feel so free without HTTP!");
  • 72. 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!");
  • 73. 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); }
  • 74. Two.
  • 75. Canvas 2D API
  • 76. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'),
  • 77. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d');
  • 78. Canvas 2D API // Setup var canvas = document.getElementById('ze-canvas'), context = canvas.getContext('2d'); // Drawing shapes context.fillRect(x, y, width, height);
  • 79. 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);
  • 80. 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!)
  • 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); // Animations? (ohh, SUSPENSE!) window.setTimeout(function() { }, 1000/max_fps);
  • 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!) window.setTimeout(function() { context.clearRect(0, 0, canvasWidth, canvasHeight); context.fillRect(x++, y++, width, height); }, 1000/max_fps);
  • 83. Three.
  • 84. # Hey,
  • 85. # Hey, # realizing bullets are great for informal bits,
  • 86. # Hey, # realizing bullets are great for informal bits, # and not wanting to break my promise from before,
  • 87. # 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!
  • 88. # 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
  • 89. # 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
  • 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! # Here we go :D # # <3 Redis <3 # # A persistent key-value database # # // OR: //
  • 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 # # <3 Redis <3 # # A persistent key-value database # # // OR: // # # 21st century malloc() # (via @hungryblank)
  • 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 # # 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.
  • 93. # Start redis server $ redis-server redis.conf &
  • 94. # Start redis server $ redis-server redis.conf & # Set value by key $ redis-cli set foo bar OK
  • 95. # 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
  • 96. # 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:
  • 97. # 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
  • 98. # 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
  • 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 # Redis values can also be: # - lists # - sets # - ordered sets
  • 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: # - lists # - sets # - ordered sets # - hashes (HEAD)
  • 101. Four.
  • 102. “Hey Apache, here are 5000 concurrent requests I need you to handle.”
  • 103. “Hey Apache, here are 5000 concurrent requests I need you to handle.” “And keep them all open!”
  • 104. It cannot work due to the way Apache httpd’s request handling is designed. (Admitted, at least not out of the box)
  • 105. # The heart of Google Chrome?
  • 106. # The heart of Google Chrome? # # - V8, of course!
  • 107. # The heart of Google Chrome? # # - V8, of course! # # By opening up V8, Google made not only the client better.
  • 108. # 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!
  • 109. # 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.
  • 110. # 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?
  • 111. # 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?
  • 112. 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
  • 113. We lay the foundation.
  • 114. We lay the foundation. Our Ideas Raw concepts Frameworks
  • 115. We lay the foundation. Useful Applications Early Adoption Real world usage Our Ideas Raw concepts Frameworks
  • 116. 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
  • 117. Do. Not. Hesitate. MAKE!
  • 118. > 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!