Daily Tips & Tricks for Web Enthusiasts

Get new tips and tricks in your inbox every week!

You can also follow @CoreAssistance on Twitter (where I tweet about each day's tip), subscribe to the RSS feed, browse the archive, or start with the first tip.

Restore Recently Closed Web Pages

Browsing the Web •

We’ve all closed a web page on accident at one point or another. The good news is that they’re easy to get back!

If you’re using a Mac or PC you’ll find various options under the History menu of your web browser for restoring recently closed pages.

On iOS devices (like iPhones and iPads), you can restore recently closed web pages by pressing and holding the + (new page/tab) button in Safari.

In Chrome on Android, tap on the menu button (represented by three stacked dots) and select the Recent tabs option.

Can I Use?

Resources & Links •

Near the top of my most-used resources is Can I use…, an incredible resource that shows you if a particular web technology is supported in the browsers you care about. It contains a wealth of information about browser support for HTML, CSS, JavaScript, SVG, Security, and more.

Just visit the site, type something in the text field at the top, and out pops some incredibly useful information tables. You can tell at a glance which versions of which browsers support what you've searched for, including full, partial, or no support. The tables can be adjusted to show various factors like global or regional market share, relative usage, browser release date, and more. You even get notes, known issues, and resources at the bottom of each result.

Text Readability Basics

UX & Accessibility •

There are five primary factors involved when it comes to designing text that's comfortable to read on the web:

  • Font Family
  • Font Size
  • Font Color
  • Line Length
  • Line Height

Font Family

Generally speaking, for body copy, you should use a serif or sans-serif font designed for large blocks of text. The usual suspects here are font families like Helvetica/Arial, Times, and Georgia. Avoid fancy script font families, typefaces designed for headlines, and the like.

Font Size

When it comes to the size of text on the web, the biggest misstep to avoid is making text too small. Most web browsers default to a font size of 16px for a reason; don't go much smaller than that.

Font Color

Font color is important for one reason: contrast. In order for your text to be readable it needs to have a decent contrast ratio. Be wary of placing light text on a light background, or dark text on a dark background. Not everyone has perfect, or even good vision. As we age our eyes take in less and less light. Just because you can read something doesn't mean everyone can.

Line Length

The optimal length of a line of text is a matter of some debate, but most people agree that the acceptable range is somewhere between 50-75 characters long, including spaces. You should avoid going over 80 characters long at all costs, as doing so will have a severe impact on the readability of your text. As a general rule of thumb, and depending on the font family being used, you'll want to aim for a width of 25em to 35em as a good starting point, and then tweak things from there.

Line Height

Like line length, line height is another subjective area, but most people agree that something between 1.2-2 times the size of your text is best. One thing to note here is that, in CSS, the line-height property will take a value without a specific unit, which makes sure the line height is always relative to the size of the text in question. So, avoid line-height: 1.5em and use line-height: 1.5 instead.

This tip barely scratches the surface of typography on the web, but it’s a start. Get these basics right and your text will be comfortable for the majority of people to read, and the more comfortable people are reading your content the better!

Beware of typeof

JavaScript •

The typeof operator in JavaScript is full of strange quirks. Before I show you what to watch out for let's take a look at what it does correctly.

First of all, typeof will always return a string that (supposedly) describes what follows it. Here are some examples that work as expected, with the resulting string shown in a comment following each statement:

typeof undefined; // 'undefined'
typeof true; // 'boolean'
typeof 42; // 'number'
typeof 'foo'; // 'string'
typeof function () {}; // 'function'
typeof { foo: bar }; // 'object'

So far, so good. But what about using typeof on an array?

typeof [foo, bar]; // 'object'

Well, okay, arrays are technically objects in JavaScript, so that's cool, I guess.

What about null?

typeof null; // 'object'

So that's, uh, also an object? Okay, sure.

What about a class?

typeof class baz {}; // 'function'

So a class is a function? Again, technically true, but maybe not the result we were expecting.

What about NaN, which literally stands for "not a number"?

typeof NaN; // 'number'

Oh, JavaScript, you precious thing.

Now that you know to watch out for those unexpected results, let's talk about how to get some more useful information from unknown types.

The Object class in JavaScript has a toString method prototype that can be called directly to produce a string that's a bit more descriptive and useful:

Object.prototype.toString.call(undefined); // '[object Undefined]'
Object.prototype.toString.call(true); // '[object Boolean]'
Object.prototype.toString.call(42); // '[object Number]'
Object.prototype.toString.call('foo'); // '[object String]'
Object.prototype.toString.call(function () {}); // '[object Function]'
Object.prototype.toString.call({ foo: bar }); // '[object Object]'
Object.prototype.toString.call([foo, bar]); // '[object Array]'
Object.prototype.toString.call(null); // '[object Null]'

Much better. We can now tell the difference between an object, an array, and null!

Alas, this method still falls short when it comes to classes and NaN:

Object.prototype.toString.call(class baz {}); // '[object Function]'
Object.prototype.toString.call(NaN); // '[object Number]'

The class situation makes sense; classes in JavaScript are really just fancy syntax for special functions, but it would be nice to see something like [object Class] returned here all the same. Oh well.

So, be careful when using typeof, and use Object.prototype.toString.call() if you need something a bit more descriptive.

Easy Layout Debugging with Outlines

HTML & CSS •

When I’m working on a layout problem one of my favorite tricks to figure out what’s going on is applying outline: solid red 1px to the elements I’m working with. This works much better than borders because outlines do not affect layout, so my debugging outlines won’t get in my way or cause further problems.

This trick can easily be expanded for more complex debugging sessions too, just use different styles and colors on different elements. Here are some of my favorites:

.troublesomeElement {
    outline: solid red 1px;
}

.whatIsHappening {
    outline: dashed blue 1px;
}

.seriouslyWTF {
    outline: dotted orange 1px;
}

You can also combine this trick with some fancy selectors to make sure you remember to do certain things, like fill in blank links:

a[href=''] {
    outline: solid red 1px;
}

Link Wisely

Writing •

If you’ve spent any length of time on the web you’ve probably seen something like this:

Click here to check out my website, Core Assistance.

That technically works, but linking this way will cause problems.

First of all, it makes the assumption that the person reading this can click. More and more people are using mobile devices with touch screens, and as we move forward there are going to be a significant number of people who have never even used a mouse.

Secondly, linking to things this way takes the person reading out of the narrative. You don’t need to beat people over the head with the fact that there’s a link. It’s clumsy.

Third, linking this way is often annoying to people with disabilities. Screen readers and other assistive software will often compile a list of all links, out of context, to provide a handy set of possible navigation paths for the user. If your link text isn’t descriptive on it’s own that list of links is going to be useless.

Let’s look at another approach:

Check out my website, Core Assistance.

That’s better. Much more natural, fewer words, and there’s no longer a disconnect between the text describing what’s being linked to and the link itself. The link is integrated into the sentence instead of being tacked on as a separate piece, which makes a big difference.

This all might seem like a small thing, but it’s not an exaggeration to say that links are the single most important part of the web, so taking time to do them right is worth it. Your readers will appreciate it, and what you write will be all the better for it.

Design is How it Works

Design •

For the first Design tip on this site I can think of nothing better than this quote:

“Most people make the mistake of thinking design is what it looks like,” says Steve Jobs, Apple’s C.E.O. “People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”

That’s from a New York Times story, The Guts of a New Machine, which was published at the end of November in 2003. The article is about the iPod, which I didn’t remember until I researched the source of the quote. The article didn’t stick with me, but the quote did, especially that last bit: “Design is how it works.” I can’t count the number of times that quote has surfaced in my mind and kept me from making bad design decisions.

One of the most difficult challenges I had when making this Tips & Tricks site was coming up with an icon for the Design category. Most icons that attempt to represent design use a paint brush, or a pencil, or something like that. I could have created something similar, but this quote kept coming back to me. I didn’t want to reenforce the misconception that design is a coat of paint. Design really isn’t how it looks, it’s not about the veneer, it’s not superficial.

Until I realized this, until I believed this, I was not good at design.

I’ve used this belief as a core guiding principal for years, and it’s served me incredibly well. So, today’s tip is this: Remember that design is, indeed, how it works.