eterps

Code HTML5 in the Cloud with StackMob, Cloud9 and GitHub

May 152012

In my recent efforts to learn more about modern Javascript I’ve been looking around at different Backend-as-a-Service (BaaS) companies. They presumably would provide a dead simple server option for whatever I’m working on so I can focus all my attention on the front-end. I signed up for a number of different accounts to explore the feature set and documentation, and settled on StackMob due to the perceived ease of use, and the fact that their Javascript SDK is built on backbone.js (another current interest of mine). After creating (and deleting) some dummy apps to get a feel for things, I eventually got a very simple, but usable, database put together. What is interesting about StackMob is that they will host your front-end app, as well as provide the back-end. Not only that, but you deploy to your front-end development server directly from GitHub. It’s a pretty slick system. And as soon as I realized that GitHub projects can be edited via the Cloud9 IDE, I had a nice little dev environment fully hosted in the cloud.

I’m not saying this combination is at all practical for serious use, but it could be useful in a pinch, or when monkeying around with some prototypes while using multiple computers. Plus Cloud9 is just fun to look at, and this provided a good excuse to use it for real once in a while. Oh, and it’s all free (as in beer).

To get started, sign up for a Stackmob account, and a GitHub account. Both sites have amazing documentation for getting up-and-running on their respective services. GitHub has very detailed instructions for setting up your account with a git client on Linux, OS X, and Windows. If you haven’t already, follow those instructions, but do not yet create a repository.

Getting started in StackMob is just as easy. Sign up for an account, then create an app. Every app generated by StackMob starts with a Users table, which is enough for now. Grab the Javascript SDK from the Get your SDK page, and follow the setup instructions in the Setup your JS SDK Dev Environment section. Step 2 is optional if you just want to edit your app in the Cloud9 IDE. Otherwise make sure you have Ruby installed and give it a try. In Step 3, you will be instructed to create a GitHub repository. Do that. While you are logged into GitHub, also set up automatic fetching, so your code will get deployed to your development server every time you push to GitHub. The Hosting Your HTML5 App… page has all the necessary instructions. Make sure you have committed and pushed some files (likely the StackMob SDK) to your GitHub repository.

By this point, you can edit files locally, push the files to GitHub, and see your changes reflected online. To start editing online, go to c9.io and log in using your GitHub account. When you reach your dashboard, you should see a big green button that says Create New Project in the left-hand sidebar, as well as a section in the sidebar labeled Projects on GitHub. The URL for your dashboard is http://c9.io/yourgithubusername. If you cannot see your GitHub project, click the refresh button in the far lower left corner of the screen. Select your StackMob GitHub project from the sidebar menu, and click Clone to Edit. In the modal window, select Shared Development Server and click Checkout. It will take a minute, but your project should be created and listed under My Projects. Select your project and click Start Editing. You should be taken to the editor window where you can open and edit your project files. Take a few minutes to admire the lovely UI and its many features, and edit a file or two.

To test out your edits, open the console window (Menu: Windows > Console ) and run your usual git commands – e.g. git commit -a -m “msg” and git push. The Cloud9 git client will push your changes to your GitHub master branch, and those changes will then propogate almost immediately to your hosted StackMob application.

This is creating a web application in the cloud. Development-in-the-cloud is not quite cut out for daily use, but if you really need to try out some code or get in a quick change from any computer (or tablet, or phone), this is a nifty way to do it.

A Test-Driven JavaScript Assessment – I Passed!

Uncategorized No Responses »

May 082012

Over the past few weeks (months?), I’ve been making a grand effort to learn as much as I can about javascript. I’ve gotten my hands on a couple good books, read countless articles, and most recently, stumbled upon a very interesting blog post. Rebecca Murphey (of yayQuery! fame) recently created a series of failing unit tests in javascript and made a nice node.js app from them (available on Github). This provides a nice exercise for anyone wishing to assess their fundamental javascript skills. Given the fact that I had no idea where I stood in terms of skill, I thought I’d give it a go.

