In computer science, a fiber is a particularly lightweight thread of execution.

Like threads, fibers share address space. However, fibers use co-operative multitasking while threads use pre-emptive multitasking. Threads often depend on the kernel's thread scheduler to preempt a busy thread and resume another thread; fibers yield themselves to run another fiber while executing. The article on threads contains more on the distinction between threads and fibers.

Fibers describe essentially the same concept as coroutines. The distinction, if there is any, is that coroutines are a language-level construct, a form of control flow, while fibers are a systems-level construct, viewed as threads that happen not to run concurrently. Priority is contentious; fibers may be viewed as an implementation of coroutines, or as a substrate on which to implement coroutines.

The above is taken from Wikipedia, which is discussing the computer science concepts behind fibers.

Why do we bring this up? The Asana team (who we featured when they came out with LunaScript) continue their quest to make an ergonomic, productive, and performant framework for the Web.

Today they are discussing their patch to v8cgi that adds in support for their own fiber implementation.

It all ends up with this:

Few languages support fibers natively (though support was recently added to Ruby). We write most of our server code in JavaScript and run it under Google’s v8 engine, the same JS runtime that Chrome uses. Fortunately the v8 codebase is excellently structured, so we were able to add fiber support in just a few days. Our changes take the form of a patch (currently pending review) to v8cgi, a library of server-oriented extensions to v8.

Here’s a sample of the API:

PLAIN TEXT

JAVASCRIPT:

1.  
2. // Make a new fiber. The fiber will run the provided function.
3. var fiber = new Fiber('name', function() {
4.  
5.   // ...
6.  
7.   // Make another fiber runnable.
8.   some_other_fiber.becomeRunnable();
9.  
10.   // Suspend the current one.
11.   Fiber.current.suspend();
12.  
13.   // ...
14. });
15.  
16. // Make the new fiber runnable. It won't start until the current fiber suspends
17. // or joins.
18. fiber.becomeRunnable();
19.  
20. // Wait for the fiber to finish.
21. fiber.join();
22.  

That’s almost the entire API. We don’t need any synchronization primitives because only one fiber runs at a time and control only changes when suspend() or join() is called.

There is a tension between writing clear, well-abstracted code and writing code that makes efficient use of the database. Adding fibers to v8 allowed us to resolve this tension. In taking a small amount of time to solve this problem “right” up front, we’ve made our entire engineering team more efficient for the long run.

Read the post to get the background, and to see the refactoring that is done to get to this place.

Asana seems to be really enjoying rethinking the world of Web frameworks. I can't wait to see their products!

Dave Balmer (formerly YUI, currently working with me on webOS) has created a fantastic cross platform mobile Web framework called Jo. What do I mean by cross platform? webOS, iOS, Android, Symbian, Safari, Chrome, and even Dashboard Widgets. It's philosophy is:

If you want to jam an existing web page into an application framework, jo probably isn't for you. jo is designed to create applications. While it will play nicely with a mixture of new and old web development techniques, it uses HTML5 as a development stack and does not require direct DOM manipulation.

You can setup your views in JavaScript, or also declaratively using special tags:

Take a look at the code and how it plays in action:

Via JD Bartlett comes HTML5 innerShiv for IE. Before innerShiv, the following would not work in IE:

For example, let's imagine we have some CSS that defines the following for the HTML5 elements footer, header, and section:

Unfortunately, even if you are using one of the tricks to force IE to deal with HTML5 elements shivs don't work when dealing with innerHTML before an element is appended to the DOM:

However, the shiv doesn't work in Internet Explorer when an element's content is added with innerHTML before being appended to the document. That's a common use case, and noticeable in libraries like jQuery when you try to append or load (etc.) HTML5 content

Some example bad JQuery code that runs into this problem:

JD's library is the solution to this problem:

innerShiv is a function which takes your HTML string, adds it to a hidden document-appended element in IE, and returns an IE-safe document fragment or collection

Now you can do the following to have things work:

Note that you don't have to use JQuery to use innerShiv.

