Danny Fritz's Blog

Module Size and You: Is Bigger Better?

2016-10-06T00:00:00Z

Ah, the age old question: "Is bigger better?". Node has flipped it on its head: "Is smaller better?".

This article is going to go over the various module sizes and discuss the reasons developers would use or choose each one.

Tiny Modules

A simple module. Does 1 thing and does it well. The UNIX philosophy.

The nails and a hammer to build a house, but scattered around the yard. I hope you can find the tools and know how to build a house.

Create a tiny module when you want to abstract a detail into English.

One common misnomer is that tiny modules are about lines of code. Tiny modules are actually about complexity minimalism and not about how few lines of code there are.

Examples

Pros

Easy to maintain
Easy to compose

Cons

Hard to find
Does not solve complex problems

Monolithic Modules

A complex module. Does more than 1 thing. Sometimes many things. Has many opinions baked in.

The modular home to build a house. I hope the plans fit what you wanted in your house.

Create a monolithic module when you want to abstract an architectural decision into a framework.

A large module solves a complex problem by abstracting something large from the user. It exposes a simpler API to allow the user to perform complex tasks by interacting.

Examples

Pros

Makes specific complex tasks easier
Easy to find

Cons

Hard to compose
Hard to maintain

Meta Modules

A collection of modules meant to work together. Modules can either be curated or produced as a package. Has many modules that do small things.

The tool set that includes nails and a hammer to build a house. I hope you know how to build a house.

Create a meta module when you want to abstract many individual solutions into a package.

A tiny module solves 1 thing and a monolithic module solves a complex thing, but what if you want to solve many things in a single problem domain? A meta module allows users to bring in a collection of tiny modules packaged together with each other in mind. A user can try and create a game by bringing in a game engine meta module. This game engine meta module would include all of the things needed to make a game, but would still require many architectural decisions.

Examples

Lodash
React

Pros

Easy to maintain
Easy to compose
Easy to find

Cons

Does not solve complex architectural problems

Popular Opinion

Sindre Sorhus says modules should be small.

"Think of node modules as lego blocks. You don't necessarily care about the details of how it's made. All you need to know is how to use the lego blocks to build your lego castle."

Eran Hammer says tiny modules aren't a slam dunk.

"The bottom line is simple – at some point, someone has to put it all together and then, all the complexity is going to surface and the shit will hit the fan."

James Halliday also thinks small modules are cool.

"As much as possible, I try to build large-scale projects using lots of tiny modules so I just repeat this process whenever I need some reusable component that doesn't yet exist in quite the form I need it to exist."

Rich Harris says it's not that simple.

"Yes, small modules are easier to write. Yes, they're easier to test. Yes, it's easier to adhere to semver. These are all things that make your life as a library author easier. As we've seen, they come at a cost for others."

From these quotes, it wouldn't look like there is a popular opinion, but there really is. The popular opinion is on the side of tiny modules currently.

Which One is Best?

Hopefully your conclusion was none of them. If someone tells you there is one type of module you should write, you should probably stop listening to them.

When you set out to create a module, you need to look at the problem domain and decide what kind of module would best suit your users and not your philosophy.

So there you have it. The best module type is tiny modules, monolithic modules, and meta modules. Just know when to use them.

Web Development & Design Tools (March 2016)

2016-03-10T00:00:00Z

What is this list?

This is a list of all my go-to Web Development & Design libraries, utilities, build tools, etc.

Changes since the last post are denoted with:

+Added
~~–Removed~~

View Libraries

Vue.js
React
Angular.js

Utilities

Lo-Dash
Moment
JQuery
Immutable.js
nuclear-js
vuex
+Electron

Dependency Manangers

Build Tools

~~–Browserify~~
webpack
Babel
npm run
gulp.js

HTTP Servers

restify
Express

Databases

CouchDB
PostgreSQL

CSS

Less.js
CSSBEM
+BEVM
Autoprefixer

Typography

Google Font
Font Awesome

Colors

COLOURlovers
Adobe Color CC

Debugging

ESLint
Chrome Developer Tools
live-server
node-inspector
node-monkey
+nodemon

Testing

Tape
~~–AVA~~
+testdouble.js
+Istanbul
~~–Sinon~~
~~–Coverify~~
Travis CI

Editors

Atom Editor
EditorConfig
GIMP
Inkscape

Source Control

GitHub
BitBucket
SourceTree
Git

Web Development & Design Tools (February 2016)

2016-02-08T00:00:00Z

What is this list?

This is a list of all my go-to Web Development & Design libraries, utilities, build tools, etc.

Changes since the last post are denoted with:

+Added
~~–Removed~~

View Libraries

~~-Handlebars~~
Vue.js
React
Angular.js

Utilities

Lo-Dash
Moment
JQuery
Immutable.js
nuclear-js
+vuex

Dependency Manangers

Build Tools

Browserify
webpack
Babel
npm run
gulp.js

HTTP Servers

restify
Express

Databases

CouchDB
PostgreSQL

CSS

Less.js
CSSBEM
+Autoprefixer