I’m glad I did. Not only was it a mild wake-up call, but a great introduction to some topics that I don’t see often in the real world – topics like partial functions & currying, closures, creating modules, and working with prototypes. I’m not ashamed to say this took a better part of a Sunday afternoon, as it was quite rewarding to see that “100%” show up on the screen. Some of the tests were ridiculously easy, some were challenging, and there were a few where I didn’t really know what I was supposed to do, but eventually got something working while sticking to the topic at hand.

I’ve uploaded a fork of the project to github with my completed answers. More tests may be added into the future, so I’ll be able to simply pull them down and hack away. It will also be nice for my future self to look back on this in a year or two and have a chuckle at the expense of my present self.

Erase (zero out) free disk space on OSX, Windows and Ubuntu

Uncategorized No Responses »

Mar 312012

Three operating systems, three file systems, three methods to zero out disk space. Fortunately, they are all pretty simple. Doing this is a good idea right before creating a drive image for backup, as it makes compression more efficient.

OSX – HFS+ (Mac OSX Journaled)

Open Disk Utility
Click on the OSX partition
Click Erase from the tabbar menu
Click Erase free space… button
Choose the Fastest option – this will fill the partition with zeros one time.

Windows 7 – FAT32, NTFS, exFAT

Download SDelete from Microsoft Technet
Copy sdelete.exe to C:\Windows\System32 (or any folder in your system PATH).
Run SDelete from the command-line using:
sdelete -p 1 -z c:\

(where ‘c’ is the target drive letter)

Ubuntu – ext3, ext4

Install the secure-delete package:
sudo apt-get install secure-delete
Use fdisk to find the correct drive partition:
fdisk -l

The drive in question will be something like /dev/sda or /dev/sdb. Each partition is numbered, like /dev/sdb1 and /dev/sdb2
Mount the drive partition (if it is not already):
sudo mount /dev/sdb1 /mnt/hdd1
Run
sfill -Ilz /mnt/hdd1

where ‘hdd1′ is the location of the mounted partition in the filesystem.

Triple Booting my PC with OSX Lion, Windows 7, and Lubuntu 12.04

Uncategorized No Responses »

Mar 032012

My computer has three operating systems.

“Why do you need three operating systems?” one might ask.

First, because it’s cool, but mostly because it is quite practical for web and mobile development and playing games. Linux and OSX are both great environments for trying out new-to-me technologies like node.js, Ruby on Rails, MongoDB, and all sorts of hackerish command line tools. OSX has the added benefit of being able to deploy apps directly to my iPhone (as well as being the prettiest of the OSs). And when it comes to playing the games, nothing beats Windows. OSX is starting to get some love from Steam, and quite a few interesting indie releases show up on Linux, but if you want a guaranteed awesome PC gaming experience, you need Windows.

Also, from a web-development standpoint, the ability to do cross-browser testing comes in very handy. Plus, there are no development tools that are off-limits because the author decided to only release a Windows or OSX version.

So here is a basic rundown of my system, and how it was put together. Rather than develop a detailed howto, I’ll leave it to the many talented bloggers out on the internets to provide the step-by-step.

Required Hardware

The most important element by far when installing OSX on a non-Mac is the motherboard. It’s like the foundation on a house – it needs to be sturdy or everything comes crashing down. Luckily, when I built my PC in early 2009, I purchased an Asus p6t, which just happens to be very compatible with OSX – as does the nVidia graphics card I picked up. Apparently Gigabyte mobos are all the rage with the hackintosh crowd, so if you are in the market for a new build, or want to check your current hardware, see the following links when considering hardware:

And if you are wondering if your existing hardware works, take a look at the following:

As for Windows and Ubuntu, most mainstream motherboards are accepted, but check your manufacturers website for compatibility information. Also, for discrete graphics in Ubuntu, go with nVidia, as they still support linux with proprietary drivers.

Installation Media

OSX: 8GB or larger USB thumb-drive
Windows 7: 8GB or larger USB thumb-drive or blank DVD
Lubuntu: 1GB thumb-drive, blank CD, or blank DVD

