tobyf93-blog-blog - Tumblr blog

[tobyf93-blog-blog]

Week 6, Project #1

- Discover page showing file list - Geocoder - gon - reverse_geocode with .near class method

[tobyf93-blog-blog]

Week 5, Day 7

- File uploads - File stars on maps - Cloudinary storage - Bootstrap navbar - Edit location page

[tobyf93-blog-blog]

Week 5, Day 6

- Went into GA to work - Signup and login working - Google maps working to set location

[tobyf93-blog-blog]

Week 5, Day 5

Today we covered topics that i really wasn’t sure how to approach but definitely needed for almost all projects - authentication of users and being able to restrict users to certain controllers.

Our app originally started off having user accounts, however these accounts were manually added to the database for simplicity sake.  As no one would be willing to use a site whereby the admin had to manually add them to the system we needed a better solution - a signup form.  Using a rails migration we added a column (password_digest) to store the hashed password that would be the result of a successful signup.  Turns out ActiveRecord pretty much takes care of absolutely everything when it comes to password hashing which is really neat.  The following changes were made to the User model:

# Hash password and store in password_digest field has_secure_password # Ensure no duplicate usernames in the database validates :name, :presence => true validates :name, :uniqueness => { :case_sensitive => false }

Once we had told the model what to do with our sensitive user information we were then able to create a user login:

user = User.find_by :name => params[:username] if user.present? && user.authenticate(params[:password]) session[:user_id] = user.id  redirect_to root_path ...

Another neat feature in the way ActiveRecord handles authentication was the authenticate method.  The authenticate method removes the need to hash the password before looking for a match in the database.  Instead you can just pass it the raw password submitted via the login form and it will do all that for you!  

Sessions are vital to having a website know if a user is logged in/out however i won’t go into much explanation as it’s fairly straight forward.  Store the user_id in a session hash that is unique to all connections.  The ApplicationController then ensures that a user is authenticated before each request.

[tobyf93-blog-blog]

Week 5, Day 4

HAML.  Not sure whether i love it or absolutely hate it.  I suppose time will tell and it’s probably a good move to get some practice with it before making any judgements.  I get that it’s trying to cleanup markup to improve readability but i’m not entirely convinced that it would be helpful in all cases... 

My first thought was “I wonder how bootstrap markup would go being written in HAML”.  I absolutely love Bootstrap, without it i think i would be doomed but i really don’t like how bloated my markup gets as a result of using the framework.  I think that when you get deep into Bootstrap interfaces the markup can quickly become quite overwhelming - classes being thrown around everywhere and a lot of nesting in some cases.  I suppose the only real way of answering that question is to give it a go...

I have also been reading up about solutions for making Bootstrap less bloated.  A lot of people are of the opinion that a CSS preprocessor should be in charge of classes (and in some cases nesting) as it clearly separates concerns.

I think Using Bootstrap the Right (Semantic) Way by Harish Chouhan hits the nail on the head in regards to some of the problems with Bootstrap.

Article Extract: “If you view the source of many sites created using these frameworks, you are more likely to feel that we simply have replaced <tr> and <td> with something like <div class=”row”> & <div class=”col-sm”>.”

[tobyf93-blog-blog]

Week 5, Day 3

- helpers - moma - bookstore - associations - form helpers

[tobyf93-blog-blog]

Week 5, Day 2

- Rails - Intro - Helpers - CRUD - Planets - Mountains/oceans - migrations - routing - controller#action

[tobyf93-blog-blog]

Week 5, Day 1

Today was probably a big day for a lot of people that haven’t had any previous backend experience.  Up until now we have been using Sinatra to create applications that don’t require data to persist in a database.  For example our Movies app simply made use of the OMDB API to provide users with information about a particular movie.  Unfortunately you cannot get very far in the real world with something as simple as this.

That is where ActiveRecord comes in.  ActiveRecord essentially acts as a middleman between the application’s model(s) and the database.  The beauty of active record is that it reduces the need to write your own SQL queries to read/write to the database.  From the applications point of view, records are simply objects with properties (columns).  Although i don’t mind writing SQL i find it amazing as to how this sort of architecture operates.  Furthermore the SQL that ActiveRecord does produce is a lot more secure than i think i would be writing anyway.

After the introduction of ActiveRecord it was obvious that our movie app needed a bit of refactoring.  The problem with our original app was that EVERY request from the user meant that an additional request (sometimes multiple) had to go out to OMDB to fetch our data - that is terrible.  What i ended up doing was creating a simple caching method whereby my database would store movie data that had previously been fetched, eliminating the need for API calls in some cases.  Many people dedicated database fields to certain bits of information about a movie.  I took a different path.  I didn’t want to restrict myself to certain bits of information from what was returned from OMDB.  Instead i stored the hash (serialised using JSON) directly in my database.  That made reading and writing data extremely easy in my opinion.