Typography

Google Font
Font Awesome

Colors

COLOURlovers
Adobe Color CC

Debugging

ESLint
Chrome Developer Tools
live-server
+node-inspector
+node-monkey

Testing

Tape
+AVA
Sinon
Coverify
Travis CI

Editors

Atom Editor
EditorConfig
GIMP
Inkscape

Source Control

GitHub
BitBucket
SourceTree
Git

Web Development & Design Tools (November 2015)

2015-11-08T00:00:00Z

What is this list?

This is a list of all my go-to Web Development & Design libraries, utilities, build tools, etc.

Changes since the last post are denoted with:

+Added
~~–Removed~~

View Libraries

Handlebars
~~-Lo-Dash Templates~~
+React
Vue.js

Utilities

~~-Ampersand.js~~
Immutable.js
JQuery
Lo-Dash
Moment
nuclear-js

Dependency Manangers

Build Tools

Browserify
+webpack
Babel
npm run
gulp.js

HTTP Servers

restify
+Express

Databases

CouchDB
+PostgreSQL

CSS

Less.js
CSSBEM

Typography

Google Font
Font Awesome

Colors

COLOURlovers
Adobe Color CC

Debugging

ESLint
Chrome Developer Tools
live-server

Testing

Tape
Sinon
Coverify
Travis CI

Editors

Atom Editor
EditorConfig
GIMP
Inkscape

Source Control

GitHub
BitBucket
SourceTree
Git

Web Development & Design Tools (April 2015)

2015-04-01T00:00:00Z

What is this list?

This is a list of all my go-to Web Development & Design libraries, utilities, build tools, etc.

Changes since the last post are denoted with:

+Added
~~–Removed~~

View Libraries

Lo-Dash Templates
Handlebars
Vue.js

Utilities

Ampersand.js
~~-Backbone.js~~
Immutable.js
JQuery
Lo-Dash
Moment
nuclear-js

Dependency Manangers

npm
~~-Bower~~

Build Tools

Browserify
Babel
npm run
gulp.js

HTTP Servers

restify

Databases

CouchDB
+PostgreSQL

CSS

Less.js
CSSBEM

Typography

Google Font
Font Awesome

Colors

COLOURlovers
Adobe Color CC

Debugging

ESLint
Chrome Developer Tools
live-server

Testing

Tape
Sinon
Coverify
Travis CI

Editors

Atom Editor
EditorConfig
GIMP
Inkscape

Source Control

GitHub
BitBucket
SourceTree
Git

Web Development & Design Tools (January 2015)

2015-02-03T00:00:00Z

What is this list?

This is a list of all my go-to Web Development & Design libraries, utilities, build tools, etc.

Changes since the last post are denoted with:

+Added
~~–Removed~~

View Libraries

~~-Dömthing~~
Lo-Dash Templates
Handlebars
+Vue.js

Utilities

Ampersand.js
Backbone.js
+Immutable.js
JQuery
Lo-Dash
Moment
+nuclear-js

Dependency Manangers

npm
Bower

Build Tools

Browserify
+6to5
npm run
gulp.js

HTTP Servers

+restify

CSS

CSSBEM
Less.js

Typography

Google Font
Font Awesome

Colors

Adobe Color CC
COLOURlovers

Debugging

ESLint
Chrome Developer Tools
+live-server

Testing

Tape
Sinon
Coverify
Travis CI

Editors

Atom Editor
EditorConfig
GIMP
Inkscape

Source Control

GitHub
BitBucket
SourceTree
Git

Web Development & Design Tools (December 2014)

2014-12-09T00:00:00Z

What is this list?

This is a list of all my go-to Web Development & Design libraries, utilities, build tools, etc.

Changes since the last post are denoted with:

+Added
~~–Removed~~

View Libraries

Dömthing
Lo-Dash Templates
Handlebars

Utilities

Ampersand.js
+Backbone.js
JQuery
Lo-Dash
Moment

Dependency Manangers

npm
Bower

Build Tools

Browserify
npm run
+gulp.js

CSS

+CSSBEM
Less.js
~~-SCSS~~
~~-SMACSS~~

Typography

+Google Font
+Font Awesome

Colors

+Adobe Color CC
+COLOURlovers

Debugging

Chrome Developer Tools
ESLint
~~-node-inspector~~

Testing

Tape
Sinon
Coverify
Travis CI

Editors

Atom Editor
EditorConfig
+GIMP
+Inkscape
~~-Sublime Text 3~~

Source Control

GitHub
BitBucket
SourceTree
Git

Web Design Katas & Koans

2014-12-07T00:00:00Z

Warning

This post is both inactive and a WIP.

Explanation & Justification

You are a master at something, how did you become one? You started as a novice, but now you are a master. There are many ways to become a master, but one way is though practice. That is where katas come in.

Kata (型 or 形 literally: "form"), a Japanese word, are the detailed choreographed patterns of movements practised either solo or in pairs. The term form is used for the corresponding concept in non-Japanese martial arts in general.

