Amazon Does Widgets Right

Some really nice new widgets from Amazon were released today. They’re all very nice looking, and extremely customizable. By far the best part from a publisher’s perspective is the flexible width and height. Most other widgets come in fixed sizes that you can’t modify because there’s no access to the javascript serving the widget. Here are a couple of the fancier ones in action. These aren’t screen shots, so feel free to click and interact with them, and do some early holiday shopping.

Web Development For iPhone Is Fucking Brilliant

Excuse the profanity - I had a revelation.

Millions of children (yes children) are learning, working with, and experimenting with the exact technologies used for development on iPhone - HTML and JavaScript - every single day.

They know all about embedding code for widgets and videos, and many of them are teaching themselves to edit and customize the code on sites like MySpace. Sure, most of their efforts amount to slice-my-eyes-50-ways-with-a-razor-blade levels of awful, but that’s not the point. What matters is that this group of youngsters - a group who, you’ll recall, hasn’t breathed a single breath in a world without Internet - is not afraid. They’re not afraid of code, of RSS feeds, of uploading, downloading, syncing, embedding, linking, SMS-ing, clicking, dragging, poking, or any of the other myriad methods of interaction developers have spent years trying to teach reluctant users. This group is not reluctant. They’ve spent their entire lives in front of screens and they just get it, and more and more they are dirtying their hands playing with all the gooey stuff that exists beneath the interface - like tags and elements and variables and feeds.

This is the first generation in the history of mankind that knows how to program a VCR.

Think about that. It’s true, even though many of them probably have no clue what a VCR is.

The reason that making the web the main development platform for iPhone is brilliant is because every one of these millions of children can develop for it. Sure, their apps will never be Google-level, or even Adobe-level, but they’ll still be apps. There is a huge business in widget-making right now - companies that make it easier for the kids to customize and embed - and iPhone will literally explode that ecosystem. Therein lies the ultimate value: hyperpersonalization.

With a pretty much infinite number of available URLs - every single user can control a multitude of ultra-customized widget-type applications, pulling and sharing data from Facebook, MySpace, news sites, blogs - even music and video from the web. Each app/widget gets its own page. Everything talks to everything else. Complete personalization is only a synchronized Safari bookmark away. And it won’t matter if their web is ugly - I can just as easily make mine non-ugly.

iPhone has the potential to go viral (as they say) in a huge way. The power to develop - previously in the hands of the few - is now, quite literally, at the fingertips of millions.

Postscript: Price, schmice. Trust me on this. I’ve got my pixel ruler out and ready.

More iPhone here.

Technorati Authority: More Links Than Engadget

I have made a new, unauthorized Technorati Authority widget for those bloggers cool enough to have more than 29,000 blogs linking to theirs or for those who think that the way the authority is determined is flawed, and as a result says very little about the actual authority of a blog. For instance, if I really wanted to have a high ranking, all I’d need to do is start a couple hundred Blogger blogs and link them all to mine. Voila! Indeed, not too many people are attempting to game the system by doing this or through other link-trading schemes, but it is possible.

Anway, here’s the widget (note - as of this writing, Engadget is the number one Most Popular blog listed on Technorati with 28, 757 separate blogs linking to it):

Feel free to use it on your blog (and toss up a link to the original here if you want).

Disclaimer: THIS IS A PARODY. THIS IS NOT IN ANY WAY ASSOCIATED WITH TECHNORATI AND THEY OWN ALL THE STUFF I TALKED ABOUT AND HAVE NOTHING TO DO WITH THIS WIDGET AND THE DESIGN IS BASED OFF OF THEIRS AND PLEASE OH PLEASE DON'T HURT ME TECHNORATI I’LL TAKE IT OFF MY SITE IF YOU ASK I’M JUST TRYING TO POKE FUN I LOVE YOUR SITE A LOT OKAY END ALL CAPS NON-PUNCTUATED RUN ON SENTENCE.

How To Make An Awesome Tag Cloud!

I get a lot of emails asking me about the giant tag cloud hanging out at the top of my site. So many, in fact, that I thought it’d be a great idea to make a post out of it, as a bit of a mini-tutorial. So, without further ado, here’s how to get an awesome tag cloud in the New Blogger (formerly Blogger Beta).

(UPDATE 24/08/2007: Obviously there’s no tag cloud up there anymore, since I redesigned the site. I’ve posted a screenshot below of what it used to look like. Click it for a larger version.)