Preparing a bootable USB drive with OSX Lion is definitely the most inconvenient step of the whole process. The ideal situation is to have a retail copy of OSX Lion, and an actual Mac available for temporary use. I actually cheated and had a friend at work create the OSX Lion installer for me (using his own hackintosh). Luckily, there are scads of online tutorials for creating a Lion USB installer using a nifty tool called UniBeast.

Unibeast All-in-One USB Installation Guide (Stop at Step 3)
Creating a UniBeast Thumbdrive without a Mac (you will also need a Snow Leopard DVD or ISO for this)

Once the OSX USB drive is created, download MultiBeast and copy the file to the USB drive. This will be needed later.

Preparing Windows and Ubuntu installation media is less of a task. Because Windows 7 is a commercial operating system, you will need a licensed copy. I purchased a copy when it was released, but others may have an OEM version baked into a manufacturers recovery disc. If this is the case, you can get a clean Windows 7 ISO for re-installation from Microsoft. There’s a great tutorial on how to re-install Windows at PC World. Creating a disc or USB drive for Ubuntu couldn’t be easier. Simply visit the Ubuntu download page and follow the instructions for your chosen medium.

Adjust BIOS Settings

Unplug any hardware that is not necessary for the installation of the operating systems (extra hard drives, USB hubs, printers, etc…). Some BIOS settings may need adjusting as well. If available, make sure the following settings are true:

Quickboot is disabled
SATA is set to AHCI rather than IDE
The primary hard drive has priority and is the first boot device (or 2nd behind the optical drive)

Prepare Hard Drive

Once all the installation media is ready to go, the targeted hard drive needs to be properly formatted. Because OSX is very finicky about drives and partitions, you must use the OSX disc utility to format your drive. In my case, I created five partitions on my 1.5TB hard drive.

Insert the OSX Usb stick, power on, and tap the key for the alternative boot menu (F8 on my system)
Boot the USB Disk containing OSX Lion and wait for the installer to load
Open Disk Utility from the Applications menu
Select your hard drive in the left-hand column
Under Volume Scheme: separate the drive into at least 3 partitions. I use 4 partitions (one for each OS, plus a shared FAT32 drive for file storage).
Click Options… choose GUID Partition Table, then click OK.
Click the first partition (Untitled 1). Type LION for the Name. Choose Mac OS Extended (Journaled) for the Format.
Click the next partition (Untitled 2). Name = WINDOWS7, Format = MSDOS (FAT).
If you have an extra partition for shared files, do the same for Untitiled 3. Name=FILES, Format=MSDOS (FAT)
The last partition must be free space. It is important that the last partition is free, as this is where linux partitions will go. Leaving it at the end of the disk will make things go more smoothly during the linux installation.
Click Apply and close Disk Utility
Shut Down (do not proceed with the installer)

Again, check out TonyMacX86′s blog for a nice guide on setting up a hard drive for multiple OSs. The article refers to Snow Leopard and dual booting, but many of the steps are identical to my setup. The key is to set up the partitions first with Disk Utility, then instnall Windows and Ubuntu before OSX.

Install Windows 7

After setting up the hard drive partitions in the OSX Disk Utility, it’s best to set up Windows 7 next, as it has the most intrusive bootloader – which will get overwritten later. Start this process with the PC shut down.

Insert the Windows 7 installation media (USB or DVD).
Power up and boot into the Windows Installer.
Choose Custom (Advanced) for the installation type.
When presented with a list of drives, select the ‘WINDOWS7′ partition.
Click Drive Options (advanced)
Click format.
Click next.
Windows 7 will now install itself. You may need to remove the installation media if the PC is set up to auto-boot from the Windows 7 disk.
When installation is complete, set up Windows, or Shut Down.

Install Ubuntu / Lubuntu