From Tim Aidlin over at Microsoft comes a tutorial on using JQuery to do animation. The tutorial is focused on using a new library they have designed called Glimmer that allows designers and developers to create interactive elements and animations on web pages using JQuery. Using Glimmer you setup your HTML and CSS and then use the visual Glimmer tool to create animations and other effects:

The Glimmer tool then generates JQuery JavaScript automatically that you can pull into your page. An example snippet:

Notice three things:

• canto() returns an abstraction of the canvas - a "Canto" object.
• As with jQuery and similar libraries, there's method chaining; each method called on a Canto also returns the Canto.
• lineTo() has been extended to support multiple lines being drawn in a single call.

Instead of setting the ink properties and then painting it, you can do it all in one step:

And plenty more syntactic sugar - check out the API in the source code comments. Sweet!

Thanks @pkeane.

• Touch event support for mobile interfaces including flick and move gestures
• Browser capability loading - which means that every browser gets the least amount of code necessary to make it work
• Transition support for the animation module - meaning only browsers that don't support CSS3 transitions get the JavaScript animation fallback
• An update to the CSS grids to allow for more flexible layouts
• A ScrollView widget similar to the one in Apple iOS
• The uploader has been transitioned over from YUI2 to YUI3

So check out what is on offer and give the YUI team feedback on what would be nice to have and what is broken. In their own words:

The goal of a preview release is to make it as easy as possible for all of us in the community to evaluate progress of the upcoming release and provide feedback. Please take some time to test 3.2.0pr1 and let us know what you find by filing tickets in the YUI 3 bug database marked as “Observed in version” 3.2.0pr1. We’ll do our best to address preview-release questions on the YUI 3 Forums, too.

There are three ways to get started with the preview release: YUI 3.2.0pr1 is available on the CDN via the 3.2.0pr1 version tag — so you can reference preview-release files like http://yui.yahooapis.com/combo?3.2.0pr1/build/yui/yui-min.js. If you switch to this seed file for the preview release, all subsequent use() statements will continue to load YUI 3.2.0pr1. Or You can download the full YUI 3.2.0pr1 from YUILibrary.com, including source code and examples for all components. Or you can simply explore the functioning examples roster.

It calculates precise position of characters in <textarea> or <input> tag and places completion proposals popup under it. You can explicitly call popup window to assist/replace word (depends on caret position) with Ctrl+Space (buggy in Firefox and Opera) or Alt+Space (buggy in Opera). The project is based on Eclipse IDE's content assist architecture, it has some common class names and methods. The default implementation works with fixed words vocabulary, but developers can easily modify or extend some classes to match their needs.

The API is easy to use. For example:

I pondered who would be behind the act and smiled as I had a good idea. The group behind this all is the newly named Sencha (formerly Ext JS). On the back of news of the new company and Sencha Labs, we get a glimpse of their new product: Sencha Touch:

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores.

There are some good demos of apps such as GeoCongress, which shows off:

• HTML5 Geolocation
• Sench Touch icon set
• JSONP Proxy
• YQL Data Proxy
• Momentum scrolling
• Scroll touch event
• Pop-up Overlays
• Mobile form elements
• CSS3 Gradients
• CSS3 Transitions
• Multi-Card Layout
• Tab Panel Component
• Scrollable list view
• Swappable headers

Once you see what the framework can do with examples, what better way to get a deeper look than walking though as much of it as possible? Michael Mullany, VP Products, sat down and gave us just that. Sencha Touch comes with a "kitchen sink" demo that shows off much of its abilities. Here we see Michael showing off said demo:

After seeing this at work, we asked Michael some questions about the new product:

How are Ext JS, jQTouch, and Sencha Touch related?

We talked about some of this in the Sencha name change post. Jonathan Stark is taking over jQTouch maintainership, Dave Kaneda will remain involved but he's been spending most of his energy on Sencha Touch. Sencha Touch has some Ext JS DNA (OO javascript, a lot of the data package is common), but the UI components are completely different.

