I often have need to build layout's that vary depending on the content put in them. I can't always count on that content being the same (cough CMSs cough). It's just one of those things you have to do.

One thing I'm having to do a lot though, is making the body of a page take up a certain amount of space so that the footer doesn't look weird. In the past I've used JavaScript to make the footer take up the remaining space on the page if the content didn't take up enough. I never really liked that solution though, because it breaks if the user turns off JavaScript.

Today I wanted to share with you two CSS things, that when combined solve my particular problem, and might just solve yours too.

vh

Equal to 1% of the height of the initial containing block.

from w3.org

This gives us the height of the page, which we're going to need to calculate how much space the main content area of the page should take up.

clac

With calc(), you can perform calculations to determine CSS property values.

from MDN

This allows us to perform mathematical calculations and set a property to the result. This, combined with vh gives us a lot of power!

My Solution

In order to ensure that the body of a site I'm working on is always taking up at least enough to completely fill the page. I have a couple of things on the page that are fixed height (header and footer). I take the aggregate height of them and subtract that from 100vh (100% of the viewport height), like so:

#body {
  min-height: calc(100vh - 405px);
}

Now #body is going to be at least the height of 100vh - 405px!

This is just one use-case. I'm sure there are tons of others! What are you using calc and vh for in your projects?

Call

Calls a function, with the specified arguments passed in

The first argument becomes this, the rest are passed in as regular arguments. Using call allows you to maintain the scope of this accross methods. It works like this:

Here we're using prototypical inheritance to allow us to inheirit properties from Animal in Dog and Cat. Using call allows us to invoke Animal to initialize it's properties while maintaining the correct scope.

Apply

Calls a function, with the specified arguments passed in as an array

Just like call, the first argument becomes this. The rest of the args are passed in as an array.

Bind

Creates a bound function with the same function body as the function it's called on

With bind, we actually get a reference to a new function. The first argument passed to bind becomes this, and the rest are passed as regular arguments. This is especially handy for event handlers.

Wrapping up

These examples are fairly trivial, but they do serve to show that it's possible to manage scope without aliasing this to something like self. In a lot of cases that can actually be pretty confusing. But, as with everything, use what makes sense! This method may or may not work well for you, and that's okay.

1. Subject Line

The Subject Line is the first line of your commit message. Often the subject alone is enough, but if it's not and you need a body be sure to separate the subject and body with a blank line.

• First line of a commit message
• Often the only part you'll need
• Separated from the body by a blank line
• Soft limit of 50 characters, hard limit of 69
• Github's interface truncates the subject line at 69 characters
• Capitalize!
• Don't end with a period
• Use the imperative mood
• Git itself uses the imperative mood when it creates a commit on your behalf
• We usually write in the indicative mood, which is more about reporting facts
• To help, the subject line should always complete the sentence:
  • "If applied, this commit will..."

2. Body

• Wrap the body at 72 characters
• This give git plenty of room to indent text while still keeping thing under 80 characters.
• Use the body to explain what and why vs. how
• The code tells us the how, the body of your commit message should tell us what and why.

Sample Commit Messages

Bad

Fixed the thing

Good

Fix all the broken things

There were some broken things so I refactored many codes to simplify
and fix all the things.

• Uses the imperative mood for the subject line
• Separates the subject from the body with a single blank line
• Describes the what and why in the body

Adding named properties to arrays in JavaScript can be handy in a few different cases. For instance:

• You need a nice formatted title / description for a data set. Rather than having multiple objects you can use named properties and get away with only using one.
• You want to add some functions to an array for whatever reason
• Lots of other reasons that I can't think of right now!

Basically, this just buys you a nice way to encapsulate all the data you might need, without having to use an object with a nested array, or multiple objects. Maybe your way is more clean or better for this reason or that... I just thought this was neat. :)

Let's get into some code to play around with this. I'm going to use JSFiddle.net for this so you can play with the code yourself.

The reason that this works is because of the way that array.length is updated. In JavaScript, array.length is updated whenever you use a built-in array method (e.g., join, push, unshift, etc). So, when you build an array, all the numerically indexed properties are taken into accound as part of the length.

When you add a named property to the array it doesn't update the length, and therefore you can iterate over an array and only get the numerically indexed items.

I'm at Angle Brackets. I've decided that I wanted to try taking all my notes in vim. I LOVE using vim. It's a really awesome, powerful, and extendable command-line editor. I enjoy that it's really distraction free. Being distracted is something that I struggle with so I really look for ways to stay focused.

I write in Markdown as well. It's a great way to get a simple, clean, well formatted plain text document that can be processed and produce HTML. One of the biggest things I look for in a Markdown editor is being able to preview the HTML that my markdown produces. Obviously vim isn't going to give that to me out of the box. I wouldn't expect it to either.

However, I figured I could either extend vim, or better yet, my shell to give me markdown previews. After a bit of Googling I was able to find an npm package called github-markdown-preview. I knew I would be able to leverage this from within vim by sending the commands to my shell using :shell or even :!. I wanted something a little more elegant though.

Since I'm in Windows I use PowerShell. I added the following to my PowerShell profile:

Set-Alias -Name gmp -Value github-markdown-preview

Function mkdown-preview($file)
{
    $preview_dir = $home + "\AppData\Local\MarkdownPreview";
    if((Test-Path $preview_dir) -eq 0) {
        New-Item -ItemType Directory -Force -Path $preview_dir;
    }

    $preview_file = $preview_dir + "\mkdown-preview.html"

    gmp $file -o $preview_file

    Start-Process "chrome.exe" "file:///C:/Users/acrowder/AppData/Local/MarkdownPreview/mkdown-preview.html"
}

Now I can do the following on the command line:

mkdown-preview('mkdown-file.md')

If the MarkDown preview folder doesn't exist then it will be created and then we'll output the HTML generated from your Markdown to a file. Finally, we'll open that file in Chrome for the preview. Obviously you can edit that function to open up the browser of your choice.