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.

Change the Size of Text on Any Web Page

Browsing the Web •

In almost any web browser you can make text bigger by hitting Command (Mac) or Control (Windows) + = (the key with the plus sign). Want the text smaller? Hit Command/Control + - (the key with the minus sign). It’s also easy to go back to the default text size by hitting Command/Control + 0 (the zero key).

Depending on how the web page you’re viewing was designed, the layout and other elements on the page may scale up and down with the text, the text alone may scale, or the design could break entirely. If you make web pages, it’s important to realize that people can and do scale text up and down. Make sure your site works well when they do!

WebAIM

Resources & Links •

WebAIM is an invaluable site with accessibility tools, research, and other resources. Here are some highlights:

You Can’t Hover on a Touchscreen

UX & Accessibility •

When CSS was new the vast majority of web browsing took place on a desktop or laptop computer with a mouse attached. Thus, when the :hover pseudo-class started to have wide browser support, many people figured out how to stretch it to its limits. People created everything from tooltips that revealed important information when hovering over an element to dynamic, multi-layered cascading menus powered by CSS alone. Many people wrote articles and blog posts showing others how to stretch :hover to its limits and do some amazing things, and those posts are still floating around today.

However, just because you can do these things it doesn’t mean you should. Today there are a huge number of people browsing the web who can’t hover, either because their device doesn’t have a mouse cursor or the way they’re interacting with the web doesn’t involve a mouse. If you use :hover for any critical functionality you’re excluding a significant portion of your audience, and the number of people that fall into this category is climbing.

The biggest and most obvious group of people who will never see any of your :hover styles or functionality are people using smartphones, but they’re not alone. A lot of tablets are touch-only. Many people, either by choice or by necessity, navigate the web with only a keyboard. There’s also no concept of a mouse cursor when you’re blind, or have impaired vision, and are browsing the web using a screen reader.

The :hover pseudo-class is great for anything that isn’t critical. Enhancing the appearance of links and menu items, highlighting rows in tables so they’re easier to read, and other visual enhancements that are not critical to the way your site functions are great applications for :hover. Go ahead and use them, but be sure to keep people without mice in mind!

Naming Functions & Keeping Them Simple

JavaScript •

Every time I write a function or method, I take a moment to describe it to myself in plain English. Doing so serves two purposes: It helps me determine if the function is too complex, and it helps me come up with a good name for the function.

If the description I come up with for a function is more than a single sentence, or if that single sentence contains the word “and”, that indicates the function is too complex. In order to keep code understandable and maintainable, each function should serve a single purpose. There are, of course, exceptions to this rule, but they’re few and far between.

If a function does more than one thing it’s likely I’ll end up needing to do those individual things separately at some point in the future, so it’s a good idea to stop and break the function up into individual pieces now before things get too out of hand. It’s also much easier to understand and maintain code that’s broken up into small, easy-to-digest chunks with few (if any) dependencies on each other.

Once I have a function that produces a proper single-sentence, single-purpose description it’s usually easy to turn that sentence into a good, descriptive name for the function. Reduced code complexity and great function and method names with one simple technique!

So, how would you describe your functions?

HTML Terminology

HTML & CSS •

Elements, tags, attributes… there are a lot of terms used to describe the various bits of HTML. Understanding the most common of these terms will help you understand and discuss HTML with confidence, so in this tip I’m going to describe all the terms that apply to this snippet of HTML:

<a href="https://coreassistance.com/">Core Assistance</a>

That entire thing, the entire link from start to finish, is called an element. Specifically, this is an anchor element (the a stands for anchor).

This anchor element is made up of several components, the first of which is the opening tag, which is this part:

<a href="https://coreassistance.com/">

This opening tag contains an attribute:

href="https://coreassistance.com/"

Attributes are made up of name-value pairs. In this example, the name of this attribute is href and the value of the attribute is https://coreassistance.com/.

That’s the opening tag. Next comes the content of the element, also commonly called the text content:

Core Assistance

Finally, we have the closing tag:

</a>

So, to recap, here’s the entire element:

<a href="https://coreassistance.com/">Core Assistance</a>

This element has:

  • An opening tag:
    <a href="https://coreassistance.com/">
    • Containing an attribute:
      href="https://coreassistance.com/"
  • Some text content:
    Core Assistance
  • A closing tag:
    </a>

There are, of course, a couple of exceptions worth pointing out.

Some HTML elements do not have both opening and closing tags, and contain no text content. Take the image element, for example:

<img src="..." alt="...">

In this case the code above is still referred to as an element, but instead of calling this an opening or closing tag, it’s simply referred to as a tag.

This can lead to a bit of confusion. Most of the time an HTML element has both a start tag and an end tag, with neither tag representing the whole element, but rather being part of it. With some elements, however, that have no content, only a single tag is used, and that single tag represents the entire element.

Another exception applies to attributes. Most of the time an attribute consists of a name and a value, but some attributes have no value. The checked attribute is a good example of this:

<input type="checkbox" checked>

This input element contains two attributes. The first has a name (type) and value (checkbox), but the second attribute just has a name: checked. The mere presence of this attribute is enough to indicate the state of the checkbox, so no value is required.

Now you know the most common terms used in HTML!

Find a Proofreader

Writing •

If you’re writing anything of any importance get at least one other person to proofread it.

Yes, you can proofread your own work (and you should!), but nothing beats a different pair of eyes. Different eyes are attached to a different brain, and that brain is filled with different thoughts, emotions, and perspectives. Those differences will lead to commentary, insights, and revelations you simply cannot have on your own.

You are simply too close to your own writing to proofread it as effectively as someone else can. You often can’t see the forest for the trees, which means you’re going to miss small things like typos and big things like forgetting to remove several sentences you thought you removed yesterday.

Writing is difficult. It gets easier the more you do it, but you’ll never master it. You’ll never reach a point where your words won’t benefit from someone else reading them. Even professional authors with dozens of popular books have proofreaders look at their work before publication. My wife, Aleen, proofreads every single one of these tips before they’re published. Her input has been instrumental to the level of quality and utility you see here at Core Assistance.

Oh, and one last thing: When you find a good proofreader, show your gratitude. Tell them how awesome they are, and do so frequently. Take them to lunch. Pay them. Whatever the arrangement is, make sure you show them how much you appreciate them because a good proofreader is rare and incredibly valuable.

White Space is Your Friend

Design •

It can be tempting to fill every nook and cranny of your website with content, images, or just, well, something. Leaving empty space can seem wrong, like you’re leaving things unfinished or wasting space.

It might seem counterintuitive, but white space is a critical element that is useful, powerful, and vital to any visual design.

White space will make your content easier to read by improving legibility. The more visual clutter, the harder people have to to find and focus on what they’re interested in.

In fact, the opposite is also true: The less visual clutter, the easier it is for people to find and focus on what they’re interested in. You can strategically deploy white space to draw more attention where you want it.

A page filled with a dozen different things presents a dozen different choices to your visitor, and each of those choices is another layer of friction, another opportunity for them to go somewhere else entirely. Reducing the number of choices your visitors have to make and focusing their attention with white space is key.

White space is also a critical component of a balanced design. A dense page crammed full of visually distracting elements just feels wrong on a visceral level. It makes people uncomfortable, and that’s the last thing you want your visitors to feel.

White space is an incredibly useful and versatile tool. Don’t be afraid to use it!