Node.js was pretty nifty, but rewriting a whole server to do all the (sort of) complexity our current web application is doing was just a little too daunting. I had also looked at express.js for doing some of the heavy-lifting for me, but ultimately decided in the end that this was still too cumbersome for what I wanted to do. After stumbling on some backbone.js tutorials, I thought it would be best to try and integrate that with the Rails stack we currently have.

Understanding the code was simple enough. Coming from an ActionScript background, which I’ve used extensively with the Adobe Flex and Adobe AIR frameworks, picking up JavaScript was trivial. They’re both based on the same standard, but with some minor syntactic differences. Doing a simple backbone.js for my company’s web app didn’t take much time, and was similar to what I had already done in an ActionScript library (used by the main Flash client). Seeing as how the Rails backend only rendered XML for each request and no html, I abandoned the backbone.js route and decided to fall back on implementing Rails views.

For many years, I had avoided learning Rails views mainly because I didn’t have the need to do so since I had been programming in Flex and AIR for so long. I didn’t understand Rails views in 1.2.x and certainly didn’t up through the 3.x releases (until very recently). My biggest fear was having to hand-code CSS in order to achieve the best look and feel that would be suitable for our app. The thought of doing that send shivers down my spine. As much as I like to think that writing CSS is fun (and my only experience has been through WordPress themes), I’ve found it be more annoying at the end of my day.

When I recently discovered the Twitter Bootstrap, I was astounded and amazed at what was available at my hands. I loved how simple and easy it was to create an entire layout with pre-defined styles for just about anything that I would ever really need in a simple web application. I got so excited about it I immediately set out to convert my company’s existing Flash web application to a Rails-only stack and implement actual HTML views. I got some buy-in from others to use the Twitter Bootstrap and convert from Flash to standard HTML. Using the Twitter Bootstrap has dramatically decreased the time it took me to implement standard HTML views that mimic the look and feel of our Flash client. In about a week, I was able to convert a lot of the app’s panels over into Rails HTML views.

Doing this effectively cuts down on development costs since there is less code to maintain which consequently means less bugs to track down and less development effort (no need to duplicate effort in the Flash client). One other team member, who hasn’t had as much experience programming in Flash, was able to pick up the Twitter Bootstrap anew and program Rails views with ease. Now that I think of it, I honestly can’t understand why I was so afraid to tackle Rails views in the first place.

Flex and AIR aren’t all bad in my opinion, and I think they both have their place in terms of solving specific problems. The fact JavaScript is gaining more and more popularity, not to mention the HTML5 and CSS3 standards that have been in development for years, it is hard to make a convincing statement that using Flash is viable for web apps (especially since the iOS platform doesn’t support it at all). There is very little in Flash that can’t be achieved with some JavaScript and CSS — and there are already things like the Twitter Bootstrap that make this job faster and easier to do.

Twitter Bootstrap is so complete out of the box, it’s hard to not use it for simple static website. In fact, I’m doing one right now for a friend who is trying to start her own business. Just for kicks, I decided to use a Twitter Bootstrap gem for Rails while also using the high_voltage gem for static pages. After a few hours of work (most of it doing basic dual-boot setup and development configuration), I was able to throw a simple site for my friend to see on Heroku (which by the way is awesome for pushing deployments using git). Doing that was much more satisfying than setting up a WordPress site (it would have solved the problem but somewhat convoluted) and trying to find, develop, or hack a theme for it.

Over the past few weeks, the creative spark for programming was reignited in me. Playing around with these new things, which I almost never have the chance too, has really fire up my passion for coding and getting an intellectual satisfaction out of it. It’s frustrating sometimes, especially when you come in as a newbie, but taking pride and ownership in what you create is so rewarding. The feeling of accomplishment is a personally motivating drive.

Note: The opinions expressed here in this post and on my blog are my own and do not reflect those of my employer.

Here is the original version which uses its own with a background image:

and this is the version using CSS3:

The visual difference is minimal, and it’s a heck of a lot easier to change a few values in CSS instead multiple properties (and potentially an image file). The CSS3 tags basically eliminates the extra background image inside a div tag and its associated CSS to display the image sprite (I originally used SpriteMe.org to cut down some bytes). I haven’t cleaned up the CSS or image files yet, but I imagine that this will cut down a lot of extra bytes in the whole theme.

