January 22, 2009

Web Resources He Uses




“Ethan” has a really nicely packaged set of web resources that he uses.

From JavaScript core libraries, to widgets, to tools, to CSS frameworks, to CSS techniques, to browser compatibility, to typography, to extensions, and much much more. Nicely done.

Sexy Page Curls



thought that sexy curls were not related to technology, but Elliott Kember packaged a nice and easy page curl plugin using jQuery.


<script>
$(document).ready(function(){
$( '#target' ).fold();
});
</script>

How global is your JavaScript?




Mats Bryntse “had an idea about checking the most popular javascript frameworks & APIs to see how they differ in terms of global namespace pollution. This page loads all the frameworks separately in an iframe and compares the window object against the one of a fresh iframe. I also included information about which builtin JavaScript classes have been augmented, not sure how that would be useful but it shows a difference in architectural approach between the frameworks. You can click a row to see the details about the global symbols in the framework/API.

The results vary more than I’d expected and it’s interesting to see the different namespacing strategies at play. YUI/Jquery/Ext keep the numbers down by putting everything in one global object. It seems like Microsoft is using their own kind of namespacing using the $ sign as a namespace delimiter rather than using real object properties as the rest of the frameworks do.”

You can check this out via his checker page. An interesting read and you can narrow in on APIs of your choice.

We like to talk about how evil global variables are, but I wonder if we take this a touch too seriously sometimes. Sure there can be collisions and the like, but a lot of projects are doing just fine :)

Test Pilot: Wouldn’t it be nice to have a way to do real usability studies?



How many tabs does an average use at a time? How about novice users? How often is the stop button pressed? How many times do people open a new tab to perform a search?

There are hundreds of questions like these whose answers would help quantitatively inform the design process of Firefox.

Those are the questions that Aza Raskin and the Mozilla Labs team are working on solving with Test Pilot, a very exciting project that is kicking off in force.

I am jazzed to see where this goes. I would love to see the crowd show us that “wow, people really do that?” which is my constant experience from usability studies. Maybe we could get some performance info too, and learn from the crowd that plugin A + plugin B causes issues. Who knows. The platform it just beginning. Have ideas? “Come brainstorm at a Lab’s Night, participate in the forums, hop on IRC, or help create on our wiki.”

December 11, 2008

jQuery finds its way into Microsoft and Nokia stacks

Just as jQuery kicks off its first jQuery conference adjunct with The Ajax Experience in Boston tomorrow, it gets an energy boost from some big double-barrel news:

Microsoft and jQuery

Microsoft is looking to make jQuery part of their official development platform. Their JavaScript offering today includes the ASP.NET Ajax Framework and they’re looking to expand it with the use of jQuery. This means that jQuery will be distributed with Visual Studio (which will include jQuery intellisense, snippets, examples, and documentation).
Additionally Microsoft will be developing additional controls, or widgets, to run on top of jQuery that will be easily deployable within your .NET applications. jQuery helpers will also be included in the server-side portion of .NET development (in addition to the existing helpers) providing complementary functions to existing ASP.NET AJAX capabilities.