Boot with the Linux installation USB or CD.
Select ‘Install Ubuntu to the local hard drive’ option (or something similar)
At the Allocate Drive Space screen, choose Something Else.
Under /dev/sda click free space. (If you have more than one hard drive, choose the free space on the appropriate drive).
Click Add…
Type for new partition: Logical
New Partition Size in Megabytes: Set this to the amount of RAM in your machine (e.g. 4096)
Location for new partition: End
Use As: swap area and click OK.
You should see the swap space appear in your drive list. Click free space again.
Click Add… again.
New Partition: Logical
New partition size in megabytes: it should default to the maximum space available. If not click the up arrow until the number no longer changes.
Location for new partition: End
Use As: Pick Ext4 if you work with huge files or need extra fast performance. Choose Ext3 if you want to access the linux file system from OSX (and possibly Windows with the right tools).
Mount Point: Choose the forward slash - /
Click OK.
Device for boot loader installation: Choose the large linux partition that you just created (e.g. /dev/sda4).
Click Install Now
Proceed through the Ubuntu installation
Shut down

Here’s a nice guide with screenshots for installing Ubuntu. Just remember to use the end of the drive.

Install OSX Lion

Remove the Ubuntu installation media, and insert the OSX USB drive.
Boot the computer with the USB drive and enter the OSX Lion installer
Proceed through the installation process. Be sure to select the LION drive as the target for installation.
When the installer ends, you will be at the Mac desktop.
Copy the MultiBeast file from your USB drive to the desktop (or download it if you have internet access)
Install and run MultiBeast.
Here is where things get tricky. Everyone has different hardware, so there is no magic bullet. I selected EasyBeast to get the absolute necessities, and then chose specific options for audio and ethernet. Check this guide for a great explaination of the MultiBeast options.
Reboot.

Win!

The Making Of, “The Bogstras: The Video Game”

Projects No Responses »

Jan 272012

I recently put up a website featuring a Flash game I’ve been working on for a few months. It is entitled, “The Bogstras: The Video Game” and features several of my family members as characters. My reason for creating this game is twofold: First, I wanted to learn more about game development and needed a hands-on project, and secondly, I needed a Christmas gift for my in-laws. The title was a no-brainer. “Bogstra” is a portmanteau of “Terpstra” (my family name) and “Boger” (my wife’s family name). After a few days of jotting down design concepts and cooking up a game plan, the journey had begun!

The object of the game is simple – pick a character, and complete a mission based around that character’s personal interests. Complete each character’s mission and win the game! It seemed like a simple enough idea when it popped into my head last September. I set a goal to release the game the day before Christmas, and provide everyone featured in the game with a hard copy burned to a well-styled CD (with awesome cover art). But alas, as with most software projects, “The Bogstras” fell victim to underestimated time requirements and the game was released in late January. The good news is, my family didn’t mind too much. They were still thrilled to see and play the game, and I managed to learn quite a bit about making games.

HOW

Choosing Flash and Actionscript 3 as a development platform was pretty much my only choice. It’s the only language I’m comfortable with that is capable of building decent games. Although even if I was an expert in C++ or XNA or whatever the hip new game platform might be, AS3 would still be the natural choice given the fact that the game is deployable via the web, and everyone has Flash Player installed. I also happened to have a license of Flash Builder 4.6 available from my workplace. And just so you know, a purchased license for Flash Builder allows for installation on 2 personal machines per user. Highly convenient.

With my base language and development tools already sitting in my lap, I went searching for a game framework to help me get started. After reviewing many interesting frameworks, I finally narrowed it down to Flixel and Flashpunk. I’m not entirely certain why, but I chose Flashpunk. After perusing the tutorials, and slapping together a couple prototype levels to test out the code myself, development was fully underway. Flashpunk makes is super easy to get a simple game concept up and running very quickly, as it provides code for the game loop, containers (worlds), entities, collision detection, spritemaps, and so on…

My prototyped levels mainly consisted of little boxes moving around the screen shooting things and bumping into each other. It quickly became clear that I would need some help with graphics. I wanted the in-game characters to resemble the real-life people, so I decided to hire a pro for that. Nearly everything else was harvested from hundreds of Google searches. Of course, no tile set or pixel art collection was ever perfect, so I had to do some pixel pushing myself. I found an amazing free (shareware) tool called GraphicsGale. It’s sole purpose is pixel art and animation. It made working with spritesheets, tilesets, and other pixel-perfect graphics a breeze. I know I only scratched the surface of possible features, but what I did use was invaluable. Although there were times where I needed to do some complex layering, or had to work with large jpeg images. For that, Paint.NET (also free) filled in all the gaps. With GraphicsGale and Paint.NET, I was never left wanting for any gfx editing features.

