The Circle of Life

     Ah the life of a programming project-- whether it's a website, a software program, or an internal computer system, they are all born out of a few hands, and nurtured throughout their life. Some unfortunately don't make it through many years while others go on with the longevity of a Redwoood tree. It seems like just yesterday that I picked up my current project-- the Kukui Cup website, already a young adolescent at this point-- and helped it grow into a mature young adult. I have many proud moments to remember when it made some giant leaps forward, as well as heartbreaking moments when it was rebellious and refused to listen to me. But nonetheless, I am extremely proud of the progress that was made, and I am certain that in the near future, the Kukui Cup will make even more phenomenal advances forward and become something that contributes very positively towards society. As my time with this project comes to a close, I would like to just share a few words about its latest progress and my hopes for its future.

     The latest advancements in my version of the Kukui Cup interface are the Home and Prizes pages. The Home page retains the basic look and feel of the original, with no major changes to the layout. I tried to keep the look very simple yet elegant:

Home:

As for the Prizes page, I kept the same two-column layout that was originally there, but this time, I completely overhauled the HTML code, at least as far as those widgets went.

Notice the nice use of Twitter Bootstrap's fluid rows and spans?
This is in contrast to the "old" way of doing things with tables (yuck!), which was how it originally was:

What's with all those id's, man? Totally unnecessary.. --oh, and extra yuck! There's even "style" attributes in there! I totally blocked them out of my mind upon getting rid of them. Everyone knows that styling should be done with CSS!
Here's the final output of the Prizes page. There's still a lot that could be cleaned up and fixed, but I think it's generally likeable.

Prizes:

     Finally, one thing that I finally got working was the responsiveness (cue the fanfare and fireworks). In the beginning, I was trying to implement Twitter Bootstrap's responsiveness through the supported classes, but to no avail. But one night earlier in this week, I took a final stab at getting those darned things to work, and it did! --hurray for 2:00 AM epiphanies..
Frustratingly enough, the solution is actually very simple:

1. Get the responsive-utilities.less file from the Twitter Bootstrap GitHub repository.
2. Reference it in your HTML page like so: <link rel="stylesheet/less" type="text/css" href="./css/responsive-utilities.less"> (I saved mine in a folder named "css"). *note: it must be done in this format! Otherwise it will not work.

And that's it! Now all you have to do is pick a component that you want to make responsive, and add one of the support classes to it. I wanted the Quest Bar to disappear when it got to a small size and be replaced by a smaller one, so I added the class "hidden-phone" to make it magically disappear:

 ...and likewise I added "visible-phone" to the collapsed version, so that it magically appears when the browser is much smaller.

To see it in action:

Pretty darn cool, if you ask me.

     Certainly this project is far from being complete; there are still design issues to resolve, bugs to weed out, and many more things to figure out. But considering where this site was just a few months ago and where it is now, I know my team and I have made enormous leaps forward and have taken this project to a whole new level. I hope that it can continue to be nurtured and improved, for I know that it is definitely on its way to being something spectacular.

Slow and Steady Progress

     As I had run in to problems last time working with Twitter Bootstrap-- specifically with getting the responsiveness (via the support classes "visible-*" and "hidden-*", with * being one of "phone", "tablet", or "desktop") to work, I am apologetic to announce that I have not found a solution yet. I have posted a question on the Twitter Bootstrap Google Group, but am yet to receive a definitive answer from the authorities. Disappointed, I decided to move on-- leaving responsiveness for a later day-- and focus on cleaning up the site in the meantime, implementing the other components of Twitter Bootstrap such as the fluid grid system and also converting CSS files to LESS. While these two components aren't much trouble, there were several other much more basic things that I had to tidy up before getting to use these tools. These menial tasks included: getting rid of the white backgrounds of icons, getting the LESS files to read properly, and whatnot.

     When using LESS, it is important to remember to import them into the html pages using this format:

<link rel="stylesheet/less" type="text/css" href="styles.less">

I did not realize this, and instead I used the standard CSS base of

<link rel="stylesheet" type="text/css" href="styles.css">

