I work for Google on the Chrome/Webkit team. I write specs for a living.
You've already seen the WebGL demo.
It's a more powerful (and more complicated) drawing context for the <canvas> element.
WebSockets is sockets, on the web.
It gives you bi-directional communications channels for fast, light push/pull abilities, without needing to continually spin up full HTTP requests.
var conn=new WebSocket("ws://mysocket.example.com:8080");
conn.onopen = function() { /* Stuff to run when the socket opens. */ };
conn.onmessage = function(event) {
/* Run every time the socket returns a message from the server. */
/* event.data contains the data sent by the server. */
};
conn.onclose = function() { /* More of the same. */ };
conn.send("I'm a message sent back to the server!");
WebSockets are powerful, but a bit complex. You need a special WS server to communicate with.
EventSource gives you similar "server-push" capabilities, but simpler.
Basically, it lets you replace the "poll the server with XHR" code you always write.
var eventSrc = new EventSource('source.php');
eventSrc.onopen = function() { /* Do stuff when the connection is opened. */ }
eventSrc.onmessage = function(event) {
/* Just like WebSockets, event.data contains the data sent
by the server. */
}
The client-side code is nearly identical to WebSockets, and the server-side code is trivial.
<?php
header("Content-Type: text/event-stream\n\n");
?>
data: Hello World! The current time is <?= data(DATE_ATOM) ?>.
data: More data!
When doing games or animations, you want to regularly yield to the browser, so it can do its thing without jankiness. But how long should your setTimeout() be set for?
requestAnimationFrame() takes the guesswork out of this - it's just like setTimeout, but it calls your callback the next time the browser is ready to paint the screen, so you don't run your function too much or too little.
var mouse = {x:0, y:0};
var c = document.querySelector('canvas').getContext('2d');
function clamp(x,under,over) {
return Math.min(over, Math.max(under, x));
}
window.onmousemove = function(e) {
var rect = c.canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left;
mouse.y = e.clientY - rect.top;
}
function drawFrame() {
c.clearRect(0,0,c.canvas.width, c.canvas.height);
c.fillRect(clamp(mouse.x-5, 0, c.canvas.width-10),
clamp(mouse.y-5, 0, c.canvas.height-10),
10, 10);
requestAnimationFrame(drawFrame, c.canvas);
}
Drag & Drop (DnD) is easy now. HTML defines a handful of events you can respond to that massively simplify the whole process.
Chrome now supports the standardized gradient syntax, so you can use -webkit-linear-gradient() and -webkit-radial-gradient() now.
The 'box-shadow' property is unprefixed now, so have fun!
(If you were still prefixing your border-radius, that's been unprefixed for several versions now.)
Thank you for your time!
@tabatkins
http://xanthir.com
Any questions?