Web Info & Tutorials

Robert Kroeger has free a pleasant accumulation for topical database access. The Web Storage Portability Layer nicely abstracts on crowning of HTML5 and Gears for database access.

The WSPL consists of a assemblage of classes that wage anachronic transactional admittance to both Gears and HTML5 databases and crapper be institute on Project Hosting on Google Code.

There are fivesome base classes:

google.wspl.Statement - A parametrizable SQL evidence class

google.wspl.Transaction - Used to fulfil digit or more Statements with ACID properties

google.wspl.ResultSet - Arrays of JavaScript hash objects, where the hash key is the plateau article name

google.wspl.Database - A unification to the championship database, also provides dealings support

google.wspl.DatabaseFactory - Creates the pertinent HTML5 or Gears database implementation

Also included in the organisation is a ultimate note-taking covering with a continual database store shapely using the WSPL library. This covering (along with Gmail ambulatory for iPhone and Android-powered devices) is an warning of the cache pattern for antiquity offline scheme applications. In the store pattern, we append a browser-local store into the scheme covering to fortuity the coetaneous unification between individual actions in the covering and server-generated responses. Instead, as shown below, we hit digit accumulation flows. First, all topical to the device, table distinction from the store to the UI patch changes prefabricated by the individual update the cache. In the ordinal flow, the store asynchronously forrad individual changes to the scheme computer and receives updates in response.

By using this architectural pattern, a scheme covering crapper prefabricated unbigoted of a tender (or modify absent) meshwork connection!

You crapper of instruction verify a extreme at the cipher to wager how it works, for example:

Nicely done. It would be enthusiastic to wager a edition that acts as a shim and when in Gears fashion manually implements the HTML5 accepted API so you crapper indite your individual cipher to that and not a newborn google package.

“Why doesn’t Google ingest GWT more?”

That is a discourse that I was asked maaaany a time. There are sites same Base and the older mashup application and others…. but “why not something bounteous same Gmail?”

It was ever so thickened because it wasn’t a totally clean question.

1. Google has whatever of the prizewinning Ajax hackers discover there. Teams with that talent haw not be the correct grouping to ingest GWT!
2. A aggregation of sites were cursive before GWT was created, and migrating something is a assorted proposition

Google Wave on the another hand, had the quantity to rattling appraise GWT and they went with it. There was a speech at Google I/O most why, and whatever of the modify newborn features they ingest such as runAsync that does whatever unbelievably sharp things to lazily alluviation cipher when necessary (and gives you a such small initial download).

I don’t hit such to add to the large news that Wave has gotten today. I wager digit pieces. The digit that most grouping pore on is how it looks and what the place does. It is rattling rich, and cool, and whatever grouping module essay it and whatever module not same how it feels.

That isn’t the example I am most agog about. Although it is enthusiastic to revive what a act agency could be in 2009, but I am such more agog most the APIs. A aggregation of servers and frameworks and languages are vying for the “real instance Web server” trophy. What Wave gives you is a united feat AND a description to physique your possess stuff. At its set I wager it as a enthusiastic artefact API to permit grouping work on a mutual object. That is a strange antiquity block.

When I heard most it, I directly intellection most my possess concern of Bespin of course. From the initial image we had the idea of creating a collaborative ethnic undergo with code. One feature that has daylong been on the art commission crapper be seen here:

We poverty to bond chat/status/microblogging noesis to files and modify cipher snippets in a project. Imagine existence healthy to particular whatever cipher and wager not exclusive who created it and when, but also what was discussed. The ethnic forbid on the correct has whatever of that concept. Then downbound beneath you wager the timeline analyse that lets you go backwards in instance and wager the cipher modify before your eyes. Maybe you poverty to repetition the writing that a coworker did patch you were discover instead of opened at the diffs? This is the category of abstract that I wish we crapper research with Wave to do. We module see!

What are the odds? At roughly the aforementioned instance we saw the crowning digit individual generated recording sites on the Web exhibit us a hunting at the future:

At Google I/O, Vic showed us an HTML 5 demonstrate of YouTube. It looks the same, but the controls are in HTML, powering the video tag. The attendant videos on the correct assistance lateral had a modify newborn feature. As you pussyfoot over them, they would endeavor along. Right today hunt around in recording is an direful experience. With large wind we module be healthy to do iMovie call flip-throughs to encounter just what they are hunting for in a video.

DailyMotion goes a travel further. They announced not exclusive a demo area but “a newborn R&D papers sacred to unstoppered recording formats and scheme standards: openvideo.dailymotion.com“. You crapper encounter 300k videos every encoded in unstoppered formats correct now.

Firefox has advance the artefact with Ogg Theora support, but as Mark colonist noted Chromium crapper be shapely with support. The discourse as Mark says is “Will Chrome hold Theora video?!”

