Insert quarter. Avoid Klingons.
Collected web clippings, ramblings, and scribblings from me to you.

Thursday: July 16, 2009

A neat tutorial on how to create a 'load more' feature like they use on Twitter and iPhone apps.A neat tutorial on how to create a 'load more' feature like they use on Twitter and iPhone apps.

I've always been curious about how to pull this effect off for use in web apps. This tutorial also includes versions for both jQuery and MooTools for those who like to have a preference.

Posted to Weekdaily filed in Tutorial @ 1:27 PM | Tags (6) | ajax | load | programming | twitter | web | widget |  | Discuss (0) |  | facebook | twitter | 10 Clicks | Posted by Vin

Thursday: December 28, 2006

A quick look at Mac Dashboard Widget creation; the soon to be old fashioned way.


With Leopard looming, the world of dashboard widgets on the Apple desktop are about to change. Soon any user will be able to create a widget in just few clicks using Safari's built-in integrated clipping tool. According to Apple's preview site for Leopard, a user can just select any portion of any web page and magically create a widget. This presents an infinite number of opportunities and I'm very curious to see how this new technology pans out. Will this cause an explosion in the widget world? How easy will it be to share these clipped widgets with the rest of the Internet? How far can you take customization of these clipped widgets? The answers are sure to come when Mac OS X Leopard arrives next year.

I'm kind of looking forward to this new clipping tool. I've always wanted to create a dashboard widget (and I finally did - see this post) but I initially felt it was a bit of a daunting process. The few times I tried to delve into the process I got frustrated and gave up rather quickly. Bearing that frustration in mind it's easy to see why Apple is making web clipping to widget creation readily available with Leopard. Intermediate web developers comfortable with the PC environment (such as myself) may sometime have a hard time getting into the Mac widget scene for the first time.

My initial trouble was that I took a very programmatic stance towards creating a widget. Again, this is due to the fact that I am mainly a PC programmer and a just casual Mac user on the side.

Does one have to compile a widget to make it run on the Dashboard? No.
Once it's running on the Dashboard, can it be modified? Yes.
Can I utilize that neat 3D page flip instance that every widget seems to use? Yes.
What about those slick Apple scrollbars? Yes.

These are just a handful of questions that as it turns out now, were quite unnecessary to ask.

Now to those who have made widgets in the past the rest of this article will probably seem about two years old. That's because it is. I should have gotten into this a long time ago. But hey, better late than never.


Widgets are just as Apple describes in their support docs; little web pages. There is no compiling necessary to bring your widget to life. Essentially, widgets just regular old file folders but with a 'wdgt' extension tacked on. This took me by surprise - I wasn't expecting it to be that easy. The whole connotation of a widget doubling as a 'mini-application' caused a stir in my newbie brain. As you might have guessed by now, I'm new to developing code on a Mac so cut me some slack. Anyway, this extension allows Mac OS X to distinguish that your folder is in fact, a runnable widget and not just your average file folder. Basically you can start localizing your widget in your own developmental fashion and create a widget just like you would if it was any ordinary web page.

For my very first widget I decided to make a GeekLikeMe feed widget. The first step was getting the JavaScript in place to parse out my XML file that I keep updated daily (one post a day - one XML update a day). Apple's RSS sample widget came very much in handy at this point. It essentially does exactly what I wanted my widget to do. Go to the web, grab an XML feed, display it in the widget. However, their sample is based on a very standard field set - title, link, date published. For some odd reason, I never included a date published in my XML feed. This threw a monkey wrench in my otherwise painless widget creation process. A couple of quick tinkering with the underlying JavaScript to change some field declarations and I was good to go.

widget dimensions

Once that was fixed, I moved on to the look and feel of the widget itself. Now what's interesting about the dashboard environment is that some things are already done for you but some other things are not. Worried about where to size up your widget in terms of height and width? Don't be. Just make a PNG file of your design and name it 'default.png' in your widget folder. Mac OS X will assume that this file contains the default width and height of your widget and will run with it. However, you can also set your own custom height and width via the 'Info.plist' file that must be contained within your .wdgt folder. While we are on the subject of the 'Info.plist' file; one thing that may slow you down is enabling web access if your widget happens to need to talk to the Internet (like grabbing a feed from the world wide web). To enable this you will need to open up your widgets 'Info.plist' file and add the following bit of code: AllowNetworkAccess Once you have that in place your widget is free to talk to the web in peace.

