Oh, Right. Blogs.

A recent ShopTalk Show episode reminded me that, as a web dude, I ought to at least have a blog. Mr. Rupert, on having a blog:

It proves that you can think through a topic and share ideas on that. That’s why everyone we’ve ever had on ShopTalk Show has a blog with really interesting comments…The things you write on your blog are your way of thinking through problems…I think you have to have one. Or, at least, it’s an incredible value to you and it’s an investment in your future.

Oh, right. Guess I better reboot this thing.

Chimero's "Homestead"

Frank Chimero recorded his thoughts on our modern web:

So, I’m doubling down on my personal site in 2014. In light of the noisy, fragmented internet, I want a unified place for myself—the internet version of a quiet, cluttered cottage in the country. I’ll have you over for a visit when it’s finished.

Git Refresher

I’m going through the online version of Pro Git by Scott Chacon. The entire thing is online, and it’s very good. Here are a few takeaways:

  • Git was created in 2005! It’s not that old.
  • The typical workflow is EditStageCommit.
  • To remove a file from Git, you have to remove it from your tracked files (more accurately, remove it from your staging area) and then commit. The git rm command does that and also removes the file from your working directory so you don’t see it as an untracked file next time around.

    — via Chapter 2

    I had trouble with that in the past, where I’d delete a file in the system but it would persistently display during staging. It makes sense: running git rm will stage a file to be deleted.

  • It’s useful to rename and relocate files through git using git mv.
  • Branching is git’s big deal. And it’s pretty sweet.
  • rebase is powerful, but avoid using it remotely.

Easy Hamburger Menu Icon

The “hamburger” icon – a vertical stack of equal-length lines – universally means “click me for menu!” It makes sense: menus are often vertical lists of navigation options.

I first saw this sweet technique on Grooveshark’s mobile site for making the hamburger icon using simple CSS. It’s pretty genius, and I’ve started using it wherever there’s need for that hamburger dude. Here’s your HTML:

<a href="#menu" class="menu-button">Menu!</a>

And here’s the styling:

.menu-button {
    background-color: #333;
    border-radius: .25rem;
    font-size: 0;
    line-height: 0;
    padding: .75rem .5rem;
}
.menu-button::after {
    content: " ";
    border-color: #ccc;
    border-style: solid none double;
    border-width: 4px 0 12px;
    display: block;
    height: 4px;
    width: 2rem;
}

The key is CSS borders. Note the border-style on .menu-button::after: it has a solid style, which forms the top line, and a double style, which forms the bottom two lines. One could easily add :focus, :hover and :active states to make it respond to interaction.

(Unfortunately, using em units doesn’t always make for equal lines, so I stick with pixels. Also, make sure you include pixel fallbacks for the rem units.)