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.

Log Out Without Logging Out

Browsing the Web •

I’ll often find myself working on a site that I’m logged in to, but I need to see what things look like when not logged in, or logged in as a different user. It’s a huge pain to log out and log back in every time I need to do this. I could use another web browser entirely, but that’s also a bit annoying and not always practical.

Thankfully there’s a better way! You can use your web browser’s private browsing/incognito mode to open any web page and view it as if you weren’t logged in without actually having to log out. Private browsing using an entirely different session with separate cookies, local storage, and so on, making it a quick and easy way to see what it’s like to be logged out without actually logging out. You can even log in using another account, all without disrupting your normal browsing session.

To open a private browsing window go to the File menu and select the New Private Window (Safari and Firefox) or New Incognito Window (Chrome) option.

The Best Web Docs: MDN

Resources & Links •

MDN Web Docs is an exceptional source of documentation for the core technologies that power the web. Whenever I need to look up an attribute name, remember the available values for a property, or learn more about an obscure bit of web technology MDN is my first stop.

Your HTML Element Needs a Language Attribute

UX & Accessibility •

Make sure you always specify a language in your <html> element, like this:

<html lang="en">

Why is this important? Here are two reasons:

  1. The language attribute helps facilitate automatic translation of your content into other languages.
  2. Screen readers use the language attribute to make sure they’re using the proper language when reading your content.

Both of these give more people easier access to your content, and all you have to do is add a single attribute!

Wondering what the code for your language might be? They’re all in the IANA Language Subtag Registry. Just search that page for the name of the language you want and use the associated subtag value in your HTML element’s lang attribute.

Avoid Comparison Surprises

JavaScript •

Get in the habit of using the strict comparison operators (=== and !==) in JavaScript. When you use == or != JavaScript will, depending on the values being compared, perform automatic type conversion, which can cause some odd and unexpected behavior.

Take this example:

'0' == 0; // Evaluates to true.

How is a string containing the character 0 equal to the integer zero? Because, when using == or !=, JavaScript converts the string into a number before performing the comparison. Using the strict comparison operators works as expected:

'0' === 0; // Evaluates to false.

That’s just one example of how automatic type conversion can get you into an unexpected and hard-to-debug situation. Using === and !== will avoid such nonsense and always do what you expect.

Intuitive Box Sizing

HTML & CSS •

CSS is great, but it has some unusual quirks. One of its most annoying oddities has to do with how the width and height of elements are calculated. Take this CSS, for example:

div.example {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 2px;
}

You might expect the div.example element to be 100 pixels wide and 100 pixels high, as those are the values specified for the width and height properties, but you would be wrong. The CSS above will actually result in a div.example that has a width and height of 124 pixels.

Where did the number 124 come from? By default in CSS and element’s dimension are calculated using something called the content box model. That means the area where the content goes, in the middle of an element, are what the width and height properties apply to. So, in this case, our context box is made to be 100 pixels square. Then the padding and border are added on top of that. This results in a width of 124 pixels: 100 pixels of content width, 10 pixels of padding on either side, and 2 pixels of border on either side. 100 + 10 + 10 + 2 + 2 = 124. The height is calculated the same way.

Quirky, isn’t it? That’s not how most people think about this kind of thing. When you write something like width: 100px you expect the thing to be 100 pixels wide, right?

Well, I’ve got good news! You can specify a different box sizing model in CSS that actually does what you would expect. All you need to do is set the box-sizing property to border-box, like this:

div.example {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 2px;
}

Now, instead of the width and height properties applying to the content box in the middle of the element, they instead apply to the outermost border box surrounding the outer edge of the element. This results in a 100 pixel square box, which is much more intuitive.

I don’t know about you, but I vastly prefer the border-box model, which is why I almost always start every new project with the following CSS at the top of the stylesheet, which applies border-box sizing to all elements so I don’t have to think about it again:

* {
    box-sizing: border-box;
}