winevitable - Tumblr blog

[winevitable]

Day 45

I have earned the Coders' trust.

They still do not realize I am bear.

GrizzlyOne out.

[winevitable]

Day 44

Moar Backbone! The home page is pretty close to completion...I need to install some listenTo's and click handlers...Also, the user show is coming along nicely. My main difficulty there lies in displaying the user's reviews. Currently, I'm getting the reviews, but without their associations...I still need to figure out how to bring their businesses along for the ride.

I've included them in my controller's query with:

User.find(params[:id], includes: [reviews: :businesses])

but they're not making it down to the userShow View or even to the Review Models when I parse them. The issues lies with Jbuilder I believe. I am only building out the User. Then, the User parse function converts the Review objects which are carried along with the User Model into Backbone Models, but by this point the Reviews' Businesses have been lost...

Well, hopefully I can figure this out tomorrow and style some more features into my app over the weekend.

GrizzlyOne out.

[winevitable]

Day 43

Oh Backbone, my Backbone! That was a rough day, but I am starting to understand the flow of the client side of things. I learned a lot today and am close to having a fully-functional homeView built in Backbone. While that may not seem like a lot, my home view is fairly complex, rendering instances of all 3 of my models as well as a form. It is a lot of code to work through, but another day should seem me through to completion.

After that, porting the remainder of my app to Backbone will be fairly straightforward. Of course, I still have a number of odd features to implement, but those shouldn't be all that intensive. We'll see what I can get done by Monday. The app won't be 100% complete, but it should be a solid start and more than an MVP. Also, it'll be great to actually understand Backbone from start to finish. I plan on using the client-side framework in the future. After all, speed is of the essence!

GrizzlyOne out.

[winevitable]

Day 42

Backbone seems to be the name of the game this week. I spent the morning building out my collections, models, router, and views. Then, most of the afternoon I struggled getting the whole mess to work. Eventually, I had to delay any further work until tomorrow as I was too drained to delve deeper.

On the bright side, I was able to style my app a bit. It is beginning to look a lot less like HTML and a little more like our final assessment. I'm really proud of the footer - it is the simplest piece of the app. The header is also close to completion. I need to create a log and fix the buttons. After that, I'll be wading through the content on each page and adding some :hover, :active, and :focus bits. Plus, JavaScript for the drop-down menu and some pop-ups.

We'll see what I can accomplish by Friday. I'm hoping to have at least a solid rough draft finished by then.

GrizzlyOne out.

[winevitable]

Day 41

Into Week 9 we go! Our last assessment covering CSS was a good learning experience. I picked up most of the best practices and design tricks from the lectures these past couple of weeks, but having to sort through someone else's html while echoing their design forced me to step into the mindset of an experienced developer. I'll be able to translate that knowledge into my own project this week. It will definitely help as I struggle to style a wealth of elements...

Over the rest of today, I made a lot of progress with the features of the website. As always, there were some kinks to be worked out: tweaking my application.yml environment variables, prefixing my image URLs with "asset_path", handling the inconsistencies of the Facebook and Twitter Oauth schemes, and implementing default avatars for Users and Businesses.

After getting the Oauth and PaperClip gems functioning correctly, I dove into a second layer of search. On Friday, I was able to orchestrate a text multisearch across Businesses and Reviews. Today, I supplemented this feature with the Geocoder gem switching from multisearch to pg_search_scope. In doing so, I was able to search not just by text, but also by location. Searches on the site now yield businesses within 20 miles of your desired location and I could easily make the distance customizable in the future. I was also able to grab both the User's location at sign-in and the Businesses' locations upon creation. Up next, I'll use Map Box to place Businesses on the map just like Yelp!

I spent the last part of the day with FactoryGirl and Faker. I now have some impressive seed data with 100 users, 50 businesses, and 150 reviews. There's still a little refining left to be done. I need to add images to Users and Reviews, actual locations to Businesses (not Fake ones), and proper content to my Reviews. Then, I should have an awesome looking site...well except for the styling...but that's coming. I also corrected a problem where review seed data was not correctly updating the business ratings. I moved the update call from the create action in the review controller to an after_create method in the review model. Wallah!

Other notable items on my to-do list include: porting features to Backbone, styling CSS, and of course adding Javascript. There are a number of smaller features to add as well: a demo account, buttons to automatically fill in forms, more flash messages, a tour, user notifications, and confirmation emails.

Oh, and I can't forget to buy that domain name!

Well, it's almost time to break the fast so I'm off to eat some grub and catch up on some zzzzzz's.

GrizzlyOne out.

[winevitable]

Day 40

