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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building Great Stuff Using Web Technologies

8,730
views

Published on

Published in: Technology

0 Comments
30 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,730
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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!