Having David part of Sencha Touch has been incredibly important. That's one of the reasons why the UI components are staggeringly beautiful, and there's been so much attention to ease of styling.

With respect to jQTouch vs. Sencha Touch. jQTouch is a good solution for people who need some progressive enhancement of web content, but it's not a full application framework.

What is the licensing plan for Sencha Touch?

The initial beta is under a GPLv3 + FLOSS license. We’d like to give open source folks the benefit before we introduce a commercial trial license. And we’d like to take the opportunity to emphasize something that many people miss: that we have Free and Open Source exceptions as part of our GPLv3 license. So if you want to, you can include Sencha Touch in your Apache and OSI approved licensed projects without triggering the GPL’ing of your project.

Can I make native looking controls for the particular platform at runtime?

In the beta, you can build multiple themes easily (for example, our Android theme is 20 lines of customized SASS), and serve them up to different clients based on user agent. We do want to provide a client-side switcher by release time. SASS is really an extraordinary technology. This would be far, far harder without it.

Are there any differences between it running on various platforms?

There are some minor differences, for example CSS 3D Transitions don't work on Android, for example (no cube transitions). And Apple GPU accelerates more stuff. You can look at our demo apps across iPhone and Android. They really do work cross-platform.

How do I do layout with Sencha Touch?

We think most people will use fairly simple layouts with the built-in components since the screen sizes are small. Tabs, carousels, lists. If they want to get more complex, they can use the more complex layouts or just extend the built-in classes.

Can I create native apps from these? How do I access native services on the device?

Right now, you're going to take Sencha and wrap it with phone-gap. But about two third of non-game apps don't do any special device access, and camera access is on its way.

How does Sencha Touch feel to program (e.g. just like Ext?)

It's still object oriented javascript but it's really very simple. People can just look at the source to the demo apps (which are reasonably rich apps) and make their own decision.

Can I progressively enhance a mobile Web app and sprinkle in some of this goodness?

I think the success of iPhone native mobile apps shows that for mobile factors, it's better if you think about layout and navigation first, then pour content into your containers & paths. In many ways, I think it's the reverse of the desktop web. Desktop web apps can be random access in their user pathing, mobile apps have to be hierarchical or otherwise constrained -- because you don't have a lot of space and you can't waste it on navigation controls.

Modernizr detects feature support across JS APIs and CSS. Now, there is a simple
page that shows you what Modernizr thinks of your browser:

The code above shows you exactly how you could run a test that shows either a large, or small clickable header... and gives you A/B results on how many were clicked.

This is all view a new library called Cohorts by James Yu:

Cohorts is a simple, purely javascript, multivariate testing framework.

It allows you to easily run split tests for visitors on your site, showing them different designs, layouts, or whatever you want. Cohorts also allows you to track interesting events that occur for each of the cohorts. By default, it uses Google Analytics event tracking to store data, but you can customize it to use your own or another.

Very nice.

To get going it is as simple as:

Features

• Customizability and Callbacks. A key value of Stomple is that it shouldn’t cut off access to any low-level functionality. Hence everything is customizable and accessible to the user code. All core functions support success and failure callbacks. Further, there are low-level callbacks: socketOpen, socketMessage, socketClose, socketError corresponding to the low-level websocket events. These can be used to customize behaviour for special use-cases. At a higher-level, there are callbacks onConnect, connectFailed, onError, onReceipt correspoding to the Stomp events.
• Automatic receipts. If client.autoReceipt is true (which it is by default), then all Stomp messages sent to the server include an automatically generated ‘receipt’ header. In the Stomp protocol, this causes the server to send a receipt for each message it receives, hence reassuring that the message has been received. If not enabled, the client can’t be sure the message is actually received.
• Timeouts. By default all messages sent to the server are associated with a (configurable) 8 second timeout. So for example, suppose you subscribe to a destination, but do not receive a server receipt within 8 seconds: then your failure callback is called with reason ‘timeout’ and information about the message that failed. This way you are guaranteed that either your success or failure callback will always be called (but not both ). These time-outs are pervasive and configurable per API call.
• Transaction management. In Stomp, transactions are started using the ‘BEGIN’ frame, corresponding to a begin function in Stomple. When you call begin, you don’t have to specify a transaction-id: if you don’t, one will be generated automatically for you. Further, any API calls made between a begin and a commit/abort automatically use this transaction identifier, hence grouping the calls in the same transaction (unless, of course, you explicitly provide a different or no transaction id). Further, this nests arbitrarily, and works in a stack-like manner (e.g., begin, begin, send, associates send with inner-most begin).
• Feature complete. Stomple aims to be feature complete. For example, it supports the recommended Stomp ‘content-length’ header, where the current stomp-websocket version does not.
• Correctness. Stomple is tested manually and has a growing automatic test-suite written in YUI3-test. Stomple passes JSLint.

