Zombie Index Inflation

Z-index should have reasonable numbers not so many 0’s that you’re sure it’s above the last one (that’s like sending a horde to check someone’s height). That said, leave some space. Don’t number by 1’s, number by 5’s, 10’s, or even 100’s so that if you ever have to stick something in between you don’t... Read More

Underlined Cheating

Just like zombies and death, you can cheat a link’s underline and have more control over it using a border bottom instead of the default underline. In this way you can change colors, add thickness, make them dashed etc. though you’ll miss out on text-decoration-style: wavy;... Read More

Meta Keywords Isn’t Good For SEO

You may have heard of meta keywords tag: While we used it at the beginning of search engine optimization, it was abused, so search engines now shuffle past the meta keywords tag like a zombie hot on the trail of fresh brains. You may still see it in the wild, but you can ignore it.... Read More

Choose Your Characters Carefully

Don’t use spaces in file or folder names or in urls in general. Sometimes servers will recognize spaces, sometimes they won’t and sometimes the same server will recognize them in one context but not in another. Save yourself multiple headaches and use a hyphen in place of spaces.... Read More

CSS Clamp Function

Clamp() – a CSS function for keeping a value between two extremes. The value won’t go above the max value and won’t go below the min value. This is particularly great for responsive design and font sizes. You can set the font-size in vw units so that it scales seamlessly as the page’s size changes. However,... Read More

Container Queries

Container queries let you change a component’s look and feel based upon the size of the container. So if the component is in a small space, it will show one way and if it’s in a larger space it’ll show a different way. They’re just like media queries except they work based on the size... Read More

Shorthand Gotcha

Shorthand properties overwrite any value that isn’t set in the shorthand. For instance, if I set a background-image and then use background: no-repeat to prevent the image from tiling you’ve actually canceled the background image because the background short hand reset it to its default value.... Read More

Outline Property

Outline works similarly to border, but doesn’t contribute to width. It can be used to highlight an element during debugging without affecting your layout in any way. It also appears outside the border and thus can be used to highlight items that already have a border.  ... Read More

The Only Rule You Shouldn’t Break

Rules for great sites are generally helpful, but they are not inviolate. The only unbreakable rule is that you must have a good reason for breaking a rule. Every break brings some level of cognitive dissonance. Minimize cognitive dissonance as much as possible, but if it’s gone your site won’t be interesting.... Read More

Language Variants

If your website has several regional variants of a language, pick one and don’t include the region it applies to. This will then serve regional versions to those regions you’ve defined and ensure that any regions you don’t have a specific variant for still get a version in their language.... Read More

Boolean Attributes

Some HTML attributes, like most apocalyptic politicians, do not require values. These are usually boolean (true or false) in nature, and so adding the attribute constitutes true. For example, in the video element, if you want to include play/pause/stop controls, you can use the controls attribute... Read More

Dot, Dot. Who’s There? Parent Directory

It’s not often needed, but it can be confusing if you don’t know what it means. Two dots in a path (..) means the parent folder. If you have <img src=”../images/zombie.jpg” alt=”Slobbering”>  would mean go up to the parent directory of the current directory then into the images folder and then to zombie.jpg... Read More

Break Points And Design

When creating a responsive design don’t base your break points on hardware unless your site will be used under very, very specific hardware requirements. Otherwise it’ll be a never ending game of whack-a-screen. Instead place your break points based on the content and design of your site. This will ensure that everyone gets the best... Read More

When 2 + 2 is actually 22

A common place where JavaScript’s internal typing system happens is when you try to add a number (2) and a string that looks like a number (“2”). In JavaScript, 2 + “2” is “22”. Since one of these is a string, it casts/treats the other as a string too and puts them together or concatenates them.... Read More

Embedded vs. External vs. Inline Styles

99 times out of 100 external stylesheets are the way to go, but embedded sheets come in handy if you don’t have access to the site’s main styles or if you need to make specific changes to one page that you don’t want to make everywhere. Inline styles should be avoided as much as possible... Read More

Two Kinds of Web Components

There are two kinds of web components: autonomous (name your own element) and customized built in elements (supercharge an existing element). Note: Safari does not support customized built in elements, but all other browsers do. Custom elements require a dash in their name and some JavaScript. Custom built in elements need the is attribute and... Read More

Disabling Zoom on Mobile is Bad

Don’t disable zoom on mobile: Bad: Good: Disabling zoom can cause a host of accessibility problems. Plus if you’re on a website and you try to zoom and can’t do it, is your response, “Oh wow, I love this developer and his choices”? That’s not my response. Don’t be that developer. Let the user interact... Read More

Practice. Practice. Practice

Practice. That’s how you get to Carnegie Hall and web development/zombie killing greatness. The more you build the better at this you’ll be. (If you don’t have a shady cousin who needs a new site for their latest get rich quick scheme or an elderly Aunt in need of an online showcase for her collection... Read More

Start Testing Usability Now

You don’t have to wait till a site is built to test for usability. You can test usability of a sketch or mock-up by just asking people what they’d click on (even if clicking isn’t possible). Usability test early and often. If you wait till the end you’ll only be able to band-aid any significant problems... Read More