Blog Name

What is a CSS Pre-Processor and why should you should use one?

2016-03-03T18:00:00-06:00

This article seeks to explain what a CSS preprocessor is and why you should use it. In addition, I explain my own experience using Bourbon along with Neat and Bitters to style sites. These tools allow for an easy way to maintain modular code in your CSS as well as get a good-looking site off the ground quickly.

One of the main benefits of a CSS preprocessor is its ability to allow you to have more modular code for your CSS. You can have partials that apply to different parts of your application and then load them in with @import. In addition, you can use all of the normal features of CSS and pick and choose from mixins that are available. Mixins are a useful way to get a group of CSS stylings with minimal code. Another main feature is the ability to have variable names. This can be useful for font-stylings or other settings as you can apply a set of styles once and change it out on the fly easily.

There is not a good reason to not use a CSS pre-processor. Mostly because you can style it with your normal CSS but have additional features. A great way to keep your styles organized is with nesting. Sass allows you to nest your CSS styles which makes it a lot easier to keep a coherent grouping. This does not, however, offer any performance benefits but it is useful to reduce complexity of your CSS for large sites.

Bourbon, Neat, and Bitters

Bourbon is a library built for Sass. It includes vendor prefixes and mixins that allow you to write CSS more concisely. Neat is a semantic grid framework for Sass. Bitters is a predefined set of styles and mixins for use with Bourbon. All three of these tools are open-source projects maintained by Thoughtbot.

I had a great time using these tools to style my blog website. The use of partials helped to keep my .scss files organized. It also gave me greater control to style different aspects of my website. The semantic grid system provided by Neat was easy to use to layout content on a page.

Why use Middleman to build a static site?

2016-03-02T18:00:00-06:00

This blog post seeks to explain why you should use Middleman to generate your next static site. Middleman is an excellent tool which shares a lot of similarities with Ruby on Rails. In building a static site with Middleman, you are able to learn a lot of core concepts in Ruby on Rails or transfer your common workflows from Ruby on Rails to Middleman.

