Put Down the Torches

Or, agree to disagree. It’s OK to have differing opinions. It’s even OK to publish your opposing views. But, it can be done in a constructive fashion. There’s really no reason to berate someone just because you don’t agree with their view.

If you want people to listen and take you serious, then make sure you don’t sound like an asshat. If you’re not sure you can criticize constructively, then maybe it’s best to do nothing; just move along and avoid the mob.

Don’t be Trampled Recruited

Here are some key phrases to identify and avoid a potential mob:

• I’m boycotting such-and-such.
• So-and-so has no right to discuss such-and-such topic.
• So-and-so should be fired.

When you see these phrases, run, don’t walk, or you may be recruited by the mob. Once you’re in the mob, you’re guaranteed to look like an asshat.

Stand Strong

If you’ve been scared to write or create because of the mob effect, be strong. If you stop sharing, we all lose. Don’t let some asshat win.

Out of curiosity, I threw together a quick test to see if I could prefetch an image using the following method:

<link rel="prefetch" href="image-name.jpg">

Image Prefetch Test

It’s typically a bad practice to specify background-image on :hover without a sprite. However, in this case it’s perfect for testing whether an image was prefetch’d or not.

At the time of this writing, using the prefetch technique above, the image was not pre-loaded in Firefox 18.0, Chrome 24.0 or Internet Explorer 10.0.

Update: Firefox is the only browser I tested which did pre-load the image. I believe I was hovering the boxes too close to page load on my initial test. After seeing the waterfall posted below I tried again, clearing cache in all the browsers, loading the page and waiting a bit longer before hovering. Regardless, this method probably isn’t ready for the masses until there is better browser support.

Manually Add a Class

It’s fairly simple to remedy this for nav, buttons and whatnot; just use your CSS skills. However, CSS doesn’t select parents, so it can’t target <img> with parent <a>, then remove the border. If it’s a small site with a set number of pages, then a class could be added manually to each linked image, like so:

.border_bottom_none {
  border-bottom: none; }

<a class="border_bottom_none" href="#">
  <img src="happy.gif">
</a>

Add the Class with JavaScript

Adding a class manually isn’t scalable for a large site or blog. For these I suggest using jQuery, which is how I handle it on this site.

$('a img').parent('a').addClass('border_bottom_none');

Don’t forget to style that class and include the jQuery library.

First, save the viewport height to a variable. Next, query the DOM for .container, add style="min-height:;", then set the value to windowHeight. Replace .container with the class or id of the element you wish to target.

$(document).ready(function(){
  windowHeight = $(window).height();
  $('.container').css('min-height', windowHeight);
});

Make sure to include jQuery, since this incorporates methods specific to that library.

The Riddle

.container is 70% of the window, and .sidebar is 20% of .container. The percent of a fixed element is calculated from the window, not the parent. Find the percent which makes .nav_fixed the same width as .sidebar.

The Answer

Setting .sidebar to 20% won’t work; it’s too large at 20% of the windows width. We need to figure out the size of .sidebar in relation to the window, which is 20% of 70%.

The quick answer: multiply 20×70, then move the decimal left two places. 14% is the width of .nav_fixed.

And, here’s the math behind the answer:

Credit goes to Michael Cohen and his video on Percent of Percent, in which he gives a better explanation.

Maybe it’s just my OCD, but the page jumping really annoys me, especially on sites I’m building. It makes me cringe. Anyways. It’s certainly not the end of the world, but there is an easy fix if you’re so inclined.

html {
  /* show scrollbar regardless of page height */
  overflow-y: scroll; }

I’ve included this in my projects for many years, and I thought it was worth sharing for those interested.

I asked myself that question while working on my redesign. So, I looked at my site traffic to gain some insight. Of course, my audience is comprised mostly of nerds, so it’s not surprising that a mere 0.2% of visitors to this site are using IE7. Thus I’ve discontinued support for anything less than IE8.

About the same time I was beginning another project, on a suite of sites, with a much less technical audience. In fact, Internet Explorer was just tipping the scale at 51%. Though, only 6% of the total site visitors were using IE7. A look at the previous 6 months revealed a rapid decline as well; down from 10%. I decided to drop support for IE7 on these sites as well. Done and done.

Sudden disappearance

How did IE7 disappear so much faster than IE6? It’s no mystery. Over the last year, there’s been a concerted effort to end IE6, and in general, encourage people to upgrade their browsers. Well, it paid off. Not only did IE6 folks upgrade, but a lot of people with outdated browsers made the jump.

Though, don’t expect IE8 to drop-off as quickly. Windows XP cannot upgrade beyond IE8, and there are still a lot of XP machines that will likely be around for awhile.

What will you do?

• Will you support IE7 on your next project?
• Do your stats reveal a similar trend?
• Are your clients requesting browser specific support, or do they expect you to make that decision?

Analyze the data first

Every site has a unique audience. The best way to decide which browsers to support is to analyze site traffic. If you’re not already, use Google Analytics, which is free, or another service to monitor site traffic and visitors.

Featured photo by Frank S

I absolutely love this tool. It’s easy to use and straightforward, yet solves a definite need for exposing a local website to the internet. Another great use; mobile testing. Now I can view and test changes on my iPhone without deploying to a live production or development server.