and just changed the href file name. This, apparently is a big no-no, and is easy to forget about.

     Secondly, as I was coding my LESS files, I became rather frustrated with not being able to recognize errors because of the lack of syntax highlighting (my IDE is Eclipse). It is difficult to read code when it is all one color, not to mention a strain on the eyes when yours is fluorescent green against a black background like mines. I decided to try and find a sort of plugin or editor that includes syntax highlighting support for LESS, and stumbled upon this plugin for Eclipse. Unfortunately, as of now I have not been able to get it to work properly, but hopefully this is to be resolved soon.

     So as far as actual progress being made... truthfully it's not much.. yet. But as soon as I get all the preliminary environments set up properly, I can really get to the meat of the issue, which is to fix up all the pages (and hopefully with responsiveness too!). There's lots of work to be done, but thankfully the basic components of Twitter Bootstrap and LESS are extremely easy to use.

Getting feet wet with Twitter Bootstrap and LESS

In the past week, I took a stab at trying out the Twitter Bootstrap that I marveled at last week. I was excited to try out the tons of great features and components that it promised, but I was also prepared to struggle a little due to the fact that I was going to be transform an entire page (not to mention an entire site!). Nevertheless, I was happy to try it out, and as it turns out, I did in fact meet both satisfying success and disappointing difficulties.