Scott Guthrie talks about the news and details some of the features. His blog shows intellisense at work, and more.
Scott Hanselman then wrote an tutorial that shows jQuery working with ASP.NET libraries such as the ASP.NET AJAX 4.0 Client Template work.
Here is the sample code that shows the weaving of jQuery and Client template APIs. The script src at the top is to an "intellisense" version of jQuery, which includes the addition of special comments to make Intellisense work. The Open Ajax Alliance is trying to standardize on this metadata so we can share it between the various tools (e.g. Aptana has a very nice sdoc that does this, and allows you to put it external to the file so you don't have to have clients download it).
Nokia and jQuery

Nokia is looking to use jQuery to develop applications for their WebKit-based Web Run-Time. The run-time is a stripped-down browser rendering engine that allows for easy, but powerful, application development. This means that jQuery will be distributed on all Nokia phones that include the web run-time.
To start Nokia will be moving a number of their applications to work on the run-time (such as Maps) and building them using jQuery. jQuery will become part of their widget development platform, meaning that any developer will be able to use jQuery in the construction of widgets for Nokia phones.
How will these companies work with the project?

Microsoft and Nokia aren’t looking to make any modifications to jQuery (both in the form of code or licensing) - they simply wish to promote its use as-is. They’ve recognized its position as the most popular JavaScript library and wish to see its growth and popularity continue to flourish.

In fact their developers will begin to help contribute back to the jQuery project by proposing patches, submitting test cases, and providing comprehensive testing against their runtimes. As with any contribution that comes in to the jQuery project it’ll be closely analyzed, reviewed, and accepted or rejected, based upon its merits, by the jQuery development team - no free ride will be given.
A significant level of testing will be added to the project in this respect. The jQuery test suite is already integrated into the test suites of Mozilla and Opera and this move will see a significant level of extra testing being done on Internet Explorer and WebKit - above-and-beyond what is already done by the jQuery team.

This is great news for the jQuery project.

Microsoft LiveFX: Apps that look like a browser


Regardless of whether you’re in the Google camp or in the Microsoft camp, I think it’s a fair statement to say that these differences of viewpoint accurately reflect each company’s core strength and focus: Google wants the browser to grow to subsume the desktop; Microsoft wants the desktop to grow to subsume the cloud.
This was the concluding paragraph in a post by Danny Thorpe of Microsoft (and formerly Google).

His post is itself a rebuttal on Dare’s article: Live Framework (LiveFX), Is it Microsoft’s GData or Something More?:

A number of LiveFX’s additional features such as synchronization and resource introspection which have no analog in GData are fairly interesting and I wouldn’t be surprised to see these ideas get further traction in the industry. On the flip side, the client-side Live Operating Environment is a technology whose benefits elude me. I admit it is kind of cool but I can’t see its utility.
Danny answers:

The answer, in a word, is “offline.”

The local Live Operating Environment (local LOE) is what makes running mesh-enabled web applications on the desktop, outside the browser, possible. The local LOE creates and manages a sandboxed execution environment for the mesh app, just like a browser would for an HTML+JavaScript or Silverlight application but without the browser UI frame looming overhead.
It seems like a trivial thing, whether or not the browser frame surrounds your app UI. Does it matter? The answer is yes - having your app surrounded by browser UI constantly and forcibly reminds the user that this isn’t a real app, it’s just a web page with lipstick.
The Live Framework local LOE is a client application that works like a browser. It may even create an instance of the browser internally (I don’t know the internal details of the LOE) but it is fundamentally treated as “not the browser.”

I am trying to wrap my mind around this all myself :)

Chrom(e|ium) Details: I/O, Responsiveness, UI, and Graphics

The Google folks have been doing a really good at consistently blogged about the decisions that were made as they created Chrome:


Graphics in Google Chrome

Google Chrome uses a library called Skia, which is also the graphics engine behind Google’s Android mobile OS. The two projects share code that implements WebKit’s porting API in terms of Skia. Google Chrome also uses Skia to render parts of the user interface such as the toolbar and tab strip. I’m going to talk about some of the history that led us to choose Skia, as well as how our graphics layer works.

I/O in Google Chrome

We moved the I/O onto a number of background threads which allow the user-interface to proceed asynchronously. We did this for large data sources like cookies, bookmarks, and the cache, and also for a myriad of smaller things. Writing a downloaded file to disk, or getting the icons for files in the download manager? The disk operations are being called from a special background thread. Indexing the contents of pages in history or saving a login password? All from background threads. Even the “Save As” dialog box is run from another thread because it can momentarily hang the application while it populates.Content, not ‘Chrome’