A kata is an exercise to carry out in order to make the activity second-nature. The idea is that you practice it enough until you get to a point you can just do it without thinking. At this point, when you need to do something related, you can quickly and fluidly carry it out and focus on the polishing touches. After each iteration of the kata, your skills should be improved. Every time you repeat a kata, do it differently. When you get to a point the katas truly do feel second-nature, work on some koans.

A kōan (公案)/ˈkoʊ.ɑːn/; Chinese: 公案; pinyin: gōng'àn; Korean: 공안 (kong'an); Vietnamese: công án) is a story, dialogue, question, or statement, which is used in Zen practice to provoke the "great doubt" and test a student's progress in Zen practice.

A koan is a thought-exercise. The purpose is to get you to doubt and rethink why you do something. Katas will answer the what's of design, but the koans will answer the why's of design. When you are thinking genuinely about the why's of something, that is the point you can start mastering a skill. You don't improve anything by being indoctrinated, so it is always important to think of situations contrary to what you believe.

Katas

A blog post is a personal or company owned online publication. Blog posts can be long or short formats. Often images and different font styles are mixed in to the post. Make sure the blog post can exhibit a feeling and style that is true to the author’s character.

Example

A user input form is a collection of fields and controls the user can input values into. Often these values come in groups and are of many different types. A good example is a checkout form on any commerce website. The collection of fields to get the user’s address and billing information are very common and very unique.

Example

A process workflow is a series of steps a user must take in order to complete a more complicated task. Often each step will be a form presented to the user to break down a very large form. A progress meter is usually shown accompanied by a next and previous control. Each step has validation preventing the user from navigating to the next step. When the user is done they are notified they have completed the process workflow.

Example

A category navigation element is a tool to help the user navigate between different sets of data. This could be done in a number of ways, but is traditionally done by pages. Try to think outside the box and add nice polish to your navigation.

Example

Recipe Page

Documentation Page

Data Visualization

Font Pairings

Color Schemes

Mobile and Desktop Layout

Music Player

Develop a Grid System

Koans

No idea if these are good Koans yet. Feedback welcome.

Helvetica

Black on White

Vertical Layouts

Different Mediums

Ways to Increase or Decrease attention

Additional Links

Class Free Object Oriented Programming

2014-10-11T00:00:00Z

I used to think that the important innovation of JavaScript was prototypal inheritance. I now think it is class free object oriented programming. I think that is JavaScript's gift to humanity. That is the thing that makes it really interesting, special, and an important language.

Douglas Crockford: The Better Parts – JSConfUY 2014

Tell Me More

I think Douglas Crockford is not only on to something here, but completely right. Let's talk about what it means, why it is hard to grasp for some programmers, and how it can benefit you.

What Class Free Object Oriented Programming Means

First, we need to cover what Object Oriented Programming (OOP) means. There are many types of OOP that are in use today.

Class Based OOP

This is your classical example of OOP. The easiest to understand form is single inheritance. You make a class and inherit from it. And subsequent classes can inherit from that class. One root class, and a tree of classes stemming from there.

This paradigm is super easy to grasp, but also super easy to create traps for yourself. Like JavaScript, this methodology is full of foot-guns.

A podiatric penetration purposed pistol. A gun which is apparently designed for shooting yourself in the foot.

A Duck, an Alligator, and a Goat

Let's say we want to create a Duck class in this paradigm.

Inherit from the base Object and create an Animal class.
Inherit from the Animal class and create a Duck class.
Define swim, walk, talk, and fly methods on Duck.

Easy right? But wait a second. New requirements have come in and you need to define Alligator and Goat now.

Inherit from Animal and create an Alligator class.
Define walk, swim, and talk on Alligator.
Inherit from Animal and create a Goat class.
Define walk and talk on Goat.

All done! Okay, time to refactor and clean up. walk, swim, fly, and talk are not specific to those animals are they? We should probably move them to a shared class to be more DRY. We should move the methods to Animal so they can be shared among the animals and written once. Cool, now walk, talk, fly, and swim are written only once!

But wait, Alligator shouldn't be able to fly! We need an additional class between Animal and the animals to account for this. Let's create a FlyingAnimal inheriting from Animal so we can account for the Duck that flies. Oh, and Goat doesn't swim like Duck and Alligator. So we need to create a SwimmingAnimal to account for that and assign Alligator and Duck to it, but not Goat. But wait, Duck can't inherit from FlyingAnimal in addition to SwimmingAnimal and WalkingAnimal!

This is why a single inheritance taxonomy is not a good way of organizing our objects in programming. Most of the languages have ways of accounting for this. But to me, they at best feel like workarounds. It is almost certainly possible in all the most common languages, but they really get in the way and require you to write tons of boilerplate to do it.

Class Free OOP

This is where languages like JavaScript really help out. JavaScript Functions are first-class citizens in the language, so this method just feels natural and is relatively frictionless.

If you want a Duck, you create a Function that returns an Object that looks like a Duck. If you also want an Alligator and a Goat, you create those two Functions. The difference is you do not inherit any classes or implement any interfaces. Inside the functions, you add methods and properties and return an Object that looks like what you want.