Okay, back to the regularly scheduled tutorial.

First start a new blog in Blogger. Got one? Cool.

Now, navigate in Blogger to Template > Page Elements (clicking Layout from the Dashboard will get you there, too). You’re looking for the screen that says “Add and Arrange Page Elements.” Now, in the sidebar of this representation of your blog, click “Add a Page Element.” You’ll get a nice pop-up with a ton of options. Click Labels, cause that’s what you want to add, after all. Keep it alphabetical, change the name if you feel like it, and click “Save Changes.”

Save your template.

Now click over to “Edit HTML.” Definitely a good idea to “Download Full Template” here, to be safe, before you start editing the code. I’ll wait.

Backed up? Good. Moving on.

Search through your code for a line that looks exactly like this:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

The “title” attribute might be different if you changed it in the step above. Otherwise, this is the line you’re looking for.

Copy all of this code below.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> &gt; max)
  max = <data:label.count/>;
if (<data:label.count/> &lt; min)
min = <data:label.count/>;
</b:loop>
var display = &quot;";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 80 + (delta * 100) / (max - min);
display = display + &quot;<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span> &quot;;
</b:loop>

obj = document.getElementById(&#39;LabelDisplay&#39;);
obj.innerHTML = display;
}


zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

And paste it over (on top of, instead of, replacing!) the line you found. Be very careful not to overwrite the </b:section> that will most likely follow it in your template code.

Click preview, and if you’ve done everything properly, you’ll have a sweet tag cloud with links of various sizes based on frequency of occurrence (if your blog is brand new, you’ll need to post in it first to see the code at work).

If you don’t want it in your sidebar, go back to the Page Elements page, and move the widget around to wherever you like (different templates set different limits on this, which can be subverted, but that’s beyond the scope of this tutorial - email me if you want to get hardcore).

Enjoy! Get tagging! Post your results in the comments for all to see!

(Note: The code up there is a modified version of the Multi-style labels widget written up on Hackosphere. Credit where it’s due.)

House M.D. Dashboard Widget!

Though it is Presidents Day (allegedly the correct spelling/punctuation) and I am off from work, I just had to take a break from my lethargy to share this very cool something with you. My new venture into creating Mac OSX Dashboard widgets has progressed and after work into the wee hours of the morning I am pleased to present the latest fruits of my labor: An RSS feed from House is Right, a news site dedicated solely to the most awesome show on television - Fox’s House, M.D. starring the fantastic Hugh Laurie.

Give it a whirl and let me know what you think.


Download (532K)

If you’re on the fence, check out the back - it might seal the deal:

More of my widgets are available here. And even more are coming soon.

Have a great pseudo-holiday, America.

Frivolous Motion Dashboard Widget

I was messing around with Dashcode last night (this is an app that will come with OSX Leopard - I have the beta version, as I am registered as a Mac Developer), and ended up making my very first Dashboard Widget. It is an RSS widget that downloads and displays the 10 most recent posts on Frivolous Motion, letting you Mac users read the blog without opening up Safari or another browser. Simply hit F12 to show your Dashboard (or whatever hotkey or hot corner you have set for it), and the widget will automatically display anything new.


In theory, new content will be marked with some sort of “New!” notification, but I haven’t seen this in action to confirm that it is working. Additionally, each post contains a couple links that let you email the post to a friend, share it on Facebook, Digg It!, and add to your del.icio.us bookmarks, making it super-easy to spread the Frivolous Motion Love around to the less fortunate.

There is a tiny little bug I know about regarding the display of Flash content (like that Murphy guy Slogan Generator I posted a few days ago), but otherwise it works and displays everything, including pictures. Also, the rear of the widget has a slider to change the post length, but as far as I can tell, it doesn’t work yet.

You may download the widget here (274KB) and once you’ve got it on your desktop, it is super easy to install: just a double click, a confirmation, and you’re there, pretty much. I would really appreciate any feedback, and feel free to point other people to this post who you think might want to give it a whirl.

I will upload new versions to this widget as available, and plan to design a bunch of other widgets too, now that I’ve got my feet wet. What would you like a widget to do? What do you want or need on your Dashboard? I welcome any and all suggestions, and will do my best to make what you’re looking for. I am making an Ain’t It Cool News widget tonight, but after that, my options are wide open.

In the future you will be able to see all the widgets available for download by clicking the “widgets” tag in the sidebar.

Download (Frivolous Motion RSS Widget 1.0 - 274KB)