To achieve the streamlined feel we were after, we knew we would have to cut some things, and while we had our own intuitions about what was and wasn’t useful in current browsers, we had no idea how those ideas matched to reality. So in typical Google fashion, we turned to data; we ran long studies of the browsing habits of thousands of volunteers, compiled giant charts of what features people did and didn’t use, argued over and incorporated that data into our designs and prototypes, ran experiments, watched how our test users reacted, listened to their feedback, and then repeated the cycle over and over and over again.

Even the the more subtle parts of our first-level UI were subjected to similarly intense scrutiny - “what shade of blue best suits XP users”, “should the tabs start 18 or 19 pixels below the top of the window?”, “what’s the correct offset between our buttons?”. The answers to these questions were debated and tested for our entire development cycle, and we saw that opinions consistently differed greatly depending on whether we had been Windows 3.1, OS7 or even NeXT users and developers.The Google Chrome Sandbox
Google Chrome’s multi process architecture allows for a lot of flexibility in the way we do security. The entire HTML rendering and JavaScript execution is isolated to its own class of processes; the renderers. These are the ones that live in the sandbox. We expect to work in the near future with the plug-in vendors to securely sandbox them as well.


I have to admit that I personally wish Cairo was chosen, as having the Google engineers behind that project would have been amazing, and benefit would be had for all of the applications that use it.

State of the Open Web Talk

I recently gave a State of the Open Web talk as part of the Google Developer Days overseas, in Italy, Russia, the Czech Republic, and Israel (I’m getting over a 10-hour jet lag right now - whew). The talk description:
“Come learn about the state of the Open Web, what it is, and why it is so important. In this presentation you will learn about the latest Open Web technologies, including the Canvas tag, Web Fonts, SVG, HTML 5, and see demos, code snippets, and the state of their implementations across browsers. Discover what you can use today (more than you’d expect!) and what remains to be done.”


[Disclosure: I work for Google on the Open Web Advocacy team]

Digg Attack: A Canvas Game

Fun news for a Friday. From Jacob Seidelin–the dude behind JavaScript Super Mario Brothers–comes Digg Attack, an original JavaScript game using <g;canvas> for visuals (and Flash for music).


As an added twist, the game uses Digg to provide a sort of unique twist; enemies in the game are based on stories in the Digg API feed and their ratings.

Psych Desktop soon to become more Lucid

We heard from Will of the Psych Desktop project as he ran across our coverage of other Web desktop apps. He shared with us his project that is part of the Dojo Foundation which you can check out here.


He had some good thoughts, so I thought I would pass them along below:




Psych Desktop is an open source web desktop licensed under the AFL. We're a part of the Dojo Foundation, and have been around for around two years I believe. We're going to rename the project as Lucid when we finish our new site.


Anyways, there are two main ideas behind Lucid. The first is that we aren't just building a clone of a desktop environment, but rather a desktop that was built for the web. For example, in 1.1 we plan on providing an alternate UI made for mobile devices such as an iPhone. Another example of what we want to accomplish would be a photo manager that would easily allow you to publish photos to a public photo gallery. We also want to do the typical things, like a word processor and email, but that's not the main idea behind the desktop.


The second idea behind it is that we should provide a nice, clean set of APIs for developers to use in their apps. For example, we've got a Registry that is based off of a dojo.data store, so you can plug it directly into a dojox.grid.DataGrid, and you instantly have an editable grid that writes back to the store. Another neat API is the crosstalk API, which allows intercommunication between users. The Messenger app is using this. There's also a sound API that can be used to playback audio. The apps are written in javascript, and don't require any server-side code at all. And of course, there's also a filesystem.


Right now we're in beta, but we're coming close to our 1.0 release. There's still a bit of work to be done, but it's stable enough for developers to start playing with it. 1.1 is going to be a lot more innovative, but I think 1.0 will be good starting grounds for our expedition.


It is cool to see the Will is passionate about the area and is "in it for the long term."