Fork it and stomp instantly to JMS and beyond.

Query:

Results:

All of this happens in-memory so this is not a contender for YQL which offers the same functionality as a web service.

Another, very similar solution is LINQ to JavaScript by Chris Pietschmann:

Personally I like the LINQ syntax better, what do you think?

Scato Eggen, in honor of Towel Day in the Netherlands, has released an open source framework called towel.js.

towel.js is an extension for Mootools, designed to make event-based code easier to write and even more important: easier to read.

At the hart of towel.js is a modular helper system called towel, including two helpers called UI and FX. These helpers produce objects that can be linked together: one object detects whether the mouse button is pressed, the other one changes style attributes. By linking these objects together a whole range of effects can be created and added to a page.

To create a simple momentum effect you only have to wire up code such as this:

Projekktor is another JavaScript library that sits on top of the <video> tag to provide richer chrome and features, and also backwards compatibility via Flash. Once you load the shim, you can setup config and then you just have to use video:

Features

• Super easy integration to any site: 1) include one JS file 2) use standard video or audio tags 3) done!
• Cross browser conformity: What you see is what you get in IE, Opera, Chrome, Safari, Firefox and more.
• Projekktor supports PRE roll and POST roll content for ads and more.
• Server independent random seeking for Theora. No need for expensive RTMP or progressive streaming proxys.
• Projekktor supports playlists.
• Cross browser "no buffer" feature to save bandwidth.
• Optional gui blocking to disable pausing or skipping of trailers and ads.
• Extremely easy theming. All you need to know is how to handle HTML and CSS.
• Unrestricted customization due to an easy to understand JS plugin interface and API.

1. script loading must be async
2. script loading should do as much in parallel as possible. This means in particular, that it should be possible to avoid dynamic nested dependency loading.
3. it looks like a script wrapper is needed to allow #1 and #2 to work effectively, particularly for cross-domain loading. It is unfortunate, but a necessity for script loading in browsers.

With the RequireJS 0.11.0 release James feels like he has the features to make that real:

• There is a new priority config option to indicate priority, parallel download of build layers.
• A new JSONP plugin allows you to treat any JSONP service as dependency.
• require.js should be Caja-compliant. The plugins may not be, but the main require.js file passed cajoling on http://caja.appspot.com/.
• Instructions and optimization support for renaming require().
• There is a new RequireJS+Transport D download option that supports the CommonJS Transport D proposal. This can be useful in conjunction with the server-side Transporter project.

James mentioned a server side scanning tool.... and Kyle Simpson (of LABjs) is almost ready to show something there too.

RGraph is a graphing/charting software component for websites. It uses HTML5 technologies (the new Canvas tag) which is already present in most modern web browsers to create and show graphs/charts. The graphs are created inside the web browser, removing the burden from the webserver (just as rendering HTML works) and so it can alleviate some of the burden from a web server.

It supports a wide variety of graph types - from Bar charts, Line charts and Pie charts to Scatter, Rose and Radar charts. In total there's roughly 15 base chart types available with further variations possible too.

