epetersallday - Tumblr blog

[epetersallday]

AA w9d3 - Facedoge d8

Most of this day was divided between implementing likes and implementing a photos page on the user's profile.  Likes were simply a join table for each resource, in my case posts and comments, that associated the resource with a user.  The photo page took longer than expected, and is a work in progress.  Most of its work is centered on styling and using Bootstrap's modals to display a photo.  There were several small stylistic changes I made around the site, and a bug where some anchor tags were 20% of their containing elements' width (invisible div overlapping them, preventing link clicking).  The changes I've been making have been increasingly minor, but the next significant thing I'm going to do is make a friend request pane.  After that I have a list of bugs that need to be taken care of.

[epetersallday]

AA w9d2 - Facedoge d7

Besides making a bunch of minor changes to pieces of the site, I fixed a lot of problems with Backbone renders, and reorganized user profile pages.  I implemented a profile edit feature that allows users to make changes to their profile information, by having a button on the current user's page to swap the view out for one with some input fields.  On clicking a button that says 'submit', the new information is sent as a "patch" request to the server, which changes everything, and when that finishes the page re-renders with the original view file, all without any page reloads or refreshes.  Near the end of the day I started a photo upload feature using Filepicker.io, which offers a handy file picking modal, although it isn't finished yet and there are some bugs I still have to fix.  The project is a little more than 3/4 done.

[epetersallday]

AA w9d1 - Facedoge d6

Today I made the site look better with CSS.  With a lot of trial error and google searching I came up with a pretty good look for posts and comments.  I made a sign up splash page similar to facebook with a form to sign up and a form on the header to log in, which will always show up from any URL if you aren't logged in.  I created a bar on the side to show current friends (later, online friends), that sticks to the side, like it does in facebook.  There wasn't a lot of debugging today.  Now that I have a framework for the site's appearance I'll continue adding functionality, so tomorrow I will add photo uploading and post liking, and a bunch of other minor stuff.

[epetersallday]

AA w8d6-d7 - Facedoge d4-d5

Over the weekend I spent a lot of time cleaning up a mess I had in Backbone for user profile pages.  Instead of blindly fetching models and collections for everything, I cut back a few fetches to the view's initialize function and removed some extra listeners.  It wasn't a huge change, and it took several hours given how non-linear Backbone is with asynchronous Javascript, but it was necessary in order fix a slight error where two of the same posts were rendered twice.  There were some inconsistencies between the current user profile page and any user's profile page, which required a similar cleaning-up process to debug.

I also created a Feed page that shows all recent posts from friends, sorted by time and stacking downward, like facebook, and I added the ability to comment on posts.  The feed was another mess of duplicate renders but easier to clean up with my previous experience.  Comments were simply another database, like posts, to hold a body of text, an associated user, and an associated post.  In order to avoid a separate API route for fetches I had to nest comments within post fetches, which were already nested within user fetches.  It was tricky but I figured out how to use jbuilder to set this up in the fetched JSON string, and parse it in Backbone.  The site is still pretty bare since I've been holding off the CSS work in order to add functionality, but that will be worked on tomorrow.

[epetersallday]

AA w8d5 - Facedoge d3

This is a late blog but, the main features added on Friday included profile pages with additional user information, the ability to make posts, and some tweaks to the view file for a user model.  Profile pages existed before, but existed as nothing but some text with the user's email displayed.  I changed this by first adding a new database for user profile information, such as first name, last name, username, and bio.  Normally for resources the next step would be to set up the controller and make some views, either in Rails or backbone, but profile information needed to be tied to the user.  I also wanted the user to be able to enter it on sign-up.  This meant I had to change the new user form to take in new information and create a profile object to be tied to the user.  There still needed to be a profile controller, but its only purpose is to update profile information, if someday in the future users are able to make edits.

