• Save
Building Great Stuff Using Web Technologies
Upcoming SlideShare
Loading in...5
×
 

Building Great Stuff Using Web Technologies

on

  • 10,900 views

 

Statistics

Views

Total Views
10,900
Views on SlideShare
10,468
Embed Views
432

Actions

Likes
30
Downloads
99
Comments
0

13 Embeds 432

http://t3n.de 219
http://www.slideshare.net 116
http://russoland.me 55
http://shahriarhaque.tumblr.com 12
http://flavors.me 7
http://blog.marianorusso.com.ar 5
http://feeds.feedburner.com 5
http://compranoslatele.es 4
http://t3n.yeebase.com 3
http://es.flavors.me 2
resource://brief-content 2
http://learningbyhacking.posterous.com 1
http://524hoavfm7eetun63jp7vc7e3o81jviv.a.sandbox.orkut.gmodules.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • Two things. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Building Great Stuff Using Web Technologies Building Great Stuff Using Web Technologies Presentation Transcript

  • How to build Great Stuff (using Web Technologies)
  • How do I know?
  • • 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.
  • 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.
  • # 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.
  • # 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.
  • “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!”
  • It cannot work due to the way Apache httpd’s request handling is designed. (Admitted, at least not out of the box)
  • # 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!