What about adding that signature widget scrollbar that everyone seems to use? Apple has a very nice little script you can plugin to your code to make that work correctly as well. You basically just have to make sure that you target the name of your DIV tag that contains your widget's content. And again, this script can be easily found and appropriated to your own code by taking a look through Apple's sample widget examples.

If you have a regular anchor tag contained in your widget you will notice that by clicking on it the linked web page will come up in the actual widget area itself rather than pop open Safari (or your web browser of choice on the Mac). To enable your links to open up outside of Dashboard you will need to use a JavaScript function, here is an example:

function clickurl(event)
if (window.widget)
widget.openURL (event);

When coding your anchor tags simply include the JavaScript function to your 'onclick' function with the desired target URL. Here is an example: This method will make all of your HREF calls open up outside of your widget.

Debugging can be a little bit of a pain. I found myself debugging my widget while it was running in Dashboard 95% of the time. In the Apple developer documents they suggest using Safari to test out your widget. But from what I could tell, you can't really harness all of the Dashboard technologies unless you actually run your widget in Dashboard (ie testing out how the page flip actually looks). But still it's just a minor annoyance as working on the actual dashboard itself is not that big a deal. Besides, I really want to see that cool liquid effect when I see my widget pop open for the first time. It still makes me giddy, I don't know why.

widget deletion

There are a couple things to be mindful of if you debug your widget using Dashboard though. Mac OS X has a weird habit of moving your widget files (and not leaving copies of them) at a moment's notice. For instance, if you are working on your widget on your desktop and you decide to install it to Dashboard your files will be magically whisked away to your ~Library/Widgets folder. Just something you want to keep in mind if you want to know where you widget happened to run off to. And as always with coding, it is generally good practice to keep active backups of your work just in case any other unexpected shenanigans come into play (accidental deletion). On the subject of widget removal management, deleting your widget from the Dashboard will simply send all of your files to the trash bin. So be careful before emptying the trash if you have some recent changes to your widget that you don't want to lose.

Basically thats a very generalized view of widget creation on the Mac and some things to look out for during the actual programming process. It should be noted that I made my widget in a very ass-backwards style. I developed everything on my PC using HomeSite 5.0 and then ported the code over to my Mac's widget folder with every change. Not the quickest and easiest methodology but sometimes you've got to go with what works.

I have attached the source folder of the GeekLikeMe feed widget if one is so inclined to play around and make a widget themselves. A careful eye will probably notice that a lot of the code is heavily sampled from Apple's RSS widget. Sometimes the best way to learn is by example.

Download the zip archive of the GeekLikeMe widget here.

Posted to Verbose filed in Apple @ 10:56 AM | Tags (5) | dashboard | widget | apple | feed | development |  | Discuss (0) |  | facebook | twitter | 0 Clicks | Posted by Vin

Tuesday: December 12, 2006

GeekLikeMe Dashboard Widget for your Mac.

If you've been reading my daily logs you might have noticed that I've been messing around with creating dashboard widgets for Mac OS X over the past couple of days. What exactly is a dashboard widget you ask? In a nutshell, its a mini-application that you can run on your Mac's dashboard section. In this case, the mini-application I put together displays the last three days of links that grace the front page of

Widget Screenshot

I tried to keep the layout and design of the widget to be compact as to not disrupt anything else that might already be running on a user's dashboard. This is my first attempt at making a widget but I have a feeling I'll be making more as time goes on. Of course, with the next version of Mac OS X Leopard right around the corner I think everybody will making a lot more widgets. More on that coming in a verbose post later this week.

Widget Download

To use this widget you must be using Mac OS X 10.4 Tiger. Download the file located in this post and double click it to unarchive it to your desktop. Then click on the black widget icon to install to your dashboard. If there are any questions or comments regarding this widget feel free to leave a comment.

Download the GeekLikeMe Widget Version 1.0.

Posted to Verbose filed in Apple @ 11:02 AM | Tags (4) | apple | dashboard | widget | geeklikeme |  | Discuss (0) |  | facebook | twitter | 0 Clicks | Posted by Vin

1 Last »»