What I’m not thrilled about though is maintaining backward compatibility for older browsers. It’s nice that I get to define a single CSS property so I don’t have to use or wrangle a massive CSS file. I don’t like the idea of sticking in vendor prefixes let alone trying to be compliant with a whole gamut of browsers and include some fallback code/mechanisms. That’s partly the reason why I haven’t switched to using CSS3 (aside from my lack of time). Even so, I’m not too, too worried about browser compatibility being a huge problem since the website’s reach is very localized.

This is just an exploration really since there isn’t a huge need for me to do it. What’s in place right now works just fine and across many browsers. There aren’t any issues with that.

I think the Fitness and Nutrition Stack Exchange is a great source of information and definitely has a lot of potential despite being in beta for so long since its proposal on Area51. There have been ongoing issues with the definition of what fitness, health, and nutrition mean for people. Nonetheless, I still think it (and the whole Stack Exchange network too) is a great resource and community for people to go for information.

I suggested using ExternalInterface in Flex to interact with a JavaScript function in the HTML page to make Fancybox (a lightbox that is most familiar to me) display an iframe over the Flash SWF file. I saw in the Fancybox FAQ that it could appear over Flash content (with a caveat) so this gave me confidence that my idea would work. So I sent an e-mail to the person trying to fix this problem and described how to implement the solution with referenced links.

I received a response that basically amounted to, “This does not look possible,” which in my mind translated to, “I don’t know what to do (because I don’t really understand it).” My comments aside, this bothered me so much that I ended up throwing something together just to prove this person wrong despite all the evidence I had previously sent.

In my Flex app, I hooked up a button click handler to make a call to my JavaScript function via ExternalInterface.

ExternalInterface.call( "show_fancybox_thing" );

I’m not too, too familiar with jQuery so I had figure out how to create an element (a link specifically in this case) and trigger a click event on that element.

function show_fancybox_thing() {
$('<a href="http://www.jquery.com/">jQuery</a>').fancybox(
{'type': 'iframe'} ).trigger('click');
}

That’s the simplest implementation you could do using minimal Fancybox configuration. This code will display the jQuery website within an iframe after clicking a button in the Flex application. The example could easily be changed to pass a web address from ExternalInterface into the JavaScript function call.

For the embedded Flash, the window mode needs to be “opaque” within the HTML file. For the <object> tag, the following needs to be added under it:

<param name="wmode" value="opaque">

The <embed> tag requires an attribute:

wmode=opaque

Other than that, as long as Fancybox is set up properly there isn’t too much to it. I’ve put a demo online of calling Fancybox from Flash.

I do remember using his music preference AI program, Synapse, while I was in college which was mentioned in the film. I even did a presentation on it (part of a communications course for Computer Science majors) and still have his Winamp plugin version of it installed on my computer. What Zuckerberg has done is very admirable (in reality) with Facebook. I admire it a lot, and I really geeked out over the “birth” of Facebook within the movie and found myself sympathizing for the main character.

There were two roadpaths with WordPress: have it hosted on WordPress.com, the commercial enterprise owned and started by the same people who created WordPress; or use WordPress.org which has the downloadable free, open-source blogging platform software. After having used WordPress.org for years and years, I decided to explore the WordPress.com option.

There are differences between the “com” and “org” incarnations of WordPress. I have been a user of WordPress for years, running it on my own hosting provider (actually sharing it with someone else). I had also signed up on WordPress.com (for an Akismet account) and thought, at the time, that it was very limited. I do not know what changes have taken place since then but I explored the options available, and liked them better than the base package Google Sites or Windows Live provides.

All I did to migrate my school’s website was create an account, set up some pages, picked a theme, uploaded some files, copied content, created a new banner image, and then mapped the domain. I didn’t have to worry about back-end administration like databases, backups, disk space, themes, and so on. I can do the same thing on my own, but I didn’t want to take on those responsibilities at the time.

WordPress.com already provided everything (or nearly everything) I had done with my own blog and Youth A.C.T.’s website and not to mention that most features are free right from the start. A simple website doesn’t need much more than that. However, as feature-rich as WordPress.com is, they are still rather limited in terms of how much control you can exude over your site.

After some initial discussion with my instructor, we determined what we wanted in the website and the feasibility of implementing ideas. I decided that it would be best to move the school’s site off to its own WordPress-hosted service where we could control the site on a deeper level. This largely meant being able to utilize other themes not available on WordPress.com, install plug-ins that suited our needs, and being able to customize the look and feel.

The new (new) site has up and functional for a few weeks now. A lot of people I solicited for feedback have said it looks very nice and professional (their opinion, not mine) and that information is much easier to find. I can’t take complete credit for what I did; WordPress has great community support and dozens of plug-ins and themes, and the authors deserve lots of thanks for their efforts.