Let’s not banter ourselves, piranhas are discover there in the shaded waters, so it is a balsy advise for anyone to do this, especially folks with lots of $ to go after…. but we requirement to wind unstoppered the doors. Here’s to the territory of Open Video.

Chris reverend has been having whatever fun with CSS gradients on a hunt to create pleasant hunting elements without images.

He uses CSS same this:

to create elements same this:

We hit mentioned Sass and another CSS conception libraries before, but someways CleverCSS slipped by.

The nesting line looks kindred to another solutions:

But, you crapper also ingest attributes:

Define constants:

Implicit concatenation:

Calculations:

Nice

Content extraction is ease a blistering matter on the web. We hit lots of enthusiastic book noesis but not such evidence as to what those texts are. To attain it more manifest we do constituent extraction for tagging but also geo positioning extraction for gift the book whatever spacial reference.

A evenhandedly newborn scheme assist that does this for us is Yahoo’s Placemaker. What it does is dissect a book (or the writing circumscribed by an HTML or take URL) and provide you backwards every the geographical locations that are mentioned in it. Pretty awesome, but the difficulty is that the API exclusive allows for POST values and has either XML or RSS output. This effectuation you can’t do it in ultimate XHR because of the cross-domain difficulty and you can’t ingest generated playscript nodes as there is no JSON output. You’d hit to ingest a server-side agent service. This is pretty cushy with PHP and cURL as explained in this journal post but crapper be annoying, too.

That’s ground I wrote a diminutive cloak in JavaScript that allows JS admittance to the Placemaker assist titled JS-Placemaker. I am not hosting a agent for you, every you requirement to do is get your possess covering ID for Placemaker and ingest the JavaScript which you crapper patron yourself if you desired to.

Analyzing a book using JS-Placemaker is as cushy as this:

The housing production is an goal or an clothing of places the assist returned from the text:

The prototypal constant is the book you poverty to dissect (this could be a indicator to the innerHTML of a DOM element, for example), the ordinal is the asking duty and the ordinal the scene of the book - the demonstrate tender shows that Placemaker groks individual languages.

Under the hood, JS-Placemaker uses YQL to impact around the supply of proxying the request. YQL allows you to delimitate your possess accumulation tables and modify allows for doing JavaScript transmutation of accumulation on the server-side before sending it on. YQL has JSON output, so I was healthy to ingest that to admittance Placemaker in JavaScript.

The geo.placemaker Open Table was shapely by Balaji Narayanan and blackamoor Hughes-Croucher and crapper be utilised in YQL directly. Say you poverty to intend the geo positioning accumulation from the Slashdot Homepage in JavaScript, you crapper do this with the mass evidence in YQL.

You crapper opt JSON as the production and you intend the accumulation a a pleasant object.. Define a asking method and you could ingest it direct in a playscript node.

Have a Play with the YQL housing using the Open Table, but meliorate intend your possess AppID, before this digit exceeds the regular limits.

Robert Nyman has a newborn Firebug spreading titled Firefinder.

The intent is to apace book CSS selectors/XPath in a writing to wager what module match, or how some instances of a destined surroundings there are (thinking destined identify of heading, for instance).

It offers:

• A hurried artefact to separate HTML elements via CSS selector(s) or XPath
• Highlight them in the document
• List them in the Firebug commission in a collapsable list
• A calculate of the amount matched sort of elements

There are digit types of code. A super money of poop code, and a diminutive money of poop code. Favour the small.

The above declare was explained to Ben and I from a crowning cutting IBM organise who has cursive more cipher than I hit had blistering dinners.

Less cipher is good. Less to read, easier to understand, and as Alex mentions, it matters modify more for JavaScript computer lateral developers:

JavaScript is different. Unlike nearly every another language, the terseness of JavaScript cipher is a key determinative in the action of a scheme application. The large your scripts, the slower your app loads. It’s as ultimate as that.

This comes from his proposal for JS Lambdas (or Cramdas). He continues:

It’s a crime, then, that we ease hit to type:

PLAIN TEXT

JAVASCRIPT:

1.  
2. node.addEventListener(“click”, function(evt){ /* … */ }, false);
3.  
4. // or
5.  
6. [/* … */].forEach(function(i){ /* … */ });
7.  

He then goes on to handle the fact that he doesn’t poverty to intend into arguments on what lambda means, but kinda doing something more simple…. let’s meet ready it simple:

The prizewinning that Erik and I could become up with that is relatively unambiguious for parsers, doesn’t inform hard-to-type characters on destined keyboard layouts, and doesn’t disorderliness with the semantics of function(){} is this:

PLAIN TEXT

JAVASCRIPT:

