w9d5 - 3/4 of a/A = full stack

Wow, what a journey this has been! In seven weeks, we learned enough to become full fledged software developers, and the two weeks following that were spent building clones of existing Web applications. That’s the gist of it, and it sounds crazy when you put it that way. People spend years to get to this point, and we’ve reached it in a little over two months. When i take a step back and think about it, i can appreciate just how difficult it’s been, but I’ve had a lot of fun along the way, learning the full stack of Web Development. That’s not to say that our projects were perfect, i know mine wasn’t and i actually spent some time over the weekend improving it, because i genuinely enjoy working on it. It doesn’t feel like just “work”, but rather “working on a masterpiece.” Of course the danger in that is that it never feels done…

Of course it wasn’t really the last day for us at app/Academy, just the end of one journey and the start of another, more important one that we’ve spent all this time preparing for… the next three weeks are dedicated to the job search, and i intend to put in as much effort there as i did during the first 3/4 of a/A, and hopefully I’ll end up with something else to be proud of!

w9d4 - No RESTful the weary

    Tomorrow we will be presenting our Final Projects! It's hard to believe that the day is finally here.  It feels like we just started, and in the past 2 weeks, we've built some pretty impressive applications from the ground up. Sure, there's been a lot of lost sleep, and there's always more to do, but I feel pretty good about what I've put together. In particular, I feel like I made a lot of progress today and chattr actually feels like a real app at this point, which is pretty exciting to say. I still have some bugs to fix and  a couple if things I want to squeeze in before demos tomorrow, but first...sleep!

w9d3 - It's the Final Countdown

    Cue the music...

     Only one more full day left to work on our final projects.  Backbone is still giving me some issues,  but I've got it under control (hopefully!). Today was spent mostly squashing bugs and adding CSS,  which doesn't sound like much, but was much needed. But there's always more work to be done...

w9d2 - Backtrack to get back on track

    Sometimes you have to go back to move forward,  and that's what i decided to do.  It wasn't an easy decision,  but I'm glad i decided to do it,  as I've ended up making my life much easier for now.  My code won't be as pretty,  but that's work that can be done later,  if i have time. For now it's all about hitting a deadline with a product I'm proud of, so the back end will have to suffer a little. Even with the backtracking,  i feel like I'm still on track and gaining momentum,  so let's see how tomorrow goes...

w9d1 - decomposition

    Today I decided to make my life a little easier and simplify the backbone views that I've been trying to implement. I didn't plan to spend so much time on implementing backbone views and if i continue to dedicate time to that,  i won't be able to add in some other features that i had planned.  I can always go back later and refactor, but my priority is getting everything implemented smoothly by Friday, so I'll have to sacrifice some complexity. 

w8d5 - Ohhhh, we're halfway there

    Week 8 done! These weeks are just flying by, especially now that we're working on our Final Projects. After working on them for 4 full days, we got to show them off to the whole class. It was interesting to see how differently everyone has approached their projects, in particular, the pieces that everyone focused on varied greatly. Some people tend to focus fully on the back end of their site, meticulously testing and building features first. Some people flesh out their features and then spend a bit more time focusing the front end. Either way, it was exciting to see everyone's progress, especially knowing that in another week, all of the clones will be fully ready to be seen by the world!

    As for my clone, it's going well. I made some good progress with Backbone, although the demo I showed was strictly Rails. I still need to figure out exactly how to implement User authentication with Backbone. I've also been trying to figure out the best way to grab the signed in user, which is handled by the Rails server. So that will probably be my primary focus as I resume working on my clone this week. 

w8d4 - Backache

    Ugh, Backbone... I thought I was doing well yesterday and then Backbone comes along and slings me back down to Earth. I started trying to incorporate Backbone into my project, and it did NOT go as smoothly as I'd hoped. That's not to say that it was a complete disaster, it was just frustratingly slow and I didn't get as much done today as I would have liked. With that being said, I made sure not to affect the Rails version of the app, so even if the Backbone parts end up in the trash heap, I can easily revert it back to Rails.

    In particular, I was having trouble with utilizing subviews. I think part of it is just that I'm not very comfortable using them. I have to constantly refer back to previous material to get right, which is a big difference from when I was working in Rails. The other part of it is that conceptually, I'm having trouble wrapping my head around exactly how I need to separate my Views and Templates, as my models are intricately related and there isn't a clean delineation for what needs to go where. That's also part of Backbone that I struggle with compared to Rails. In Backbone, there aren't many conventions that hold things together, you just sort of have to make it make sense the best you can. Rails is ALL conventions, and once you get used to it, it's nice understanding how things fit together. I'm sure that as I work with Backbone, I'll start to appreciate the open-endedness of it, but for now, it's just frustrating.

    Tomorrow is our first demo day, and I'm very excited to see everyone else's projects in progress. But before then, I would definitely like to get some of my Backbone pieces working. Looks like I have some work to do!