One more week to go until we enter the employment phase. I've made a lot of progress with YelpLite, but I'm anxious to get more done over the weekend. It's fulfilling to have this thing that I've created out there on the web at YelpLite!...it's like a little, breathing me...okay, well not really, but it is pretty cool and I am immensely proud of the little guy.

Today, I finished implementation of the Review resource and rendered Reviews on the User and Business Show Pages as well the Home Page. The Home View actually only shows the most recent activity. I also made some changes to the Business Controller to allow for users to submit a Review when they create a new Business.

Of course, there were also a ton of bugs to fix...those little critters love to multiply overnight...but now my app functions on Heroku! I added a couple other little features to improve usability.

The best part of the day was implementing Search and Pagination with the pg_search and kaminari gems. While my search feature is not yet hooked up to geo-location (a task for the weekend), users can search among Businesses and Reviews for terms of their choosing. Pretty cool!

Over the weekend I hope to incorporate Paper Clip and S3 for photos, Oauth for both Facebook and Twitter, and of course the geo-location. Then, it will be time to start Javascript and CSS...

It was great seeing everyone's progress today and I can't wait to see next week's products. We've all come really far since we started out. It's hard to fathom the changes we've endured.

Have a great weekend!

GrizzlyOne out.

[winevitable]

Day 39

Day 2 of my final project...I spent the morning cleaning up yesterday's code, fixing a few bugs, and implementing Rspec tests for my User and Business models. By the end of the afternoon I was able to build out most of my Review model's functionality. You can now create, edit, and destroy reviews. There may be a few kinks left to address and some views to dress up (like actually having a means to delete that nasty review you left when you were recovering from food poisoning), but most of the features are there.

The project is pretty exciting at this point. While I'm a little disappointed that I couldn't accomplish everything I wanted to tackle today, I spent the morning fixing/building out some very important and unforeseen aspects of my project. Such is life!

I am also thrilled to have a rating system up and running. Reviews are now displayed with their ratings and affect the average rating of a business. Now, I just need to build out some searches! Then, it might actually be able to pass for Yelp...well...you know...minus the shiny exterior, but that will come.

I also want to incorporate Paper Clip and S3 for photos and I have to plug in Google's API to place the businesses on the map. Then, we can implement Facebook/Twitter logins. After that, it's time to do some sexy styling to the front-end.

All-in-all, I'm making good progress despite missing a whole day. Only another month and we'll be thrust out into the world to fend for ourselves...

GrizzlyOne out.

[winevitable]

Day 38

We've started work on our final projects and oh man is it awesome! I've chosen to clone Yelp and it's been smooth sailing so far, but I do have a lot of ground left to cover.

So far I've been able to implement a basic user authentication scheme with BCrypt and have fleshed out both the User and Business models, controllers, and views. Now, the coding is not elegant and refined...but it's functional and a good start. Hopefully, there will be time to smooth out the rough edges in the future.

Up next, I need to build out the Reviews resource, implement searches, and incorporate the Google Map API into the Business resource. There also the imperative to add images to both the User and Business resources with Paper Clip and S3 and add an admin atribute to the User resource. Also, I can't forget to ensure Figaro is protecting my valuable data.

This whole process has been empowering. I tell you when I sat down this morning with a blank slate and what felt like a mountainous task in front of me, I balked a bit. There was definitely an "oh shit" factor, a moment where the project felt hopeless and that all had been for naught.

The best part is that, after persevering through that moment of dread and stagnation, I was gifted with a sense of ability, of power. I honestly left the office today feeling like I could tackle any task put in front of me. Maybe not immediately, maybe not overnight, but with time, practice, and hard work. That, my friends, is one of the best feelings in the world.

Here's to that moment and to our futures.

GrizzlyOne out.

[winevitable]

Day 35 - Attack of the Clones

We closed the seventh week with a day of CSS spent cloning the front end of web apps. Cloning foreign code can be both fun and frustrating.

On the one hand, working with layouts and designs is a visually rewarding process: you can readily see the result of your code and enjoy the final product. At the same time, however, in cloning another person's work you are forced to follow their line of thought.

For example, if they want to use wacky, obscure colors you are forced to find the appropriate color codes. Now, this alone isn't that hard, but the process becomes increasingly more complex as the complexity of the design increases. You may be working with layers upon layers of styling and digging to the bottom of that voluminous pit can be exhausting.

Also, remember that many front ends start as amazingly simple and somewhat remedial projects. Then, over time they evolve into complex beasts that have been passed from developer to developer. To try and copy one of these designs accurately in a short amount of time is to attempt to encapsulate years of effort and ingenuity into a single moment. It just isn't going to happen. Though you can come pretty close.

GrizzlyOne out.

[winevitable]

