Friday, January 9th, 2009
Category: Library
, jQuery
Atul Varma (who I have the absolute pleasure to work with now) has created code documentation that actually looks beautiful. Typography matters.
You can check it out via his Ubiquity documentation example that shows you side by side documentation with the actual source code itself. This context is terrific. He does this all dynamically, and uses border padding to align the documentation with the code itself.
Here is what he has to say about how it is done:
The raw source code for the file being documented above just has chunks of comments that are marked-up in WikiCreole; when the parser runs into such a chunk, it renders it alongside the code it annotates using Ivan Fomichev and Chris Purcell’s JavaScript Creole 1.0 Parser.
The idea of using the documentation to annotate the code—or the code to annotate the documentation, depending on how you look at it—was inspired in part by some of the typography presented in Ellen Lupton’s excellent Thinking with Type, which I recommend to anyone interested in the field.
It’s nice not having a separate documentation build step: aside from making the process of writing and editing documentation quicker, it also lowers the barrier for entry to contributors since they don’t need to setup a toolchain. It also means that we get versioned documentation in every commit for free.
Right now there isn’t much else to the system; the only other feature I added is the auto-generation of quasimodal popup menus that link the names of XPCOM interfaces to their entries on XUL Planet and MDC. It’d be nice to have more features like this; other niceties would be an automatically-generated table of contents, JavaScript Doctests, search functionality, cross references to other code, and even the ability to fix code formatting errors in-page. For now, though, I need to focus on actually using this tool to document more code.
As soon as Ben and I saw this our minds started to race. What if you could navigate the code via hyperlinks too? Or have groups comment inline? Many exciting ideas.
It is fun to see the 80 character column limit in place (and seeing where that is ignored). 80 character limits with wide screen displays? I never get that :)
Category: Survey
John Allsopp has put together the data from his extensive State of the Web 2008 survey. In it you will find details on who was surveyed to set context, the browser / os usage claimed, and answers on the use of technology such as:
John and Scroll Magazine have a nice conclusion:
In this first of its kind study, over 1200 web professionals from across the globe, in a broad range of industry sectors and organization types, were surveyed on the browsers, operating systems, development technologies and practices they use when building web sites and applications.
Some surprising results from the survey include
- Nearly half the respondents use Mac OS X Leopard, and over half use a non Windows Operating system. Windows XP still outweighs Windows Vista among these users by a factor of 4 to 1 as their operating system of choice.
- Just a small majority, less than 5%, use any version of Internet Explorer as their primary browser, while Firefox dominates as the browser for choice, with over 60% market share. Safari 3 follows with 21%, and the much talked about Chrome on just 4%.
- Only a tiny handful use Internet Explorer 8 beta as their browser of choice.
- Despite the hype of the iPhone, less than 20% of respondents use the mobile web, and a similar number develop sites optimized for mobiles.
Web Development technologies
When it comes to web technology use, standards based and open source technologies dominate.
- Only 3% of respondents say they never validate their sites while 70% say that they frequently or always do.
- Only 10% of respondents say they use tables for layout, while well over 90% use CSS for styling their pages.
- 35% of respondents say they use microformats in their markup.
- 95% of respondents use JavaScript, and of these, almost all use libraries.
- JQuery is the dominant library used by some way, with 60% of respondents saying they use it.
With plug-in technologies, Flash continues to dominate, with a market share of around 60%. Silverlight still has a lot of work to do to catch the long time industry leader, with a bare 2%, little more than the Real format. Apple’s Quicktime has a surprising 20% of the market.
Java applets have all but disappeared from the toolset of these early adopter developers.
On the back end, open source accounts for the majority of technologies used. Among server operating systems Linux at nearly 60% is used more than twice as often as Windows at 28%, with Unix also well represented at 17%. Even Mac OS X, which is usually far down survey lists for server OSs, is used by 5.5% of respondents.
Apache at 70% is the dominant web server, with IIS at 23%.
Over 90% sites are database driven, with the open source MySQL at 70% and PostrgeSQL at 10% together accounting for the significant majority of sites by respondents. Microsoft’s SQL Server at 22% and Oracle at 9% were the other widely used database systems.
When it comes to server side programming languages, PHP is the most commonly used, at 63%, with JavaScript at 55%, ASP.NET at 17% and Python at 15%. Despite its flavor of the month status, Ruby comes in at 14%, with Java at 12%, indicating that the language which came to prominence with the rise of the web is well and truly being challenged from all sides when it comes to web back end development.
Category: Examples, Prototype
Thomas Fuchs has created defaultValueActsAsHint, an implementation of the Input Prompt pattern:
An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once again once the user leaves it.
Because we decided to go this path for the “Quick entry” box we’re using for freckle time tracking, I dug out an older script I wrote and refreshed it a bit, and I present you defaultValueActsAsHint.
JAVASCRIPT:
-
-
$('element_id').defaultValueActsAsHint();
-
This is all there’s to it, and the file to include is merely 18 lines of code. It works with textareas, too. Just specify whatever should be displayed as hint in the value attribute of the input (or as text within the textarea tag) and off you go. Define a ‘hint’ style if you like to show the text in gray, italics or whatever you fancy.
Check out the test sample that lives in his prototype_helpers library that also includes deferUntil.
“The need is obvious for a cross-device mobile javascript library supporting iphone, palm, and android. blackberry browser still blows” -- Joe Hewitt
Joe of course created the popular iUI framework that mimics the native iPhone look and feel and gives you nice simple iPhone features via JavaScript.
Palm is on his list, because it is back in the game with their CES announcement of the Palm Pre, an offering that has an SDK that makes me happy. No Objective-C, no Java, just a Web stack!
Announcing Palm WebOS, Palm Mojo Application Framework, and Palm Mojo SDK
Palm WebOS, Palm's next generation operating system, integrates the power of a window-based operating system with the simplicity of a browser. The user experience is designed around multitasking, and makes it easy to run background applications, switch between applications in a single step, and handle interruptions and events without losing context. Using WebOS, you’ll be able to develop fast (and beautiful) applications.
The Palm Mojo Application Framework
Palm WebOS applications are easy to write using Mojo, a new application framework based on the HTML5, CSS, and JavaScript standards that web developers already know and love. WebOS applications are installed and run directly on the device at native speed and have access to a wide range of device services.
Mojo will enable you to:
- Build applications with gesture-based navigation, transitions, and scrolling
- Use the WebOS notification system to alert users without interrupting them
- Leverage the local storage capabilities of HTML5 so that data is available even when users are offline
- Use a JSON-based message bus to tap into a wide range of device services, including contacts, calendars, and location
And good news for Palm OS developers! There are a number of ways to migrate data from a an existing PDB file to your new WebOS app. Stay tuned for more information for developers with Palm OS applications who want to build WebOS applications.
The Palm Mojo SDK
Besides the Palm Mojo Application Framework, the SDK will include sample code, documentation, and development tools. An Eclipse-based IDE is included, and you will also be able to use your choice of tools to build WebOS applications. The Mojo SDK is currently in private prerelease, and will be available later this year as a free download from the Palm Developer Network.
The Palm App Catalog
Palm will provide an on-device application catalog to deliver your apps directly to users.
We are still some time out from the release, but very cool to see!
Clink Ecker of Ars has a nice piece where he talked to a developer familiar with the SDK. If anyone knows more, please let us know :)
Thursday, January 8th, 2009
Category: Component, Examples, jQuery
Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane.
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
HTML:
-
-
-
$(document).ready(function() {
-
$('a.pageslide').pageSlide({
-
width: "300px"
-
});
-
});
-
</script>
-
For some reason I enjoy thinking of my desktop as a virtual area that I can shift around.... so this can suite me well.
Category: Debugging
Rob Campbell posted on the 1.3 final release of Firebug, the stable release for the Firefox 3 world:
Release notes are here. As mentioned previously, this version will not be compatible with Firefox 3.1 (Shiretoko) and up. For that you’ll need a Firebug 1.4 alpha, soon to be dubbed beta available on getfirebug.com’s releases directory. Notes are on the releases page.
If I can babble a bit for a second, I’d like to say that I’m pretty proud of this release. Honza has made some fantastic improvements to the Net panel. John Barton has improved the Script panel and debugging features as well as tweaking the console. Maybe more significantly were some of the changes under the covers. The new Tracing panel (FBTrace) for debugging Firebug itself during development is a huge improvement over the previous console-based system. We’re starting to get some unittest coverage through John Resig’s and Honza’s FireUnit. And I think community involvement is at an all-time high with some excellent testing and bug reporting coming from all corners of the world. The message is getting out that Firebug is a great project to be involved in and that community contribution can really help move it forward.
So, thanks to everybody who helped out with this release. I think it’s the best Firebug yet.
The team seems to be gelling together and really doing some great work. I am looking forward to see more in 1.4 and above.
Category: Ajax, HTML
John Allsopp has a thoughtful piece that races some old concerns about the new tag set in HTML 5, and how we will ever be able to jump on that train when the cabooze still has IE.old train cars.
It is great to have new semantics for <section> and all, but what will browsers do with these new tags?
John walks through a simple example with the new tags, shows some issues, and then wonders if we could use the existing extension points (attributes):
Let’s invent a new attribute. I’ll call it “structure,” but the particular name isn’t important. We can use it like this:
<div structure="header">
Let’s see how our browsers fare with this.
Of course, all our browsers will style this element with CSS.
But how about this?
div[structure] {font-weight: bold}
In fact, almost all browsers, including IE7, style the div with an attribute of structure, even if there is no such thing as the structure attribute! Sadly, our luck runs out there, as IE6 does not. But we can use the attribute in HTML and have all existing browsers recognize it. We can even use CSS to style our HTML using the attribute in all modern browsers. And, if we want a workaround for older browsers, we can add a class value to the element for styling. Compare this with the HTML 5 solution, which adds new elements that cannot be styled in Internet Explorer 6 or 7 and you’ll see that this is definitely a more backward-compatible solution.
John then goes on to discuss the potential use of the role attribute, and more.
It feels like there are two issues here:
- Are new tags the right way to provide new semantic value
- Are there work arounds to back/forward compatibility.
Without compatibility, it will be impossible to get this off the ground for many people. What if we mix both worlds, and a shim is put in place to convert the new tags to divs and the like at runtime for browsers that don't support it. Is that enough?
You can get IE to support new tags as shown in this example by using document.createElement().
Category: Design, HTML
There are a slew of HTML/CSS design sharing template sites out there. What if there was a manifest that defined what they had, and tools could work with that so you could import repositories.
That is the vision that Daniel Glazman had when just created the HTML+CSS Templates Manifest 1.0 CC licensed spec.
You would end up with a file that looks like the example:
HTML:
-
-
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
-
<template shortname="aFarewellToColor">
-
<title xml:lang="en">A Farewell to Color
</title>
-
<description xml:lang="en">
-
<p>Remember the early days when the Internet was all black and white,
-
this is a throwback to those days. In all seriousness, I made this
-
template because it was based on an earlier design that many found
-
useful. Plus I've always had a thing for creating designs on the web
-
with zero color, I guess it is an 'off the beaten path type deal'.</p>
-
<p>I should also mention that this template has some updates (err...
-
advantages) over the previous designs... this one uses h1 and h2
-
tags in the header for better SEO results, and has new image
-
rollovers for the navigation.</p>
-
</description>
-
-
<author>Bryant Smith</author>
-
<version>1.0</version>
-
-
<!-- the following URL does not exist (yet) -->
-
<license>http://bryantsmith.com/template/license.txt</license>
-
<website>http://bryantsmith.com/template/</website>
-
<support>http://bryantsmith.com/component/option,com_alfcontact/Itemid,55/</support>
-
<demo>http://bryantsmith.com/template/afarewelltocolor</demo>
-
-
<thumbnail>http://bryantsmith.com/template/previews/afarewelltocolor.jpg</thumbnail>
-
-
<package>http://bryantsmith.com/template/afarewelltocolor.zip</package>
-
<path>index.html</path>
-
<size>228275</size>
-
-
<tags>gray,menus</tags>
-
<format>xhtml</format>
-
<width>750px</width>
-
<columns>1</columns>
-
<sidebars>0</sidebars>
-
<direction>ltr</direction>
-
</template>
-
</templates>
-
And, if you are into design, the OmniGraffle wireframe stencils have been updated!
Wednesday, January 7th, 2009
Category: Canvas, Debugging
Ben was cursing at a bug in some canvas code that he was playing with, where the rendering was off. One piece of his UI was blurred instead of crisp.
The debugging exersize was fun, and he shares it with you on his personal blog.
The moral of the story is: watch out for that zoom feature in today's browsers!
Along the way, I got to learn that canvas supports fractional coordinates:
My first thought was that it would be due to fractional coordinates. I have years of experience with drawing APIs that force integer coordinates, so I’m used to relying whacking off the fractional part of a coordinate and making up the difference when necessary in a second pass. Canvas, on the other hand, supports fractional coordinates, which I’m told is the fancy thing to do these days. (How the fraction is converted to an actual pixel is depenendent on whatever drawing system is doing the heavy lifting somewhere down the stack.) When your coordinates are fractional, you can get this kind of fuzziness.
Because the interface I’m working with involves a few layers of rendering code, ensuring that integers ruled the roost took some time. But after quite a bit of poking around, I found no evidence of fractional coordinates. It was around this time I saw Vlad (Mozilla’s graphics guru) walking around the office and asked for some help.
We started looking for evidence of transforms that would introduce fractional coordinates–but ultimately came up empty handed. As we went through this process, he pointed out that the <canvas> context instances are reused, so it’s a really good idea to save() and restore() when obtaining a canvas to avoid polluting the context:
JAVASCRIPT:
-
-
var ctx = canvas.getContext("2d");
-
ctx.save();
-
// painting here
-
ctx.restore();
-
I had assumed each call produced a fresh, stateless context, so this was welcome news indeed.
But, user error was the true case:
And that’s when we noticed that I had zoomed in a click using Firefox 3’s fancy full page zoom feature. And that was causing the image the be scaled up, and the blurriness.
Category: Browsers
Ben Turner has nicely written up the state of Web Workers that we will see in Firefox 3.1 (in beta 2 right now).
To show the latest, Ben got a demo working that decrypts Weave data in the client using a Worker:
JAVASCRIPT:
-
-
// Launch the main worker.
-
if (!worker) {
-
worker = new Worker("weaveDecryptorWorker.js");
-
worker.onerror = onerror;
-
worker.onmessage = onmessage;
-
}
-
-
worker.postMessage({ types: types,
-
user: document.getElementById("username").value,
-
phrase: document.getElementById("passphrase").value,
-
server: document.getElementById("server").value });
-
-
What's changed?
- The
navigator object has been added to the worker scope. It contains the following strings that identify the browser, just as from normal script:
appNameappVersionplatformuserAgent
- Workers can now be forcefully killed via the
terminate function. Calling this function on a worker will immediately stop the worker’s execution.
- Workers may only be created from a worker script that is hosted within the same origin as the parent page.
- URIs for subworker scripts and imported scripts are now resolved relative to the parent worker script location instead of the owning page.
- Error handling has been reworked according to recent spec changes. A worker script can now define an
onerror handler that will be called with an error event with details about the exception. If the handler calls preventDefault on the event object then nothing else happens. If preventDefault is not called then the error event propagates to the parent scope’s (either a worker or the parent page) onerror handler.
- Numbers, booleans, and even objects may be passed to
postMessage in addition to strings. The only restriction is that objects may not contain functions or cyclical references (since we use JSON under the hood). This simplifies previous code that needed to use the JSON object to manually encode/decode the strings passed to postMessage.
Category: Component
Sébastein Gruhier has released a new address component that integrated a map with the address that you are filling. The UX is interesting as when you first get typing it doesn't really narrow down the address so you are seeing maps of bizarre places.
As well as a basic version, you can also tie in auto complete.
Features include:
- Javascript framework-agnostic. You can use it as is or with any great frameworks like Prototype, JQuery …
- Mapping system independent. The current implementation is based on Google Map using a Google Map proxy object.
- Interactive map display location while you arex typing an address.
- Center map on user location (based on its IP) if mapping system allows it.
- Fully customizable.
- Fully documented with pdoc.
- Works on Safari, Firefox, IE 6/7, Chrome and Opera.
- ...
Category: Apple, Canvas
As soon as I heard about the new iWork.com site launched yesterday, I knew I wanted to know more about how it was made. iWork.com is a web-based way to share and collaborate over your iWork documents. I searched around the blogosphere seeing if anyone knew any technical details, but didn't find anything, so I had to crack open Firebug and see what was under the covers. I really wanted to know whether the apps were built with Flash or Ajax or something else.
I downloaded a trial version of iWork 2009 and published a Keynote presentation. The new Sharing function unfortunately requires you to configure and use the Apple Mail program, which I did before I could test out to see how the iWork.com shared documents work.
Looking at the JavaScript files, I see SproutCore and Prototype being pulled in, so everything is built with Ajax and web technologies. It's also using WebDAV to pull in the metadata about the document, which is interesting (though it's piping the WebDAV over some kind of proxy):
http://publish.iwork.com/iw/p159985190/.iWork/Share/Untitled.pages/Metadata/?webdav-method=PROPFIND
That URL returns an XML WebDAV document with the document metadata properties:
XML:
-
<?xml version="1.0" encoding="utf-8" ?>
-
<multistatus xmlns="DAV:">
-
<d :response xmlns:D="DAV:">
-
</d><d :href>/iw/p159985190/.iWork/Share/Untitled.pages/Metadata/</d>
-
<d :propstat>
-
</d><d :prop>
-
</d><d :resourcetype>
-
<d :collection />
-
</d>
-
<d :getlastmodified>Wed, 07 Jan 2009 02:07:51 GMT</d>
-
-
<d :modificationdate>2009-01-07T02:07:51Z</d>
-
<d :comment>1231293220308</d>
-
<x :Heckler.pages xmlns:X="urn:iwork:property">[{"guid":1,"type":"Page","w":612,"h":792}
-
]
-
</x>
-
<x :Heckler.downloads xmlns:X="urn:iwork:property">[{"size":198284,"path":"Untitled.pages","guid":1,"downloadType":"pages09","type":"Download"},{"size":73533,"path":"Untitled.pdf","guid":2,"downloadType":"pdf","type":"Download"},{"size":30720,"path":"Untitled.doc","guid":3,"downloadType":"word","type":"Download"}]</x>
-
<x :Heckler.document xmlns:X="urn:iwork:property">[{"publishName":"Untitled.pages","publishDate":1231293215,"title":"Untitled","appBuildDate":"Dec 21 2008, 01:44:15","type":"Document","size":604363,"viewers":0,"marketeerPublishName":"b4d96779c707ea0d05ba5d33989ba0e45f874d3b40204a46895cdac1bd2fafac","guid":"Untitled.pages","nativeDownload":"Untitled.pages","authorEmail":"bradneuberg@gmail.com","documentType":3,"pageCount":1,"documentVersion":92008102400,"passwordProtected":false}]</x>
-
-
-