The next thing I did was create posts, so a user can write something and have it appear on their page.  This needed another database to store its information, body and associated user.  Instead of testing posts with a server-side setup, I decided to just go forward with building them in Backbone, since testing friendships server-side had taken some time.  I created the server-side controllers and had them return JSONs for post objects on Backbone fetches, for things like create and show (I'll add post delete and edit functionality later).  After that I made the Backbone model, collection, and views.  I set up the post view file to include its user view with it, so that every post has its user's name (a link to their profile) attached to it.  That was working fine, until I remembered posts needed to belong somewhere, like its user's profile page (at least until I allow wall posting).  And for that to work, Backbone needs information about the current user.  Because sign up and sign in is still handled on the server, Backbone never knows who the current user is.  In order to bypass this I was originally setting up a separate url route for the server to return the current user object, which Backbone could make fetch requests to.  This was a very bad idea because it meant at least an extra fetch per page, just to get a user object, and the possibility of an additional fetch if this needed to be a specific user model.  It's all still very shaky at this point, since I don't know any of Backbone's tricks for optimizing things, just basic stuff.  But I found a workaround to the current user problem by using a ruby gem to store a cookie containing the user's session token on sign in, which could be grabbed with a line of jquery and used to get the appropriate user model.  One less fetch.  

[epetersallday]

AA w8d4 - Facedoge d2

Most modern web applications today involve the use of single-page interaction.  This is accomplished using Backbone.js, which makes it slightly easier to send background requests and update a page's information without issuing a redirect.  For Facedoge I'm attempting to make as much as the site 'single-page' as possible, including friend requesting/confirming that updates on the page and doesn't need redirects.  This turned out to be a big challenge, since friendship resources as I set them up are already pretty complicated - each user in the database "has_many" friendships, which is a table with two columns representing a sender and a receiver of a friend request; each row is a friendship, the presence of two rows between each user that represent two directions will be indicative of a confirmed friendship.  Before attempting to structure this on the client's end in Backbone I had to create a simple interface in Rails on the server's end (with redirects) to make sure the server side friending logic was working.  Then, to get this over to Backbone I had to create users and friendship collections to hold information for the client, and make view files filled with a whole bunch of database fetch requests to make sure the buttons and everything were updated.  That was day 2.  You can now friend/unfriend people like you can on Facebook.  All of the time I spent on that was probably worth more in learning than the actual feature but at least one of the biggest challenges of Facedoge is done.

[epetersallday]

AA w8d3 - Facedoge d1

Today I began development on Facedoge, a website I envisioned for my final project at AA, combining Facebook and the famed doge.  My planned features for it include user profiles, adding/removing friends, making posts and viewing others' posts, making comments, and uploading photos.  The idea of this project is to apply everything I've learned here into something more industry standard, and have a neat portfolio item at the end.  It's going to be a lot of work, but something functionally similar to Facebook would need SQL databases for user, friendship, and post resources, as well as Backbone.js for single-page functionality, HTML and CSS for page structure, Bootstrap for styling, additional Javascript for pretty effects, all wrapped in Rails framework written in Ruby, and hosted on Herokuapp.com.  This includes most of what I've learned here, and is relevant to many modern web apps, so it should be worthwhile.  Today I created basic user authentication with signing in/signing out pages, and began work on friendship resources.  Friendships turned out to be a more complicated resource than I originally thought, so I needed to spend a lot of time planning out the best way to make them happen using databases.  I also needed to figure out how the server-side friendship database would interact with Backbone on the client side.  It still isn't completely there yet but I got a chunk of the Backbone framework set up.  That should be done tomorrow.  The project should be mostly done in a week.

[epetersallday]

AA w8d1

Today, Friday, and the weekend, I worked on creating a clone of Trello, a project management site that allows you to create boards to organize lists of cards, which are basically todo items.  This app is a good example of the use of pseudo-inheritance in client side resource management, which is done over collections and views.  Instead of nesting routes, each resource has a separate route in Rails all joined in a namespace, and requests to get information for those resources are all taken care of in json strings.  In order to access a nested resource in this setup, the parse function for the parent js model needs to be overwritten, so that when the json is processed, its nested resources are manually added to the correct collection.  Once in the collection it can be fetched and processed by views, which makes the single-page app work.  Using this knowledge to create an app like Trello seems pretty straightforward, except at this point Backbone development for me is still 90% debugging.  Using Chrome dev tools is very helpful in tracking where information goes and what causes things to go wrong, so at least I am very well versed in dev tools.  I also learned how to use JQuery UI to create a drag and drop effect for card items.

[epetersallday]

AA w7d4

Today I learned how to use Bootstrap to create nice looking web pages without having to write CSS stylesheets or even know how to make a web layout using <div>'s.  Doing this is as easy as including a 'bootstrap sass' gem and knowing a few cool bootstrap features.  For example a great feature right off the bat is a navigation bar, which can include several links to different pages using an unordered list with anchor tags inside.  By default it stays at the top of the page, but it can be configured to go anywhere, include a search bar, use drop downs, orient vertically, or anything else a modern website might include.  Bootstrap has tons of extras like a carousel, a jumbotron, alert messages, pop up messages, something called a scroll spy, and more.  Using it well is simply a matter of knowing what it can do, and how to do it.  In addition to these neat features, there are several free themes that will change the overall look of the page and the features it has.  The only disadvantage to Bootstrap is that everyone uses it, and once you recognize the default look you start to notice how prevalent it is and which websites just threw it in without changing the default.

[epetersallday]

AA w7d3

Today was an additional exercise in Backbone, creating an index to display entries from RSS feeds.  I learned how to first of all, what RSS feeds are and how they could be used for something like this.  I learned a few tricks to clean up a web app using Backgone, like to use .escape(attr) to get an attribute from user input, instead of .get(attr), because .get doesn't account for the possibility of users injecting potentially harmful html into the web app, which .escape takes care of.  I learned that simply creating a new instance of a view on each new page render is not ideal, and that these views just stay around somewhere in the Javascript ether, listening to render events but not being rendered and taking up memory.  The solution to this problem is to make sure an instance exists first, and to destroy it and use a .stopListening method on the view to stop its event listening.  I also learned how to use Bootstrap to have near-automatic CSS styling for pages.

[epetersallday]

AA w7d2

Today I learned how to make a basic Backbone application with resource management and view rendering done on the client side, in a few short steps:

First, you set up Rails model databases for some resource (e.g. a post with your basic CRUD - create, read, update, destroy, plus an index for all posts), this will need the appropriate routes, and a controller to define them.  Because these aren't going to be rendered server side, every post should instead be rendered to JSON on successful CRUD actions.  The application.js file in /app/assets/javascripts/ needs a few requires like jQuery, Underscore, Backbone, etc., but these are taken care of if you run the command rails generate backbone:install --javascript.  With everything prepared, we create a namespace file in /javascripts/, which can be called anything, like post.js.  This is where everything else will be initialized (do stuff on document ready, e.g. $(Post.initialize)).  Now you start by creating models; in Backbone it is best to create stuff in this order: models, collections, views, templates.  Model .js files go in /javascripts/models/, and are created by extending Backbone subclasses, as in window.<namespace>.Model.<resource-name> = Backbone.Model.extend( { ... } ).  The argument here contains attributes we want to add to the prototype.  If our resource is post, the first one we want here will be urlRoot: "/<namespace>/posts".  Any other attributes we add can be accessed by calling .attributes on an instance of Posts.Models.Post().  Attributes can also be set with .set(attr, value), and specific attributes can be gotten with .get(attr).  These methods are useful for testing in the console until we have links and forms set up on the web app for actually creating posts, or whatever resource.  (Also, once you create an instance of a resource in the console, or anywhere else, it needs to be saved to the database with a POST request to the server, which can be done with .save().  Since the resource controller only renders JSON, this should come back with a JSON object of the resource just created.)  The .fetch() method will make a GET request to the server for the url corresponding to the object it is called on, this will need to be done anytime the resources collection is updated and the page needs to display new information.  On the topic of collections, we need to make those next.  This is done similar to models, i.e. created in a new folder /javascripts/collections/, with a name that should be the resource, pluralized.  Likewise the file is headed with window.<namespace>.Collections.<resource-name> = Backbone.Collection.extend( { ... } ).  Inside that JS object, our attributes include url: "/<namespace>/<resources>" and model: <backbone model this should refer to>.  On this collection, if it is set up properly, the .fetch() method can be called on it to make a get request to the resource index.  In response, you get a JSON containing all resources in the collection (hopefully all currently created resources).  It is also a good idea to create a global variable in the namespace's .js file that holds an instance of this collection, so that there can only ever be one.  With a model and collection set up inside a namespace, the next step is to create a view.

I'm going to stop there because it is getting late.  That summarizes about one page of my notes on Backbone web dev, and I have 7 of them.  But that's a good start.

[epetersallday]

AA w7d1

Today I did an exercise in Rails using lots of Javascript to create models and AJAX to update pages without using redirects.  The project allowed photo 'uploads' using image urls, and the ability to click a photo and tag a user, like facebook.  To accomplish this, we used a few models written in Javascript, like Photo, PhotoTagger, and several more.  Each component had a template, like photo_detail.jst.esj, which used html and embedded javascript to render something like an image, a tag box, or a list of users to tag.  I learned a lot, but nothing solid big picture wise.  Using jQuery and Javascript to handle everything on the client side and using Rails only to passively create databases, models, and routes, is difficult to pick up, because everything depends on using the right request on the right element and understanding the context of everything in every file.  Besides the project I'm learning how to use Backbone.js to handle model creation more easily, with most of what we did today automated.

[epetersallday]

AA w6d4

Today I learned all about jQuery.  It's a framework based on Javascript that can be used with HTML and structured with CSS to find and interact with objects floating in the DOM (Document Object Model), contained on a webpage.  I learned the syntax and basic functions for it; in general, jQuery is used in your typical JS file by assigning jQuery objects (prefixed with $) to things found with specific types, like <div> or <body>, or classes or id's assigned by CSS.  There are also several methods that can be used for events like 'click' and 'mouse enter', which use callbacks to do things with passed in HTML elements.  Today, I harnessed this great pretext of knowledge, utilizing and combining different languages across multiple files, to make Tic Tac Toe appear on a webpage.  We also made the Hanoi puzzle game with not only advanced dragging capabilities, but  dropping capabilities as well.

[epetersallday]

AA w6d3

Today I made Asteroids in Javascript.  This was one of the first projects to use a graphical user interface; we used HTML's built in canvas functionality to draw shapes and animate and whatnot.  There are several methods provided by canvas that allow you to create a drawing space, clear it, and draw shapes.  These methods refactored into 'move' and 'draw' functions for objects in the game (and the window.setInterval function allowing for game steps) made for a simple design with easy game logic.  In Javascript I learned you can create a pseudo-namespace like 'Asteroids' with a basic ||= object declaration to link multiple files on a single shared object.  Everything else was standard OO design, with a base file called 'MovingObject' and the necessary components needed for the game.

[epetersallday]

AA w6d2

Today I got more practice in Javascript, in implementing a bubble sort function without using loops, but instead using callbacks (calling functions passed in as arguments).  Since the bubble sort had to also prompt the user to confirm each comparison, and prompts in Javascript need to be done with callbacks or the program breaks (asynchronous language), the finished product turned out to be a huge unreadable mess.  It did work though, and I learned a lot about callbacks.  I learned that the 'this' call to the current object will change with each nested function, so if you need to use 'this' inside a nested function you need to do something like 'var that = this' prior to defining/calling the nested function.  I learned that you can alternatively use 'bind' to directly change what 'this' means for a given function, or 'apply' or 'call' to do the same thing and call the function.  We also built tic-tac-toe.

[epetersallday]

AA w6d1

Today was the first day of Javascript, but it wasn't completely new material, since I had gotten a lot of practice on the neat little website Codecademy, plus I know and have practiced a lot of Java.  As it turns out the two languages are not similar at all.  Javascript was created primarily for the development of web applications that can run client-side and asynchronous (independent of the server and any communication between the two).  Supposedly Javascript was made to be easy for beginners and flexible, with dynamic type conversion, familiar syntax, and basic data types.  However in the 6 or so hours I spent today on practice problems, I've found that Javascript is a nightmare to debug for beginners and often unpredictable when not written with specificity (absence of var preceding a variable switches it to global, ruins a recursive function, who knew).  But I can see how Javascript could be useful given it's the most popular programming language in the world, browser friendly, and has lots of libraries.  There's a lot you need to know about Javascript in order to not ruin everything so I'll be doing more reading on it. To be continued.

[epetersallday]

AA w5d3

There was not a lot of new material for this day, given that there was a long assessment for building Rails apps with user authentication and model associations (users' posts and post tags).  However I did continue work on the Friends' Circles project and got a much better understanding of how to use has_many :through associations in Rails and how to correctly pass the correct information in params so that the associated objects know they're associated with one another.  I also got a better understanding of nested forms, and did work on minor additional features.