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

Pseudo Elements

Pseudo elements are like elements but aren’t quite. The most common pseudo elements are ::before and ::after which allow you to insert content into an element. ::before is put into the element right after the opening tag and ::after is put in right before the closing tag. (Note: elements without closing tags e.g. img, input,... Read More

Object-fit

Allows you to treat an inline image as a background image, making it easy to contain or cover the image and allow you to change the aspect ratio without squashing or stretching the image. Learn more at https://developer.mozilla.org/en-US/ docs/Web/CSS/object-fit... Read More

Complex Animations

To more easily animate complex transforms separate out two or more kinds of transforms e.g. a rotate and a scale by adding a wrapper element and performing one transform on the wrapper and one on the child. Generally the first transform on your list should on the parent and the second one on the child.... Read More

Targeting by Mouse Type

Coarse pointer media query lets you differentiate between a coarse pointer (touch screens and similar) and a fine pointer (mouse, pen/tablet etc). It’s a really simple way to provide fallbacks for hover animations and other things that don’t work on touch screens.... Read More

The ol and ul Type Attribute

On ol/ul elements the type attribute let’s you change what type of numbering/bullets used. With ol set the type to “i” for lowercase Roman numerals or “I” for uppercase ones. “A” sets capital letters while “a” uses lowercase ones. On ul change the type with disc (default), circle or square. You can also use the start attribute to start... Read More

Shorthand Properties 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

Promise Low. Deliver High.

It is far better for both your short term and long term career to promise low and deliver high rather than to promise high and deliver low. And even if you promise high and deliver high, you’ll be killing yourself just to meet the client’s minimal expectations. ... Read More

Link Pseudo-Classes

If you want to avoid zombie attacks, the link pseudo-classes should be in this order: :link, :visited, :focus, :hover, and then :active. If you order them differently, the specificity/placement of one will override the functionality of another.... Read More

filter: drop-shadow() vs box-shadow

While you’ve likely heard of box-shadow you may not have heard about the drop-shadow filter. box-shadow does a very nice shadow, but it’s always a box. On the other hand the filter: drop-shadow() will do an exact drop shadow of the element so if you’ve rounded corners or have an SVG with some transparency or... Read More

The Current HTML Standard

HTML5 was a major release for the HTML language. It was initially released in October 2014. It brought a wide variety of new functionality and smoother syntax to HTML. HTML4, the previous major standard, was released in April of 1998 and had only minor revisions during those 16 years. The current release is the HTML Living... Read More

Lowercase Filenames Save You Headaches

Always use lowercase for filenames. While you don’t have to do this, Linux based servers treat uppercase letters and lower case letters as different. Meaning zombie.html and Zombie.html would be treated as completely different files. Windows servers ignore case. If you ever need to switch from windows to Linux (or you’re handing a site off... Read More

When in doubt, Flexbox

Flexbox is by far the easiest and most flexible solution for quick layout issues. Floating, positioning and tables have a lot of draw backs in our responsive world and lack the complexity for any but the most rudimentary layouts. Grid is far more powerful than Flexbox and excels at placing items in specific places. But... Read More