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.

Users Can’t Have an Experience Until You Ship

Until you release what you’re working on the only person who can benefit from it is you, and you’re probably not benefiting very much because you haven’t released what you’re working on yet!

A painting no one can see is a painting that will inspire no one. A song no one can hear is a song that cannot bring a smile to anyone’s face. A website no one can visit has no impact.

So when should you ship?

As a general rule of thumb you should ship sooner rather than later. As a more concrete rule, ask yourself this question on a regular basis:

If I shipped today, would most of my target audience have a good experience?

If the answer is yes, it’s time to ship.

Note the word good in that question. I chose that word very carefully. I very purposefully did not choose words like great, outstanding, phenomenal, incredible, magnificent, or other grandiose terms alluding to some state at or near perfection. If any of those words apply, you’ve taken too long to ship.

If you have something that will provide a good experience to most people, trying to push it further beyond good is generally a poor use of your time and resources. When you release something good people will experience it, poke it, prod it, react to it, and give you feedback about it. The knowledge you gain from shipping will allow you to go from good to great much faster and much more easily than if you tried to do so on your own.

So, if you shipped your thing today, would most of your target audience have a good experience?

Access Object Properties with Variables

Typically object properties in JavaScript are accessed using the dot notation, like this:

var object = {
    foo: 'bar'
};

var example = object.foo; // example is now 'bar'

But what if you don’t know the property name at runtime?

Let’s say you wanted to write a function called propertyOfObject() that took two arguments, object and propertyName, and returned the value of the specified property. Dot notation won’t work in a situation like this:

function propertyOfObject(object, propertyName) {
    return object.propertyName; // This doesn't work!
}

That would look for a property that was literally named propertyName, which is not what we want.

The solution is to use bracket notation to access the property value, like so:

function propertyOfObject(object, propertyName) {
    return object[propertyName]; // Bingo.
}

Any object property can be accessed using bracket notation, and you can put any expression you want inside the brackets, as long as that expression evaluates to a string for the property you’re after. All of the following are valid approaches:

object['foo'];
object[propertyName];
object[someFunctionThatReturnsAPropertyName()];

Now you can access object properties at runtime without knowing their names in advance.

Don’t Use Inline Styles

You can add CSS to a specific HTML element using the style attribute, like this:

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

CSS rules specified in a style attribute like this are referred to as inline styles, because the style information is inline with the HTML.

You should avoid using inline styles at all costs.

Inline Styles are Harder to Maintain

The example above makes three changes to a single h3 element. What if you want to make those same changes to another element? If you use inline styles you’ll need to copy and paste all or part of that style attribute to the other element.

Now what if you want to change the color? You’ve got to remember to change it in two places. Or was it three? Or fourteeen?

Inline Styles are the Enemy of Consistency

When you use inline styles it’s incredibly easy to forget to apply them to an element, or overlook changing the styles on another element. Using a seperate CSS file allows you to keep all your style information in one place, ensuring that the edits you make there will be applied uniformly across your site.

Inline Styles Aren’t Cached Seperately & Add Bloat

Of the following two options, which do you think is faster and better?

Option One

Download this CSS once and cache it:

h3 {
    font-size: 1.5em;
    font-weight: normal;
    color: green;
}

Then load five pages, each with one of these:

<h3>I'm a Header!</h3>
<h3>I'm a Header!</h3>
<h3>I'm a Header!</h3>
<h3>I'm a Header!</h3>
<h3>I'm a Header!</h3>
Option Two

Download this, seperately, for each of the five page loads:

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>
<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>
<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>
<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>
<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

Inline Styles Break Seperation of Concerns

HTML is for content, CSS is for presentation. There are some exceptions, but inline styles should not be one of them.

Keeping a clear boundary between content and presentation is one of the best ways to keep your code maintainable and understandable. When you start mixing these you’ll end up with a tangled mess that no one wants to deal with.

Is it Ever Okay to Use Inline Styles?

There are some specific situations where use of inline styles cannot be avoided.

Sometimes inline styles must be used out of necessity, with the most common example being HTML emails. Many email clients are woefully out of date when it comes to supporting technologies we’ve been enjoying on the web for years and years, and many of them simply don’t understand CSS that isn’t inline.

Another example is JavaScript, which is used to alter the appearance of an element using inline styles (although modifying other attributes, like classes, are usually a better option).

Inline styles can also be convinent for quick prototypes or experiments, but they should never be used in a production environment.

Recognize & Avoid Passive Voice

Writing in passive voice can make your writing vague, awkward, longer than necessary. Passive voice also increases the chance that you’ll exclude important information. Today I’m going to show you how to both recognize passive voice and fix it when you find it.

First, let’s talk about the opposite of passive voice: active voice. A sentence written in active voice has the subject performing the action. Here’s an example of a sentence written in active voice:

Justin is teaching you how to recognize passive voice.

That sentence is clear, easy to read, and simple to understand. In this sentence I’m the subject, the action I’m performing is teaching, and you are being taught.

Now let’s look at the passive voice version:

You are being taught to recognize passive voice.

When using passive voice the subject of the action gets promoted to the subject of the sentence. This makes the sentence sound a little strange, and makes it a bit harder to parse and understand. But the problems don’t end there!

Using passive voice increases your risk of leaving out vital information. That’s what happened above. Who’s teaching you? Where did I go? You are now the subject of the sentence, which means forcing the previous subject out. If we try to work me back in, the awkwardness increases:

You are being taught to recognize passive voice by Justin.