But this time around, when you refactor out the reusable portions, you just take the pieces out into their own Objects: withFlying, withAnimal, withWalking, and withSwimming. Then for each Object that needs the functionalty, you just copy the methods on them to your own Object. And if you want to reuse any of them in another object, you just do. No compiler is going to complain about it or tell you that you can't. It is just going to work and act like a duck.

Why Class Free OO is Hard To Grasp

It is a Whole School of Thought

Most students in Computer Science or people that have self-taught themselves programming have learned or picked up a popular OO language. Whether that is Java, C#, C++, etc. does not matter. These languages have inheritance built into them and strongly rely on you using their pattern to properly use the language. JavaScript even has its own paradigm of it: Object.prototype.

For many, the current paradigm for handling complexity is by utilizing interfaces and parent classes. This works, but can get hairy when trying to call methods of parents or parent's parents to extend functionality or trying to decide what should be in a class, parent, or interface.

Tools are Geared Around Inheritance

People are too dependent on their OOP focused IDE's to even want to do it another way. Many of the restrictions and constraints of some languages make programming so difficult an IDE is more-or-less required. If I had to program C# code without an IDE, I would probably go nuts. The sheer amount of ceremony, boilerplate, keywords, system libraries, constraints, and gotchas in the language are too much for me to try and program with a text-editor and a compiler. The IDE's offer all these tools for refactoring in an OOP sense it is hard to stray away. Some people spin this as a benefit for the language because it has such an amazing IDE, but I see it as a negative that the IDE is basically required to use the language in a proficient way. The language is so complicated, not even the programmers can trust themselves.

How Class Free OOP Can Benefit You

It actually can't benefit you if your language of choice can't do it in an easy way. But if it is like JavaScript, there are lots of niceties you get out of it. The weirdest thing for me is how simple of a language JavaScript is, yet how flexible it is and how confusing it is to even experienced developers.

But in JavaScript at least, here are some things it gives you:

Smaller amounts of code
Simpler code that saves time
No crazy inheritance/interface graphs
Easily composable objects

Let's go over those real quickly.

You will write less. You aren't writing boilerplate to define interfaces and figuring out the hierarchy and implementing the functions on the class. You are copying the properties straight to your object. You can sort of view it as multi-inheritance limited to a single level where all of the parents are merely describers.

Your code will be much simpler and flexible. After you're done not writing tons of boilerplate and ceremony, pat yourself on the back for saving that time and being able to see your bugs more easily.

You won't be making any decisions about if your parent's parent's parent class is doing too much or too little. You'll be looking at the immediate thing you included and deciding if it is enough.

Do you have a button that needs rounded corners? Cool, make a rounded-corners object. Do you need a duck that has rounded corners too? Cool, then include your rounded-corners object without worrying about what they were inherited from. Nobody cares about what you do with your objects in your private time.

A Duck, an Alligator, and a Goat Revisited

function newAlligator() {
  var alligator = {
    name: "alligator",
    word: "grrr",
  };
  extend(alligator, withAnimal);
  extend(alligator, withWalking);
  extend(alligator, withSwimming);
  return alligator;
}

function newDuck() {
  var duck = {
    name: "duck",
    word: "quack",
  };
  extend(duck, withAnimal);
  extend(duck, withWalking);
  extend(duck, withFlying);
  extend(duck, withSwimming);
  return duck;
}

function newGoat() {
  var goat = {
    name: "goat",
    word: "baa",
  };
  extend(goat, withAnimal);
  extend(goat, withWalking);
  return goat;
}

var alligator = newAlligator();
alligator.talk();
alligator.swim();
alligator.walk();

var duck = newDuck();
duck.talk();
duck.fly();
duck.walk();

var goat = newGoat();
goat.talk();
goat.walk();

function extend(target, source) {
  Object.keys(source).forEach(function (key) {
    if (typeof target[key] !== "undefined") {
      return;
    }
    target[key] = source[key];
  });
}

var withAnimal = {
  name: "name",
  word: "word",
  talk: function () {
    console.log(this.name + " says " + this.word);
  },
};

var withFlying = {
  fly: function () {
    console.log("flap flap");
  },
};

var withSwimming = {
  swim: function () {
    console.log("splish splash");
  },
};

var withWalking = {
  walk: function () {
    console.log("stomp stomp");
  },
};

Web Development & Design Tools (October 2014)

2014-10-04T00:00:00Z

What is this list?

This is a list of all my go-to Web Development & Design libraries, utilities, build tools, etc.

View Libraries

Dömthing
Lo-Dash Templates
Handlebars

Utilities

Ampersand.js
JQuery
Lo-Dash
Moment

Dependency Manangers

npm
Bower

Build Tools

Browserify
npm run

CSS

Less.js
SCSS
SMACSS

Debugging

Chrome Developer Tools
ESLint
node-inspector

Testing

Tape
Sinon
Coverify
Travis CI

Editors

Atom Editor
EditorConfig
Sublime Text 3

Source Control

