
This can easily be the most important OSS thing I've done
14 February, 2016I’m putting together a workshop on estimation of large projects and features for the Operation Spark coding bootcamp and ended up mind mapping several dozen alwaysmakesuretodiscussthis rules of thumb. I figure, why keep this private? I have plenty of experience but that’s still just me. Let’s open it up for public contribution.
So here is a github repo. It contains a simple
.md
file so you can edit it entirely inbrowser. Fork, edit, and give me a PR to share your experience!
Comments 
Why width 50% inlineblocks don't display sidebyside
18 October, 2015So here’s the thing that’s always confused me about
display: inlineblock
. Let’s say you have two subsequentinlineblock
elements. If the container has no padding, and the elements have no margin or border, and if you set both those elements towidth: 50%
then they should appear sideby side, right?inlineblock
is not sidebysideI’ll assure you that the previous paragraph’s logic checks out. So what is going on then? Why do these elements appear on different lines? I’ve wondered this for years always just setting
width: 48%
and chalking it all up to an inconsistency in my understanding of how css layouts work.Finally, with some help from StackOverflow I’ve got it. And as wierd as it is, it makes sense!
The clue is in that whitespace between the red and blue box. There’s no margins nor borders, so where does this white stripe come from? Well it’s right there, in the html. Do you see it? If not consider this bit of html
why is the output
one two
instead ofonetwo
? Well…because the words are on different lines, and a linebreak in html between two inline elements inserts a whitespace.Ohhh…and we’ve got
inlineblock
containers which act as inline…which inserts a whitespace…so now our width total is50% + whitespace + 50%
which is of course greater than100%
and we get the second container wrapping to the next line!So what’s the solution? Well, to start with, simply get rid of that whitespace:
Sidebyside with no whitespace
And voila! If we still want to stack the html we can do something like
<div class="half left"></div><! ><div class="half right"></div>
It’s not pretty but it works.
So there we go. A css mystery solved!
Comments 
Talk Roundup  Be the Es6iest
12 September, 2015The below is a talk I did about great features of javascript. Specifically of the es6 version of javascript that is starting to currently drop in browsers. The initial version of this talk was all about the es5 features that have been in javascript forever. I encourage you to read it, we’re still going to cover that stuff but we’re also going to forge on ahead and use the full power of es6 to build
A library for a notification system! When completed this library should have the following features
 The ability to add a message.
 When added, the last X messages will show up in a list
 The ability to clear current messages
 The ability to specify how many messages are retained
 The ability to specify a “store”. This will be used to save messages and queried to show previously saved messages on initialization
In doing this we’re going to touch on the following language featues that make working with javascript awesome
Es5
 First order functions
 Boolean Type Coercion
 JSON Notation
 Hoisting
Es6
 Modules (this is a big deal)
 Generators (this is a lesser big deal)
 Arrow functions (especially single line ones)
const
andlet
 spread and splat operator
 Simple object construction
 Destructuring
You can watch the talk on Youtube
You can (and are encouraged to) follow along yourself by grabbing the repository from Github.
Comments  The ability to add a message.

Automated Testing Venn Diagram
27 August, 2015Gave a talk to our salespeople at Surge today about Automated Testing. Here is a Venn Diagram I created for the presentation on how the various philosophies in the space fit together.
Comments 
Learn reduce
3 July, 2015So you’re a professional developer and you’ve heard of
Array.prototype.reduce
(or underscore/lodash’s_.reduce
function), and you’ve heard that it’s an insanely powerful way of working with collections but you don’t quite get it.tsk tsk tsk^{1}
That’s ok. I’m here to help. It’s a more advanced concept that can be difficult to learn. Or it can be very easy.
Because you see, you already intuitively know how to do it. Let’s run through an exercise.
For this you will need
 A piece of paper
 A pen or pencil
 A stack of notecards or sticky notes
 A hat (the fancier the better)