It has interactive features (for example zoom, tooltips and annotations) which can improve the usability of a website/web application. It's very easy to work with and extend.

PHPJS is an effort to bring the mammoth PHP API into the land of JS., where it can be used for web apps as well as the increasing number of Javascript applications outside the browser.

The homepage explains some of the philosophy behind this project:

PHP is a language with many high-level functions and while they're not always implemented as consistently as we'd like (mostly to blame on its underlying C parts), it has a huge following familiar with its syntax so it makes sense to pick its API as a reference. Eliminating the need for our own documentation, thus making life easier, we hope.

We recognize JS - on the other hand - has beautiful language features, and we encourage you to learn them. Never let php.js be an excuse not to.

For the same reason, we're not porting entire language or control structures of PHP; we stick with the functions.

That said, we think of it as a challenge to port everything and decided to also port low-level PHP functions like strpos even though it may have a JavaScript counterpart (String.indexOf). Cause besides the intellectual challenge for us, porting more also opens up php.js to all kinds of thought excercises and study purposes. And so we leave it up to the developer to decide what to take from this resource. And what not.

It's not new - the project's been around a while and went to GitHub last September. However, it's noteworthy as it appears to be fairly unknown in parts of the Javascript community, judging from recent Twitter responsage to a mention of the project. (It was news to me, and I dabble in PHP.)

Moreover, there is significant progress here: project founder Kevin van Zonneveld yesterday announced CommonJS support. The homepage indicates it's "first steps", but longer term, this potentially brings a huge corpus of library functions into the realm of CommonJS, a win for reuse and a win for all the PHPers getting into JS.

Element#on

Element#on is a new way to access the Prototype event API. It provides first-class support for event delegation and simplifies event handler removal.

E.g.

Element.Layout

The second major feature in 1.7 is Element.Layout, a class for pixel-perfect measurement of element dimensions and offsets.

Now you don't have to decide between properties like offsetWidth (which return numbers, but not the numbers you want) or retrieving computed styles (which have their own set of quirks and require a call to parseInt).

PLAIN TEXT

JAVASCRIPT:

1.  
2. // Simple case
3. $('troz').measure('width'); //-> 150
4. $('troz').measure('border-top'); //-> 5
5. // Offsets, too:
6. $('troz').measure('top'); //-> 226
7.  
8. // More complex case
9. var layout = $('troz').getLayout();
10. layout.get('width');  //-> 150
11. layout.get('height'); //-> 500
12.  
13. layout.get('padding-left');  //-> 10
14. layout.get('margin-left');   //-> 25
15. layout.get('border-top');    //-> 5
16. layout.get('border-bottom'); //-> 5
17.  
18. layout.get('padding-box-width'); //-> 170
19. layout.get('border-box-height'); //-> 510
20.  

Other fixes

The JSON interface slated for ECMAScript 5 is already being implemented in major browsers. It uses many of the same method names as Prototype's existing JSON implementation, but with different behavior, so we rewrote ours to be ES5-compliant and to fall back to the native JSON support where possible. A few other methods, like Object.keys, received similar treatment.

Spritely is a new jQuery plugin that adds sprite() and pan() to your $().

The fun front page of birds is explained with simple goodness of:

The library is very new with 0.1 stable and 0.2 preview out.

Also check out this demo and follow them.

As a lot of the students liked the idea of APIs like GeoPlanet and Placemaker but had a hard time getting their head around them I thought it a good idea to build a small JavaScript library that does the job for them.

I give you the YQL Geo library (and its source on GitHub). Using this library you can do the following:

• Detecting the visitor's location with the W3C geo API and with IP as a fallback
• Find geo location from text
• Find location from lat/lon pair
• Find locations in a certain web document (by URL)
• Get the location for a certain IP number

And all of that in pure JavaScript. For example:

Will get you:

Other uses:

This gets the name and the country of a lat/lon pair:

This finds the visitor's location (on W3C geo API enabled browsers it asks them to share it - otherwise it detects the IP and locates this one on the planet)

Read all about it on my blog and enjoy!