After smushing together some code and graphics, I was ready to start building levels. Flashpunk has built in functionality to take advantage of grid-based tilesets, and there is a nice tutorial on the Flashpunk website on how to implement this functionality. However, there was also a nice tutorial on how to take some severe shortcuts by using a tilemap generator – namely, Ogmo Editor. With this tool, it is a much simpler task to lay out repeating tiles and design levels from tilesets visually, rather than completely in code. Ogmo exports the layout information in XML format, which is easily read and interpreted by Actionscript. Using Ogmo was a tremendous time saver, and I highly recommend it for use with any 2d, tile-based flash game.

Since all of the background music was composed by talented musicians (not me), sound was pretty much an afterthought. There were a few places were sound effects were necessary to enhance gameplay, and for that I turned to BFXR by increpare. If you need a quick way to generate some bleeps, bloops, chimes, dings and zaps, then there is no better tool. Just keep clicking until you hear something you like, and save it as a .wav file. The only hangup is that sounds must be in mp3 format to be embedded in a swf file, so Audacity‘s batch encoding feature was recruited for this task. Incidentally, BFXR is a derivative project of SFXR by Dr. Petter, but adds quite a few new features, and comes in an installable Adobe AIR package.

A handful of other tools used in the project were subversion (svn) provided by ProjectLocker, WordPress, and good ol’ pencil and paper.

WHO

Every great triumph has its cast of heroes. The champions behind the aesthetic appeal of the Bogstras (which receives the lions share of praise) are true talents. All nine of the characters, and their corresponding animations were hand drawn by Cecile Souza Santos, of Brazil. I found her through the job postings section in the PixelJoint forums. Her past work was very impressive, and her 16-bit RPG style was exactly what I was looking for. Needless to say, she was a good fit for this project. She is still active in the PixelJoint forums, and on DeviantArt with the handle Clest.

The music tracks were conceived and composed by Jordan B. Sanders – frontman for the Order of Týr. Jordan is a co-worker of mine, and just happens to be an expert chiptune composer. I’ve heard his music, both live and recorded, and knew that his work would be tip-top. And it was.

Last but not least are the countless individuals providing tips, tutorials, sample code, free images, and answered questions on the FlashPunk forums, StackOverflow, GitHub, and elsewhere on the internet. If I were left solely with my own wits, this project never would have happened. It is truly astonishing that I can shout a question out into the world, and no matter how technical or esoteric, I can be reasonably sure it will get answered.

Despite that the game was four weeks late, and has dozens of features left on the cutting room floor, I’m still pretty proud of it. This was my first completed independent game project, and I think it turned out OK given the goals I began with. I’m glad to have this done and behind me, but it also illuminated some interesting paths ahead. There are definitely some game development concepts that need revisiting (A* pathfinding, pixel-perfect collision, Verlet integration, to name a few), and plenty of un-implemented ideas that could easily be retrofitted into a new game. So enough jibba jabba, and back to work! (as soon as I catch that damn dog).

BourbonBasement.com

Projects 2 Responses »

Jan 232012

A few months ago, I received an email from a friend of mine quoting a Scotch Whisky review blog:

…this Auchentoshan is our second sample courtesy of Saverio Schiralli Agencies Limited…

followed by a heavily emphasis on courtesy, aka free Scotch. Convinced that we would be showered with hand-selected bottles of Scotland’s finest, we decided to start a whiskey blog. However, given the fact that I live in Tennessee, and my friends live in Chicago, it was eventually decided that I would blog about interesting bourbons and other American whiskeys, whilst the Scotch reviews would come from the Windy City. This made sense, as nearly every brand of bourbon under the sun is available in Memphis, while Scotch from small or unknown distilleries are impossible to come by around here.

