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.

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 Edit → Stage → Commit.
• > 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.

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.)

I’m excited to finally launch a fun side project, Oregon Breweries.

It’s a single-page listing of Oregon’s many brew houses and tasting rooms, along with an interactive map. As of this writing, there’s 184 places to savor a cold one in our great state. Drink up!

In the future, I’d like to put the project on GitHub so anyone can contribute. I’d also like to publish an RSS feed so folks can keep track of new locations. Until then, if you notice a missing Oregon pub, have an idea, or want to contribute, please do get in touch.