Web Info & Tutorials

Want to use CSS sprites but you are too lazy to create them in Photoshop? Edward Eliot and Stuart Colville released a CSS Sprite generator quite a while ago that does the job for you.

Now they topped this by releasing the source code of the generator on launchpad (get the tar file), in case you’d like to make the generation process a part of a release script or just want to run the generator on your localhost. The license is BSD, which means you can even use the generator commercially.

We’ve introduced Edward Eliot and Stuart Colville back in October in an interview about web performance and the generator is a great tool to cut down on HTTP requests of your site, which are the main reason for bad page performance.

Reposted from my blog

Would you like to be able to make a quick call to get a JSON response that ties together a social graph made up of resources available on the Web?

Brad Fitzpatrick, Kevin Marks, and others at Google have released a new Social Graph API that does just that:

The new Social Graph API makes information about the public connections between people on the Web easily available and useful. You can make it easy for users to bring their existing social connections into a new website and as a result, users will spend less time rebuilding their social networks and more time giving your app the love it deserves.

Here’s how it works: we crawl the Web to find publicly declared relationships between people’s accounts, just like Google crawls the Web for links between pages. But instead of returning links to HTML documents, the API returns JSON data structures representing the social relationships we discovered from all the XFN and FOAF. When a user signs up for your app, you can use the API to remind them who they’ve said they’re friends with on other sites and ask them if they want to be friends on your new site.

This is exciting to me as:

• It actually uses the microformat standards such as XFN
• The API is a simple URL, like the Chart Server API. E.g. http://socialgraph.apis.google.com/lookup?q=bradfitz.com&edo=1&pretty=1&callback=onDataLoaded
• Brad uses a resource that others do not have access too…. he uses the Google crawler. Genius!

I gave it a quick test drive, and when I say quick, I mean 5 minutes :)

I built a tiny JavaScript library that takes a base URL, and it graphs out the relationships using Canvas.

You get to call loadGraph(URL, { width: w, height: h }) and the graph will be injected away.

It needs to be nicely abstracted and isolated so you can call it willy-nilly, but it works.

Watch the introduction video:

Liferay, authors of a popular open source Java portal, have hired Paul Bakaus lead on jQuery UI to work on it full time.

Liferay’s plans are to standardize all their products to use jQuery and its plugins for the future (you’ll still be able to use other libraries at the same time) - it’s therefore in their very interest to see jQuery UI enjoying a long life, growing to meet expectations of all kinds of clients and beyond. To reach this goal, hiring me was the most logical decision: I now have no excuse not-to-focus on jQuery UI for a while - after all, it’s my day job!

This is good news for jQuery users, especially those that want a better widget framework, and one that looks good a la Ext.

Bill Scott clued me in to this interesting first post from Theresa Neil on two design paradigms for handling large amounts of data:

• The Seek Paradigm: Have the user ask for what they want.
• The Show Paradigm: Display everything up front, and let the user explore and organize it.

“The first is usually more prevalent on the web. The latter usually more prevalent on desktop or deeper web applications. Theresa lists 10 different patterns illustrating Seek and Show.”

She details both paradigm with very nice real world examples.

The Flash-y folks at Yahoo! have released a slew of Flash and Flex components in their ASTRA suite:

New Flash components:

• AlertManager — a user interface component that creates alert windows and manages their queue.
• AudioPlayback — a set of controls for audio playback.
• MenuBar — a component that renders hierarchical data as a row of buttons with nested menus (using the Menu component)

On the Flex front, we have:

• AutoCompleteManager is a component that manages a set of input controls, popping up suggestions when a user types into one of the fields. Instead of replacing TextInput fields with a specific AutoComplete control, you can simply point the manager to one or more TextInputs, and you’ll get a slick pop-up or auto-fill interaction.
• Color Pickers:
  • ColorPlaneAndSliderPicker is a user interface component that allows the user to pick a color value. It combines a one-dimensional color slider with a two-dimensional color plane.
  • ColorSliderPicker is a user interface component for Flex that allows the user to pick a color value. It combines a set of sliders where each slider represents a component of a colorspace. For example, a ColorSliderPicker displaying an RGB color includes a red slider, a green slider, and a blue slider.
  • DropDownColorPicker is a user interface component for Flex that allows the user to pick a color value. Similar to the standard Flex ColorPicker control, the DropDownColorPicker also gives the developer the ability to completely change the dropdown control to give the user a variety of color views.
• IPv4AddressInput is a user interface component for Flex that allows the user to input an Internet Protocol version 4 address. This control includes a field for each separate byte and full keyboard navigation.
• TimeInput is a user interface component for Flex that allows the user to input a time value. This control include fields for hours, minutes, seconds, and AM/PM. Styling options allow the time to be presented in 12- or 24-hour formats.
• TimeStepper is a user interface component for Flex that allows the user to input a time value. This control include fields for hours, minutes, seconds, and AM/PM. Styling options allow the time to be presented in 12- or 24-hour formats. Up and down buttons allow the user to increase or decrease the currently selected field.

