Building Great Stuff Using Web Technologies

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 />

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. 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 brieﬂy.

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); }

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)

“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?

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!

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

Building Great Stuff Using Web Technologies

by Stephan Seidt on Mar 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

13 Embeds 401

Statistics

Building Great Stuff Using Web Technologies — Presentation Transcript