<commit_before>---
published: true
layout: project
title: The Burger Shack
"short-title": Burgers
date: 2015-04-28
categories: projects
image: /images/burgers_thumb.png
---

<div class="portfolio-links">
    <a href="http://kamranpayne.com/burgers/" class="button button-primary">Go to this Project</a>
    <a href="https://github.com/ron953/burgers/" class="button">View Source</a>
</div>

This project was a quick and simple AngularJS app I made about a fictional burger joint. It's not a real restaurant. Don't try calling them. 

###Technologies
This project was sort of a test drive for something I wanted to take a crack at. I've played around a lot using [AngularJS](https://angularjs.org/) and wanted to use it in a project. This one doesn't get to crazy with all of the different things Angular can do, it pretty much just uses it for templating. 

The way it works, basically, is the website is a single HTML page and is using JavaScript to switch out content, handling views on the client side. The result is a website that's much faster since no new content is being served. There are several HTML files that are injected in between the main layout's `<ng-view></ng-view>` tags. This allows us to get fast templating without any serverside stuff happening. All of this was especially helpful since I was making all of this using [Chrome Dev Editor](https://github.com/dart-lang/chromedeveditor) on a Chromebook. (I was being lazy to start up crouton and it eats up too much battery. Plus I really like Chrome Dev Editor.) It's a fantastic IDE for what it is. While painfully limited at time, it's pretty amazing considering what it lets you do on a Chromebook.

I ended up using CSS on this project. Why not SCSS? I was being lazy. Using Chrome Dev Editor on Chromebook, I wasn't really able to set up a Sass compiler. You probably can some how, but I didn't look too far into it. I didn't need to write too much CSS for this so I figured it was probably fine to just keep it simple with regular CSS. Everything is loaded using CDN's because I didn't really see a need to install everything. I think that if you're just doing a small project like this one and you're main goal is making it look pretty, it doesn't really matter either way if you use a CDN or not. Maybe I'll give it a second look when speed is a top priority.

###Design
In case you didn't notice, this site has [Material Design](http://www.google.com/design/spec/material-design/introduction.html) all over the damn place. Lots of drop shadows, papercraft looking objects, animations, and everything else Material. If you've seen any of my work, you would know I've had quite the affinity for Material as of late. In order to speed things up, I used a responsive grid-based CSS framework called [Materialize](http://materializecss.com/). It's entirely inspired by Material, has lots of great stuff built in, and looks pretty nice in my opinion. I'll definitely be using it in some future projects.

###Color
At first, I really had no idea what to do for this in the way of color. I decided to just go with it and the end result was starting to look a little strange and template-y. I didn't like where it was going and thought it need some change. I decided to go with a black/dark-grey background for the body, with a darker grey header and footer. I thought it looked alright. Here's the color scheme I ended up going with:

<table class="kracker-colors">
  <thead>
    <tr>
      <th class="title">Primary Color</th>
      <th class="title">Accent Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="grey-lightest">#9E9E9E</td>
      <td class="teal-lighter">#4DB6AC</td>
    </tr>
    <tr>
      <td class="grey-light">#616161</td>
      <td class="teal">#26A96A</td>
    </tr>
    <tr>
      <td class="grey-medium">#424242</td>
      <td class="teal-darker">#009688</td>
    </tr>
    <tr>
      <td class="grey-dark">#212121</td>
    </tr>
    <tr>
      <td class="grey-darkest">#111111</td>
    </tr>
  </tbody>
</table>
<style>
	.grey-lightest { background-color: #9E9E9E; }
    .grey-light { background-color: #616161; }
    .grey-medium { background-color: #424242; }
    .grey-dark { background-color: #212121; }
    .grey-darkest { background-color: #111111; }
    
    .teal-lighter { background-color: #4DB6AC; }
    .teal { background-color: #26A69A; }
    .teal-darker { background-color: #009688; }
</style>

That's pretty much it for this website. It uses AngularJS for fast, client-side templating and Materialize for a solid grid system and nice Material UI.<commit_msg>fix table font color and centering<commit_after>---
published: true
layout: project
title: The Burger Shack
"short-title": Burgers
date: 2015-04-28
categories: projects
image: /images/burgers_thumb.png
---

<div class="portfolio-links">
    <a href="http://kamranpayne.com/burgers/" class="button button-primary">Go to this Project</a>
    <a href="https://github.com/ron953/burgers/" class="button">View Source</a>
</div>

This project was a quick and simple AngularJS app I made about a fictional burger joint. It's not a real restaurant. Don't try calling them. 

###Technologies
This project was sort of a test drive for something I wanted to take a crack at. I've played around a lot using [AngularJS](https://angularjs.org/) and wanted to use it in a project. This one doesn't get to crazy with all of the different things Angular can do, it pretty much just uses it for templating. 

The way it works, basically, is the website is a single HTML page and is using JavaScript to switch out content, handling views on the client side. The result is a website that's much faster since no new content is being served. There are several HTML files that are injected in between the main layout's `<ng-view></ng-view>` tags. This allows us to get fast templating without any serverside stuff happening. All of this was especially helpful since I was making all of this using [Chrome Dev Editor](https://github.com/dart-lang/chromedeveditor) on a Chromebook. (I was being lazy to start up crouton and it eats up too much battery. Plus I really like Chrome Dev Editor.) It's a fantastic IDE for what it is. While painfully limited at time, it's pretty amazing considering what it lets you do on a Chromebook.

I ended up using CSS on this project. Why not SCSS? I was being lazy. Using Chrome Dev Editor on Chromebook, I wasn't really able to set up a Sass compiler. You probably can some how, but I didn't look too far into it. I didn't need to write too much CSS for this so I figured it was probably fine to just keep it simple with regular CSS. Everything is loaded using CDN's because I didn't really see a need to install everything. I think that if you're just doing a small project like this one and you're main goal is making it look pretty, it doesn't really matter either way if you use a CDN or not. Maybe I'll give it a second look when speed is a top priority.

###Design
In case you didn't notice, this site has [Material Design](http://www.google.com/design/spec/material-design/introduction.html) all over the damn place. Lots of drop shadows, papercraft looking objects, animations, and everything else Material. If you've seen any of my work, you would know I've had quite the affinity for Material as of late. In order to speed things up, I used a responsive grid-based CSS framework called [Materialize](http://materializecss.com/). It's entirely inspired by Material, has lots of great stuff built in, and looks pretty nice in my opinion. I'll definitely be using it in some future projects.

###Color
At first, I really had no idea what to do for this in the way of color. I decided to just go with it and the end result was starting to look a little strange and template-y. I didn't like where it was going and thought it need some change. I decided to go with a black/dark-grey background for the body, with a darker grey header and footer. I thought it looked alright. Here's the color scheme I ended up going with:

<table class="kracker-colors">
  <thead>
    <tr>
      <th class="title">Primary Color</th>
      <th class="title">Accent Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="grey-lightest">#9E9E9E</td>
      <td class="teal-lighter">#4DB6AC</td>
    </tr>
    <tr>
      <td class="grey-light">#616161</td>
      <td class="teal">#26A96A</td>
    </tr>
    <tr>
      <td class="grey-medium">#424242</td>
      <td class="teal-darker">#009688</td>
    </tr>
    <tr>
      <td class="grey-dark">#212121</td>
    </tr>
    <tr>
      <td class="grey-darkest">#111111</td>
    </tr>
  </tbody>
</table>
<style>
	.grey-lightest, .grey-light, .grey-medium,
	.grey-dark, .grey-darkest, .teal-lighter, 
	.teal, .teal-darker {
		color: #fff;
		text-align: center;
	}
	
    .grey-lightest { background-color: #9E9E9E; }
    .grey-light { background-color: #616161; }
    .grey-medium { background-color: #424242; }
    .grey-dark { background-color: #212121; }
    .grey-darkest { background-color: #111111; }
    
    .teal-lighter { background-color: #4DB6AC; }
    .teal { background-color: #26A69A; }
    .teal-darker { background-color: #009688; }
</style>

That's pretty much it for this website. It uses AngularJS for fast, client-side templating and Materialize for a solid grid system and nice Material UI.
{'fraction_non_alphanumeric': 0.09558430450122955, 'fraction_numerical': 0.019031326847000964, 'mean_word_length': 3.663010967098704, 'pattern_counts': {'":': 2, '<': 99, '<?xml version=': 0, '>': 99, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 2, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5258372', 'n_tokens_mistral': 2913, 'n_tokens_neox': 2682, 'n_words': 1308}