1.  
2. // blank duty body, set arguments
3. var lambda = #(){ /*… */ }
4.  
5. // blank duty body, arguments itemize elided away
6. var lambda = #{ /* … */ }
7.  
8. // we crapper re-write the preceding examples as:
9. node.addEventListener(“click”, #(evt){ /* … */ }, false)
10.  
11. // and
12.  
13. [/* … */].forEach(#(i){ /* … */ })
14.  

The structure is a thickened fantastic at first, but you can’t debate with the terseness. We ingest $ for document.getElementById-ish stuff, so how most #() for function()? I conceive I favour it to another options same (evt)->{}. What would you like?

Micah Snyder of Digg posted on DUI.Stream, an empiric accumulation that implements a multipart XHR support to clump resources into digit letter and then breaks them discover at the added end:

One of the scheme that high-performance websites same character declare motion up alluviation nowadays is by reaction the sort of protocol requests per page. We started intellection most what we could do to turn protocol overhead, and where we could intend the large benefits from it. Well, digit abstract led to added and the incoming abstract we knew we were conversation most composition a unspecialised support for bundling files, sending them finished a azygos request, then separating them for ingest erst they nous downbound the pipe.

We call this support MXHR (short for Multipart XMLHttpRequests), and we wrote an constituent to our Digg User Interface accumulation titled DUI.Stream to compel it. Specifically, DUI.Stream opens and reads multipart protocol responses piece-by-piece finished an XHR, expiration apiece accumulate to a JavaScript trainer as it loads.

Why do this? Well, DUI.Stream module earmark developers to drastically meliorate the pace of uncached tender loads by bundling most of their resources into a azygos protocol request, with a azygos time-to-first-byte and no letter throttling by the individual agent. Additionally, the filler of the salutation has no gist on the performance instance of apiece chunk, as the computer handles apiece warning of the salutation on the control and crapper dispense it into the DOM for performance immediately, in the literal visit you specify. On a broad traffic, high-activity place same Digg, we hit to transfer dumbfounding amounts of accumulation on apiece permalink — typically hundreds of individual images within the prototypal 50 interpret clothing on a tender alone, not to name the UI plate and actualised interpret data. (You crapper wager this for yourself: attending the sort of protocol requests that line up when you modify a tender of comments). So our direct ingest housing for DUI.Stream is motion that prototypal long, grueling tender alluviation on an blank store into something nearly same from a tender of accumulation with full cached resources.

You crapper verify a countenance at a demo in action. Reloading the younker shows how chronicle varies so such on apiece request. The demos looks same this:

PLAIN TEXT

JAVASCRIPT:

1.  
2. var s = new DUI.Stream();
3.  
4. var noesis = ‘’;
5.        
6. s.listen(‘text/html’, function(payload) {
7.     noesis += payload;
8. });
9.  
10. s.listen(‘complete’, function() {
11.     $(‘#stream’).append(‘<p>Stream took: ‘ + ((new Date).getTime() - streamStart) + ‘ms</p>’ + content);
12.    
13.     var normalStart = (new Date).getTime();
14.    
15.     for(var i = 0; i <9; i++) {
16.         $.ajax({
17.             ‘url’: ‘loremIpsum.html’,
18.             ‘async’: true,
19.             ‘type’: ‘GET’,
20.             ‘dataType’: ‘html’,
21.            
22.             ’success’ : function(html) {
23.                 $(‘#normal’).append(html);
24.             }
25.         });
26.     }
27.    
28.     $.ajax({
29.         ‘url’: ‘loremIpsum.html’,
30.         ‘async’: true,
31.         ‘type’: ‘GET’,
32.         ‘dataType’: ‘html’,
33.        
34.         ’success’ : function(html) {
35.             $(‘#normal’).append(html);
36.             $(‘#normal’).prepend(‘<p>Normal took: ‘ + ((new Date).getTime() - normalStart) + ‘ms’);
37.         }
38.     });
39. });
40.  
41. var streamStart = (new Date).getTime();
42. s.load(‘testStreamData.php’);
43.  

How does Digg wager this as a benefit?

Let’s speech a taste most the architectural benefits of implementing MXHRs with DUI.Stream. Back when the scheme was supported mostly on a tender metaphor (i.e.: digit bicentric writing with outside references), whenever you unexploded the page, the tender requested its images, stylesheets, etc, then you were done. These life you’re meet as ofttimes weight an application; the tender progressively enhances into a stateful UI by weight player stylesheets, scripts and a full disorderliness of UI plate after the initial request. Yet, we’re ease using the older help line of intend markup –> intercommunicate markup –> letter outside resources –> alluviation and transfer externals.

Take our normal login talking incase for example. In visit to turn requests we clump its JavaScript in with the rest of the page, we place its CSS up in the brick with the rest of the styles, then we letter exclusive the markup for the talking box, intercommunicate it, and permit it blast its possess protocol requests for the images that attain up its chrome. In this busted model, protocol connections and performance behaviors separate our UI scheme up into assorted parts of the tender that every intercommunicate at assorted nowadays at the browser’s discretion. Even if we place everything into digit cohesive scheme and unexploded the CSS link, playscript attach and markup together, they’d ease every blast their possess protocol requests and the images would ease become in afterwards on the prototypal tender load. This meet won’t do.

Now, let’s rethink how our login talking could impact using DUI.Stream. We crapper letter a Stream that contains everything necessary to intercommunicate and ingest the talking box. As apiece conception comes in, it gets passed finished to be built, and renders directly with no ikon backfill or suspended JS behavior. The DUI.Stream support crapper then transfer those resources backwards into cacheable elements for our incoming tender load, which crapper blithely 302 its artefact apace finished the performance process. Pretty course right? Right.

Being healthy to modify the Web to attain it your Web is digit of the features that makes the Open Web much a strange platform. We should every be employed on how to modify the forbid for users and developers so they crapper do this with the large of ease. Writing application extensions has been farther from cushy which makes it more than awesome that we wager so some add-ons discover there, especially in the Firefox eco-system.

How strange would it be if you could also establish the functionality without a application restart? Instant on. That today comes to a Firefox nearby you thanks to newborn try to attain it easier for you to caretaker calculate your browser. Aza Raskin, Atul Varma, and the Mozilla Labs aggroup hit kicked soured a newborn research titled Jetpack that gives you that and the knowledge to attain extensions as cushy to indite as a jQuery plugin

As this is Mozilla Labs, we are distribution this send rattling primeval stage. We poverty to intend feedback and a accord to delimitate where this identify of abstract should go. As such, there module be things missing. That existence said, what are the aspirational broad take goals?

Web-based

• HTML, Javascript, and CSS module be the exclusive tools required to create a Jetpack Feature
• Jetpack Features module be streamed & reachable via a URL, meet same the rest of the Web.
• Jetpack Features module order exclusive the peak turn of individual interaction necessary for section to install: no restarts, and meet a utter or digit and you are beatific to go.
• Jetpack Features module be easily debugged in the application without restarts using ordinary Web utilization tools same Firebug

Secure

• Jetpack Features module hit admittance to exclusive the privileges they need, and section should ever be presented in human-terms, and not technical-terms.
• Jetpack Features module be cushy to cipher analyse — making section problems more shallow, and analyse nowadays shorter.

Robust

• Jetpack Features module ingest a versioned API so that you won’t hit to update & revalidate your cipher for every newborn edition of Firefox.
• Jetpack Features module be universal. That effectuation if you amend a Feature for Firefox, it should also separate on Fennec, Thunderbird, Songbird, or some another potentially Jetpack-enabled platform.
• Jetpack Features crapper be lightweight but also flooded featured applications that add to the Web experience, meet same Firefox add-ons do today.

Extensible

• Jetpack itself module be extensible allowing for the cushy body of reviewed & versioned third-party toolkits (e.g. jQuery, Dojo, etc.) and API libraries (e.g. Twitter, Delicious, Google Maps, etc.)

Fly with Jetpacks to Bespin

On the Bespin aggroup we poverty to attain the undergo as cushy as possible, so we created a jetpack plugin that is installed on the newborn minted 0.2 edition that we meet pushed to bespin.mozilla.com. The newborn edition has a lot of newborn functionality including desegrated VCS support, which was a bounteous near for us as we necessary that to dogfood the agency properly!

But, backwards to Jetpack. With the stylish Bespin you intend Jetpack hold for free. This was unbelievably elating to us as we saw how cushy it is to create a newborn Jetpack feature and establish it into the application in real-time.

Here is a recording display meet that. We achievement finished the creation of a newborn application sidebar that looks same this:

In the video, when I created a newborn jetpack via jetpack create it settled this in a jetpacks send in Bespin. This crapper be edition dominated and shared…. meet same another Bespin projects.

I am rattling agog to wager where Jetpack crapper go. Being healthy to modify the obstruction for developers to ingest ultimate Web profession that they undergo (and maybe love?) to modify the application seems to be a beatific organisation to me. To see more, analyse discover these resources:

• Some Demos:
  • UnAd - Content Filter Demo
  • Email Notifier - Status Bar Demo
  • Image Replacer
  • Delicious Notifier
  • Weather
• Full introduction
• Step finished tutorial
• Play around with the initial APIs demos and let us undergo what you think
• Report a bug
• Grab the maker code and mend a fault or add a feature
• Discuss, speaking and add to the organisation in the Jetpack communicating group
• Join us in #jetpack on irc.mozilla.org