w7d1 - Rails + Backbone

    Sorry, no witty title today, just the cold hard facts. Backbone is cool as hell, but also confusing. It got more natural by the end of the day, and I’m sure by the end of the week it will be even more so, but for now, it’s a lot to take in. Backbone does a lot of things on the client side that Rails sort of does on the back end. The caveat is that it doesn’t do it quite as smoothly as Rails, and you end up writing a lot of boilerplate code to pull off Backbone’s feats. In some ways it’s nice, because it doesn’t hide away a lot of the functionality behind convention like Rails does, which makes the processes easier to follow. The downside is that you end up writing a lot of similar and repetitive code, hard coding in URLs and generally doing things that we had better ways of handling in Rails. And of course, it doesn’t quite have that magical feel that Rails had.

    Still, with all that being said, I am still pretty excited to continue this week with Backbone, because it has the potential to make things pretty slick on the client side. Being able to create, edit update and destroy resources without ever loading another page is huge. Being able to handle all server requests asynchronously and repaint an entire page of content seems like it will be a very powerful thing to have on your side, and will enable us to do some really amazing things once we can fully grasp it’s usage.

    Let’s see what tomorrow brings..

w6d5 - Clean pages with the power of AJAX

    Week 6 done! It’s hard to believe that we’ve already been at this for 6 weeks, and when I look back at the things we were learning then, it seems like it was so long ago! To wrap up the  javaScript curriculum, we spent the day playing around with AJAX requests, which allow you to make asynchronous data requests to the server. This essentially means that you can submit and request data in the background while your application remains undisturbed. This doesn’t really seem like a big deal until you realize that it allows you to update your application without having to reload or redirect to a new page. This enables you to do things like display search results that update as the user types, which is pretty damn cool.

    The day started off a little rough, as we were still not super familiar with jQuery, which is an important part of handling AJAX requests. Then you add AJAX on top of that and it just introduces a whole new set of things to think about. However, once we got warmed up, we were able to see just how beneficial using AJAX can be to an application. Our project was to build a mini version of Twitter using AJAX requests instead of traditional page loading. This meant that when a user posted a new tweet, the page automatically fetched the new tweet and displayed it on the page, without ever having to reload. We were also able to implement a real time search bar, that searched through all users with each keypress and displayed the results immediately. There was also my favorite feature, which was the character’s remaining counter, which again, updated in real time. It’s amazing how small things like that can make a big impact on user experience and it’s something I will keep in mind once we get to our final projects.

    Speaking of which… it looks like we will be choosing our Final Projects this week, so that should be pretty exciting! But first things first, we need to get through a week of Backbone, a javaScript library that sort of ties everything together that we’ve done so far. From the looks of it, it’s basically a client side MVC, which should work well to compliment the server side MVC that we’re familiar with from Rails. Hopefully it’s that simple (but I know it won’t be)! Week 7 is under way…

w6d4 - Transition all the things

    Today was interesting. We spent the day building jQuery plugins that could be used to enhance an application in multiple, useful ways. Today’s work was not quite as fun as some of the other things we did this week, but it is probably the most practical in terms of real world application. We were tasked with fleshing out 3 simple plugins to get an idea of how jQuery plugins are built.

    The first plugin involved a set of links that correlated to specific content. We had to create a plugin that turned the links into “tabs”, that when clicked, displayed only the content relevant to that “tab”. This plugin included our first taste of css transitions, which we used to fade out the old content and fade in the new content.

    The second plugin was a picture “carousel”, that could be navigated through using “Next” and “Prev” links. The carousel only held space for one picture at a time. When the “Next” link was clicked, a new picture slid in from the right, while the active picture slid out to the left. When the “Prev” link was clicked, it had the opposite effect. To do this, we utilized CSS classes to identify the active picture, the next picture (not displayed but positioned off to the right), and the prev picture (not displayed, but positioned off to the left). Then, using CSS styling, we set the desired final positions of those pictures and placed a transition timer, in order to smoothly transition between pictures. The trickiest part of this plugin was handling the events that added and removed classes. Because of the way that javaScript processes things, you need to be careful about the way in which you fire off events. For some reason that I don’t fully understand, it seems like you sometimes need to handle events in multiple stages, separated by a puzzling setTimeout() that contains the next stage, set to a timeout of 0. I’m not really sure why it works, but we had to use it multiple times, so it’s probably something we’ll come across a few more times, and hopefully understand why it’s needed. 

    Our last plugin wasn’t quite finished, but it was a good way to wrap up the day. We were tasked with building a thumbnail plugin, where you provide a list of small thumbnails in a row and when a user mouses over a thumbnail, it shows a full size version of the image above it. Again, we used event handlers and css to style everything and it ended up being fairly simple to get working. Our biggest issues were with CSS, just trying to get everything placed where we wanted. We also MAY have spent a little time adding a few transition elements to our thumbnails, but nothing too eccentric… It’s amazing how much you can do with CSS, and we’ve really only been using the basic functionality, I’m sure you can get pretty crazy once you really know what you’re doing.