Around April of 2011, I rolled up my sleeves, pulled the lowball glasses off the shelf, and got to work. As soon as I had a shelf full of nearly full bourbon bottles and a scratchpad full of tasting notes, it was time to start the blog. Once again, WordPress was my weapon of choice. There’s no better way to get a nice looking blog online than with WordPress. I found a nice, flashy theme while browsing SmashingMagazine, and did a little PHP-fu to fit it to my needs. Although the theme was originally intended as a media portfolio, it works just as well for reviews. I’m able to get four featured reviews, six recent reviews, and a blog post all above the fold without things feeling cluttered. The slidey panel things are pretty snazzy, too.

What I learned the most from this project is that blogging is hard. Technically, getting the site up and running was pretty straightforward. Just a little bit of copy and paste to move some theme elements around, and a smattering of CSS did the trick. The real effort came in writing the content. I burst out of the gate with 4 or 5 solid entries and felt pretty confident. I could almost taste the free bottles of whiskey.

After a couple weeks, though, I hit a wall. It took ages to get another clever, original post out of my brain. I kept at it, branching out from reviews to create a few general blog posts, and even a stop-motion-video to keep things fresh. But as soon as another project popped up and took priority, things came to a grinding halt. That, and I really don’t drink that much bourbon. I enjoy a pinch or two on the weekend, but rarely imbibe on a weeknight. With the lack of time and drinking, BourbonBasement entered into a blog purgatory. It’s not quite dead, but not really alive either. This is OK, though. Whiskey itself ages slowly, and remains undisturbed for months at a time. It refines itself as the months pass, and emerges years later with maturity and distinction. In other words, there’s no rush.

Count the occurrences of an item in a List or Array

Resources No Responses »

Nov 012010

So I came across a situation where I had a whole bunch of items in a collection, and I needed to know how many of each kind there were. In other words, I needed to know the number of each unique element in an IList, Array, ArrayCollection, or what-have-you. I looked for some help online, and fiddled around and got it working. Then a few weeks later I had to do the same thing, and darn near forgot how I did this. Here is the trick – SORT!

Sort the items in the array (alphabetically, numerically, chronologically, etc…) so that unique items are grouped together. Then simply loop over the collection counting identical items, and when a new item occurs, make a note of how many you have of the first item, and start counting again. Below is a quick example. Click “Generate” to create a list of 50 items, where each item is going to be a fish, cat, dog or pony. Then click “Count” to count the number of each one. Also notice how the original list is now sorted so all the ‘dogs’ and ‘cats’ are together.

Sorry, either Adobe flash is not installed or you do not have it enabled

Here’s the meat of the code:

sortedList = new Array();

//Sort Newlist Alphabetically
newList.sort();

/* Create an object to keep track of each unique item in the array. For example
* { Name: 'cat'
* Value: 7 }
*/
var countObject:Object;

//Create a var to store the previously examined item in the list.
var previousItem:String;

//Loop over all the items in the newArray
for each ( var currentItem:String in newList )
{
//If the current item in the list is different from the previous item, then create a new countObject and start counting the new item.
if (previousItem == null || currentItem != previousItem)
{
//Create a new object
countObject = new Object();

//Set the name to the current item in the loop
countObject.name = currentItem;

//Count this item
countObject.value = 1;

//Put the object in the sorted list so we can see it later
sortedList.push(countObject);

//Done. Set the current item to the previous item.
previousItem = currentItem;
}
else //Otherwise, we haven't switched to a new item yet, so keep counting the current item.
{
/* Find the last countObject in the sortedList, then add 1 to the value of that object.
* For example, if we have looped over 3 cat items in a row, and the current item is also cat, then:
* { Name: cat, Value: 3 + 1 }
*/
sortedList[sortedList.length - 1].value += 1;
}
}

and Full Source for the above example.

A Fountain Of Color – AS3 Animation Example from Foundation Actionscript Animation Book

Resources No Responses »

Sep 072010