Localtunnel is available as a RubyGem. Make sure Ruby is installed first, then simply follow the localtunnel instructions. If you need to install Ruby on Windows, I recommend RubyInstaller or RailsInstaller.

Once you’ve installed the gem and authenticated your public key, a simple one line command generates the public url which can be shared with anyone online.

// Install the gem:
$ gem install localtunnel

// First time requires authentication with a public key:
$ localtunnel -k ~/.ssh/id_rsa.pub 8080

// All subsequent sessions are this easy:
$ localtunnel 8080

Instructions are available on the localtunnel page, or head over to Github for more details and hardcore forking action. Localtunnel was created by Jeff Lindsay, and is sponsored by Twilio.

Update Jan 5, 2013

Say you’re running WordPress on WampServer… it won’t work, even if localtunnel is running on 8080 or whatnot. It basically works with Rails apps running on Rails server, Unicorn, etc., which is all I needed until recently.

There’s a couple of options If you’re working with a non-Rails app on Windows. I haven’t had the time to try either yet, so please report back if you have any luck.

• Twilio instructions – http://www.twilio.com/docs/quickstart/python/localtunnel
• LocalTunnel.NET – https://github.com/danielrmz/localtunnel-net-client

I couldn’t think of a good name to convey this concept, so I went with an alliteration. Basically we want to split the page in two, so the sidebar color extends or fits the page. Here’s a few ways to create the effect.

Repeating background image

Using a repeating background image is simple and should work in every browser. The drawback; it’s an image, so if the colors change we have to update the image.

For the body background we need to create an image that’s half the first color and half the second color(50/50). To cover wide resolutions and hi-res displays in the future, I made my image 3500 x 1.

html {
    height: 100%;
    }
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: url('bg_body.gif') top center;
    }
#container {
    margin: 0 auto;
    width: 950px;
    height: 100%;
    }
#main {
    float: left;
    padding-left: 30px;
    width: 605px;
    height: 100%;
    background: #D9CEAD;
    }
#sidebar {
    float: left;
    padding-right: 20px;
    width: 295px;
    color: #fff;
    }

<div id="container">
    <div id="sidebar">
        <!-- insert sidebar content -->
    </div>
    <div id="main">
        <!-- insert main content -->
    </div>
</div>

View Example

Alternate background image method

We could create a background image with the actual column widths, which means we wouldn’t need to specify the background color for the columns. However, we lose the ability to scale the column widths without updating the background image. With that said, I won’t go into the details here, but give it a whirl and see which works for you.

Gradient background (experimental)

This method offers the most flexibility. Unfortunately it’s not going to work in IE6-9, because they don’t support gradient stops. For now it’s just for fun.

Everything is identical to the previous example, except we just replace the background image with a gradient:

body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #D9CEAD; /* Fall back */
    background: -moz-linear-gradient(left, #8A4442 0%,
                #8A4442 50%, #D9CEAD 51%, #D9CEAD 100%);
    background: -webkit-linear-gradient(left, #8A4442 0%,
                #8A4442 50%,#D9CEAD 51%,#D9CEAD 100%);
    background: -o-linear-gradient(left, #8A4442 0%,
                #8A4442 50%,#D9CEAD 51%,#D9CEAD 100%);
    background: -ms-linear-gradient(left, #8A4442 0%,
                #8A4442 50%,#D9CEAD 51%,#D9CEAD 100%);
    background: linear-gradient(left, #8A4442 0%,
                #8A4442 50%,#D9CEAD 51%,#D9CEAD 100%);
    }

Related resources

• CSS gradient generator by ColorZilla

Have you ever used a background image or extra markup to create the illusion of equal height divs?

Sometimes we want columns with equal heights for a visual effect, but we don’t always know the height of our content.

CSS Table Values

HTML tables already match neighboring cell heights. Like a spreadsheet, if a cell height changes, all of the cells in that row inherit the height. Unfortunately block level elements don’t share heights with their neighbors, making this tough to do with divs alone. However, we can apply a few CSS table values to block level elements, which will emulate a table without the <table> markup.

Ruled Columns

Here’s the most basic example; just a container div and two nested divs, each with content of varying height. For visual effect, the columns have vertical rules:

.table_container {
    display: table; }
.cell {
    display: table-cell;
    border-left: 1px solid #abb8b0;
    padding: 0 30px;
    width: 258px; }
.table_container > :last-of-type {
    border-right: 1px solid #abb8b0; }

<div class="table_container">
    <div class="cell">
        <!-- insert content -->
    </div>
    <div class="cell">
        <!-- insert content -->
    </div>
</div>

View Example

Columns with Gutters

What if we want our columns to look more like boxes with a gutter between them? Table cells can’t have margins, but we could add a div for the gutter:

.table_container {
    display: table; }
.cell {
    display: table-cell;
    border: 1px solid #809e9c;
    padding: 10px 30px;
    width: 258px;
    background: #fff; }
.gutter {
    display: table-cell;
    width: 30px; }

<div class="table_container">
    <div class="cell">
        <!-- insert content -->
    </div>
    <div class="gutter"></div>
    <div class="cell">
        <!-- insert content -->
    </div>
</div>

View Example

Remove the Last Gutter in a Loop

Say we want to include this markup in a loop, possibly for WordPress. Unfortunately the last gutter div will make a mess of things. The solution; simply target and hide the last div:

.table_container > :last-child {
    display: none; }