Category Archives: Web

Playing with JavaScript, Twitter Bootstrap, and Rails

Playing with JavaScript, Twitter Bootstrap, and Rails

Over the past few weeks, I had been playing around with various JavaScript frameworks namely node.js and backbone.js. I was trying to see if I could recreate my company’s web application (which is built on a Rails/Flex stack) entirely within a JavaScript environment and create a single-page app. I got the inspiration for doing this from Fog Creek’s blog post on the Trello tech stack.

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.

Read the rest of this entry

Learning CSS3

Learning CSS3

Yesterday I tried learning some CSS3 on my own in order to convert my kung fu school’s website to be more “modern” in terms of technology. I’ve been using a modified Ocean Mist 2.0 theme and hacked up the CSS a bit to fit what I wanted. In doing so, I noticed that there is lots of CSS rules to create shadows and rounded corners. These were easily the most visible visual elements that I knew CSS3 addresses. I experimented with box-shadow and border-radius on a test site, and the results are positive so far.

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.

Choosing Martial Arts for Fitness

Choosing Martial Arts for Fitness

I wrote a blog post for the Stack Exchange Fitness blog about my experience with fitness and exercise as a child, teenager, adult, and young professional. The point I wanted to make was that choosing an activity should be a person own action, that is should come from within. My experiences with fitness growing up have largely been either in the control of others or a reaction to what (I perceived) people were doing for fitness. The full post is called “Finding a Fitness Niche” at the blog, and I wrote it to hopefully give others a stepping stone to find out what kind of activity they might choose for staying healthy.

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.

Calling Fancybox from Flash

Calling Fancybox from Flash

Someone asked me once about loading external SWF movies from a Flex app and having trouble with unloading them. It had something to do with the audio in the loaded SWF file continuing to play after the SWF was unloaded. I didn’t quite understand the details, but I was asked if I knew how to fix the problem or work around it.

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.

Read the rest of this entry

The Social Network

The Social Network

This is Mark Zuckerberg’s take on The Social Network. It is clear that movies like these have elements that aren’t entirely truthful in nature for the purposes of entertainment. Even if the movie weren’t about Facebook, it would still be a very well done film given the way the story is told.

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.

Contending with WordPress

Contending with WordPress

My latest personal project was to migrate and update the site of my kung fu school. My sifu had asked me for input on the website since the original administrator was moving to a different hosting provider. Ideas were thrown around, and I suggested moving the site to a WordPress configuration.

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.

Buzzing on Google

Buzzing on Google

I wasn’t very excited by Google Buzz when it was announced especially when Facebook has already taken over the social networking market. There aren’t many people I know who don’t use Facebook. However, I’m liking the information stream much more than Facebook. It feels and looks cleaner, and Google has beaten Facebook in regard of aggregating content.

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.

Drupal vs. WordPress

Drupal vs. WordPress

For the recent month and a half, I have been placed in charge of all things webby for this new youth organization in Massachusetts. We’re called Youth A.C.T., a group for empowering youth and getting them involved in their community. We’re still in the process of getting up and running but already have some events and projects going on. From my technical point of view, this has presented me with an interesting problem of how to run this website.

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.