[tobyf93-blog-blog]

Week 4, Day 7

Today was good and bad.  In the morning i decided that to put my sinatra skills to the test i would create a Facebook Top 10 app.  Essentially what myspace used to do whereby users could pick their top 10 friends.  

The first thing i had to do was to allow users to login to my app using their facebook credentials.  After creating an app on https://developers.facebook.com/ i integrated a facebook login button into my views.  I was able to setup my javascript to listen for a facebook authentication response (triggered after a user logged in) and retrieve the access token that FaceBook returns.  The purpose of an access token is to allow applications to make API calls on the users behalf e.g. publishing a post saying “Wooo!  I just started using Facebook Top 10.  You should check it out!”

As well as using the access token to make API calls via javascript, i also discovered that it was extremely easy to pass it onto the server and have the server make API calls as well.  My theory was that if i allow users to login and retrieve their token, i would then be able to pass it onto sinatra and have it render a page listing all my facebook friends.

Here comes the bad part!  Facebook has recently the results changed from a friends list query.  Previously you were able to get a full list of your facebook friends - i know this because i used it quite heavily in an app i was developing a couple of years ago.  Facebook now returns a list of friends that have also granted permission to the app.  This means for this app to work i would have to convince all my friends to grant permission or at the very least my top 10 friends.

So i think i learnt quite a lot in terms of the way the Facebook JavaScript SDK works - creating/using the FB object.  I think this will definitely come in handy when i want to integrate a facebook login.  But i was quite letdown by Facebooks recent changes to their API...

[tobyf93-blog-blog]

Week 4, Day 6

Today started with some light reading - Eloquent Ruby.  Chapter 1 was about writing code that looks like ruby.  I wasn’t introduced to any new concepts but it was good to have some of the languages conventions drilled into me some more.  The authors of this book are definitely strong believers in writing clean code that doesn’t require comments.  I think ruby is particularly good at achieving this type of code and i really like that because i find having comments all through my code can make it somewhat unreadable and cluttered.

Towards the end of the day i began some design work on an airbnb clone.  I’m thinking of working on this project from here on in and hopefully have something quite substantial to submit for my final WDI project.  I haven’t done terribly much but i’ve created a nice little homepage using bootstrap.

Actually one more thing that is bothering me with bootstrap - the amount of bloated markup that it produces.  This Article pretty much sums up what is getting on my nerves.  Harish Chouhan (author) takes you through his web dev journey and explains why tables and inline styling are no longer used - separation of concerns.  He then points out that Bootstrap is bringing that sort of habit back into our markup to some extent.  Read the article if you’re interested in a solution to bloated markup with Bootstrap...

[tobyf93-blog-blog]

Week 4, Day 5

Today we got stuck into some real backend stuff - databases with SQLite.  My first impression of the DBMS was “Yep.  It’s definitely lite”.  Coming from a mySQL background there is a lot that has been left out of SQLite but i suppose there are good reasons for that.  The thing that is good about it is that it uses a single file to store data and is 100% portable.  It also doesn’t use a client-server architecture so there is literally no setup/administration involved in getting a database up and running.  Definitely easier than trying to deal with rubies I/O operations to store user data.

This DBMS was later used to create our first sinatra app with a backend.  Of course the theme for this part of the course was butterflies haha.  We ended up with a basic CRUD system where users could:

Create butterflies with a name, family and image path

Read the database to display a list of butterflies

Update (or edit) butterfly info

Delete the fuckers

The end of the day consisted of a CSS presentation from a guy by the name of Brice.  Brice took us through some helpful CSS properties such as animation, transform, box-shadow, text-shadow.  He also went through flex boxes which is somewhat controversial in the web development world so i’m not sure that i’m ready to go down that path..

[tobyf93-blog-blog]

Week 4, Day 4

The REAL web development has now begun.  None of this command line shit in ruby.  We are now being introduced to web development concepts that Rails will later utilise, starting with request routing.

Routing is used to control the flow of the application based upon the GET request made to the ruby web server.  

Example 1

get '/calc/multiply/:x/:y' do  @result = params[:x].to_i * params[:y].to_i  erb :calc end

Expecting users to utilise the calculator by passing specific numbers as part of the URL (explicitly).  For example www.domain.com/calc/multiply/2/3 is expected to display a webpage with the result 6.

Example 2

get '/calc' do @x = params[:x].to_f  @y = params[:y].to_f @result = case params[:operator]  when '+' then @x + @y  when '-' then @x - @y  when '*' then @x * @y  when '/' then @x / @y  end   erb :calc end

The above example is a lot nicer because it means that the user doesn’t have to worry about the format of the URL.  Instead, they fill out a form and on submission the form will make the GET request for them.  In this case they would fill out a form with 3 text fields - number 1, operator and number 2.  The name attribute on form elements directly correspond to what is populated in the params hash.