GitHub
BitBucket
SourceTree
Git

Chromebook Salad

2014-07-11T00:00:00Z

Chromebooks and Chrome OS

Chromebooks are great machines that run Chrome OS. Chrome OS lets you focus on your work, boot up quickly, cost very little, extend your battery life, be secure, and get frequent updates. These machines seriously kick ass.

This post goes over how to get the most out of your Chromebook.

People Don’t Want to Buy Them

The headline of this section is a little sensationalized. Chromebooks are incredibly popular right now and they are among the top-rated and best-selling laptops on Amazon.

A lot of people don’t want a Chromebook because they are “glorified browsers” that can’t do anything useful.

"I use more than a browser! How could I ever be satisfied with a Chromebook?"

Here is a short list of the things I hear that keep people from buying a Chromebook:

Can’t run Microsoft Office
Can’t be used for development
Can’t be used to play games

Why You are Squabbling

Now ask yourself, how often are you using your computer solely for a browser? Chances are if you are like most people, most of the time.

Microsoft Office is released on the Chrome Web Store.

There are also alternatives such as Google Drive. I definitely prefer Google Drive.

And with a more traditional Linux distro running on your Chromebook, you can run games and develop programs. We just need a little help from our friend Crouton.

Enter Crouton

Crouton enables us to run Ubuntu (and others) with ease on our Chromebooks. Ubuntu has official Steam support and is fully capable of development. Android Studio, Node.js, Sublime Text 3, Atom, Chrome, Firefox, and Opera all have Linux builds. Heck, you can even do C# development with Mono on Linux. And if you really miss Windows, you can try out Wine or run Windows in a Virtual Box.

Crouton enables your Chromebook to do all of these things you associate with a more traditional OS such as Windows or OSX.

Preparing your Chromebook

All you need to install Crouton is a Chromebook that is in development mode. Getting into development mode is usually a very easy process depending on the Chromebook.

For my Chromebook Pixel I held down Escape + Refresh + Power and then hit Ctrl + D. And that was it.

Tossing the Salad (Installing)

Now for installing Crouton. Don’t worry. It is super easy.

Download Crouton from the link at the top of the Github repo
Open up your shell with Ctrl + Alt + T
Enter shell
Enter sudo sh -e ~/Downloads/crouton -t xfce
Wait for it to finish
Follow onscreen prompts for username and password
Enter sudo startxfce4
Enjoy Ubuntu!

Some Quick Usage Notes

Now to go back and forward from Ubuntu and Chrome OS seamlessly, hit Ctrl + Alt + Shift + Back/Forward. It really is as easy as that.

If you run into a problem, go ahead and search and then open up an issue on the Github issue tracker. They are super responsive and helpful.

My Personal Install Script

This is my personal crouton command and subsequent commands to bootstrap my Ubuntu install:

# Start Crouton
sudo sh -e crouton -r trusty -t chrome,cli-extra,gnome,keyboard,audio

# Bootstrap Ubuntu
sudo apt-get install software-properties-common
sudo apt-add-repository ppa:chris-lea/node.js
sudo apt-add-repository ppa:fish-shell/release-2
sudo apt-add-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install apt-file man-db ppa-purge vim git subversion mercurial terminator sublime-text fish htop nodejs tmux
sudo apt-get dist-upgrade
sudo apt-get autoremove
chsh -s /usr/bin/fish

Human JS

2014-07-10T00:00:00Z

The Ebook

I read a free ebook titled Human JS. It was a quick and good read. I highly recommend it. It made me reflect a lot on the code I have written and makes me want to steam forward with new ideas while keeping code clean and simple.

The book goes over common problems, such as choosing libraries & writing hard to read code, how to organize full client JavaScript applications, and conventions for writing maintainable applications.

Read it, it only takes a couple hours: Human JS

The rest of this post is some of my personal takeaways from the book.

Human Readable Code

The third chapter goes over how to write code that is easily digestable.

Compare this example from the book:

// Assume this is an array of strings from somewhere
var myArray = ["hello", "something", "awesome"];

if (~myArray.indexOf("hello")) {
  // Under what circumstances does this get called?
}

With this:

// Same array:
var myArray = ["hello", "something", "awesome"];
if (_(myArray).contains("hello")) {
  // Also pretty freakin' clear!
}

This is something I strive for when writing code, but in practice often throw out the window to meet deadlines. Often this is to my chagrin when I'm the only developer capable of fixing bugs that come back. I often use LoDash as a quick way to boil simple things down to digestible function calls. But using LoDash has also gotten me into trouble when I start chaining all its methods together and creating stuff that makes other developers scratch their head when they come across it. It is a little bit of a trade-off in that I can write something concise with LoDash, but many other developers don't know the functions and don't have the LoDash documentation always up in their browser to reference like I often do.

Refactor and Organize

Another chapter goes over refactoring. A common mantra is to "Refactor early, refactor often". I can't agree with this more. Recently I was working on a complicated tree control and it ended up being a 3000+ line mess of a file. I despise these huge files. I refactored it a couple times, but obviously not enough. There ended up being no clear separation of view, controller, model, and service. The view is the most separated of the 4, but the rest have ended up there in that file. It became a hot mess to maintain and near impossible to add new features. If I did it again, I would be more proactive about keeping service calls, models, and business logic separate.

