There Must Be A Better Way…

I’m working on a photo gallery site that’s powered off Google’s Picasa service. Basically, you put in your email address, you name your gallery, and then you put in the RSS feed for your Picasa album, and out comes a nice, customizable gallery you can share with your friends. Three steps, thought it was a pretty cool idea, easy for anyone to use.

The trouble came when I tried to validate everything the user puts in. An email is easy, just check to make sure the email address follows the normal syntax xxx@xxx.xx and send it a test email to confirm. The gallery name is even easier, remove weird characters that would interfere with the URL and check that is doesn’t already exist. The Picasa RSS feed however, was a bit trickier.

I’m using PHP to power this app. To sort through the RSS feed, use a function called simplexml_load_file. That function takes a file I give it, and if it’s properly formatted XML, loads it into an easy to use format. For example, if I want to pull the title and body of each post out of the rss feed, I use the following:


$xml = simplexml_load_file("rssfeed.xml");
$items = $xml->channel;
foreach ($items->item as $item){
$title = $item->title;
$body = $item->description;
}

Pretty simple right? Well that’s the point of this simplexml_load_file function, it works real nice and easy. Here’s the problem though. Most php functions will present you with an error if you send them something they can’t read. For example, if I try to load a file into a page using an include(); function, I can use this code to catch any errors.


try {
if(!@include('/path/to/file.php')) {
throw new Exception('Failed to load');
}
}
catch(Exception $e) {
print $e->getMessage();
}

Again, makes sense right? Well that doesn’t seem to work with simplexml_load_file for some reason. If I pass an invalid file, or improperly formated XML, rather than catching an error and moving on, it takes down the code with crazy errors. I swear, I tried everything to get this to work, but no love. Now, there is a crazy complicated, 50 lines of code option, but that’s excessive for simple validation.

So if there’s no easy way to catch an error on a simplexml_load_file function, how can I possibly validate that the RSS feed a user passes is ok? Well, after hours of research and giving up for the night, it finally dawned on me. There’s no reason I need to load the XML to test if it’s valid. All I need to do is check the url for validity and test the file for something that’s specific to the RSS feed. Scanning through the XML, I found this little piece of markup:


<gphoto:allowPrints>true</gphoto:allowPrints>

Now I’m sure flickr isn’t using that XML tag anywhere. It’s gotta be from Google, and it’s gotta be for photos. All I need to do is confirm this XML exists in the file to confirm 99.9% that the feed is correct. The code for that looks something like this.


$filename = "rss.xml";
$string = "gphoto:allowPrints";
$feed = fopen ($filename,"r");
$contents = fread($feed,filesize($filename));
if(strstr($contents,$string)) {
echo "Valid";
} else {
echo "Invalid";
}

So what’s the point of this post? Well, I wasted at least 2 hours of my life trying to solve a problem the hard way, when I should have just thought about solving the problem the *right* way. I was so convinced that I had to figure out validation of that XML file that I never thought about any other options. Next time you’re stuck on something, just take a step back and think if there’s a better way of doing it instead.

Uncategorized

Comments (0)

Permalink

Universal ToDo List

Problem:

It seems like there’s a new to do list app released every day. Don’t Forget the Milk, Backpack, etc do a great job and I use them for sharing with clients. The problem is, these are rich web apps which only work with Javascript turned on, and AJAX at that. Forget the poor Windows Mobile user who’s stuck with the inferior IE or Opera browser that doesn’t support XMLHttpRequest.

I was a Treo user, then a Blackjack user, neither of which supported AJAX and barely handled Javascript. I needed an app to help me keep track of things, so I figured I’d build it myself.

Solution:

I started with a bare bones to do list, just a few checkboxes and the database being updated. Then added different sections, navigation, and finally some AJAX. I tried to keep it simple and I’m pretty happy with how it turned out. In fact, I use it every day.

Universal ToDo List

My Universal ToDo is a lightweight web app running on php with a mysql database with a sprinkle of ajax to make things fun. It loads fast on slow EDGE connections and degrades gracefully on non-AJAX browsers. I’ve also optimized it for use on an iPhone and even included a neat-o apple-touch-icon for those of you on 1.1.3 and higher firmware.

View Example Download Code

Of course, it works perfectly well on any normal browser. I use it with my wife to send grocery items from her while I’m at the store, she updates on her laptop and I can see it on my iPhone. We’re never running out of milk again!

Universal ToDo List


Update 3-8-08: Seems there were a few little bugs in the v1 release. First off, apostrophes weren’t stripped out correctly, so putting in the work Fry’s brings up Fry\’s. Which is fine if that’s where you want to shop, but didn’t sit well with me. Secondly, now after adding a new category, the list of categories updates to allow you to choose the new category. Finally, made little progress indicators when you update or add items, nothing special just a little javascript value change in the input button, but it works. Links to download are all updated, so get the new version up top. Oh, and make sure you’re running PHP 5, doesn’t play well with PHP 4.

Uncategorized

Comments (0)

Permalink

Feather News - An XML Based Blog

Problem:

A friend of mine needed a way for his users to post comments to his website in response to his news posts. There’s a ton of ways to get this working, any blog software will do the trick. But there’s a catch, he doesn’t have access to a database. He’s been writing these news updates old-school, editing the html file every time he wants to post. Talk about dedication!

Solution:

I had to figure out a way to make comments work without a database. The easy answer was, have them email their comments and he could update the page himself. But who wants to do that? So I decided to store the comments in an XML file using php to update it whenever a user posted.

FeatherNews Daily Example

