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.

A Quick Fix for Unbalanced Stereo Audio

Browsing the Web •

I recently came across a video online that had all the audio on the left channel. It was a recording of a talk, and having the speaker’s voice coming out of only the left speaker was very distracting.

Thankfully, there’s a quick way to fix this. Macs and recent versions of Windows have an accessibility feature that combines stereo audio into a single mono channel (which is then distributed equally to both of your speakers).

On a Mac open System Preferences, choose Accessibility, select Audio from the list on the left, then check the Play stereo audio as mono box.

On Windows 10 press Windows Key + U to bring up the Ease of Access Settings, click on Other Options, then turn on the Mono Audio setting.

After enabling this setting, you can concentrate on what matters. Just remember to turn it off when you’re done!

Grammar Girl

Resources & Links •

Have a grammar question? Curious about the best way to approach a bit of writing (technically speaking)? Curious about some of the more obscure bits of the English language? Mignon Fogarty has you covered with Grammar Girl.

Whenever I find myself wondering something like how to use hyphens properly or what the difference between cannot, can not, and can’t is I check Grammar Girl first.

You’ll also find some interesting posts over there, like the one about the $10 million comma.

Accessible Can Be Beautiful

UX & Accessibility •

Making something accessible does not mean making it boring, unattractive, or plain. This is especially true on the web, especially now. With tools like flexbox and grid we have the ability to create incredible layouts without compromising the underlying HTML.

If you’re looking for an example of a beautiful website with great accessibility look no further than 24 ways. Want another example? I encourage you to make it.

Don’t Write Magic, Hard-to-Understand Code

JavaScript •

Take a look at this:

var string = '42';
var foo = +string;

Do you know what that second line does? Do you know what foo will contain when this code is run? Chances are you don’t, even if you’re a seasoned JavaScript developer.

This is an example of what many refer to as “a neat hack” or “a bit of magic.” I, on the other hand, refer to this as “hard to read and understand.”

That second line above takes advantage of how the + operator works in JavaScript to cast the content of the string variable to a number. Thus, foo now contains the number 42 instead of the string '42'.

Still find that code hard to understand even after I explained it? I don’t blame you.

Compare the code above to the following:

var string = '42';
var foo = Number(string);

This code does the exact same thing, but it omits confusion and embraces clarity. It doesn’t depend on the reader having obscure knowledge of the esoteric behaviors of JavaScript. It’s readable and understandable.

Here’s another example:

var string = 'hello';
var foo = !!string;

What? What’s foo now?

This code casts the value of the string variable as a boolean and sets foo to true. I’ve been using JavaScript for years and years, but if I came across this code I’d have no idea what it did without looking it up. This technique might be a fun intellectual curiosity, but it should never be used in practice.

Examine this alternative:

var string = 'hello';
var foo = string ? true : false;

This reads almost like a sentence. If string is truthy, set foo to true, otherwise set foo to false. Easy to read, easy to understand; the hallmark of great code.

It can be tempting to show off a neat trick you just learned, or show how deep your knowledge of a programming language goes. Doing that, however, is just going to come back to haunt you. Future You is unlikely to remember this stuff unless you use it constantly, and the vast majority of other developers won’t appreciate it. Most will see an annoying hurdle standing between them and understanding the code, not a nifty trick that will save them a few keystrokes.

Avoid temptation. Write code that’s easy to read and easy to understand.

How to Easily Style the Current Navigation Element

HTML & CSS •

Let’s say you have a website with some navigation elements:

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/about/">About</a></li>
    </ul>
</nav>

Now, imagine you want to make the active navigation element bold. That is, when you’re on the home page, the Home link should be bold; when you’re somewhere inside the blog section the Blog link should be bold, and so on.

You might be thinking about writing some code on the server that spits out a special class for the current section’s navigation link. That would work, but it isn’t going to scale well as more sections are added.

But there’s a better way!

Let’s start by adding some classes to the navigation elements:

<nav>
    <ul>
        <li><a class="home" href="/">Home</a></li>
        <li><a class="blog" href="/blog/">Blog</a></li>
        <li><a class="about" href="/about/">About</a></li>
    </ul>
</nav>

Now, for each section of the site, add a matching class to the body element, like this:

<body class="home">

Now, with this CSS, the current section’s navigation element will key off of the body class:

body.home nav a.home,
body.blog nav a.blog,
body.about nav a.about {
    font-weight: bold;
}

Nothing dynamic, and no server-side coding required!

If a new section is added to the site all you need to do is add the new navigation link:

<nav>
    <ul>
        <li><a class="home" href="/">Home</a></li>
        <li><a class="blog" href="/blog/">Blog</a></li>
        <li><a class="about" href="/about/">About</a></li>
        <li><a class="contact" href="/contact/">Contact</a></li>
    </ul>
</nav>

Then add a new selector to the CSS:

body.home nav a.home,
body.blog nav a.blog,
body.about nav a.about,
body.contact nav a.contact {
    font-weight: bold;
}

There you go!

Don’t Punish Yourself for Writing Badly

Writing •

Writing is difficult. Some people devote their entire lives to writing, and many of them admit they still don’t have it quite right.

Like any other skill, writing takes practice. You’re not going to be good when you start. You may not even be good after a lot of practice. That’s okay. Remember, every time you string some words together you’re getting a little bit better. That’s what counts.

There will always be better writers, and there will always be better copy. It’s useful to look at great writing for inspiration and ideas, but don’t demand too much of yourself.

If you can’t assemble the masterful sentence your mind envisions, take solace in the fact that you are not alone. Also, and this is key, what you write doesn’t have to be perfect, just good enough. Are you getting your message across? Did you find and remove the typos and other technical errors? Good enough!

Put in the practice and give yourself some grace on the hard days. Stretch yourself, strive to write well, but be okay with words that are good enough.

Failure is a Natural Part of the Process

Design •

It’s easy to look around and see success everywhere. Other designers, developers, business owners, companies… they’re all doing great! They’re not screwing things up. They’re making incredible things. How can I possibly do that well? How can I avoid failing?

Here’s the thing: The success you see everywhere is deceptive. People curate what they share. Success is celebrated, but failures are rarely made public. What you see from the outside is everything that went well and nothing that didn’t. You’re only getting part of the story.

That incredible logo? That amazing website? That wonderful copy? Not their first attempt. Probably not even their hundredth. That great work is standing on a foundation of failure, one built out of numerous false starts, prototypes that didn’t work, and countless iterations that transformed the raw material of a vague idea into something wonderful.

Many people have the mistaken impression that the path to success looks like this:

  1. Start.
  2. Succeed.

That’s not how it works. Failure is part of the process. Any successful person, if they’re being candid, will tell you the path looks a lot more like this:

  1. Start.
  2. Fail & learn.
  3. Fail & learn.
  4. Fail & learn.
  5. Fail & learn.
  6. Fail & learn.
  7. Fail & learn.
  8. Fail & learn.
  9. Fail & learn.
  10. Succeed.

(Note: Number of steps may vary!)

Each failure is an opportunity to learn and grow. Each one is literally one step closer to success. Many people, when confronted with their first or second major failure, stop and give up. The choice you make when confronted with failure is one of the key differences between people who succeed and those that don’t.

In order to succeed, we need teachers to show us the way forward. Failure is one of the greatest teachers. Some lessons can only be learned through the act of failing. Don’t lament the absence of success, instead revel in the fact that you know a little more than you did before and are now that much closer to success.