Suggested Conventions for Backbone and Ampersand

Most of the rest of the book goes over good ways to use Backbone and Ampersand.js views and models. Which is all very useful if you are looking to learn one of the libraries. The two libraries are nearly identical in use, but Ampersand.js comes with more goodies and I feel has a better concern for maintainability.

Cool Things

Check out their index.html example:

<!doctype html>

<!– served with <3, &yet –>

<script>
  window.times = { start: new Date() };
</script>
<link href="/&!.css" rel="stylesheet" />
<script src="/&!.js"></script>

The entire clientside application is launched from that!

The suggested folder layout is pretty good in my opinion too:

models (folder):

Contains definitions for all models and collections. As a sanity check, none of these files should have anything related to DOM elements or DOM manipulation.

pages (folder):

The pages folder is where we store the views that represent a page rendered at a specific URL. Generally these are still just "views" but since they play a special role to our app, it's useful to put these in their own folder.

views (folder):

The views folder contains all of our Backbone views (that are not pages), so things like the main application view and views for rendering specific types of models, etc.

helpers (folder):

Here is where we put any clientside modules that are application specific, but are useful in other modules. For example, we might use this to put a helper module for reporting metrics back to our server that we want to do from several places in the app.

forms: (folder):

A place to store any form views we might have. We often want to reuse a form for both creating and editing a type of data.

app.js (file):

This is the main entry point for our application. It creates an app global variable and instantiates the main models and views.

router.js (file):

This is our clientside (Backbone) router. It contains a list of URL routes at the top and corresponding handlers, whose job it is to instantiate the right views with the right data from the url and emit instantiated page views that can be rendered into the page container by our main view.

libraries (folder):

This contains all the libraries we're using that are not structured like CommonJS modules. So things like jQuery and jQuery plugins will go here.

templates.js (file):

This is the module that gets created from the templates folder (see next). It's a single file with a function for each clientside template. This file gets auto-generated so don't try to edit it directly. Putting it in here lets us also require and use our template functions easily within our views. Each template has a corresponding template function. Each function takes your context object and returns just a string of HTML.

templates (folder):

Here is where we keep all our Jade files that get used in the client application. Anytime you're wanting to create HTML within the app, use a Jade template and put it in here. You can structure this folder in whatever fashion makes sense for your application. The important thing to understand is that folders become part of the template.js module structure. For example, in this template you'll see that there's a pages folder within the templates folder with a file called home.jade. To use the function that got created from that, you'd access it as follows:

It categorically disses a few libraries that I agree with. Namely Angular, Ember, and Knockout. They just do too much magic. You end up writing a lot of code to try and do something a library wasn't intended to do instead of just writing something the JavaScript way cleanly the first time.

Tools where you build the app by writing code in JavaScript files, not by trying to declare too much of your app logic in your HTML (no AngularJS, sorry). Having to write application logic inside of a template feels like a violation of separation of concerns. It has some short-term payoffs and can make simple things really easy. However, when you want more control it can be difficult to do within the constraints of the framework.
Model state is completely decoupled from view state (no Knockout.js). Again, this is to separate concerns.
As little magic as possible (no Ember). Similar to Item 1 this is primarily to avoid requiring too much framework-specific knowledge.

Facebook Graffiti

2011-03-21T00:00:00Z

I don't know if anyone remembers Facebook early on when people covered their profiles with application widgets. One of those applications was Graffiti. A lot of people had it, and I loved surprising people with high quality graffiti on their wall. I drew all sorts of things, usually related to the random victim. I almost entirely drew from reference, looking at what I am drawing.

Without further ado, here they are in a chronologically ascending order:

Admittedly, they start out pretty bad. But I promise they get better. So much better.

I drew this depiction of the first iPhone for Jon. He loves his Apple products. I am still not a fan of Apple.

I drew this for Rex before Cartel released their self-titled album. He didn't know what it was and I had to tell him.

This is a depiction of Harvey Danger's album Where Have All the Merrymakers Gone?. I actually met a friend of mine, Allison, via this song. Back when Facebook was a garbage dump of applications, one application allowed the user to upload a song so people can play it on your profile. Allison and I were both friends of Amanda and we both uploaded this song to our profiles. So Amanda told us both and I sent her a message on Facebook and eventually we became really good friends. I don't remember what the cotton candy is about. =\

This is the first of a series of my friends and I drawing each other dying in various ways. This one depicts Jake shooting himself on a gradiented hill and gradiented sky lit up by a gradiented sun. I guess I discovered gradients were easy at this point.

I drew this one for Allison because we were about to go to a Senses Fails concert at Headliners in Louisville, KY. It is a depiction of Let it Enfold You. I loved Senses Fails so much.

Watch out Jake! That grenade is going to kill you as you burn to death!

