chris barr

Photo/Dev/Design

What Steve Jobs Taught Me About Design

With a title like this, you probably think this is going to be about how clean the lines are on the MacBook Pro, or how amazing the attention to detail is in Mac OS X. Nope, I mean that time when Steve Jobs publicly critiqued my work. Let me explain…

Way back in 2005 Mac OS X 10.4 “Tiger” was released and it had an exciting new feature at the time called Dashboard. Dashboard is a neat layer on OSX that allows various single-task “widgets” to be quickly shown and hidden, like calculators, package trackers, weather, etc.  Press a button, get your info or do your task, then hide it.  The thing that was so exciting about Dashboard was that behind the scenes it was just a website, nothing more than HTML, CSS, and JavaScript in it’s simplest form.

To me, this was incredibly appealing because I’ve used a Mac ever since I was a child and I’ve always wished that I could write some useful software for it, but I’ve never learned the languages.  When Dashboard was released I was in college at Full Sail pursuing my degree in Digital Media, which included all sorts of things like programming and web design.  Finally, a part of the Macintosh was now accessible for me to actually write software for!

Now, I just need an idea (which of course is one of the most difficult steps). I was not a very good programmer at the time so I needed something that would be simple to make but also something useful.  RSS Feeds were gaining popularity at the time, and then it clicked when I visited the CNN website. CNN has interesting content and an RSS feed – I can do this! To make it even better no one else had made a Dashboard widget that grabbed news from CNN, so I was the first with this particular idea!

I got started making it, and the code was difficult for me. I ended up modifying another RSS-reading widget and just putting a new face on it.  I struggled with it, but I ended up with something that worked.  When it came time for a design for the widget, it seemed like a no-brainer to me.  I took a look at the CNN website and it simply had to reflect that.

The only thing was that web design in 2005 was terribad, and even big companies like CNN were not excluded.  Here’s a screenshot I grabbed from archive.org of their website circa-2005 (warning, it has a popup!).

widget_cnn

Not a great looking site, right?  Even going by 2005 website standards it was not considered a beautiful one.  With that in mind, here’s what the widget looked like.

widget_old

Sadly I do not have an actual screenshot or older copy of the widget, the best I could do was take a screen grab from a youtube video.  It’s not great quality, but you get the idea and can hopefully see the resemblance to the CNN website. Glorious light blue background, mmm.

So there I was in 2005, I made a widget that showed news headlines from CNN which resembled their website. The widget actually got quite popular, I recall one day it actually was listed in the top 5 right on Apple’s homepage!  I was feeling pretty great about it.

Later in the year Apple’s WWDC event was held, and it was a great one.  Steve Jobs is on stage recapping their success with the new operating system release earlier that year, and he stopped for a quick demo of some of the neat Dashboard widgets people had come up with.  Take a look at the video below to see what happened next. (jump to about 15:35 if it doesn’t start there already, and watch until around 17:20 for what is relevant to this post)

Back then Apple would stream these events live on the internet, and I always watched live.  My jaw almost hit the floor when I saw STEVE JOBS himself drag out my CNN widget during a live demo! I was so incredibly exited (for about 5 seconds), but his only comment about my work is that “it’s not as nice looking as BusinessWeeks’ [widget]” which actually got a mild laugh from the audience! Devastation. Steve Jobs is and was almost like an idol to me, what he has accomplished in his lifetime is mind-blowing, and I love everything about the products his company creates.  But there he was, live, in front of the world telling everyone how mediocre my design was.

Ok, well maybe I’m making too big of a deal about this.  I made a thing for free and someone with a microphone and an audience didn’t like it.  It wasn’t the worst thing that ever happened to me, and it certainly wasn’t the worst looking design I’ve ever made. I’ve got a folder full of embarrassing design attempts somewhere on a hard drive that are 10 times worse than this. Once the shock wore off, I realized he had a point.  The widget did match the CNN website, but that didn’t necessarily mean that it was a good idea.

I should have taken a step back and asked myself “does this look good?” but instead I asked “does this match?”

I only mimicked an existing design because it was easy, where what I should have done was get creative and come up with something on my own.  Shortly after the keynote video, I did just that and released an update to the widget with a fresh design.  It looked much nicer and more like what a widget should look like, not what the CNN website should look like.  Here’s a screenshot of the front and back of the redesigned widget.

widget_new

It’s not the best, I know, but it’s much improved over the original one.  Honestly it didn’t even take me that long to come up with this idea, I just needed to be told “do it over, the current one stinks” and it made me realize that I needed to be creative instead of being close-minded and boxing myself into a bad design.  However, now that I look at this screenshot again, I do wonder what is up with the world’s most expensive lemon.