You might be wondering what the erb business is about.  erb :calc tells ruby that a view needs to be rendered.  :calc corresponds to the calc.erb file in the views directory.  This introduces the concept of Controllers and Views.  Our main ruby file is concerned with the business logic of the application.  The view (or erb file) simply uses data that the controller prepared to display to the user.

When we get into Rails i’m pretty sure routes will be totally separate to controllers but in these simple cases they are conjoined.

Our homework tonight is to use the HTTParty gem to send a GET request to another API and analyse results.  The OMDB (Open Movie Database) will be used to create a simple movie app.

[tobyf93-blog-blog]

Week 4, Day 3

- Demos - OOP - attr_* functions - Getters with ‘=’ suffix

[tobyf93-blog-blog]

Week 4, Day 2

- Arrays - Hashes - Lab

[tobyf93-blog-blog]

Week 4, Day 1

- Demos - Ruby - Data types - Vars - Conditionals - Control structures - Arrays - Hashes - Functions - Ruby Monk - ! and ? functions

[tobyf93-blog-blog]

Week 3, Project #0

This week was our first WDI Project!  We had to adhere to the following requirements:

Render a game board in the browser

Switch turns between X and O (or whichever markers you select)

Visually display which side won if a player gets three in a row or show a draw/"cat’s game" if neither wins

Include separate HTML / CSS / JavaScript files

Stick with KISS (Keep It Simple Stupid) and DRY (Don't Repeat Yourself) principles

Use Javascript for DOM manipulation

Deploy your game online, where the rest of the world can access it

Use semantic markup for HTML and CSS (adhere to best practices)

The way in which i approached this project was pretty much backwards to everybody else.  I knew that i would be able to get it up and running without too much trouble so i went straight ahead with a bonus of creating an AI smart enough to analyse players moves to ensure they can never win.  Although this feature sounds boring it gave me the opportunity to work on a really complex algorithm.

The minmax algorithm works by creating a tree with each node in the tree being a theoretical board position.  Once the tree is fully compiled, each game state is analysed and the result is pushed up to each parent node until all results get bubbled to the top.  A typical first AI move will involve analysing the following datasets:

[-10, -10, -10, -1, -10, -10, -10, -10] ["01", "02", "10", "11", "12", "20", "21", "22"]

Where the first array represents the possible scores and the second array represents the moves that correspond with each score.  Win = 10, Draw = 0, Loss = -10 and Undefined = -1.  

In this case the optimal move for the AI would be “11” as every other move would later result in a lose.

Game hosted at http://tobyf93.github.io/WDI-Project-0/

[tobyf93-blog-blog]

Week 2, Day 7

Today i felt like i had enough knowledge of angularJS to attempt to re-do the ga-bank app using the framework.  The way in which i designed the app was using three controllers: MainController, CheckingController and SavingsController.  The MainController creates a scope with two variables for each of the account balances and two methods (deposit and withdraw).  Nested within the MainController were the other two controllers.  By nesting them they were able to reference anything in the parent scope.  See example below.  Method implementations have been removed for readability.

Controller Implementation:

atmModule.controller('MainController', function($scope) { // Variables $scope.checking = 0; $scope.savings = 0; // Methods $scope.changeColors = function() {}; $scope.deposit = function(type, amount) {}; $scope.withdraw = function(type, amount) {}; });

HTML Structure:

<div id="content" ng-app="atm" ng-controller="MainController">    <div id="nav">      <div id="logo"><img src="img/ga.png" alt="Bank of GA"/></div>      <div id="title">Bank of GA</div>    </div>    <div class="account" id="checking" ng-controller="CheckingController">      <h1>Checking</h1>      <div class="balance">{{ checking | currency }}</div>      <input type="text" placeholder="enter an amount" ng-model="amount"/>      <input type="button" value="Deposit" ng-click="deposit('checking', amount)"/>      <input type="button" value="Withdraw" ng-click="withdraw('checking', amount)"/>    </div>    <div class="account" id="savings" ng-controller="SavingsController">      <h1>Savings</h1>      <div class="balance">{{ savings | currency }}</div>      <input type="text" placeholder="enter an amount" ng-model="amount"/>      <input type="button" value="Deposit" ng-click="deposit('savings', amount)"/>      <input type="button" value="Withdraw" ng-click="withdraw('savings', amount)"/>    </div>    <div class="clear"></div> </div>

Each of the buttons in the above html are referencing function calls.  These functions live inside of the MainController.  The reason why they don’t appear in the child controllers is because i needed the functions to be shared.  The reason why the child controllers even exist is because i needed (at least i think i did) to create two extra scopes, each with their own amount.  

As this is my first ever angularJS implementation i am not confident that i followed preferred practices.  However it has reduced my code complexity dramatically and i can definitely see what all the hype is about!