Day 34

Views inside of views and my head hurts... Today was probably the toughest day of Backbone. We were working on a clone of Trello - a pretty nifty app for organizing information online. The concept is not altogether overwhelming, but requires quite a bit of nesting.

You have a board upon which you place lists and then each of those lists has cards - like items in a to-do list. You can of course share lists with other users on the site. Pretty simple, right?

The difficult part lies in compiling all of this information on a single page using Backbone. You end up having a number of models and collections which are all interconnected in some way. Then, you have to update each accordingly as cards and lists are added and deleted.

For a newcomer to Backbone, handling the collections and views can be a bit intimidating. Still, I think this was a great experience and stretching one's mind is always a great way to grow as a person and a programmer. I definitely want to implement some more Backbone in the future although I hear that Angular and Ember are even easier to use.

Well, tomorrow is our CSS day where we clone the front-end of various apps pixel for pixel. I'm excited for this experience. It's an area we haven't touched on a lot in our coding work so far, but then I would also say it's not as complex and abstract. With CSS, you can readily see the results of your work and are not left handling invisible queries, responses, and other actions from the back end.

GrizzlyOne out.

[winevitable]

Day 33

Another day in Backbone. This time we developed an RSS Reader which links to any number of RSS feeds. It then displays the latest entries (< 30 seconds) of that feed upon request.

This time around we implemented a viewSwap helper method in our router to assist in the garbage collection of old Views by removing any listeners attached. Taking this precaution prevents memory leaks where the user's browser slows down as the number of views and listeners adds up.

We also made sure to only fetch once in our router thus avoiding unnecessary database/server queries. We then installed listeners to listen for sync and removal events on our collections and models. This way we only interact with the server when we absolutely have to.

All in all, Backbone is a lot of fun and I can see myself starting to get the hang of it. Only a couple more days with JavaScript and we'll be moving on to our final projects...

GrizzlyOne out.

[winevitable]

Day 32

I actually had to stop and check how many days have elapsed. Wow! We have learned so much and come so far in such little time. I actually feel like a developer now. Before this course started, I was just a guy learning how to code a web application. Pretty soon, we will be working on our final projects and applying for jobs. :)

Today was the first day with Backbone. It is a lot like Rails and feels like coding in a different dialect. Of course, it is built with JavaScript - not Ruby - so maybe less like a different dialect and more like a translation. We are after all trying to do many of the same things Rails does, but on the Client-Side of the process.

I am no stranger to Client/Server discrepancies. Having been a part of the eSports movement and with hands on experience as a professional gamer, I can distinctly recall groans over latency, de-syncs, and client-side information processing.

For example, in video games many actions are carried out on the client. If say, I'm playing a first-person shooter and spot an enemy, I would then be able to hit him where he is on my screen (the client side). With the delay in information sharing over a server, the enemy may think he is safely behind cover (and, in fact, on his screen - his client - such may be the case) when he is in full view on my screen. Thus, I can still shoot and hit and even kill him. Then, he will die on his screen behind cover or around a corner.

Such situations have induced much frustration and caused many keyboards to be broken and inappropriate messages to be sent. The same can be said for code and web applications. The two situations are not wholly dissimilar. Let's look at some examples to illustrate this point.

When using client-side code (JS), one can update a model on the client, but the corresponding model on the server in the database does not automatically follow suit. That model may in fact never be updated if the appropriate code is not written and then a full page refresh could result in the original, unchanged model being displayed...a bit like a de-sync between the client and server.

Also, in displaying a model, we would, at some point, need to fetch that model from the server. Of course, we want to limit the number of these fetches, but that is a separate issue. Say this is our first time fetching. The tricky part of JavaScript is its asynchronous nature. If we simply include a model.fetch() on the page, the rest of the code will not wait by default. The result? I attempt to display a model and its attributes before the fetch has completed and so nothing is displayed on the page.

So, when we are working with client-side code, it's important to remember that we have to interact with the (sometimes slow) bumbling beast known as the server. We don't want to interact too much thus slowing our app down. We also have to be careful not to communicate too little and risk inaccurate data handling. Then, when we do interact with the server, we need to pass the correct data while allowing for delays in the completion of our requests.

After that, it's all curly brackets and semi-colons.

GrizzlyOne out.

[winevitable]

Day 31

Another week, another assessment. It's hard to believe there's only one more week before we start with final projects. Though, the thrill of the thought is pretty exciting.

We spent the day working client-side instituting a limited version of Backbone.js with the help of underscore. It was hard work, but rewarding nonetheless.

[winevitable]

Day 30 - One Page...

We spent the day working with JQuery and Ajax. Yay!