CNN has since changed their RSS feed, which messed up the widget a bit and I just never kept up with maintaining it.  It’s no longer available for download, and the contact information on the back is no longer good either.  Even though it’s broken, it does still “work” and I keep a copy of it on a backup drive so I can have a record of my work and to remind myself about Steve’s honest and real feedback.  I so wish that I had come up with this design from the beginning and that this was the one that was demoed, I’d be curious to hear what Steve would have said about it, if anything.

Steven Curtis Chapman Concert

Wow, it’s been a long while since my last post. I’ve been super busy with wedding preparations and such, but I hope to be posting more photography and/or code things here in the near future when I find the time to work on them. Now, onto this post:

My church recently was able to host the amazing Steven Curtis Chapman in concert this past week, and I was asked to be the event photographer! He is currently on the Glorious Unfolding Tour, going around the country with The Afters and Josh Wilson. Going into this I wasn’t familiar at all with the names of the opening acts, but after hearing a few songs I realized I’ve most certainly heard their music before.  All in all, a really fantastic show that I was very happy to play a small part in.

I love concert photography and it’s something I don’t get to do often enough. I always enjoy running up and down the aisles during a live show, I can go pretty much wherever I want and no one bats an eye as long as I’ve got the badge hanging around my neck.  I get to enjoy the music, but I also get a front row seat if I want it.  Oh, and eople watching. Lots of people watching.

Anyways, here’s a small sampling of some of my favorite shots from the night.

scc-1
scc-2
scc-3
scc-4
scc-5
scc-6
scc-7
scc-8
scc-9
scc-10
scc-11
scc-12
scc-13

Rumble By The River – Photos & Videos

My fiancé, Kirstin, regularly attends a CrossFit class, and about 2 weeks ago she and many of her classmates traveled to Columbus Georgia to participate in an event called The Rumble By The River.  The event was long (about 9 hours) and it looked like quite a challenge.  It started off with a whitewater rafting & row, then a run for several miles.  Later on in the dat teams would switch out competing of various weightlifting challenges, and then finally an intense full-body timed workout.

Even though I don’t attend that CrossFit group, I tagged along only planning on taking a few photos of Kirstin and cheering her along.  Somehow I got talked into being one of the unofficial event photographers, so I took way more photos than I had planned.  Since it was such a fun and unique event, I decided to put my camera in video mode and make a quick video of what it was like at the event.  A small sampling is below!

crossfit-1
crossfit-2
crossfit-3
crossfit-4
crossfit-5
crossfit-6

Engaged!

I’ve been neglecting the blog a bit lately, but I’ve also been a bit busy.  About 2 months ago (on July 14th, 2013) I asked my girlfriend of 2 years to marry me! We took a vacation to Savannah Georgia for a week, and one day while we were in Tybee Island we went up to the top of the lighthouse and I asked her to marry me there… and of course she said yes. Side note: if you get a chance to visit Savannah, do it. It’s an absolutely gorgeous city.

Currently I still live in Pensacola, Florida and she lives in Rome, Georgia. We still have lot of “life” stuff to figure out as well as all the normal wedding stuff. But for the time being we are excited for our future together!

engaged-1

engaged-2

engaged-3

engaged-4

Lyric Converter V2!

If you just want to go use it: LyricConverter.com

But first…

The Backstory…

A few years ago my church used some lyric presentation software called SongShowPlus, and it worked… but we didn’t love it.  It only ran on Windows, it had some UI issues that made it hard to use and add/change songs before services. We wanted to get a Mac and run ProPresenter instead.  Friends in the same industry were telling us how they had switched and how much they loved it.  ProPresenter had a lot going for it, especially in the ease-of-use department and scalability for things we wanted to do in the future.

We were hesitant to make the change because there was no way to move all of our song files over. Neither program had a decent way to import or export song files, and there was certainly no way to convert between formats. A good friend of mine at a different church told me they were in the same position; they wanted to move from SongShowPlus to ProPresenter but they were holding off due to the inability to convert their songs. Honestly  I’m still surprised that to this day neither program provides a standard import/export for other file types.

The day finally came when our Windows machine died. We either had to buy a new one, or just go ahead and get a Mac with ProPresenter. We chose the latter option and manually converted the few songs we needed each week, or just downloaded them from a service called SongSelect. In the end this process wasn’t the best, but we got through it.  However, everything would have been much easier and less intimidating if there was just a simple way to import and export songs.

Version 1

This is the point when I decided to take a crack at it. I put our entire SongShowPlus library on my thumb drive and opened up the files in a text editor to see if it would be possible to get the text out.  The SongShowPlus file format is crazy, it appears to be a binary file with lots and lots of invisible control characters, but there is plain readable lyrics in there as well. Overall it seemed possible. Ok, so what about ProPresenter? Luckily the ProPresenter file format is a nicely formatted XML data, very easy to read and write from.  No problem!