Rather than stopping at just comments, I decided to write a nice script for him to post his news from the site, and store the news posts in an XML file as well. This required a simple login system to keep the bad people out. And if you’re already talking XML, why not make them RSS capable for his users to subscribe to his site?

View Example Download Code

So here you go, my “FeatherNews” package. Requires PHP 5 to parse through the XML correctly but is very lightweight at only 5kb. There’s three files in the package:

  • index.php - All the heavy lifting. Has all the functions for creating the settings file, creating the comments directory and XML, updating the news XML and parsing through the xml to output the news.
  • comments.php - Parses through the comment XML files to show responses to posts. Also updates the xml when a new comment is posted.
  • styles.css - Real basic styles, easy enough to modify for yourself

Hope you enjoy the code and can learn something from it. I would definitely suggest a full featured package like WordPress if you can swing the database, this isn’t very scalable. If all you need to do is set up a simple way to update a page though, this is a nice, lightweight solution.

Uncategorized

Comments (0)

Permalink

Picasa Gallery - Fixing Google’s Cruel RSS feed

Problem:

Well, the wife loves her Picasa. She used to work at Google and I guess it’s the “eat your own dogfood” culture she’s grown up with. Not that Picasa isn’t a great service, but I really wish she’d been using flickr instead. hell, even .Mac would be a better pick.

When the baby came, we started taking a ton of pictures. Of course, these images were being shared on Picasaweb. We found that the design of Picasa wasn’t great for sharing massive amounts of pictures. Too many clicks. Also, since we were shooting video as well, I wanted a way to setup one site with pictures up top and the videos down below, which wasn’t possible with Picasaweb.

I tried a few things to make this work. I set up a tumblr.com account and had the rss feed from picasa push to the page, updating the video whenever the new one was posted. This worked ok, but the video always dropped off the front page unless I manually changed the template to show the video at the bottom, not ideal. Also, the wife wasn’t happy with the “very web 1.0″ design of just a single photo on top of another photo in a vertical column. She wanted thumbnails, I agreed.

Picasa RSS Feed in MagpieRSS

Then I tried using LastRSS and MagpieRSS to parse the feed and created a page of my own. The problem then was the stupid Google RSS feed, which rather than including a plain url of an image in the description tag, formats it into a table (a table, seriously?) with comments, title, etc. I just want the stupid picture and title, that’s it. Don’t give me tables, just give me an img tag!! I tried some CSS trickery and set the table td to display none, unless it’s an img which would display, but that was a crappy hack and I lost the titles and links to the images, not gonna work.

Solution:

So what I ended up doing was take the rss feed from picasaweb and stripping out the img url and titles manually. I used some code I found by Aristidis Karidis to parse through the images on a webpage, just repurposed it to parse through the images I wanted from the rss feed. The rest was just trying to figure out Picasa’s weird url naming structure and making it work.

View Example Download Code

All that’s required is a simple require_once of the imageGrabber.php file and a form pushing POST data with the url of the Picasa RSS feed. I’ve added some Javascript to the index.php to enable to thumbnail to change the large image, title and link so users can visit the picasaweb page directly and download the high-res version.

Make sure you’re running php5. I use simplexml_load_file(); to sift through the rss feed and pull out the image links and album titles. If you aren’t running php5, you’ll get a “Fatal error: Call to undefined function” since php4 doesn’t know what simplexml_load_file means.

PicasaGallery Example


Update 1-28-08: Now, I’ve run into a problem with this design. There’s way too many images to keep the large version visible after scrolling to the bottom. My live version is now using lightbox to make the thumbnails show the large version. I’ve also changed to the 800 pixel versions rather than the 400 pixel versions I had before since the lightbox allows the pictures to lay overtop.

Screenshot of MaxineIngraham.com using the Picasa Gallery code with Lightbox JS

Update 2-2-08: Found another problem. I had the function as well as the code in the same imageGrabber.php file. While this is fine for single feeds, if I wanted to have multiple feeds on a page it would crash. The solution was to separate the imageGrabber function into it’s own file and create a new file I called displayImages.php with just the image processing stuff. Wherever you want to put images, just declare the $url variable with the Picasa RSS feed and include the displayImages.php file. Much better solution and is now standard with the package.


Update: 4-8-08: Seems Google changed their RSS today to include enclosures for 72px, 144px and 288px images as well. That broke the script, since I was only looking for enclosure:thumbnail rather than a specific size. Never fear though, updated scripts are now available with a better solution.

What’s different? Well now instead of the enclosure tag, I’m going to the description tag and stripping out the image from the table we love so much. The catch is that this image is 288px, so an extra line of code was needed to change that into 144px. I think this will be a much more future-proof solution, but if they change it again, I’ll figure out a way to make it work.

Also, look for an announcement soon for a hosted version of these scripts you can use to share your galleries. I hope to have it online by the weekend.


Update: 4-24-08: Been working on the new hosted version of this script. It’s not ready yet, but it’s getting close. Having a few friends test it out now and they seem to like it. Should be easy enough for your Mom to use, least that’s what I’m aiming for.

There was a comment from Greg who had a great idea about how to optimize the script. I’ve played with it a bit and came to the conclusion that Greg is a genius. I think I was so set in my method that I couldn’t think of the easy way to make this work, Greg’s way of replacing just the *description* section, not the whole xml.
I updated the script to this new method, only two files required now, and the package is down to 3509 bytes
from 4657 bytes, a good bit of code.

You’ll also see I removed the javascript from the downloadable code with v5, was never a big fan of it to be honest. The example page though is now using Slimbox to power the large images. It’s like the Lightbox you see everywhere but much faster and smaller. Of course, once you download the script you can do whatever you want with it.

Uncategorized

Comments (19)

Permalink