Here is the dog Menchi (メンチ) from Excel Saga. Trust me, it is a dog and not a cat. I drew this for Sarah. I had just met her at this point at a LAN party at either Garrett's house or Garrett's cousin's house. I believe she was actually sad about something at the time and I drew this to cheer her up.

Now Jon and I were having at each other in graffiti death. As you see, the person driving the car, me, swerved around the dog to hit the object of less value, Jon himself.

This was a drawing for Mandy. I don't remember the joke behind Chex Mix, but there was a joke here. I had just met her during the Summer. I don't remember if we met in the math office or at a local concert.

I had a thing for Mandy and drew a picture with a flattering phrase in Spanish. It reads, "You are the hottest in the world!"

Nothing special here. Just a cute drawing of a bunny for Mandy.

Mandy was sick at the time so I drew this to cheer her up. The cat is from Azumanga Daioh. The Japanese reads, "Bad cat."

I believe this was for Darrah on a random request. A penguin.

I believe this was for Darrah again, but this is when I started getting serious about detail. Yellowcard announced their new album Paper Walls and I was excited about it. I'm not entirely sure what I drew here because it doesn't match the album cover. I either drew an early rendition of the cover or I took a lot of liberty improvising.

I remember when it first leaked to the internet and I quickly downloaded it and listened to it during my internship doing spectral analysis in Ferdinand, IN. It was a really good album then and is still a really good album.

This was for one of my best friends, Jay. A humpback whale breeching. I guess we took a little too much privilege in poking fun at his weight. But we always used to tell him to breach in the pool and he was a good spirit about it. He has actually lost a lot of weight since then.

This giraffe was for my friend Amanda. Giraffes are her favorite animal. I still never fail to send her any comics that come up that include giraffes to her. I believe she has said her dream house involves many giraffes in the yard.

I drew this for Grant. I don't remember what I was trying to do. I think it was a river in a desert, but ended up looking like a flag.

My friend Noah, being a good skeptic, was not convinced I was drawing these by hand. So he challenged me to draw one in front of him. I looked through my album covers and chose this self-titled album by Audio Slave, a band we both enjoy. I drew it on his wall and he watched me do it, stroke by stroke to his amazement. Damn that felt good.

This apple with a grammatical breakdown was for Rebekah, a girl I met at a party at Allison's house and now goes to Purdue. We watched The Shining at that party. Rebekah and I got into a disagreement about the purpose color words have in English. I don't remember what all was said, but I think my English breakdown here is a little fishy. The apple isn't though, it looks delicious.

This was for the random victim Anna. I had to do a scavenger hunt for the album since I could not remember what it was. I kept searching for albums with the word "Ace" in it. But alas, going through my last.fm library page by page finally found it. Luckily it was in the "A" section. The Possibility and the Promise by Amber Pacific.

This melodramatic piece is for my friend Jessica, an avid Jimmy Eat World fan. The album is an EP: Stay on My Side Tonight. Let it be known, Jessica is no Hitler. She loves the JEW.

This one went to Noah. A depiction of Brand New's Deja Entendu. I just wanted to draw an album cover of an album I really liked.

This one went to my good friend Adam. He was a Nintendo fan boy. But, everyone loves Nintendo.

This was for a Louisville friend of mine, Brooke. She is a fan of Batman, but I think she is more a fan of the classic Batman. But, since I am a fan of the new Batman, I drew her the new batman. I remember my brother joking about how his knee looked like an erection.

On an aside, I remember Brooke telling me she met a girl at her university at Louisville and their introduction dialog with each other was about how they both discovered they both knew me. I felt so popular.

This was for the random victim Gregg. I don't really know Gregg, but I knew enough to know he loves Star Wars. Which I too am a huge fan of. This is the epic opening scene of episode IV. I sure hope he appreciated the random gift.

This was for Allison before the first new Transformers movie came out. This is Optimus Prime as he shows up in the promotional posters. The movie sucked.

I drew this for Katelynn. We had a joke about thunderstorms. I won't go into any details on that one.

Once again, a Nintendo character drawing for Adam. This one is Link from Zelda: Wind Waker, possibly my favorite Zelda game. I know, you hate the cell-shading, but those of us that don't, think it is the most fun one.

I drew this for the random victim Kami. I met her in the math office in high school. She was taking a make-up exam when I was goofing off in there. Kami and I actually talked quite a bit.

This one is an album cover for Collective Soul's Youth.

This was for Jake. I think he drew a scene from 300 so I drew one back. I'm actually quite enthused by how well I did on his face.

This was the last one. It was for Jay. He drew a picture of himself as a ninja and me as a pirate getting killed by his ninja star. That wasn't the first drawing of a depiction of us as pirates and ninjas where ninjas are kicking ass, but I retaliated this time with a sweet picture of the ninja from Ninja Gaiden. Not the best way to retaliate. Oh, and I thought the game sucked.

MySQL and IPv6

2011-03-10T00:00:00Z

I work on DNS Management software for Purdue's network security department called Roster. It is a very fun and interesting project to work on. I'm constantly finding myself way over my head on features I am implementing. Making it a learning experience in the process.