w8d3 - MVP! MVP! MVP!

    It was officially Day 2 of Final Projects, and I would say today went pretty smoothly for me. I was able to add in a few new features: a properly working timeline that shows all of the posts from the current user and the posts from users they follow, the ability to reply to posts, the ability to repost, and the ability to search for users. I also started working on some CSS in order to give myself some visual feedback for designing my Rails Views. I may have gotten a little carried away, but I can definitely say it looks much better than yesterday's version.

    At this point, the project is beyond my initial estimation of the MVP, but I would like to add a couple more features and refactor a bit before attempting to layer in Backbone. I'm looking forward to adding Backbone, but I don't know it nearly as well as Rails, so it will be a challenge not breaking everything. I have also been regularly pushing to Heroku, so if anyone wants to try out the (very much under construction) production version, be my guest!

www.the-chattr.com

w8d2 - The chattr around town...

    No more pairs, no more instructions (not explicit ones at least). Today marked the beginning of a new phase at app/Academy, one in which we finally get to build on all of the knowledge that we've spent the last 7 weeks accumulating. They're finally pulling the training wheels off, and it's an exciting time as we figure out how to keep pedaling. For my final project, I decided to build chattr, a clone of Twitter. It's a site I'm very familiar with, and I thought it would also provide a good showcase for everything that we've learned. I also think I should be able to put my own little spin on it, so overall I felt it was a good choice.

    On Day One, I polished off user authentication, which I started the night before. Then I spent some time writing unit tests for my User model, using shoulda-matchers, which was sooooo much cleaner and easier to write than regular rspec. Once I had that out of the way, I moved onto my Post model (my version of Tweets), giving users the ability to make posts. The last thing I did before leaving today was figure out how to link up the follower/following relationship, which was trickier than I initially thought. I had to link two Users together using a Join table that keeps track of user_ids and follower_ids. Basically doing a self join through a separate join table. The actual logic was not that difficult, it was keeping track of the similar names that was tricky, but after renaming my fields and associations a few times, I came up with something that worked for me.

    Day Two will be all about configuring the post feed, and once that's finished I will have arrived at my MVP (minimum viable product), which means I can start doing just a *tiny* bit of styling. Until then, the site will just have to suffer from a bad case of the 90's.

w8d1 - Node Day but today...

    It's hard to believe that we're starting Week 8 already. Today was the last project before starting our Final Projects, and it was all about Node.js. Node is a way of using javascript on the back end to asynchronously interact with the client side. The benefit to using an asynchronous server is that it can handle input from clients without blocking input for other clients. It lends itself to doing "event driven programming", which was evident today as we built a basic chatroom application.

    Event driven programming is a very different way to approach programming, and unlike most of the things that we've seen in the course so far. The day started off challenging, but once I got the hang of it, I got into a groove and enjoyed trying to work everything out. It's basically a juggling act between the client side and the server side, and all of it revolves around triggering events on one side and listening for them on the other side. Every time you want to add in a new feature, you have to think about how you will trigger the event, and then how you will handle the event on the other side. Unfortunately, we won't have time to explore Node.js any further, but I definitely found it interesting and will probably look into it some more in the future.

    Final Project underway...

w7d5 - Trello? Is it me you're looking for?

    Week 7 done and it's just about time to get started on final projects! No more pairs, which will be strange. W'eve spent the last 7 weeks working with a partner the majority of the time, and it will be take some time to adjust to not having one. I definitely felt the pain while working on the Trello project, as there were numerous times where I did something silly that a partner would have easily caught, saving me precious minutes of figuring out where I missed a semicolon or curly brace, or where I put board.title instead of board.get("title").

    I didn't make nearly as much progress on Friday as I had hoped, especially after I felt like I started out pretty strong on Thursday. But, I ended up spending a lot of the day undoing things that I did on Day 1 after realizing I hadn't gone about it in quite the right way. I ended up spending some time on Saturday redoing the entire thing, which coincidentally was great practice for Monday's assessment. I now feel like I have a pretty good grasp on Backbone, something that I couldn't have said a few days earlier.

    The other part of the weekend was spent building a paper prototype of my final project, which I found strangely enjoyable. The only other things standing in our way are the assessment on Monday morning and the remainder of Monday which is dedicated to Node.js. Although I'm anxious to officially get underway, I am curious to learn a little more about Node

w7d4 - var Wars II: Attack of the Clones

    Today we started the process of cloning Trello, as we gear up for our final projects next week. It isn't completely from scratch, as we were given a basic skeleton with user authentication and basic models already provided. We are mainly using this to polish up our Backbone skills, and get some experience using jbuilder as well. It felt good to be able to go at my own pace today, as there are certain things in Backbone that I feel I have a good grasp on, and other things that I feel like I need work on. I went slower in the areas where I needed some reinforcement and I think it's really helped to solidify my understanding of Backbone.

    Today was mostly focused on fleshing out the basic functionality, and getting things to render on the right screens. Towards the end of the day I started added a little bit of style and it was already started to look a bit Trello-like. Tomorrow will be spent on finishing up the functionality and adding some more polish. The project has been designed with bootstrap in mind, so there will be some nifty things that I'll be able to include that I otherwise wouldn't have time to figure out. If I have time, there are a few features that I'd like to add in that weren't explicitly mentioned in the assignment; maybe I should make a list of features on Trello...

