Tumblr has an easily accessible API which outputs XML, JSON and JSONP. A bit of searching didn’t drum up a cut-and-paste solution, but I was able to roll my own in a few minutes. I’m documenting it here, so perhaps Google will lead the next person who needs this to my solution. Just post the appropriate parts of this script into various parts of your site, and it should just work. See it in action on my site.
Google’s AJAX APIs Playground is an awesome new tool recently released by Google. It allows you to browse through their various APIs and view examples. This is a great way to see what the Google APIs have to offer and get a quick example of each.
Even better, each example can be executed, modified and re-executed right on the page. The final source your create can be copy and pasted, and each API has a link to the documentation.
Definitely head on over and check it out. I follow various Google developer blogs, but I was quite suprised to see the breadth of their API offering. Graphs, maps, search, blogging and more are all included, with great examples and an excellent interface.
As an example, check out this incredily simple way to add a scrolling RSS ticker to a page. This will grab the provided feed, and rotate the articles inside the #content div on the page. You’ll want to check out the full example to see the needed javascript files and provided stylesheet.
google.load('feeds', '1');function OnLoad() {
var feeds = [{
title: ‘In A Row’,
url: ‘http://inarow.net/index.rss’
}];
}
google.setOnLoadCallback(OnLoad);
How to Get a Lot Done – 7 Tips to Achieve More
This veers a bit from my normal posts, but was a great read. If you have goals, big or small, and feel like you aren’t reaching them, give this a read. The author certainly knows what he’s talking about, being a world-travelling, company-starting, web-designing entrepreneur extraordinaire.
Query String to Object via regex
This is from remy sharp’s blog. This is a great example of the wonderful tidbits he doles out in helpful posts on this blog. Lots of great jQuery, regex and Javascript “magic”.
Sun T2000
Deep Profiling jQuery Apps
John Resig does it again, releasing another awesome project. This adds profiling into the callstack of a page utilizing jQuery. It goes much deeper that the profiling capabilities of firebug, and will be a great help if you have a heavy client-side app using jQuery.
Wide Finder 2
Tim Bray is running a second edition of his Wide Finder project. The basic premise is that taking advantage of the multiple processors available in modern day powerhouse boxes should be easier. He provided a fairly trivial application in ruby (72 lines to process gigs of log files for counts and top visited pages). He then ran it (in 23 hours) for a benchmark on an 8-core, 32-thread Sun T2000.
He’s since given out accounts to a handful of others who had code to test on the box and provided some preliminary results. As you’ll see… OCaml apparently rocks, with results coming in at under 10 minutes and less than twice the code footprint of the original. It’s certainly an interesting project to follow.
I wrote this up a while ago, I don’t even remember why, but thought some people might enjoy it.
For many web developers, JavaScript is one of those subjects they’d rather avoid. Five years ago, the landscape of client-side scripting was pretty bleak. Browser inconsistencies, implementation bugs and numerous target platforms made developing client-side JavaScript a messy endeavor.
And then, much to the chagrin of those developers, “Web 2.0” happened. Overnight, every site on the internet began using AJAX, every feature request for a site involved something dynamic and client-side, and JavaScript development quickly became as important a skill as any server-side technology.
As this trend continued, smart developers began longing for the level of abstraction found in most server-side environments. Just as a PHP developer could call mail() on nearly any platform and expect to have an email message sent, JavaScript developers craved this level of abstraction in their day to day work.
In response to this need, several sharp developers have responded with JavaScript libraries to fill this gap. These libraries seek to provide a uniform interface, across browser and operating system platforms, for the most common tasks that client-side scripting is called on to perform:
Each of the popular libraries attempt to provide some or all of these capabilities, packaged in their own API.
This article focuses on one of theses libraries, jQuery. jQuery design is focused on maintaining a small footprint, cross-browser compliance, and reducing the amount of code which must be written for applications. It provides abstractions for AJAX, DOM manipulation, event handling and animated effects.
Developing with jQuery depends on two basic concepts, CSS selectors and method chaining.
In most vanilla JavaScript code (which does not make use of a library), you will find code like this:
function toggle_element( element_id ) {
var element = document.getElementById( element_id );
if ( !element ) {
return false;
}}
window.onload = function () {
var toggler = document.getElementById( ‘toggle_help’ );
if ( toggler ) {
toggler.onclick = function () { toggle_element( ‘help’ ) }
}
}
The basic idea here, is that when the page is done loading, during the window.onload event, we find the toggle_help element and attach an onclick event to it. When that element is clicked, we find the DOM element with an id of “help”, examine its current display state (the CSS attribute which controls how it is presented in the flow of the page), determine if it is currently hidden or not, and toggle its display state.
The same code, implemented with jQuery looks something like this:
$(document).ready( function () {
$('#toggle_help').click( function () { $('#help').toggle(); });
});As you can see, the code is significantly shorter. Admittedly, to try and compare based on the 22 versus three line count is a bit silly, as one could easily add or subtracts line from either implementation. I think it is clear, though, which version is simpler. jQuery strives to provide an appopriate level of abstraction, simplifying the developer’s task, but not obscuring it behind a heavy API.
An important example of the abstraction jQuery provides is the $(document).ready() construct. This serves as an enhanced version of window.onload. The primary enhancement is that it acts in a cross-platform waym firing as soon as the DOM of the page is ready for manipulation. This is in contrast to window.onload which can be delayed indefinitely if objects on the page load slowly or improperly (images, iframes, scripts, etc.)
As shown in the previous example, one core features of jQuery is the use of CSS selectors to find elements within the page. By now, I imagine that most web developers have had exposure to at least basic CSS, which is all you’ll generally need in order to develop very useful jQuery code. The selector engine in jQuery implements CSS2 and CSS3 selectors, as well as adding a few useful extras. The following examples, outline various selectors.
Very concise selectors and code fragments are provided by the use of the $ symbol. This is not a reserved character in JavaScript, and is used in jQuery as an alias for the main jQuery object. This will be seen throughout the examples.
To start, here’s the page we’ll work against for these selector examples:
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div id="header">
<h1>Test Page</h1>
</div>
<div class="instructions">
<ul>
<li>Read Page</li>
<li>Follow Examples</li>
</ul>
</div>
<div id="mainform">
<form>
<span class="instructions">
Fill out this form.
</span>
<input type="text" name="first_name" />
<select name="gender">
<option>Male</option>
<option>Female</option>
</select>
</form>
</div>
</body>
</html>A simple example, find the header and slide it out of view. The # character, in front of a name is used to find an element by its id attribute. An id should be unique in a pages structure. slideUp() is an animation method which decreases the height of an element over time, until it is hidden.
$('#header').slideUp('slow');Find the title heading of the page, and change its color. In the selector, nested elements are found by simply following one selector with another.
$('#header h1').css('color', 'red');Remove the second element of a list. The :nth-child() selector is provided by jQuery to facilitate this. remove() takes matched elements out of the DOM.
$('#instructions ul li:nth-child(2)').remove()Where the CSS selector concept becomes very powerful, is when you want to operate on groups of items. All methods of the jQuery object will operate across all the elements that match a given selector.
Here, we’ll find all the instructions and add a class to them. addClass() is a method which adds a CSS class to the matched elements, useful to quickly change items to match a set style. An important note, regarding addClass() is that an HTML element may have more than once class, even though this is not seen very often. To match all elements which have a given class, the classname is started with a period.
$('.instructions').addClass('warning');These are some rather simple examples, but they touch on the main principles you’ll use when creating selectors for use with jQuery. Details on all the selectors available are provided in the jQuery Docs.
One possible disadvantage to using CSS selectors, as outlined above, is that very complex selectors can become a performance bottleneck. They can also result in your code being cluttered with the same selector over and over, as you repeatedly manipulate the same elements. Two facilities help alleviate these issues.
All methods of the jQuery object return themselves. This will be a familiar concept to many object-oriented programmers, but can look a bit foreign to others. The basic idea being that you need only perform a given selection operation once, and then you perform all necessary operations on that set of results.
$('.intructions').fadeIn('fast')
.css('border', '1px solid red')
.addClass('warning');In this example, we find all the instructions. We cause them to appear, give them a red border and add the warning class. (Apparently, we really, really want our instructions followed) It is important to remember that this is equivalent to the following:
$('.intructions').fadeIn('fast');
$('.intructions').css('border', '1px solid red');
$('.intructions').addClass('warning');Chaining methods in this manner allows for more concise code and snappier performance, as the selection operation need only be performed once.
Another facility provided is the definition of this inside each jQuery method context to reflect the current element being operated on. This becomes important with more advanced concepts, as many of them rely of providing callback functions which are executed in the context of each element matched by the selector.
In this example, we find every element with the class “click_to_hide” and then attach an onclick event to it.
$('.click_to_hide').click( function () {
$(this).hide();
});As you can see, we are creating an anonymous function for each element, and when the element is clicked, the element will be hidden. In this instance, we wrap this in the jQuery/$ method so we have access to the hide() method. Before wrapping, this is simply a DOM Element.
Two final topics I’ll touch on are AJAX and event handling. jQuery provides nice abstractions for both of these, which are likely to prevent numerous bugs and speed development.
The must-have feature for modern web sites, AJAX, is greatly simplified when using the jQuery library. Without using a library, you would be writing complex code to first instantiate a browser-specific XmlHttpRequest object, then initiating a request and writing a callback function to be triggered.
With jQuery, for the most common cases of AJAX usage, you can accomplish this with one simple line:
// Grab the content of url and inject it into #div_to_load_in
$('#div_to_load_in').load(url);For a more complex case, where you want to manipulate or act on the result, you’ll need to add a bit more code.
var url = '/update_status.php';
$.get(url, {status: $('#status_field').val(}), function (data) {
if ( data == 'OK' ) {
alert('Status Updated');
}
else {
alert('Sorry, Status Update Failed. (' + data + ')');
}
});Here we’re assuming the existence of a server-side script, “update_status.php”, which takes a “status” GET parameter and returns either “OK” or an error message. In this example, I also utilized the val() jQuery method which abstracts the process of obtaining the value from any form element. This includes finding the value attribute of the selected option in a <select> tag, value of a text field, or status of a checkbox.
Event handling in jQuery involves jQuery object methods which bind functions to events. All of these binding methods are chainable, as with the previous examples. Many of the browser-native events are simplified or enhanced, to make the script writer’s life easier.
An example of this is hover() which allows you to bind a function to the movement of the mouse cursor in and out of an element. Here we add a faux caret to elements of a list as we hover over them, add a ‘selected’ class, and then remove these decorations when the user’s mouse moves on.
$('li').hover(
function () { $(this).prepend('<span>></span>').addClass('selected'); },
function () { $(this).removeClass('selected').find('span:first').remove(); }
);In this example, we see use of this, method chaining, and find() which allows using selectors to dig down inside of an element.
Hopefully, you now have a feeling for what jQuery can do for your code. This was simply the 10,000 foot introductory fly-by… jQuery packs a sizeable array of methods and functionality into its 14kb size, and it takes a while to familiarize yourself with most of them. To continue you exploration, these sites may be of use:
Google is now providing free hosting for various popular JS toolkits. jQuery, MooTools, Prototype and Dojo seem to be included at this point. The idea is that they provide servers which properly server up cache-headers (and bandwidth, I suppose) and the more people that use these URLs, the faster interactive “Web 2.0” pages will load. (Because the user will have already loaded and cached the libraries from another site using the Google API)
They providee a loading API:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2");
</script>And a URL which provides the requested version and library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>Both methods allow you to provide as much specificity as you want for the version. Ask for version 1, and you’ll get the latest in the 1 series… ask for 1.2.6 and you’ll get that minor revision.
I’m not sure, is this a great idea… or another foothold for Google to take over the world. Or both?
TinyDB is an interesting take on “cloud storage.” Basically, you send some data via GET, they give you a URL, your data is stored in that URL. It’s not private and it doesn’t store a lot of information, but it has some interesting possibilities.
I think a good use for these sort of things, will be quick-built client-side only content dumpage. You go to “twitter-overload.com” type in a larger than 140 character message and hit save. JavaScript bundles up your data, stores it in TinyDB and hands you back a URL which will reload that data from TinyDB and display it. You take that url and post it to twitter. (Yes, I know that services like this exist, but the idea of doing it entirely client-side is interesting.)
TinyDB Toys is a simple proof of this concept. Here’s a TinyDB Toy URL with some embedded data.
To facilitate this, I wrote a jQuery plugin, jQuery.tinydb. The two methods are documented within the source.
Drop me a comment if you hack up something cool with this.
So, as I mentioned before, Flot is an awesome jQuery plugin for making on-the-fly graphs. The twitter api supports a JSONP mode for its output. 100 lines of javascipt (well, 60 if you condense whitespace and braces, commas… less if the goal was to write small code).
What I don’t understand about what I’ve done here is JSONP, which I first read about here, at remy sharp’s blog… Why doesn’t it get more press. Solves the problem that I would mentally run in to all the time when considering various mash-ups and takes on various internet APIs, that of cross-domain limitations with XMLHTTPRequest.
The heart of the magic is demonstrated in this incredibly simple example:
$.getJSON('http://twitter.com/statuses/user_timeline.json?id=CDMoyer&callback=?',
twitterCallback);function twitterCallback(timeline) {
alert(’Twitter Username: ’ + timeline0.user.screen_name);
}
The magic happens in two places. First, jQuery replaces the ? in callback=? piece of the URL with a function name that references to the callback you pass to getJSON(). Second, the twitter API takes the callback parameter and wraps the JSON result structure in a function call with that name. The end result is that the JSON structure is passed to a function in the namespace of your document, circumventing the same-domain origin policy
So far Scoble has reached the highest TPH (8.0) I’ve seen, looking at various popular tweeters.
I read about Flot a couple months back and have wanted an excuse to play with it, as it looked pretty slick. Unfortunately, not actual opportunity presented itself, so I had to just make something up. The neat thing is how simple it is to make a basic graph, but how you can achieve some awesome effects through various options. The latter examples on the Flot site show of some great features.
var data = [[0,0], [1,1], [4,5], [123,2], [12.3]];
$.plot($('#graph_area'), [data]);And that’s it. You need to make sure and have dimensions defined for the target element, and Flot will automatically scale your graph based on your data. If you want more data sets, you pass in more arrays inside the secord argument. plot() also takes a third argument, options which lets you controll the appearance and more advanced features.
Inspired by Oliver Steele’s Sequentially Library and this post by Felix Geisendörfer, I created a very simple jQuery plugin.
It provides a drop-in replacement for each(), which performs the loop in iterations and pauses between each iteration. You’d only do this if you are iterating over a largish set and performing non-trivial operations. Basically, if the browser freezes, this is a decent solution as the call to setTimeout() allows the browsers UI thread to get a slice of the action and prevents spinning cursor syndrome.
If you wrote:
$('foo').each(function () { alert($(this).html()); });
$('foo').throttle(function () { alert($(this).html()); });Or:
$('foo').throttle(
function () { alert($(this).html()); },
{per: 100, pause: 10});
MikeOS
MikeOS
If you like to read code, this is the OS for you. It’s a simple 16-bit OS written with the goal of demonstrating the basics of OS development. I’m not much of an assembly programmer (at all), but I was able to grab the tarball and read through, and learn a few tidbits right off the bat. Oh, and it’s got tetris. ;)
Jones Forth
Similar to MikeOS, Jones Forth is a wonderfully literate implementation of a FORTH compiler. You can just jump right to the source file and start learning. To quote the author:
FORTH is one of those alien languages which most working programmers regard in the same way as Haskell, LISP, and so on. Something so strange that they’d rather any thoughts of it just go away so they can get on with writing this paying code. But that’s wrong and if you care at all about programming then you should at least understand all these languages, even if you will never use them.
Three Small Javascript Libraries
A good post by Oliver Steele, describing three interesting libraries that really flex a bit of javscript, beyond the everyday DOM manipulation. Fluently – which allows you to easily create “chainable methods” (ala jQuery), MOP JS – which allows for some slick metaprogramming around asynchronous calls, and Collections JS – implements some nice utilities for collections.
TaffyDB – A Javascript DB
At first, my reaction to this was ,“Why?!” But then I mulled it over a bit more. I can see quite a few uses for this, especially in this modern era of “never reload the page.” I’m envisioning stateful browser apps neatly keeping their state, and transacting with the servide data store through tidy little JSON snippets. [via Joe’s Blog]