My current issue once again requires me to read up on key issues. I will be indexing and keying ipv6 from a MySQL database.

Easy you say, just insert the IP in the database and be done with it! But wait! This works just fine for IPv4 because an IPv4 address as a decimal is only 32 bits. Soon, you will find it doesn't work so easily for the 128bit IPv6 counterpart.

Get ready for a doozy of a post.

We're going to be using our fun friend, bit ops. Now, don't be confusing that with sarcasm, I actually do love bit ops. But beware, we will be doing maths very soon! And we will be using the << and & binary operations, the magical mathematical functions computer science majors like to keep to themselves.

How big is IPv4?

$255.255 .255 .255$ is four sets of $2^{8}$ .
Therefore, the biggest IPv4 address is $2^{(8 * 4)} = 2^{32} = 4, 294, 967, 295$ .
$4, 294, 967, 296 - 1$ is half the size a SQL long int. This causes no hurdles for the database.

Converting an IPv4 address to a decimal number.

Let's convert $192.168 .0 .1$ into a decimal number.
First, we will split the IP address into 4 parts by '.' resulting in $A 1 = 192$ $A 2 = 168$ $A 3 = 0$ $A 4 = 1$ .
$D e c$ denotes our resulting decimal representation of the IP address.
$D e c = A 4 + A 3 << 8 + A 2 << 16 + A 1 << 24$ $= 1 + 0 << 8 + 168 << 16 + 192 << 24$ $= 1 + 0 + 11010048 + 3221225472 = 3232235521$

How big is IPv6?

$FFFF:FFFF:FFFF:FFFF:FFFF:FFFF:FFFF:FFFF$ is eight sets of $2^{16}$ .
Therefore, the biggest IPv6 address is $2^{(16 * 8)}$ $= 2^{128}$ $= 340, 282, 366, 920, 938, 463, 463, 374, 607, 431, 768, 211, 456$ . A very large number.
This is twice the size as a SQL long int. Uh oh.

Converting an IPv6 address to a decimal number.

Let's convert $2001:1::200:1$ $= 2001:1:0:0:0:0:200:1$ into a decimal number.
First, we will split the IP address into 8 parts by ':' resulting in $A 1 = 2001$ $A 2 = 1$ $A 3 = 0$ $A 4 = 0$ $A 5 = 0$ $A 6 = 0$ $A 7 = 200$ $A 8 = 1$ .
$D e c$ denotes our resulting decimal representation of the IP address.
$D e c = A 8 + A 7 << 16 + A 6 << 32 + A 5 << 48$ $+ A 4 << 64 + A 3 << 80 + A 2 << 96 + A 1 << 112$ $= 1 + 200 << 16 + 0 << 32 + 0 << 48$ $+ 0 << 64 + 0 << 80 + 1 << 96 + 2001 << 112$ $= 1 + 200 << 16 + 1 << 96 + 2001 << 112$ $= 1 + 13107200$ $+ 79228162514264337593543950336$ $+ 10389786013928190084689523154769412096$ $= 10389786093156352598953860748326469633$

Oh no, so it can not be done! IPv6 is simply far too large to insert into a 64bit int space! But wait, maybe we can split it into two 64bit integers for upper and lower and use that! And that would be the answer:

How do you split an IPv6 into 2 64bit ints?

We want to store $2001:1:0:0:0:0:200:1$ as a key in SQL
$U p p e r$ denotes the upper 64 bits and $L o w e r$ denotes the bottom 64 bits.
$U p p e r$ $= 2001:1:0:0:0:0:200:1 &$ $FFFFFFFFFFFFFFFF0000000000000000$ $= 2001:1:0:0$
$L o w e r$ $= 2001:1:0:0:0:0:200:1 &$ $FFFFFFFFFFFFFFFF$ $= 0:0:200:1$

Now comes the fun part: CIDR Blocks. However, CIDR blocks isn't so bad of a guy.

The reason for keying the database by IP address is that we can do selections on blocks of IP addresses quickly. Currently, the process is to dump the entire database into a python data structure and then to exhaustively check if each IP exists or not.

This works, but when you are asking for larger subnets, it starts becoming incredibly taxing and takes a long time. A class C subnet, $255.255 .255 .0$ , includes 256 IP addresses. A class B subnet, $255.255 .0 .0$ , includes $255^{2} = 65026$ IP addresses. And a class A subnet, $255.0 .0 .0$ , includes $255^{3} = 16581376$ IP addresses. Not to mention the possibility to try and grab a CIDR block of the subnet $0.0 .0 .0$ and checking for $255^{4} = 4228250626$ IP addresses by literally checking each one. This is not a good solution. And I'll just throw it out there that an IPv6 class A subnet $F F F F : 0 : 0 : 0 : 0 : 0 : 0 : 0$ is about $2 x 10^{1} 49$ IP addresses. Not something you want to exhaustively check for.

With the database keyed by IP address, you just insert the lower IP address and the upper IP address and the database will do what it does best and return the according range of IP addresses. Simple.