To start with, take the piece of paper and tear it up into sixteen or so rectangular pieces. On each piece write some number. They don’t have to be all different but try not to follow any obvious pattern.
Now fold each piece in half so that you can no longer see the number, shuffle them up, take about half of them and toss them in the hat.
Set all the other pieces of paper to the side, put your stack of notecards or sticky notes in front of you, and let’s think of a question we can ask about the numbers in the hat.
We’ll start with the canonical
reduce
example: What is the sum of all these numbers?We’re going to be pulling numbers from the hat one by one in order to answer the question. Two caveats: We’re not allowed to look at previous numbers, and we’re only allowed to remember one thing at a time. We will be using the cards as our “memory”.
Now let’s answer the question of the sum as best we can on the topmost card. We haven’t looked at any numbers yet so let’s start by saying the answer is zero.
Great, now draw the first number and place the top card next to it so that the next blank card in the stack is showing. We have so far picked one number, and our previous sum is zero, therefore on the blank card write down the new sum.
Now remove the number paper and the previous card, we won’t need them and are no longer allowed to look at them. Draw the next number and move the top card over near it as before. Again, given the previous sum, and this number, answer the question “what is the sum” on the next top card.
Clear the current number paper and the previous card again and keep doing this until you’ve drawn the last number. There’s your answer!
You’ve now answered the question by iteratively reducing the number of items in the hat.
In
reduce
function terms The number you drew is the item
 The “previous” card the accumulator
 The question you’re asking is the reducing function
 The top card is the reducing function result
 The initial card you wrote an answer on before you drew any numbers is the seed
 And the numbers in the hat to start is the collection
Since we now have the algorithm it should be dead simple to translate it. In javascript terms we have:
var reducingFunction = function(accumulator, item) { return accumulator + item; } collection.reduce(reducingFunction, 0);
Or, if we follow the rule of naming things after what they do, rather than how they’re used, we get
var sum = function(x, y) { return x + y; } hatItems.reduce(sum, 0);
Got it?
One more time for safetey?
Ok, new stack of cards, shuffle up the numbers, and toss some of them in the hat again.
This time, we’re going to answer the question “are any of the numbers divisible by two?”
As before, we will answer the question as best we can on the top card. Since we haven’t drawn any numbers yet, much less one that is divisible by two, we must answer “No”.
Ok, let’s move the card over, draw the first number, and answer as best we can.
We drew a 75, which is not divisible by two, and so far no numbers have been divisible by two so we write “No” again on the top card and draw the next number.
This time, we drew a 21. Again, this is not divisible by 2 so yet again we write “No” and continue working our way through the hat.
Now we drew a 12. That’s interesting since the answer to “is anything so far divisible by two” is now an emphatic yes, so that’s what we write down on the top card.
The next draw is also interesting.
Even though we drew a one which is not divisible by two, we know that we previously did draw something that is divisible, so once again, the answer to our question of “is anything so far divisible by two” has to be yes!
In, fact, you might notice that now that we’ve answered yes, we can never answer no again. This makes sense since the question was if there is any number that is divisible by two. And of course, once we found a single one, the answer is absolutely. We still have to work through our example however, so let’s fast forward to the end.
We have our answer. Translate it to code? Ok, one last time
var areAnyDivisibleByTwo = function(areAnyPreviouslyDivisible, number) { return areAnyPreviouslyDivisible  (number % 2 === 0) } hatItems.reduce(areAnyDivisibleByTwo, false);
Think of some more questions, run through the exercise, and translate the algorithm to code and you too soon will be a reducing hero!
^{1} if you are just learning to program, you may remove up to two tsks
Comments
OLDER
 08 Jun Color Mixing Demo App
 06 May Some selfindulgence from the nolatech chat
 01 May Why Not MsTest
 20 Apr Stop teaching h tags
 19 Feb nodegyp won't install on Windows
 10 Nov Don't Teach Object Oriented Javascript
 31 Oct Use Simple Modules To Fix Up Your Ugly Brownfield App 1
 02 Aug Talk Roundup  Be the Javascriptiest
 29 Apr On this and new
 09 Oct Open IIS Express to the Network
 26 Sep Setting Up RequireJs
 29 Apr Stop that = this'ing
 16 Jan Error Handling and the Message Repackaging AntiPattern
 12 May QuickTime and a TIFF (Uncompressed) decompressor are needed to see this picture