AaronStaves.com

Here's the skinny...

If you hadn't heard, my sister and brother in law just had (well, he's 1 now) a baby boy, congrats!.  Given how tech savvy they both are they take a ton of movies and photos and post them online for relatives from all around the country to watch.  This is an awesome way to keep up on how the little guy is doing.  However! Given that some of our relatives may be a bit more on the less tech savvy side I decided that making an interactive web based movie page would be a good way to help them view their new nephew, cousin, grandson or great grandson.  You can see a demo of it here.

For starters, I've already done a few projects using the JW FLV Player. I use this player for a few reasons.  First off, it's free to use for non-commercial purposes!  And even if you do use it commercially, it's pretty dirt cheap.  Second!  It's got an insanely awesome javascript interface.  You can pretty much completely control the player and hook into almost every event you can think of that the player may publish. This is great for web developers that know absolutely nothing about flash but still want the benefit of a flash based movie player.  Lastly, this player is great because it constantly getting updates and there's a huge community behind it; always good stuff.

What you'll need

I did try to spruce up this player slightly so you'll need a few things if you'd like this to work on your server.

• mod_perl, along with the CGI, File::stat and DateTime packages.  I imagine most come pretty standard with a vanilla install of PERL.
• ffmpeg, compiled with png support.  I imagine a pretty standard install of ffmpeg should be fine.
• movie files, yup! you'll need some movies to view.  Right now this is limited by the type of movie files that the player natively supports.  I may add some transcoding using ffmpeg later if anyone actually uses this and wants it.

And that should be it!  Pretty simple.  I'm also using the YUI javascript toolkit, but Yahoo! has been kind enough to host that on their CDN.  So no need to download all those crazy javascript files.

How to Install

Here are some quick install instructions:

1. Grab the zip file from here
2. Make a directory on your server (in my case aaronstaves.com/movietest) where you want the files to and unzip 'em there.
3. Make a directory (if you need to) where you're movies are going to be placed.  I put mine in aaronstaves.com/movietest/movies).  This directory will need to be writable as far as your webserver is concerned.  If you already have them you can forget this step!
4. Edit the movies.conf file.  You'll need to specify the absolute path of your movie director and the url that links to them.
5. Once that's done you should be able to just go to your url and watch some movies!

Features

Sorting and Dates

I've made it so the player automatically sorts the movies by date.  The newer movies are listed at the top and the older movies are listed at the bottom.  It also grabs the date one of two ways.  1) if the date is specified in the filename (yyyymmdd format), it will use that.  2) otherwise it will grab the timestamp on the actual file.  Neat huh?! The only downside to this is is that it has to touch each file(name) to do this.  But I wanted to make this without the hassle of a DB, kind of a necessary evil.  Hopefully with 100's of files, this won't be that much of a performance hit.

Native file support

As I said above, this natively supports mp4 (m4v, etc) files as well as flv files.  So hopefully if your files are in that format, you won't have to deal with transcoding files.  Awesome! As I said, transcoding wouldn't be that hard to do, but it would be pretty time consuming on the server side, pending on how large the files were, so I'm not sure how I'd go about that at the moment.

Downloads

See a movie you like? Well download it! You'll notice at the top of the screen when you play a movie, you'll get an awesome download link.  For anyone that wants to actively share or archive these movies, I figured it would be a necessity.

Feedback

Right now I've only tested this in FF3+, IE 7  and the latest version of Opera.  If anyone finds something wrong with it, let me know and I'll see if I can address those issues.  Otherwise feedback, suggestions, comments and criticism is welcome.  This is my first mini-project in a while that I've made to "distrubute" so somethings may be clear while others may not.  Hopefully with the addition of the conf file, you won't have to touch any of the code I wrote.  This small tutorial is written for them, but anyone is more than welcome to use it if they want their own personal video page to share with others.  Enjoy!

So lately I've started undergoing (yet another) personal project. Basically a file request and upload system that will be using the Dojo Grid. Initially I was going to try using a few other widgets from the Dojo family, but decided that it was time to revisit the Grid and see how much it has progressed since Dojo 1.0.2.

Initially when I was using it, I couldn't understand why my page was loading so slow. When I slow, I mean slow; enough to the point that the browser would give you the whole this page could be doing bad things, would you like to stop scripts on this page? slow. Yeah I have a few XHR's here and there, but nothing out of the ordinary. The only thing I could find was that commenting out Dojo requires for the actual Grid dijit improved performance immensely, but how am I supposed to use a grid if I can't include it! I didn't really remember Dojo's demo being slow at all, so I went to investigate on their site.

Copying their example line-for-line worked like a charm. It loaded up nice and quick, no problems, no lag and none of it was my code. So I began to tweak a few things to try and get my data in the grid. First off, I noticed that they were making their includes from the AOL CDN. I've heard about this but never really looked that much into it (as I probably should have). So I took it out, and replaced it with includes from our DreamHost server. Upon doing that, and reloading, this is where the slow down was from.

Don't get me wrong, DreamHost is a great hosting company, but lets face it - you get what you pay for. $90 for two years of hosting, you can't really expect to get lightning fast connections and/or a dedicated machine as your server. Their notorious slow load times had to be the bottleneck that was killing my code. For those not in the know: Dojo require statements essentially make requests to grab all the dojo files that they need. For a heavy duty dijit like the grid, this can add up to a lot of requests! And making these requests through the DH server was what was slowing me down.

So basically, using AOL's CDN to host all the Dojo includes make things insanely faster (load times below!). I guess fast javascript isn't enough, but when dealing with massive JS requests and includes, having a fast host is just as important. Lesson Learned!

DreamHost Hosted Example - Load Time: 27.86s

(link)

AOL CDN Hosted Example - Load Time: 2.96s

(link)

Wow.

Inspired by a recent comment on my last blog, I've taken David up on the webpage wireframe and prototype tutorials he found. Both of the articles seem to be geared towards actual graphic designers or user interface designers that have very little or limited knowledge of javascript; and almost no knowledge of the server side of their applications. But nonetheless, there was some really good info in there.

From what I gather, a wireframe is just that a wire-frame. It should purely consist of a layout, with the possibility of some actual production CSS in the page. The articles suggested that there are two main ways to do this:

1. Create a page for each "flow" of your application.
2. Create one page with a "stacked flow" of your application.

Basically, a flow is the various screens/interfaces that the end-user will be presented with. They give a nice "login" example (one which I actually made one of my own as well) with a "stacked flow" wireframe. You can see my example of that here. Comments are welcome, but keep in mind:

1. I'm not a graphic designer
2. This is my first crack at this
3. It's 2am... and I'm making wireframes...

(more...)

Contrary to popular belief, "the user" is not an all-powerful being that exists only to play games against sprites. But the truth is out there... somewhere...

\

Awesome 90's cartoons aside, there are things that we can learn from the user! The past few weeks I've been re-desiging a lot of the web user interfaces here at work. I've found that when I'm given a chance to update an already designed UI, I can pretty much copy the old style and just give it a "web 2.0" boost and add in some new functionality - no biggie. But when given a completely new projectthat is done from scratch, I start to get a bit lost.

The reason I bring this up is because last sprint I was given a chance to make a new web tool for some of our in-house support staff to use. This tool replaces some minor SQL query's that I would do on a day to day basis, so I was already pretty familiar with the project. Initially I threw together what I thought to be an all-in-one awesome bone-crushing tool that did everything it had to... and more! However! Upon dropping this tool on our support staff, it became readily apparent that they were not terribly familiar with all aspects of this particular system, and had no idea how to use my brand new shiny tool. Oops! Looks like my user interface doesn't fit the job!

(more...)