That sounds horrible, and it’s even harder to read.

Now, it’s important to understand that passive voice itself is not wrong. In some specific situations it’s actually intentional or preferred. Here are some cases where passive voice makes sense:

  • When the identity of the subject is unknown. This is often the case when writing about crime, or when something anonymous happens. “The laptop was stolen.” “$300 was donated.”
  • When the identity of the subject is not relevant in the current context. “The rocket launch was successful.” “A new species has been discovered.”
  • When the identity of the subject is being concealed on purpose. Politicians and businesses use passive voice to conceal information or avoid blame. “Mistakes were made.” “The asset was secured.” “Your server will be offline for maintenance on Tuesday.”

If you find yourself in any of these situations passive voice might actually be the right choice. That said, it’s important to recognize these situations as what they are: exceptions. Most of the time, active voice is the best choice.

So, if you write a sentence and it sounds a bit off, ask yourself if the subject is taking the action involved. If the subject isn’t taking the action, but is being acted upon, you’ve likely got a case of passive voice.

To fix passive voice, first determine who or what is taking the action. Now rewrite your sentence so they are the subject. You should end up with a better sentence that’s easier to understand, and will often be shorter to boot!

Select the Right Image Format

There are four major image formats in common use on the web today. Each format its own strengths and weaknesses, and each is better suited to particular situations than others.

JPEG

JPEG is best for photos. JPEG images use something called lossy compression, which means that some of the original image information is thrown away (lost) in order to make the image smaller.

The JPEG format was specifically designed to find and discard information from photos that we humans are unlikely to notice is missing. This process doesn’t work very well on other types of images, like logos, diagrams, or images containing text.

PNG

PNG is best for raster images that are not photos. PNG files are generally a bit larger than JPEG images, but they use lossless compression, meaning no image information is thrown away (there are exceptions to this, like specifying a lower color depth when saving your PNG, but if you stick to the defaults you should be fine).

That means every pixel of a PNG will be rendered in perfect clarity, with none of the fuzziness that JPEG compression adds. This makes PNG images great for text and other fine details.

GIF

GIF is best for small, self-contained animations. GIF is an older, inefficient format. The only thing it has going for it is animation, and even then there are often better choices available. Video files are often higher quality at much smaller file sizes, for example, and adding animation to a website is often better accomplished using CSS and/or JavaScript.

If you have a meme, though, consider GIF.

SVG

SVG is best for vector images. Where raster images are comprised of pixels, math comprises vector images. When you enlarge a raster image you just see a lot of colorful squares, but a vector image can be scaled up or down infinitely because the math that describes its shapes and lines works at any size.

SVG is a great choice for logos, icons, text, diagrams, illustrations, and the like. The other big advantage SVG has is that they look great on all displays regardless of pixel density. Most of the images you see here at Core Assistance are SVG images.

Understanding Private Browsing

As you browse the web, your web browser saves a lot of information about what you’re doing in order to improve your experience online. Here’s a list of some of the things that your web browser normally remembers:

  • Cookies are stored so websites can recognize you automatically, making it possible to log in once instead of every time you load a new page.
  • Some files from the sites you visit (like stylesheets, scripts, and images) are kept in a local cache so you don’t have to download them every time, making web browsing faster.
  • The information you type into certain form fields is saved and made available the next time you fill out a similar form, saving you time.
  • A list of the websites you visted is kept so you can find that one page you visited last Tuesday.

Most of the time, having your web browser store this stuff is useful and desirable but sometimes you might not want it to. That’s where private browsing comes in. In a private browsing session your web browser doesn’t keep a record of anything.

  • No cookies or local storage entries are kept after your private browsing session ends.
  • The browser cache is disabled.
  • Autofill for forms and searches is turned off.
  • Browsing history is not saved.

Private browsing mode is useful for several reasons. Some sites, like Google, will remember you (even if you don’t log in) and tailor content (like search results) based on your previous activity. If you want to see the raw, unaltered content you can use private browsing to make these sites “forget” about you temporarily.

Another handy use for private browsing is to log in with multiple accounts using the same web browser, or log out without actually logging out. This is possible because the temporary cookies and local storage kept for a private browsing session are totally isolated and separate from your normal cookies and local storage. Changing one has no effect on the other.

A Word of Warning

Now, all of that said, it’s important to understand what private browsing does not do. Just because your web browser isn’t keeping a record of your private browsing session doesn’t mean no information is being revealed or saved elsewhere.

  • Your IP address is not concealed.
  • Your network traffic is not hidden, meaning your ISP, employer, or even people on the same network can still see what you’re doing.
  • The websites you visit can still see that someone is visiting them, and they may even be able to tell it’s specifically you using methods involving your IP address and other browsing data.
  • Your browser may not disable browser extensions when in private browsing mode, and some of those extensions may be recording your browsing history.
  • If your computer is infected with spyware or other malware, or you have monitoring software like a keylogger installed, that software can still keep track of your activity in a private browsing session.
  • Other parts of your computer do keep some records, at a lower level, that can be used to reconstruct part or all of your private browsing history. This includes things like DNS cache entries, examining certain file time stamps, and more. Fairly technical stuff, but not impossible.

Remember, private browsing can be useful in a lot of situations, but it’s not magic. Now that you know how it works you can use it with confidence.

You Might Not Need jQuery

Even if you’ve never used jQuery, You Might Not Need jQuery is a great place to find snippets of JavaScript for common tasks. You’ll find useful bits of code for ajax, effects, element manipulation and selection, events, and utilities.