w6d3 - Meta Gear Solid

    Today we used: HTML, CSS, javaScript and jQuery to create a few browser games. The first was a version of Tic Tac Toe that had no tics or tacs. But it did have some pretty amazing colors. All of the game logic was taken from a previous solution and we just needed to update it in order to render it in the browser. This wasn’t too bad once we started using jQuery to grab things, which makes HTML elements really easy to manipulate with javaScript. The main focus was on getting the game to run and render in the browser, and of course to do it in style. We opted to go with nice green and fuschia-ish colored boxes instead of the boring “X” and “O” that you’ve seen a million times before. We even added a highlight whenever you moused over a box, but ONLY if the box was empty.

    The next task was to create… wait for it… Towers of Hanoi (FIFTH TIME IN SIX WEEKS). Thankfully, we didn’t have to actually recreate it, it was similar to the Tic Tac Toe exercise, where we had to adapt existing game logic to render in a browser. This ended up being pretty cool, as we styled our towers with some nice pastels and rounded the corners of our disks. Once again, we added some feedback, in the form of highlighting the background of whichever stack was selected. We even added a toggle in, so that if you click on the same stack again, it deselects it. When you select a valid from stack and to stack, the disk redraws itself on top of the new stack. Such a simple thing, but it was cool when we finished and could actually play around with it in the browser.

    The coup de grace was to recreate the classic game of Snake. This time, we built everything from scratch. Using jQuery and CSS, we were able to put together a pretty awesome game of Snake in a few hours, and we even gave it a Metal Gear Solid theme, complete with a picture of Solid Snake as the “head” of the Snake! Instead of apples that pop up on the board, we placed cardboard boxes, which as everybody knows, Solid Snake loves to hide in. I must say, it was pretty amazing! There is a lot of polish work to do on the game itself, and there were some features that we purposely left out that can be easily added in later. There was the minor thing about dying. We decided that Solid Snake was way too badass to die in a game of Snake, so we didn’t implement any game over mechanics. It’s a feature, not a bug! Today was definitely a fun day, and I don’t think it would have gone so smoothly without the use of jQuery. It’s not the prettiest thing to look at, but it seems to make manipulating HTML a whole lot easier, which is always a plus. Tomorrow we play with jQuery some more, building our own plugins, which should be pretty interesting.

w6d2 - Thinking inside the box

    CSS! I was definitely not prepared to enjoy CSS as much as I did today. We started the day with another small CSS lecture from Jonathan, and then we were tasked with recreating (pixel perfect versions of) the layouts of a few different sites. The first one was a warmup, just a mockup of a basic site with posts consisting of a user name, an avatar, a timestamp and a chunk of text. There were 3 of these lined up vertically, arranged sort of like a twitter timeline, but much simpler. We utilized the basics that we had gathered over the last few days to reproduce the layout, and once we were done we had an exact copy of the layout, which I was pretty proud of for out first attempt at tackling real CSS.

    The next site was another mockup, but a bit more involved. This time we had to deal with a header, navigation bar, a page footer, and a bunch of borders that needed to be in the right places. The trick was to utilize floats and padding in order to create the desired look and spacing. It was also important to utilize the “clear fix”, which involved injecting content at the end of a container that held only floated objects. If this wasn’t done, the container wouldn’t properly shape itself around the floated content, causing layout headaches. This was a bit annoying to have to do each time we started on a new set of CSS, but it makes sense and after doing it a few times, it becomes pretty routine. Once we had the layout finished, we had to add a hidden dropdown menu that only appeared when mousing a link in the header. This seemed like a challenging task, but right when we were about to attempt it, we were treated to CSS lightning lecture #2 of the day, which regarded that very subject. Afterwards, we were able to implement the hidden dropdown without much trouble. We had to take advantage of absolute positioning of the element, but relative to it’s parent. Doing this put the menu in the place that we wanted it, but we also had to give the dropdown a display property of “none” by default, only changing it to “block” display when hovering over it’s parent container (the link). It was surprisingly simple once we understood how it all worked.

    The last task of the day was to recreate the Google homepage. The page may seem pretty basic, but there are actually a lot of subtle elements in play that create the overall look. We didn’t quite finish with this layout by the end of the day, but we DID get far enough to feel proud of our work. We had the Google logo front and center with the search bar, buttons beneath the search bar, the header with header links and footer with footer links. There were some finer points that we ran out of time for, like the links being underlined when you mouse over them, and the apps menu that pops up when you hover over the Apps icon, but overall I was very happy with our day’s work and feel like I learned a great deal about CSS.

    The main takeaway was to take a granular approach when designing a layout, and think in terms of boxes. Work from the outside-in, identifying the largest container, and the boxes that it holds, then look at each of the boxes there and what is contained in them, and so on. Doing it this way really made things easy to dissect and understand, and now I can’t wait to start adding CSS to my own applications!