Now, instead of always having to refresh the page or redirect the user to a new page, we can simply use an Asynchronous Javascript and XML HTTP Request to update data on the current page:

One Page to rule them all, One Page to find them, One Page to bring them all and in the darkness bind them!

This way, if say we want to have a live feed updating at regular intervals somewhere on the page, we can do so without interrupting the user's other activities. Of course, the possibilities for Ajax inclusion are endless and many contemporary webpages are converging on a single-page design for increased usability.

Once you get the hang of it all, Ajax can be a lot of fun and I can definitely see using it a lot in the future. I'm not entirely convinced that all webpages should be single-page applications, but cutting down on the total number of pages is definitely a good thing and can lead to some really cool designs.

GrizzlyOne out.

[winevitable]

$(Day 29).ready(function(levelUp){ fireBoosters();});

I've been having a blast with JQuery and that money function!

After working with JavaScript, Sr. for three days, JavaScript's little brother is amazingly easy and intuitive to use. I can see why people will often learn JQuery first and then plunge deeper into JavaScript only after they've gained a solid foundation.

The one rough patch (seems to be a common theme here) came in the beginning when I was learning how to connect our JQuery file with the JavaScript game library and the index.html.

Once, you wrap both sets of code in self-executing functions within their own files (a.k.a. libraries) and load them both into the html file with script tags, you can pass one library to the other via the constructor function. For example, in our Hanoi JQuery file, we initialize a new version of the UI by feeding it a new Game object holding the underlying JavaScript code.

From there it was smooth sailing altering the game.run() and turn() functions to work with user input delivered via JQuery event handlers and click listeners. It was a really rewarding experience.

Well, I lied, there was a second rough patch with the visual implementation in our Towers of Hanoi game. We ended up with a really awesome design for both Hanoi and our Tic-Tac-Toe games, but only after struggling with spacing multiple columns on a page.

We knew how to arrange the Tic-Tac-Toe grid - as an un-ordered list of nine list items. When it came to Hanoi, however, there were only three blocks not nine and they could end up in different columns in different combinations. It turns out the solution was right in front of us the whole time: hidden blocks. We were looking for a more elegant solution to floating html objects down within their containers when we simply needed to create enough invisible blocks to fill up our 3x3 grid.

All in all, I learned a lot (as usual) and had a ton of fun working through the projects with Spencer today. Now, time for some assessment practice - number 5 is scheduled for Monday.

GrizzlyOne out.

[winevitable]

Day 28

Today was a rough day as JavaScript is brand new to me, but I learned a lot about it with the help of my partner, Ling, and after struggling through Asteroids I feel much better about things. The syntax is finally coming along and I now know how to share files in both node.js and the browser. Both cases will have the following structure in common:

(function(variable) { var LibraryName = variable.LibraryName = (variable.LibraryName || {}); var Constructor = LibraryName.Constructor = function(args) { //function code }; Constructor.prototype.method = function(args)... })(this);

Here, we wrap all of our code in a self-invoking function - denoted by the outermost parentheses. This function is called with the variable 'this' which in the browser refers to the window object and in node.js refers to the root object.

One difference between the two environments arises in sharing information across multiple files or libraries. In the browser, we require all of our .js riles with "script" tags in our html document. Then, each library, each LibraryName, will be available as a top-level variable in each of the shared .js files as well as the browser's console window.

For example, if we are in another .js file shared with the one shown above, we would instantiate a new instance of the Constructor by typing:

var ourVariable = LibraryName.Constructor (args);

In node.js, we need to add additional code to each of our files. First, we need to export the library like so:

module.exports = this.LibraryName;

This line set the module.exports object (which is initially a blank object) to the library. Then, in our second file, we would set a variable to that file like this:

var ourVariableModule = require('firstFileName');

Now, we can access all of the information packaged up in the first file by calling items on ourVariableModule.

Well, that's just the tip of the iceberg. There is a lot more that goes into JavaScript, but that will have to wait for another time. Right now, I have to get back to the books and study up some JQuery for tomorrow.

Good night and good luck!

GrizzlyOne out.

[winevitable]

Day.27()

We did it, we made TowersOfHanoi and TicTacToe in JavaScript. I'd say the biggest difference lies in handling user interaction. As JS is asynchronous in nature, you can't simply loop through code gathering up input along the way - else all of your code will execute without waiting for the input.

Instead, we used if-then conditional statements and recursive calls to loop through our Game.run() functions. It's an alien experience, but I can see getting the hang of it soon. Up next we're creating Asteroids which seems like a million light-years ahead of where we are today. Before, long it's going to be time to build a full-fledged app.

Exciting! Now for some eucalyptus leaves...

GrizzlyOne out.