Aza Raskin has been chatting most a pair of things today that he is at Mozilla.

First, Enso 2.0 is on the horizon which module be pleasant and free. Aza meet additional his design thoughts for the newborn version.

I am fascinated in sight how Enso could do more within the browser. You crapper already do things same unstoppered a URL, but you could verify it boost and ingest it as a artefact to playscript the artefact you do things in the browser.

Then, Aza talked most the organisation decisions in adding an most page. When you feature that you belike think: “are you kidding me?” but there is a lowercase more likewise it:

Say I’m perception to “Bohemian Rhapsody”, melodic along in that I-hope-the-neighbors-won’t-report-me-to-the-landlord variety of way, and I end to find-out more most Songza. I utter the unification and — BAM — I’m no individual perception to the song. Instead, I’m opened at this self-serving, slightly meglomaniacal tender most Songza’s story and its founders. Not exclusive that, but I’ve forfeited my blot meet at the prizewinning conception of the strain (I’m not locution which conception that is in hopes of play a diminutive burning war). The credulous move to creating a removed tender has overturned the modest “about songza” unification into a landmine — low no ceremonial should you penalise your users for using your system. Because there is no artefact for the individual to undergo which course module intterupt the music, every unification is a Slavonic Roulette. Not cool.

The resolution is to unstoppered a newborn pane (although preferably, it would be a newborn tab). This way, the “about songza” tender opens without interrupting the song. It’s work-flow transparent. Spamming the individual with player windows or tabs is never a beatific thing, so we ingest a lowercase taste of Javascript to unstoppered a newborn tender exclusive if a strain is currently existence played. We utilised a kindred resolution for the “Watch Video” unification as well, eliminate we went the player knot there and automatically disrupt the Songza strain so that it doesn’t contend with the video.

Now we requirement investigate the activity of the “return to songza” unification that erst went at the lowermost of the most page. By inaugural the most tender in a newborn window, we’ve busted the link’s behavior. If I were to utter on it, it would drive that newborn pane to go to Songza, which effectuation I would hit digit removed instances of Songza open. How annoying! One resolution would be to modify the unification to feature “close most page”. That entireness enthusiastic if I had become to the tender from Songza, but if I had institute myself on the tender by doing a search, I would hit no artefact of effort backwards to Songza comely without redaction the URL. We are in a taste of a bond — either artefact we do the link, we hit a suboptimal behavior.

Frank Zammetti has authored the first book dedicated to DWR, Practical DWR 2 (Amazon).

Joe Walker wrote a foreward which he posted, and here is Frank’s personal message:

Ajax represents a brave, new(ish) world of web development where coding on the client is just as important as on the server side. Hundreds of libraries exist that purport to make it easier for you, and there’s always the “Do It Yourself” approach. Which route should you take?

If you work with Java technologies, one choice that stands out is DWR, or Direct Web Remoting. With DWR, JavaScript-based client code that calls server-side objects works as if it were all running in the same process space. The simplicity and power DWR blends together has few rivals today.

In this, the first DWR book to be published, you’ll be introduced to DWR and all it has to offer, including reverse Ajax, XML and annotation-based configuration, container-managed security, simple POJO-based development, and greatly simplified client-side coding. You’ll learn by doing as you explore six fully functional applications including the following:

• A webmail client for remotely accessing your e-mail accounts
• A wiki for collaborative efforts
• A file manager for remotely managing your server’s file system
• A portal for enterprise reporting needs
• A project management/time-tracking system
• Even a fun little game!

In addition to DWR, you’ll also see how other popular libraries help realize the RIA/Web 2.0 vision, including Spring, Hibernate, dHTMLx, DataVision, Freemarker, and Ext JS. If you’re doing RIA development in Java, DWR is for you, as too is this book.

(and if you like sci-fi and pop culture references strewn throughout your reading material, and a touch of wise a**-edness too, you’re in for a good time to boot!)

Michael Mahemoff has released an update to his JavaScript library that gives you access to play with favicons from script.

The main point of this library is to update the favicon via Javascript, but at a higher level, its main objective is to provide some support for notifying the user of events in another tab. For example, if you start playing music in another tab, you can make a one-liner call to change the favicon to a sound. Or if you really need to alert the user, you can start animating it.

The new features include:

• Scrolling title. The window/tab title scrolls. (Title blink is coming. No, really!)
• Stop functions. unanimate() and unscroll() will stop animation and scrolling, respectively. Previously you had to do stop animation indirectly, by calling change().
• Rails/Scriptaculous style options Changed config to be fn(mainarg, optionalHash). Read the library or demo source to see the details.

Usage code:

Check out a couple of demos:

• Scrolling Favicon Demo
• Scrolling Favicon Library

This also caused Michael to talk about taking tabs seriously and how:

The browser is the new operating system, the tab is the new system process, the tab bar is the new taskbar.

He gives us a slew of ways in which he would like to see tabs improved upon: notifications, hunting sound, custom favicons, summary list, smart colour, javascript events, open forms, search, virtual desktop, and auto-remove.