First off, as expected, it was extremely easy to implement some of the basic layout components by using the handy classes; I just tacked on a few classes, and like magic, the site transformed itself instantly with no trouble at all. Of course this was just for the basic classes like "container" and "fluid-row", and there are more advanced tools to use, what with the fluid grid system that will take some thought and trial-and-error to perfect, but that will be one of the steps from here on. At least for the simple pages, I don't foresee much more complex implementation being used than just these basic containers. However, responsiveness is a key part to our site, and getting this to work was what gave me some grief this past week. According to the Twitter Bootstrap documentation, adding responsiveness can be as easy as adding classes to the containers that are desired to be made responsive. These classes are: "visible-phone", "visible-tablet", "visible-desktop", "hidden-phone", "hidden-tablet", and "hidden-desktop", which as one can probably guess, makes the container visible or hidden according to the size of the browser. I eagerly added these classes to my page, but to my dismay I saw no change in the responsiveness of the page. Thinking that I must've missed something, I searched around and tried to get it to work, but to no avail. The closest that I got so far was getting "hidden-desktop" to work by importing a "responsive.less" file that I had to obtain through GitHub (it wasn't contained in the zip file available for downloading). So I got a phone feature to hide when the browser was large, but strangely enough, it wouldn't pop up like I thought it would when it got to a smaller size. At this point, I didn't have much time to fiddle with it very much, so as it stands, responsiveness is very limited. Either I must figure out how to get this to work, or I will have to end up implementing it the old-fashioned way-- by hand using media queries, but that would ruin the spirit of using a framework. Sigh.

As for LESS, I was met with less stubborn parts, but as anticipated, it did take some time to get used to coding in the style of a programming language. As a result, I did not get to finish restructuring the theme CSS file to fit the LESS style, but nonetheless I was able to cross several basic components into LESS, such as the use of variables and nesting rules. There is not much that is difficult with this, except for making sure that the changes don't mess up the styles. This means that changes need to be done carefully, especially where we have previously used chained rules (using the comma to specify multiple containers). Therefore, it might be better to take out all unnecessary components and slowly add them in according to each page, because we want to write less CSS. I will probably end up following this approach, and hopefully I will come up with a working, simple, and concise page very soon.

Bootstrapping with Twitter

     So it's been a while since the last post where we were continuing with rapid design development for our site here. Progress has continued with some rather pleasing results from the team, and it seems that we are finally able to take a big leap in development and head toward creating a responsive user interface. While we have considered using frameworks before, we never really got deep into one before and therefore we never found one that would work well for us. But taking a look at the hottest websites out there today, Twitter is definitely among these ranks, and so certainly they must be utilizing carefully crafted pages, scripts, and style sheets in order to keep up with growing trends. As a toolkit from this trending site, the Twitter Bootstrap is a friendly set of files that is designed to help web developers just like us to get started with creating beautiful websites. And it is based off of Twitter, so it is bound to look and feel good.

     Browsing through the Twitter Bootstrap project page, I quickly saw the hundreds (if not more) of features that this toolkit has to offer, and was greatly impressed at how nice everything looked as well. But the thing that really, truly impressed me was how incredibly easy they made it to implement the features that we want. I've used libraries such as JSTL (JSP Standard Tag Library) and YUI (Yahoo User Interface) before, but none of them have had documentation that is as clear as the Twitter Bootstrap one. When implementing external resources, the most important thing (in my opinion) is the usability of it; reading other peoples' code and understanding their intentions is one of the most time consuming parts of web development, so having clear documentation is something that can save an enormous amount of time. The Twitter Bootstrap documentation includes not only visual examples, but also the code that we need in order to use them; all we have to do is copy and paste it into our page, and customize it for our specific needs. They also provide, suggestions, best practices, and additional options, and all of it is concise, so we don't get scared or deterred by long, confusing explanations. Things are looking very promising so far!

     So, following these excellent tutorials, I quickly set up my environment to get ready to begin using Twitter Bootstrap. With the arrival of version 2.0, a fully responsive layout is accommodated, which is just what we need for our project. I played around with the features for a bit, and found that as expected, it was very simple to implement the different features available. Some of the features are slightly complex and as a result require a little more effort into getting them to work nicely, but overall, I am very pleased with it.

     The major issue that I forsee in our project is porting everything over to this new framework. We could just add the features to our existing code base (since it's mostly adding classes and rearranging tags), but it might be quite confusing and messy as we merge the two together. My approach would be to start with a "blank canvas" and add components one at a time, making sure that they are correctly implemented before adding the next. There is a flaw with this approach too, however; namely the fact that many components are not separate; rather they are largely and continuously nested, so it might be difficult or even impossible to add a sizable component to our "blank canvas". I suppose that we will just have to try it out and see if there are any infeasible parts that we come across, and assess the options.

Rapid Design Development

     So after being away from the project for a week, I was ready to jump right back in and help move things along further. While everyone else on the team managed to pump out their own original theme, I-- having missed a week-- unfortunately did not. But at this point, since my peers have made substantial progress, rather than continuing from my current standpoint, I decided to try my hand at jumping on someone else's idea and further enhance it. Taking this approach of depth over breadth turned out to be quite a good idea, as I was able to make just a few small changes and take it further to see what a closer-to-finished product would look like, for additional temperature checks. The result was positive, and this route definitely could be pursued further. Of course, other members of the team can take it from where I left off and enhance that even further, and this process can be repeated forever until a point of satisfaction is reached.

     If we ever get to a point where we can toss this theme file around and have all the team members add in their two cents very rapidly, I think that we'll have a pretty solid system of development here. It's quite exciting to be able to look at someone else's code-- which is a mildly modified version of familiar code--, make a few small changes, send it back, have others change it, and see the results stack onto each other. At this point, it's also easy enough to make rather large changes because of the structure and our familiarity with the structure. We know what to change and how to change them so that we don't spend an unreasonable amount of time figuring out how to do something. For example, I took a preexisting CSS theme file for our site and changed the background picture and the color scheme, so that we have a substantially different theme while keeping the rest of the features such as resizing of the background, the opacity, shadows, and bevels of other components, and many other features that had to be altered. Now it's only the custom, specific changes that need to be made to fit the theme itself. When someone makes a global change, we can share those changes and not waste time individually making those alterations, which I find very, very nice.

     But, what this means now is that I need to take this site to the next level-- in fact, to the next several levels. Because we can work fairly rapidly, that means that we aren't stuck on the same one or two issues for a week any more. So if I don't make major leaps in development and quickly, then I'll be left behind with nothing to do. I guess this weekend will be a good time to get inspired by stunning designs so that I can contribute some major implementations or perhaps start working on the responsive layout, because it seems like we are close to being able to work on the layout portion of this project!

Theme-ify-ing

After last week's design bust, our team decided to go with the idea of creating and applying custom themes that would run across all pages in the site, rather than customizing each page individually. One member in our group already had this sort of thing going on, and it was working rather nicely, but the only problem for me was that the color scheme wasn't quite to my taste. Perhaps I just have a strange taste in design (which I probably do), but I would still like to go with an extremely simple, lightly-colored theme for the site.

Once I got my files set up correctly with all the HTML files pointing to a common theme.css file, I was ready to get down to business and find a color scheme that I really liked. At first, it seemed pretty simple, just picking colors that looked nice to me and applying them to the page. But of course, as I should have known, it's never that easy. What looks nice as a color doesn't necessarily look nice on a page, and once you get to the point of combining colors, things get quite disastrous and you enter this infinite loop of:
                       while (ugly) {
                         pick (color)
                       }
for what seems like forever. Even when using a color scheme generator, it was difficult to get it just right for our site. A little color goes a long way, and even the least-saturated colors seem to be too much.

Although I'm not very satisfied with it, the current theme that I have is what I would call a "tree" theme. As I was playing with greens and browns for that au naturel look, a branch struck me in the face and made me realize, "I should make this page emulate the look of a tree!" We had to get rid of the foliage-rich backgrounds, but who said we couldn't integrate them into the pages' components themselves? Starting from the bottom, the widgets are the brown "tree trunks", and as you work your way to the top, you transition into the green leaves that lighten up as you get towards the "canopy". Some of the widgets are quite tall, so even more so I thought it was appropriate to apply this sort of color scheme. While it doesn't exactly look appealing, the idea is pretty neat (in my opinion), and I would very much like to keep working at this for a little while longer to see if I can get a really clean and nice looking theme. Part of the issues I had were due to structural limitations with the page, so if I want it to look really nice, then I might have to do some major reconstruction across all the pages.

Surely enough, progress is indeed being made, but hopefully this portion will round off soon so that we can get back to the fun stuff: the responsive layout of the pages!

Challenging Design Challenges

     So the results of submitting my design mockups are in!-- and it looks like a bust.. well, not really a bust, but I'm sure it would not have been very successful. And I say "would not have been" because we didn't even get to take a look at my design. As a group, our entire team presented our ideas to our supervisor, as he gave immediate feedback on our choices. One of the first stipulations was, "no dark backgrounds!"-- oh jeez, that's great, my whole theme is based on a dark background! I guess it's time to scratch that idea and go back to square one, or rather, square zero. What seems to be the common issue in all of our implementations is that we don't exactly understand the functionality of the website. Many of us omitted important components that we did not know were necessary, and as a result, no matter how nice we could get the color scheme and layout done, we'd still have to redesign it in the end. And that's one particularly challenging part about web design-- you can't just be a designer. You have to know the ins and outs of each web page and the site as a whole. But, that's also where this rapid feedback system comes in handy. I've seen far too many times where an idea or design gets criticized and ultimately shut down by a supervisor, and I always feel bad when I see the designer-- who put so much effort into it-- get told that it wasn't good enough. Well, now it's my turn to be in those shoes, but the fact that I've only worked on it for several days and not several weeks or even months makes me alright with it, because it prevents me from putting in any extra, unnecessary work into it.

     So what I have done this week was go back to the basics and work carefully: strip out all the styles from the HTML and place them into a separate CSS file, then slowly start customizing it to make it look beautiful, yet still completely functional with all its intended purposes. I've also been thinking a lot about design choices in general, and have been looking for nice examples of color schemes. In fact, one site that I particularly like is actually Google. Looking at GMail, Google Docs, and Google Calendar, they all use a very clean palette-- whites and grays for most of the components, with vibrant but soft colors for buttons. Even Blogger, the site that I'm using and looking at right now has a very simple yet appealing taste to it. The buttons are geometrically nice and the layout is very simple, which makes for a very modern, simple look.

     With all the talk and thinking about design and color choices, I find myself constantly looking at things and analyzing their design choices. Just the other day, I was walking by some modern-looking fashion stores, and found myself staring at it for a long time, not to admire what was inside, but rather its color scheme, use of space, and layout. I suppose it's a good thing to be paying attention to such detail, but at the same time, I feel like I've become some sort of design-analyzing robot! All in all, however, it is really interesting to notice these qualities that most people walk by without even noticing them.