First of all, you might ask why should you use a static site instead of something like a Ruby on Rails site. A static site is much easier to host (doesn't require additional server/database overhead other than the files themselves) and often results in performance and security benefits. A static site generator helps in the creation of a static site by allowing you to write code in embedded ruby, use css preprocessors or markdown, and the static site generator will translate the code into base css/html.

There are many concepts with a Middleman site that is similar to rails. Middleman shares a similar asset pipeline along with file structure. In addition, you can continue to write embedded ruby into your files.

Assets

Middleman brings with it an asset pipeline which is very similar to that of rails. We can bring in most of the relevant assets we need through the Gemfile, just as we would in rails.

Partials and Embedded Ruby

We are able to split out parts of our code into partials. We can then use these partials in our html just as we would in a rails project. We can pass in variable values. Data can be stored in a database.yaml file which can be read in and easily updated with new information.

Lessons Learned Solving Problems 1-25 on Project Euler

2016-03-01T18:00:00-06:00

I set out with the goal of solving as many problems of Project Euler as I could in 3 months. Below is a set of lessons that I learned along the way from each set of problems. I decided to approach the problems sequentially and would not move on from a given set until all problems in that set were completed. I had to learn about numerous topics in coding and mathematics in order to complete the challenge. I hope this article will be helpful for a reader who is seeking to attempt a similar challenge for themselves or just a reader who is curious what the journey is like. Below is a list of concepts that I found very useful for the first set of problems.

Prime Numbers

Prime numbers occur over and over again throughout the first set of problems. It is essential to know both how to efficiently generate a list of prime numbers as well as determine if a given number is prime. A prime is a number that is only divisible by one and itself. You can make optimizations to your prime checker by only iterating through 2 to the square root of the number. In some problems, it is useful to cache a sorted list of primes that you can then check to see if the number is in the list.

Factors

Determining factors of a number is essential. Two common ideas that come up are greatest common factor and least common factor. It will be useful to be able to calculate these two quantities and to make use of them.

Test Driven Development

I found test driven development to be essential in order to determine if an answer was correct. Many of the questions often ask for extreme numbers for their problems, but they generally give a simple case when explaining them. Often, you can use that simple case to base a test suite on. Then, you can ensure that you pass the simple case before attempting to generalize or extend your solution. I found coding this way greatly decreased the time spent debugging at the end.

Itertools and Generator Functions

I used python exclusively to solve the first set of problems. I found itertools invaluable for permutations and combintations. In addition, generator functions were essential to quickly calculate values on the fly without having to generate and entire list of all values.

Object-Oriented Approach

I found some problems lent themselves to solving with an object-oriented approach. For example, there was a problem that required use of dates. I found it was easy for me to write this method with an object oriented approach as it was much easier to test each part of the code.

Creating an AI for a turn-based strategy game

2016-01-22T18:00:00-06:00

I recently worked on a turn-based strategy game named Fantasy Wars. We worked with a group of 4 people and completed the project in 8 days. The game allows you to select one of three different races and battle on one of four different maps.

The game was implemented with Javascript and the Phaser framework. Phaser is a framework that aids in game development by providing things such as a State Manager as well as integration with sprites and Tiled. Given the timelines of the project, it was an ideal fit to use something like Phaser which could accomplish some of the groundwork for us. Particularly useful to us was the Game State manager.

Each turn, players are able to select their units and move a certain distance based on the unit's speed and terrain that it is crossing. Each unit has an attack range, which they can then use to attack enemy units that are within range. In addition, every turn you receive gold based on the number of buildings that you own. You can then choose to build additional units from your barracks.

AI Design

When designing an AI for the game, there were some core tradeoffs that needed to be balanced. Namely - simplicity, effectiveness, and flexibility. I explored the possibility of using a minimax algorithm for the AI. A minimax algorithm works by selecting the move that minimizes loss in the worst case. Due to the complexity involved in implementing a proper minimax along with the time constraints of the project (a couple days), I decided to go with a State-based implementation. This would still allow for flexibility of design while greatly reducing the complexity.

In our game, there was a class for the Player. Note that we used protypical inheritence in Javascript to define our "class" structure. The computer player inherited from this class. In addition, the computer player had a mode. This gave us flexibility to implement the AI in different ways based on different situations. For example, there was both an aggressive and defensive mode. The aggressive mode would favor attacking enemy units and moving to capture their headquarters. The defensive mode would favor gaining terrain bonuses and moving to defend their own headquarters. We were initially planning on completing a campaign mode for the initial release, and this would have allowed the computer to assume drastically different behavior for different missions.

The mode class was used as an Abstract class - meaning we would never instantiate a Mode directly. We would only instantiate AgrressiveMode, DefensiveMode, etc. The mode had a couple core methods - such as determineNextMove or determineNextAttack. It was then up to the AggressiveMode or Defensive Mode to implement these separately to override the default behavior.

This allowed us to favor different logic based on the different game states. The mode could be changed on a fly with a call to an updateMode method. For example, if an enemy got too close to our headquarters, we could change to defensive mode. Below is the core piece of code that handles the switching of different modes.


// Computer AI implemented using a Finite State Machine with embedded rules

ComputerPlayer.prototype = new Player();
ComputerPlayer.prototype.constructor = ComputerPlayer;

function ComputerPlayer(army) {
  this.army = army;
  this.active = false;  // boolean to be used to determine which players turn it is
  this.mode = null;
  this.battle = null;
};

ComputerPlayer.prototype.update = function(map, myTurn) {
  this.army.update(map);
};


ComputerPlayer.prototype.handleComputerMove = function() {
  return this.mode.handleComputerMove();
};

// Computer Modes - Aggressive, Defensive, Patrol
ComputerPlayer.prototype.updateMode = function(mode) {
  switch(mode) {
    case "aggressive":
      this.mode = new AggressiveMode(this.battle);
      break;
    case "defensive":
      this.mode = new DefensiveMode(this.battle);
      break;
    case "patrol":
      this.mode = new PatrolMode(this.battle);
      break;
    default:
      this.mode = new DefaultMode(this.battle);
      break;
  }
};

Future Improvements

A turn based strategy game with strategic elements.

There were many pros for using the state-based design. The main benefits were flexibility (for use with missions) as well as simplicity. Some cons were that some of the moves were not optimal and blending strategies together was more difficult (i.e sending half the units to attack while the other half defend).

In the future, the game could be designed with a minimax algorithm. The individual states could also be made smarter to take in account different situations. We could come up with some method to score the game state, and change tactics based on that score.

Dev Bootcamp - my dive into the world of development

2016-01-21T18:00:00-06:00

I recently graduated from Dev Bootcamp, a 19 week intensive programming school for aspiring web developers. I wanted to take some time to describe my journey and experience through the program. A little bit about myself, I graduated with a degree in Aerospace Engineering and shortly after went to work for Epic, a Healthcare Software company. I worked primarily with servers, operating systems, and databases. While there, I found I loved the idea of developing software and decided to join Dev Bootcamp.

Some of the other schools I considered were App Academy and Fullstack Academy. App Academy was free but required you to pay a certain percantage of your first year starting salary. What was unique about Dev Bootcamp was the emphasis on team dynamics and self-improvement. This, along with the location being in Chicago, was the main factor for me selecting Dev Bootcamp.

Going in, I had already heard some great things about the program from some other friends. I was excited to join the curriculum and was curious about what I was going to learn. Others had told me the curriculum was very focused on Ruby on Rails, and I was a bit dissapointed by that going into the program. I would later find that the program had a heavy focus on learning Ruby as a language first before diving into the specifics of frameworks such as Sinatra or Ruby on Rails.

Phase 0 experience

Phase 0 was the first part of the curriculum and featured and online part that could be worked on remotely. I found that phase 0 was a good introduction to the world of coding and its greatest benefits to me were repetition. We also worked on weekly pair programming assignments over Skype which introduced me to the world of pair programming. I found the assignments to be a bit easy but I was able to make things more difficult for myself on my own. The curriculum was quoted to take around 25 hours a week and I found that I spent closer to 12 on the core material each week.

Over the course of the 9 weeks we covered basic ruby syntax, basic object oriented javascript, and SQL. One of the primary benefits for me was the heavy focus on reflection. As part of the assignments, we wrote weekly blog posts on the material as well as refactored code that we wrote for various assignments. Below is a short snippet of the quality of code I was producing at the end of the 9 weeks. At this point we were not following Test-Driven Development principles nor did we have knowledge of Model-View-Controller design.


# class to validate a credit card number in ruby
class CreditCard
  def initialize(credit_card)
    len = int_to_a(credit_card).length
    raise ArgumentError.new("Please enter a valid credit card number") if len!=16
    @credit_card = credit_card
  end

  def check_card
    array =int_to_a(@credit_card)
    last = array.pop
    array.map! {|x| x*2}.push(last) # Double every value but the last
    sum = array.map{|x| (x>=10 ? int_to_a(x).reduce(:+) : x)}.reduce(:+)
    return sum % 10 == 0
  end

  def int_to_a(integer)
    # Splits integer into an array of integer values. Ex: 1234 => [1,2,3,4]
    integer.to_s.split("").map {|x| x.to_i}
  end
end

On-site experience

The actual on-site part of the class was 9 weeks long. It was split into three phases that were three weeks each. The hours were quoted to be 60-80 hours a week. I found that I spent closer to 40 on the core materials. There were plenty of stretch materials to work on and other resources to keep me busy though.

We learned Ruby, Javascript, Sinatra, Ruby on Rails, Rspec, testing frameworks, javascript frameworks. The main thing that we gained out of the program was a coder's mindset and the ability to pick up new things quickly. I liked the attention to building up our knowledge incrementally. We dove deeply in the underlying technologies rather than just learning a framework. This helped give us an understanding of when you might choose to use a framework and what the tradeoffs are.

As part of the 8-day capstone project, I worked on turn-based strategy game in JavaScript. By this point, we had an understanding of both Test-Driven Development and separation of concerns. Below is a sample of code from that game as part of the code that implements the Artificial intelligence for the computer opponent. At this point, the design of my classes are more meaningful and they delegate responsibilities to other classes. There is also the use of Prototypical Inheritence for gaining behavior of other related classes.


// Computer AI implemented using a Finite State Machine with embedded rules

ComputerPlayer.prototype = new Player();
ComputerPlayer.prototype.constructor = ComputerPlayer;

function ComputerPlayer(army) {
  this.army = army;
  this.active = false;  // boolean to be used to determine which players turn it is
  this.mode = null;
  this.battle = null;
};

ComputerPlayer.prototype.update = function(map, myTurn) {
  this.army.update(map);
};


ComputerPlayer.prototype.handleComputerMove = function() {
  return this.mode.handleComputerMove();
};

// Computer Modes - Aggressive, Defensive, Patrol
ComputerPlayer.prototype.updateMode = function(mode) {
  switch(mode) {
    case "aggressive":
      this.mode = new AggressiveMode(this.battle);
      break;
    case "defensive":
      this.mode = new DefensiveMode(this.battle);
      break;
    case "patrol":
      this.mode = new PatrolMode(this.battle);
      break;
    default:
      this.mode = new DefaultMode(this.battle);
      break;
  }
};

I had a great experience at Dev Bootcamp. The skills I gained coming out of the course were much different than what I had expected, but arguably were much more valuable. The ability to learn things on my own and become a much more empathetic team member seems to be a very valuable skill in the tech industry today.

I would recommend Dev Bootcamp to a friend. In addition to all the skills I gained, the community is a great thing to be a part of. It helped keep me accountable for finishing all of my work in addition to producing work of my highest quality. The community is also very supportive throughout the process of searching for a job.

In the future, I hope to continue my learning. I plan on developing my skills further in Ruby on Rails and Javascript. In addition, I intend to learn other languages in more detail (such as Python and C++) as well as take a deeper dive into some of the bigger topics in Computer Science today such as Machine Learning and Computer Vision. I also strive to continually write better code.