Aug 27
TechCrunch reports on a Googler, Paul Truong, who created an HTML5-based game for Gmail called Galactic Inbox using his 20% time:
When you start it up, a little Gmail logo envelope guy pops out of a “20% Projects Lab” and starts flying. Essentially, he’s a spaceship and can shoot objects coming his way. It’s simple, but fun.
Read more on the Gmail Blog.
Play the game yourself (note that you must be using a modern browser)!
Ryan Seddon, aka the CSS Ninja, has a nice blog post up where he reverse engineers the new feature in Gmail where you can drag attachments from an email on to your desktop.
Note that the feature only currently works in Chrome.
Ryan begins with the following code:
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);
Describing the code Ryan says:
From the code above you attach an ondragstart event listener to something you want to “drag out” and save to your file system. On the dragstart event you set the data using the new “DownloadURL” type and pass file information to it.
Note though that in order to pass the correct data to the dragstart event you need to provide a download URL that can be passed to the setData("DownloadURL" call. Ryan uses the HTML5 data-* attribute to pass this custom data in:
The custom attribute uses three different fields of data separated by colons:
The files mime type, the name you wish it to be saved as (this can be anything) and the url to where the file can be downloaded from.
Nice find Ryan!
Aug 16
Version 2 of HTML5Rocks is hot off the presses!
We think HTML5 will make your work more engaging and create a faster, more responsive experience for your users, so we're happy to add today a slew of new content to html5rocks.com.
If you want to not only get up to speed, but understand the browser differences and techniques for a robust implementation, please take a look through the new guides for implementing HTML5 video,understanding "offline," auditing your webapp with the Chrome developer tools, and using web workersand @font-face. You can now comment about your experiences with these features and stay up to date on new content via our new RSS feed.
We're also sharing the new HTML5 Studio, a collection of samples of these features in use, with code you can learn from and hack on.
*thump*. That is the sound of Google Chrome Frame getting a beta tag on it with a new version that comes up to Chrome 5 levels:
Instead of adding new bells and whistles, we've fixed more than 200 bugs to make integration with Internet Explorer seamless while improving security, stability, and performance. For example, we’ve improved our handling of Internet Explorer’s InPrivate browsing, cache clearing, and cookie blocking. All of the enhancements and features of Google Chrome 5.0 are available in Google Chrome Frame too, including HTML5 audio and video, canvas, geolocation, workers, and databases.
As we've worked on these improvements, we’ve been excited to see sites adopting Google Chrome Frame, including Meebo and all the blogs hosted by WordPress. In addition to our launch partner Google Wave, some other Google properties, including Orkut and YouTube are also relying on Google Chrome Frame to deliver HTML5 experiences to millions of users.
For those of you who want to develop HTML5 applications and deploy them broadly, we encourage you to give Google Chrome Frame a try. Existing users will be auto-updated to the beta, so if you downloaded Google Chrome Frame before, you’ll automatically get the new version. We’re also creating a new dev channel release, where you can try out the cutting-edge features we’re developing. For information on getting started with Google Chrome Frame, our project documentation is the place to start.
Alex gave a talk on how you can sprinkle in the Chrome Frame love, and start using the HTML5 goodness of video, svg, canvas, etc today!
We hear cries of the end is near!, and now you have a new push. Take a breath and spend the IE6 cycles on building amazing Web applications. So, CFInstall.check({..}) away! :)
Alex has a post on the beta itself:
In some ways it’s a strange product; it’s working best when you notice it least. As a developer, you shouldn’t have to think much harder about it than either to include the header or meta tag or to include a couple of lines of script to prompt users to install the plugin — a process which notably doesn’t require a restart and doesn’t even take users off of your site. There’s no new tool to learn, no new language you have to wrap your head around…in fact, the hardest part might just be putting down all the habits we’ve collected for catering to legacy browsers.
As I’ve begun to build exclusively to modern browsers, the experience of concerted un-learning of hacks and the ability to write directly to the platform again, sans toolkit, has been eye opening. Yes, there’s still a lot that can be improved in DOM, CSS, and HTML, but things are moving, and the tools we need now aren’t the tools we have today. Better yet, there’s every indication that things are progressing fast enough that instead of building tools to bring up the rear, we’ll be building them to shield ourselves from the ferocious pace of improvement should we need them at all.
If you’re starting a new project today, I encourage you to prototype to HTML5 and modern features and then think hard about what you’re building and for whom. Do these apps really need to run on legacy browsers? Why not just use GCF to make that pain and expense go away. Once you’ve experienced how good modern web development can be — how rich and fast the apps you can deliver are — I’m convinced that you’ll find it hard to go back. The rich, open, interoperable web is the platform of the future, and I couldn’t be happier that GCF is going to help deliver that future.
The Google I/O sessions are now live. I/O was a big event this year, and the press liked to focus on the splashy double headed keynotes (day 1: go web!, day 2: go Android :/).
The bulk of the real content from Google engineers was very solid indeed, and there are gems for Web developers out there.
I wanted to highlight a slew of these:
Remember the GWT Quake goodness from April 1st? The crew behind it are back giving a talk about the tech behind it. There are many gems in here, such as the image library by Ray Cromwell that has software and hardware back ends (WebGL). Watching the photoshop-esque filters running via WebGL makes you drool.
There were other GWT sessions:
HTML5 and Chrome
Google used the "HTML5" word a loooot that week. Here is a blending of talks, part open Web, part Chrome itself.
Ian Fette kicks off a session on HTML5 support:
Oh, and have some fun with Ignite:
There's an old saying: "It took me ten years to be an overnight success." We've been waiting for web fonts for at least a decade, and 2010 will finally be the year that web fonts go mainstream.
This is in no small part to the work both Typekit and Google have been doing. Today they both announced some very cool things in this area.
First up, Google announced that they are releasing high quality open source fonts in the Google Font Directory. Since these are open source you can even download the original font files yourself at the font code.google.com project.
Next, Google has made it very easy to include these fonts into your page using the new Google Font API. To use a font you simply drop some HTML into your page similar to the following, specifying the font you want to use:
body { font-family: 'Tangerine', serif; }
Doesn't get simpler than that. The new API does alot of things for you behind the scenes:
Google’s serving infrastructure takes care of converting the font into a format compatible with any modern browser (including Internet Explorer 6 and up), sends just the styles and weights you select, and the font files and CSS are tuned and optimized for web serving. For example, cache headers are set to maximize the likelihood that the fonts will be served from the browser’s cache with no need for a network roundtrip, even when the same font is linked from different websites.
These fonts also work well with CSS3 and HTML5 styling, including drop shadows, rotation, etc. In addition, selecting these fonts in your CSS works just the same as for locally installed fonts, facilitating clean separation of content and presentation.
On a related front, Typekit and Google announced a new Web Font Loader that smooths over many of the differences around loading web fonts on a page:
The WebFont Loader puts the developer in control of how web fonts are handled by various browsers. The API fires JavaScript events at certain points, for example when the web font completes downloading. With these events, developers can control how web fonts behave on a site so that they download consistently across all browsers. In addition, developers can set the fallback font's size to more closely match the web font, so content doesn't reflow after loading.
Furthermore, the WebFont Loader is designed to make it easy to switch between different providers of web fonts, including Google, Typekit, and others. The code is modular, and we expect to add modules for other major web font providers in coming weeks.
It's great to see Typekit involved in this; they are a real pioneer in this area and have helped make fonts on the web a reality.
To see all these pieces together navigate over to Smashing Magazine which relaunched their site using these technologies.
Congrats to the Google Web Fonts and Themes team, including Raph Levien, Jeremie Lenfant-Engelmann, Marc Tobias Kunisch, Meslissa Louie, and David Kuettel.
[Disclosure: I work for Google and know the Web Fonts team. However, even if I didn't, I would still be excited about this since I've been waiting for web fonts to happen since the 90s!]
The Chrome Web Store was shown off at the Google I/O keynote (streaming live) today along with the other great news of open codecs, great new tools, and more.
I found myself torn about this one. For one, it seems tied into Chrome itself. The problem that Sundar stated (developers needing a good channel; users having a hard time finding things) is valid for the entire Web. We don't need a Firefox Web Store, IE Web Store, etc etc etc. We have an opportunity to do better here.
That being said, it was great to see the early stages here and how they give developers the ability to place your Web application in to an experience where you can put a price tag on top.
I would love to get details here. How do you package the application? Do you have to upload the package to the store?
I wonder if there is room for a distributed system that allows me to put a price tag on my web application, but keep it at my URL.
What do you think? There is a session on the store... so I look forward to the deets!
Dec 19
Following their recent acquisition by Google, AppJet announced they would open source EtherPad, the collaborative, real-time, notepad. That’s now done, and you can find the project home at – surprise, surprise – Google Code.
What’s especially cool about this is that Etherpad is Javascript on both sides of the wire. In a new ReadWriteWeb article on Server-Side Javascript, I wrote that EtherPad is probably the most popular site powered by Javascript (anyone want to up the ante?). As server-side Javascript is getting interesting again, with Comet a major driver, it’s a big deal that we now have the entire source tree for a Comet-style, server-side Javascript, application that’s been proven in the real world.
AppJet also released appjet.jar when they discontinued the general server-side Javascript platform earlier this year. Unfortunately, the download link is broken on AppJet.com, so I don’t know if there’s any way to get hold of the official version. It does, however, live on as a cloud-hosted offering at JGate.
It has been a busy work for Chrome, with some interesting features hitting the various "channels".
First up, we have Web Socket support being turned on by default on the developer channel. If you want to be a really cool JS h4x0r you should write a server app using node.js. If you want it to work on older browsers, try out the old favourite shim tale of use Flash to degrade, and Mozilla support should be coming soon and surely IE9 will support it too ;)
Now you can code like this:
Although I curse at the weak support on Chrome Mac (coming by end of week though!), other Chromers can use the new beta extension system pioneered by the awesome Aaron Boodman and team:
Today, we're really happy to release a beta of extensions that begins to deliver on our initial vision. Extensions are as easy to create as webpages. Users can install and uninstall them quickly without restart, and extensions have a great polished look that fits in with Google Chrome's minimalist aesthetic. When developers upload an extension it is available to users immediately, with limited restrictions and manual reviews only in a few situations.
On the technical side, we've been able to use Google Chrome's multiprocess architecture to help keep extensions stable and safe. And Chromium's extensive performance monitoring infrastructure has helped us ensure extensions affect Google Chrome's speed as little as possible. You can learn more details about the internals of our system in the videos below.
I am excited about the new extension systems of Chrome and Jetpack, and wrote up thoughts on how we are jumping out of the page and into the runtime as Web developers.
rel="noreferrer" and target="_blank"
I missed the fact that in Chrome you can opt-in to a new process from a link. This is important as every tab is NOT necessarily in its own process. People assume that is the case (a one to one mapping) but it isn't (and has interesting security implications):
In many cases, though, Google Chrome needs to keep pages from related tabs in the same process, since they may access each other's contents using JavaScript code. For example, clicking links that open in a new window will generally cause the new and old pages to share a process.
In practice, web developers may find situations where they would like links to other pages to open in a separate process. As one example, links from messages in your webmail client would be nice to isolate from the webmail client itself. This is easy to achieve now, thanks to new support in WebKit for HTML5's "noreferrer" link relation.
To cause a link to open in a separate process from your web page, just add rel="noreferrer" and target="_blank" as attributes to the tag, and then point it at a URL on a different domain name. For example:
It is amazing how much easier it is these days to build pretty sweet mashups by using hosted services. Here's a screencast of using Yahoo, Bing and Google to build a search interface in under 25 minutes without having to read any API docs or installing SDKs by using YQL:
Building a search mashup with YQL using Google, Yahoo and Bing - live :) from Christian Heilmann on Vimeo.
Give it a lick of paint and you have a pretty sweet little tool:
All the source code is available on GitHub.