If you are remotely interested in Actionscript, Flash, computer animation, games, or pretty stuff on computers – go get Kieth Peters’ book, “Foundation Actionscript 3.0 Animation: Making Things Move.” Then check out
Keith Peters blog (but really his other sites). After reading parts 1 and 2 of the book, which cover basic animation, I felt compelled to take one of the examples a bit further.

In Part 2: Basic Motion, the concepts of moving pixels programatically around the screen by shifting the x and y position every frame is introduced. A ‘veloctiy’ is assigned to both the x and y values to determine how many pixels the object moves per frame. The fountain example in the book demonstrates these concepts by shooting a bunch of colored balls from the bottom of the screen, with slightly random values for the x and y velocity.

I added some controls, just for fun. Use the up and down arrow keys to increase or decrease the height, and use left/right to change the direction. Also, if you look at the code, I changed the concept of x and y velocities to speed and angle. So rather then setting a velocity value for the x and y values of each ball, I set a speed and angle, and use this information to update the balls’ positions. The original code remains in comments for reference. Take a look.

FOUNTAIN DEMO | SOURCE CODE

Petfinder.com App with Flex / Swiz Source Code

Projects 1 Response »

Apr 032010

It was necessary for my well being in recent weeks to learn as much as I can about the Swiz micro-architecture for Adobe Flex. Lucky for me I had a simple Flex app sitting around just waiting to be converted from a giant mish-mash of mxml and ActionScript 3.0 to a nice, well organized micro-architected piece of software. After much trial and error and gnashing of teeth, a successfully compiled application written with Swiz emerged, and is now posted for the enjoyment of whomever enjoys cats and coding.

A few caveats to remember when viewing the app and its source:

The source is not exactly ‘code-complete’ – I’m sure there are bad practices in spades. Kind criticism welcome.
There is no real service call made by this app. Rather than throwing my Petfinder.com API key out for everyone to gawk at, I’m using a static XML file that was spit out by a previous API service call.
This is currently using a beta version of Swiz 1.0.
This was originally written with Flex Builder 3, but ultimately released with Flash Builder 4.
I had help. Thanks a million to Jordan Sanders for a few handy pointers and putting up with my questions. Also, thanks to David Tucker, Ben Clinkenbeard, Brian Kotek, and Richard Lord for instruction and examples.

PETFINDER APP DEMO | SOURCE CODE

If people actually look at this post and are interested, I may be inclined to add more explaination, do follow up posts, develop the app further, etc… If you are interested in using the source code for whatever purpose, go right ahead.

HouseOfMews.com

Projects No Responses »

Feb 132010

Who: The House of Mews in Memphis, TN

What: A brand, spanking new website built from scratch.

Why: The House of Mews proprieter often complained that it was too difficult to sort through the hundreds of emails generated from forms on the old website. It was also a pain for vounteers to update the adoption listings. To view a list of available cats, site users had to navigate away from the House of Mews site and onto petfinder.com Drupal 6 and Adobe Flex fixed these problems, and then some.

How:

Drupal 6 was used to convert the old HTML site to a CMS. Also, site visitors can now register on the site to submit rescue requests, and rather than having that info clog up the email inbox, it goes into a searchable list (thanks to Views and CCK).

A similar method is in place to accept volunteer applications, but since these are rare, email notifications are sent out whenever one is completed. This was done with the Rules module for Drupal 6.

The real-time cat browser on the homepage pulls in data from Petfinder.com and creates an easily navigable listing of adoptable cats. Volunteers who are used to uploading cat information to Petfinder don’t have to learn new software, and site visitors no longer have to leave the HoM site to view cats up for adoption. Win!

The cat browser was created with Adobe Flex 3. It was amazingly simple – in fact, it was the very first Flex/Actionscript app I’ve ever created. FYI – I’m currently converting this app to use the Cairngorm framework, and will be releasing the source code on this website some day.

Older Entries

Eric Terpstra

eterps

Code HTML5 in the Cloud with StackMob, Cloud9 and GitHub

A Test-Driven JavaScript Assessment – I Passed!