At the time I was pretty comfortable programming in PHP, and I knew it’s file read/write capabilities so I decided to start there. I wrote a few complicated regular expressions to get the raw lyrics into an array, and it pretty much worked for most song files (with some tweaking)! This process took quite a while to get right because understanding the SongSHowPlus file format was fairly difficult. After that it wasn’t too much work to get it to generate the proper XML needed for a ProPresenter file. All that needed to be made now was a web UI for people to upload and download the songs! I put something together and I was pretty happy with it, and a few people used it. Yay! I even found out that the support staff at Renewed Vision (the company that makes ProPresenter) was actually recommending my site to customers making the switch, and that was pretty exciting news!

Oh and the name, LyricConverter… it just seemed obvious. (Also the domain was available.)

Problems

While what I wrote worked, it was a bit of a pain to use. If someone tried to upload too many songs at once the website would choke due to PHP’s upload file-size limit. Sure I could increase that, but someone could always upload more.  To solve this I had to impose restrictions of no more than 30 files at a time. This solved the problem, but if you had several hundred files to convert you were going to be here all day.

Another big problem was downloading the converted files. Each file was converted individually and stored on my server, but that meant after conversion you had to click on each file to download it.  So again, if you had several hundred files you were going to be here all day. That combined with the upload limit of 30 made this quite a pain to use. My eventual goal was to be able to have it produce a single .zip file with all the converted files in it, but that seemed a daunting task for PHP at the time.

One more problem I had, that was compounded by the above problems, was the amount of disk space and bandwidth used up on my server each month! I wrote a cron job that should have run once a day and deleted any files left on the server that were more than 12 hours old, but I found out that this did not run reliably on schedule and I often had to trigger it manually after I would get a “disk space exceeded” email form my hosting company. I also kept having to increase my monthly bandwidth because I was getting “bandwidth limit exceeded” emails. It was not uncommon for the site to blow through 1 or 2 Gigs of bandwidth in a month… and that’s for text files! (Although, it was a few hundred of them all transferred up once and then again back down)

Version 2

In my day job I’m a front-end web developer/designer, so I try to keep up with what the current browser technology supports and I’m quite honestly stunned at how many amazing things can be done all in the browser now.  Once I learned that there was a way to generate files in-browser with JavaScript to save to your desktop, I began to think about how re-writing LyricConverter could be a 100% in-browser process would solve all of the current problems I had.

Reading files dragged onto the browser was no problem, I was already doing that in the previous version.  Now I just had to take some of the regular expressions I had written in PHP and re-use or find a better way to achieve the same outcome in JavaScript. After some trial and error, I finally got this working how I wanted.  It will read SongShowPlus files and ProPresenter files, the output from either of those can be made to display in-browser as slides, convert to plain text files, or convert to ProPresenter files. Yes, you can convert ProPresenter files to ProPresenter files. Why? Well, why not. I doubt this is needed, but this does prove how flexible it is.

Since this is all in-browser there are no more “upload” limits, and there are no bandwidth restrictions. The only bandwidth used is just initially serving the page up to the browser. In fact since it’s all JavaScript now, it’s just being hosted on GitHub for free and none of my server resources are even needed any more.

Since files could be auto-downloaded (thanks to a library called FileSaver.js), that was great and it solved a huge problem of having to click individual links. A user could drag 1000 files into the browser, and then immediately click a button to download 1000 converted files… that is if you want 1000 files on your desktop… hmmm, that’s not appealing.  After some quick searching around I was amazed to find that someone has written a JavaScript library called jsZip that can actually generate .zip files with JavaScript! This was my ultimate goal, and it was to each to achieve with this library. Now when you convert songs you have the option to download all N number of files individually, or just download a .zip file containing them all.

I’m also extremely happy with how the code is structured now. Previously it was a huge mess and half of that was due to my unfamiliarity with PHP. Now it’s all written in JavaScript and it’s very modular. It should be easy to add on new file types that it could read from or output to.  It’s also all on GitHub, so anyone can feel free to improve the existing code or add new functionality like new input/output formats!

Use It & Improve It!

Like I said, all the code is on GitHub and I would just absolutely love it if people would contribute to this project to make it better.  Right now it works, but it certainly could be made better.  Occasionally I do get some strange conversion errors or random incorrect characters that slip through into the converted files.  I’d love to squash these bugs, but they aren’t deal-breakers at the moment.

So, please use it, let me know how it could be made better, and please contribute if you can.

1 2 3 12