Buzz is a a much better aggregator than trying to individually manage each independent feed (especially in Google Reader). One could use Yahoo! Pipes or some other feed aggregating service to pull all this information together. People are generally lazy though, which is largely the reason why I never bothered to do such a task.

Google isn’t really in the social computing market so far (ignoring Orkut), and the services they provide don’t necessarily translate to such a platform (though they can). That is one advantage I would promote Google over Facebook. You basically start out with nothing, and build up what information you optionally want to show.

Facebook is the exact opposite of this; they provide “everything” (by this, I mean commonly used applications) and try to monopolize your information. Facebook’s options to include outside sites in their feeds is very hidden and tucked away, whereas Google makes this much easier and open and gives users more freedom.

Google Buzz also wins in the “privacy” area simply because the content you include is optional. You don’t have to include your Flickr photostream, your Twitter account, and so forth. Facebook has failed in their privacy controls by making them overly complex and granular for users. The backlash they received contributes to it, but I don’t blame Facebook entirely for their privacy problems.

The one thing I would like to see is bouncing replies or comments back to the original source. It don’t believe it is an easy problem to solve. Not everyone using Google has an account at the various sites people choose to include for aggregation. Also, there are many features that some social networking sites have because they are a specialized site. Flickr is a community built around photo sharing, YouTube for videos, Twitter for communication, and the list goes on. Facebook tries to solve this problem by locking you in to their platform.

I think it’s an interesting application, but I suspect it’ll be another tiresome “one of those things I have to check.” I have no problems logging into Facebook, Twitter, or Google Reader to catch up on what is going on within my own social network. Google just makes it easier to read all of it without having to jump all over the Internet playground.

Basically the whole website infrastructure came down to what kind of CMS do I want to run. I had tested out various ones like Joomla! and whatever random ones my hosting provider had. They weren’t too impressive and didn’t fit our needs (read: mine). I had previously worked a little bit with Drupal 4.7 while I was working at the University of Maryland, and that was the first CMS that sprung to my mind. The other was WordPress which I’ve also had experience with (since it’s what I use to run my blog).

Drupal has incredible community support. There are so many themes and modules so readily available. Basically what attracted me to Drupal (for the purposes of the Youth A.C.T. website) was the Event Manager module. This was perfect since we needed something for online user registration for an upcoming event. I got this up and running within minutes, and since then I have just steadily been putting other useful things together in Drupal.

However, there are some things about Drupal that irk me. While the administrative configuration is very comprehensive, it is also quite cumbersome and feels convoluted at times. For some time, I had shrugged it off and learned what I needed to do as I went along. Then there is the case for my other users — the various people (teenagers, young adults, older adults) who would come and also help administrate. Even though I have given them enough privileges to administer what they need to on the site, they are still confused. It is kind of a shock when you grow up in a such a technological age, but there are still lots of people who have no idea how their computer works let alone writing simple HTML code. Maybe that’s a good thing.

Doing a Gallery 2 integration with Drupal was a pain in the ass. Gallery 2 is just very bloated and feels difficult work with to the point where I had considered abandoning it for WordPress. I understand WordPress much more, and it may be better for the clueless user. The administrative navigation is a lot simpler and more straightforward (yay for version 2.5!) in my opinion. I bet my marbles WYSIWYG helps out a lot too. The other reason why I would move to WordPress is because of laziness. I do not have much time outside of work, tai chi, kung fu, and other various activities. I also like to maintain a healthy sleep schedule as well. I understand how WordPress works (to a degree, enough for me to carry on). While the Drupal documentation is extensive, comprehensive, and everything I’ve always wanted when I look for documentation, I just don’t have the time or patience presently to go through it all and learn it.

If I did move to WordPress, I would just have to find replacements for the various modules I used in Drupal. There isn’t any built-in event management in WordPress nor could I find an existing plugin for it, but there is always various tricks I can use to get around its shortcomings. Google Docs is wonderful for creating simple forms and surveys, and our organization (read: I) have already registered a Google Account for e-mail and document sharing (and people are still clueless on how to use Google Docs). While I’ve seen various gallery plugins for WordPress, there isn’t anything stopping me from using Flickr (and even combining it with a plugin that uses its API). In the meantime, I’m still going to press forward with Drupal and try another album/gallery module. If it doesn’t work out, then I most likely will move to WordPress. I could even potentially leverage volunteers to create themes (for either Drupal or WordPress) since I have no artistic eye.

In the time that I spent writing this post, I could have been working on the website. And now I have to go to sleep for work tomorrow.