w7d3 - Divs everywhere

    Today we took a step back from breaking our backs learning Backbone and strapped up our boots to learn Bootstrap! Witticism aside, it wasn't as fun as I thought it would be, and it actually ended up being a pretty boring day, not because of bootstrap itself, it's pretty amazing with all of the things that it allows you to do for "free", but I think that's part of what made it fairly uninteresting. We've gotten so used to building things from the ground up, having to painstakingly reset and then style each element on our pages, writing CSS line by line. At times it was tedious, but it was extremely rewarding to see what you were capable of doing by being consistent and programmatic. Bootstrap takes all of that away and allows you to pull off some pretty impressive styling by just adding a few classes to your elements. It looks amazing, but it sort of feels like cheating.

    And don't get me started on the divs! It felt like we were adding <div> tags left and right, with a few <span> tags sprinkled here and there. We've been taught to try to keep our HTML semantic, in other words, the meaning of your page should be fairly clear just from looking at the HTML. If you have different sections, use <section> tags to wrap each one, if you have articles, use <article> tags, if you have a list of navigation links, put them in an unordered list (<ul>) and wrap them in a <nav> tag. Sometimes you don't have an exact semantic match for what you need, so it's fine to use <div>s and <span>s occasionally, but they shouldn't make up the bulk of your code, which it was it felt like using bootstrap. I know this isn't a strict rule, but I think it helps a ton when writing, reading, and ultimately understanding HTML, which is a crucial piece of web development. Don't get me wrong, I can see how useful Bootstrap would be for being able to quickly spit out great looking pages, but I guess I just prefer to have a little more involvement in the design process. But enough about Bootstrap...

    It's time to submit our proposals for final projects and I have been looking forward to this day very much. We will finally get to spend some time creating, writing, polishing and perfecting. We get to warm up by cloning Trello as a solo project over the next 2 days, a site I'm not really familiar with, but seems to be pretty cool, so I'm looking forward to that. Onward and upward!

w7d2 - Rssky Business

(Full credit for this post's name goes to my partner for today, Jacob... Genius!)    

    Day 2 of Backbone went a lot smoother than Day 1. We were tasked with building an app to manage RSS feeds, which wasn't too hard by itself. Of course the challenge was to get everything to happen by using Backbone to make asynchronous server requests and simply re-rendering the page instead of loading a new one. Going through the process again today helped me to understand the Backbone work flow a little more, and by the end of the day we had a pretty cool application built.

    This was mostly due to the fact that we finished the main functionality fairly early in the day and proceeded to spend some time working on the sites presentation using CSS. This has resulted in the best looking application I've produced so far, which gave us a nice sense of accomplishment. So many of our projects are focused on functionality, but it's nice to get a little design in here and there, especially when the application already works like its supposed to.

    In related news, we are going to be starting our FINAL PROJECTS soon, which everyone is really excited for! We have the next couple of days to choose, though I'm sure most of us have been thinking about it since Day 1, when we saw the previous class present their projects. I have a few ideas for what I want to do, but I still have some time to fully decide. The moment we've been preparing for is almost here!

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!

w6d1 - A Space Oddysey

    Space, the final frontier, where no one can hear you scream. Not even when you're hurtling at 10 px per second and repeatedly slamming into asteroids, that, for some reason, are perfectly round. And all the same size... And green! But none of that matters, because today we built a fairly full functioned Asteroids game! For a few hours of work, we were definitely excited to have built something that we could actually play with in a browser. We utilized an HTML element called 'canvas', which allows you to draw shapes and paths on a virtual canvas. It was a simple tool, but surprisingly flexible. It wasn't quite able to simulate motion (at least not in any way that we could see), but it was fast and powerful enough that we were able to calc the next move of all objects on the screen and redraw them hundreds of times per second, causing it to render with surprising fluidity. The Chrome debugger came in handy today, and we even spent some time using the breakpoints and step in/out abilities to get access to some of the inner workings of some things we were having trouble with.

    We also got another taste of CSS today, with Jonathan delivering another lightning lecture at the end of the day. This one was focused on how to use 'float' to create clean layouts. This also included a tidbit about injecting a blank string at the end of your content. If you neglect to do that, the container holding your floats will actually not recognize the fact that the floats are there and essentially ignore them. By injecting this empty content, it forces the container to resize and fit the floated content perfectly. Tomorrow we will be getting into more CSS, in depth this time, so let's see if any of these points have stuck in my brain!