It is amazing how much easier it is these days to build pretty sweet mashups by using hosted services. Here’s a screencast of using Yahoo, Bing and Google to build a search interface in under 25 minutes without having to read any API docs or installing SDKs by using YQL:
View Source is a new series where we crack open cool web sites and applications and detail how they were made, step by step.
Today we will take a look at the Webkit Sticky Notes demo that was created when Webkit first landed it’s HTML 5 SQL storage support:
In this demo you can create new sticky notes that persist themselves into the local SQL storage and can be accessed while offline. When a sticky note is closed it ’swooshes’ offscreen with a nice animated effect.
Note that the demo will only currently work in Webkit 4+ based browsers, Safari only; the technologies behind it though are beginning to arrive in Firefox and Chrome however.
I recently ran across a site that made my jaw drop when I realized it’s completely made with HTML5, CSS, and SVG. It’s the site for the GNU Emacs for Mac OS X release:
Who ever knew GNU Emacs could look so sexy? When I think of GNU Emacs I generally imagine Richard Stallman’s beard rather than the fancy site shown above.
Wow, I’ve got to get that image out of my head :) Moving on.
Here is what is cool about this site: it’s completely using open web technologies to put things together. That’s not just a big image you’re seeing on the site.
Let’s crack this thing open with a View Source tutorial and see what makes it tick so you can apply similar techniques in your own work. View Source is a new series of tutorials where we look at open web technology ‘in the wild’ and break them down step by step so you can learn what they are doing.
We often get games sent our way, and try to keep those posts for Fridays. This one is different though. Thomas Kjeldahl Nilsson didn’t just write another Tetris clone in JavaScript, he documented his experience. He posted a series of articles on the various steps, and not only do you learn how to build a nice Tetris game, but you get to see how to develop nice testable code. Thomas comes from the Ruby world and it shows.
Take some time to poke through his series on JavaScript Tetris:
I’ve been doing some reflecting this week on how I can work smarter (instead of harder), and one of the things I came up with was adding a few more tools to my Vim repertoire. I spend more than half of my engineering time in Vim (the other half usually being in a web browser), so I figured that a few minutes here and there would eventually add up in a big way.
In hopes of inspiring you to do the same, I put together a short screencast (~4mins; 14.5MB QuickTime file) that talks you through how to generate a custom tags file for Dojo’s API and the keystrokes to put it to work. Although I’m specifically using Dojo, I think this technique should probably apply to a lot of other toolkits as well assuming that they define API call in a consistent manner that can be approximated by a regex.
But like anything else with Vim, there are always multiple ways of accomplishing the very same thing, so I make no guarantees that there aren’t simpler ways of getting this done — but I can say that this way gets the job done, and is pretty easy to get working on your own system.
By the way, here are links to the generateTags.sh script and the tags file (for Core) mentioned in the screencast. I’ve slightly tweaked the tags file to remove duplicate tag names and a few things that weren’t really parts of the public API (regexes are obviously imperfect heuristics). I can’t say that the tags file may not be missing a few API calls, but tags are easy enough to add in manually if you do notice any omissions.
How do you extend your tools to give you a hammer that is suited to your work?
Conserving screen real-estate while still providing good content to the user has always been a challenge for designers and developers and while larger screen dimensions are becoming more prominent, it’s still important to take full advantage of the space available to you. Jeeremie over at Web Kreation came up with a very cool method of display a login panel using MooTools v1.2’s built-in effects capabilities:
Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest Wordpress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.
Jeeremie walks you through the steps of dropping this code into your site and provides the final source code as well to make the whole process painless. The end result is a very nice and intuitive slide down login panel which provides a nice balance of functionality and preserving screen real-estate.
Hedger Wang has been scanning a lot of Chinese blogs lately for solutions to IE6 and memory leak issues. One of the things he stumbled upon is a pretty nifty way of nulling the objects to stop memory leaks by using the try ... finally construct. So instead of this solution which leaks memory:
The effect of "sliding panels" has become extremely popular for categorizing & displaying large amounts of data on a single page. One of the most notable implementations of this effect was done by Panic to display all of the features and benefits of their Coda web development IDE. Since then, many implementations of this effect have been built and most are now referred to as "Coda sliders" since they provide very similar scrolling capabilities.
Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect.
This article will pick apart the pieces required to create the effect, and how to better it.
Remy's tutorial aimed for several goals:
Degrades perfectly without JavaScript enabled
Sliding panels effect without hogging browser CPU
Next and previous buttons added using JavaScript because they hold no use without JavaScript
Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation
Any link on the page that refers back to a panel should trigger the effect and highlight the right navigation - this should happen without any extra work
The tutorial is very detailed walking you through the markup of the page, use of several jQuery plugins, setting up the navigation, and handling the events for the slider. Along with that, Remy created a screencast, available in both Quicktime and Flash formats, that explain how everything is put together.
Eric Miraglia has posted a great tutorial on how to build your first YUI application. He runs you through the steps of creating a simple application that leverages YUI's AutoComplete Control to create a site-search form powered by the Yahoo!'s Search web service.
The tutorial is a great walkthrough of both how to build the application and also leverage YUI's extensive documentation. It also touches on some great points such as:
How to configure a YUI implementation and put YUI on the page
How to set up the markup for a progressively-enhanced YUI widget
How to instantiate and configure a YUI widget
How to subscribe to and make use of the "custom evens" provided by a YUI widget
And how to override default behavior to get a bespoke implementation that maps to our requirements.
I've been talking about progressive enhancement here before and got a lot of flak in comments about it. It seemed that there was a general misunderstanding of progressive enhancement and unobtrusive scripting as a "passing fad" or "backward facing rather than being innovative".
I was asked by a design agency in London to go there and give a brown bag presentation (during lunch break) on the matter and took this as an opportunity to write up reasons and examples for progressive enhancement concentrating more on the why than on the how.
The gist would be to say: enhancing a product progressively means you'll always deliver a working product - as you have no idea how your product can fail in certain environments, you plan for it to fail. This ties in nicely with the agile manifesto - you always deliver software that works.
In my talk I came up with seven "rules" of pragmatic progressive enhancement:
Separate as much as possible
Build on things that work
Generate dependent markup
Test for everything before you apply it
Explore the environment
Load on demand
Modularize code
I've taken these ideas and backed them up with benefits you get by following them and code examples in a full article: Pragmatic Progressive Enhancement.
The article is licensed with Creative Commons and uses YUI in the example scripts, feel free to translate, remix and create examples using other libraries.
To understand what aspects of a Web application you need to improve, you must properly analyze the components of the application. This article looks at how you can use the Firebug extension to Firefox and the YSlow add-on to instrument a Web application. After you install these tools, connect to the site that you are developing and click YSlow on the Firefox status bar. This opens the YSlow interface in Firebug. Now click the Performance button. YSlow performs an analysis of your application and provides a report on the different parts of the network transfer time of your application, as Figure 1 shows.
Most of the concepts mentioned are derived from the 10 rules defined by Yahoo! for better web application performance but Kristopher breaks down some of the concepts into examples and provides explanation on how to interpret the data. The explanation of the FireBug profiler is especially helpful to those just coming into the Ajax development space and want a better understanding of how to optimize their code:
It's been awhile since we've put up an Ajaxian Featured Tutorial and so we're going to get back into the swing of things with a nice, simple tutorial using MooTools.
Giving users feedback during a "save" process is a very good idea. It allows the user to feel a sense of confidence that the site is responding and their data is being processed. While we're at it, why not make it look good as well? Antonio Lupetti has written a short tutorial which does just that.
My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed.
In the image below, Antonio has described the sequence of effects:
To break it down, when the user submits the form, a message box will appear first giving the user an indicator that the save is in progress followed by a message to let them know that the save process has completed. The fade-out effect is very cool window dressing.
Antonio leveraged the MooTools JavaScript library for this tutorial which, apart from making the code a trivial task, already includes their "fx" module which makes adding nice effects very easy.
Learn to build a chat system into your Web application with Asynchronous JavaScriptâ„¢ + XML (Ajax) and PHP. Your customers can talk to you and to each other about the content of the site without having to download or install any special instant-messaging software.
While not exactly Meebo, the tutorial does provide the foundation for building your own little chat app and uses the powerful Prototype library for it's client-side code.
I have to say that at one point, I truly thought that JavaScript was using some type of "black magic". Things such as closures really threw me for a loop and I was fortunate to have some good folks to walk me through some of the tougher concepts. Not everyone is as lucky and thankfully, we have developers like Christian Heilmann who continue to put out great postings that cover a broad range of topics and experience levels.
In his latest posting, Christian outlines certain JavaScript shortcut notations which make understanding specific JS techniques a whole lot easier. For example, when dealing with objects, there's the involved way of defining objects:
var links = new Object();
links['Cute Overload'] = 'http://cuteoverload.com';
links['I can has cheeseburger'] = 'http://icanhascheezburger.com';
links['Pencils at dawn'] = 'http://pencilsatdawn.wordpress.com';
links['Hobotopia'] = 'http://apelad.blogspot.com';
and then there's the easier way using object literals:
var links = {
'Cute Overload' : 'http://cuteoverload.com',
'I can has cheeseburger' : 'http://icanhascheezburger.com',
'Pencils at dawn' : 'http://pencilsatdawn.wordpress.com',
'Hobotopia' : 'http://apelad.blogspot.com' // < -- again, no comma!
}
Christian provides plenty of great examples that should substantially help new JavaScript developers.
For developers, having an API available to access information from your favorite site is a good thing. It's not always necessary, though, as shown by Christian Heilmann in his latest post. Christian walks us through the process of creating a Slideshare gallery using a simple RSS feed to grab the data:
When I checked my slides I had a look at the API of slideshare but I am always a bit bored with having to go through a developer ID and then do everything on the server. That’s why I put on my “ethical hacker†hat and took a look at the RSS feed of my slides and found everything I need there! If you look at the source of the feed you’ll see that it contains not only the titles and descriptions but also the media code, in this case the HTML to embed the right flash movies.
The nice thing about this tutorial is that Christian explains how to make the gallery unobtrusive so that it degrades properly should JavaScript be disabled:
When JavaScript is available this will be the look and feel and functionality. When JS is turned off all you’ll get is an unstyled list of links pointing to the presentations on slideshare.net.
The problem with window.onload is that it assumes that no other script or library will want to attach an onload event of its own. And in this day of booming frameworks and endless pre-written snippets, that is no longer a certainty. Indeed, as your Javascript applications become larger you my find yourself stumbling over your own code!
Patrick provides step-by-step explanations and code that shows how to register events so they don't conflict with other libraries or code snippets down the road:
startStack=function() { }; // A stack of functions to run onload/domready
registerOnLoad = function(func) {
var orgOnLoad = startStack;
startStack = function () {
orgOnLoad();
func();
return;
}
}
var ranOnload=false; // Flag to determine if we've ran the starting stack already.
if (document.addEventListener) {
// Mozilla actually has a DOM READY event.
document.addEventListener("DOMContentLoaded", function(){if (!ranOnload) {ranOnload=true; startStack();}}, false);
} else if (document.all && !window.opera) {
// This is the IE style which exploits a property of the (standards defined) defer attribute
document.write("< \/scr" + "ipt>");
document.getElementById("DOMReady").onreadystatechange=function(){
if (this.readyState=="complete"&&(!ranOnload)){
ranOnload=true;
startStack();
}
}
}
var orgOnLoad=window.onload;
window.onload=function() {
if (typeof(orgOnLoad)=='function') {
orgOnLoad();
}
if (!ranOnload) {
ranOnload=true;
startStack();
}
}
