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.

Remove Annoying Fixed Elements

Browsing the Web •

Most of the time the navigation here on Core Assistance stays visible as you scroll. However, if your display isn’t very tall, I leave the navigation at the top of the page. This allows more room for content when the site is viewed in a small browser window or on a smartphone.

Unfortunately, a lot of websites these days aren’t so thoughtful. Many sites keep headers, footers, subscription forms, chat prompts, social icons, navigation, and other elements visible at all times, leaving only a tiny area for the actual content.

If this upsets you, you’re not alone. Alisdair McDiarmid was also quite annoyed with these sticky elements, so he created a Kill Sticky bookmarklet to get rid of them. His bookmarklet will remove any element with position: fixed; applied, which should take care of most of the annoying elements you’ll encounter.

Just add his bookmarklet to your bookmarks or favorites bar, then click on it to banish sticky elements when they annoy you. If you want them back, all you have to do is reload the page.

Bonus tip for iPad users: If you’re running iOS 11 or higher you can now drag and drop bookmarklets into the bookmarks panel when Safari is full screen. Just display the bookmarks panel using the bookmarks button in the upper left corner, navigate to where you want the bookmarklet to go, then drag and drop the bookmarklet into the panel.

Stack Overflow

Resources & Links •

Have a coding question? Stack Overflow will almost certainly have the answer. And, if they don’t, you can register with the site and post your question for others to answer.

If you’re looking for answers on Stack Overflow, the more detailed and precise your search query is the better the results will be. There are some broader questions and answers floating around, but most of what you’ll find there are specific answers to specific questions.

Users Can’t Have an Experience Until You Ship

UX & Accessibility •

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

JavaScript •

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

HTML & CSS •

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 •

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

Design •

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.