Tips, Tricks, & Zombie Hits

Text Size and Readability

Keep your body text at or above 16px/12pt/1em to ensure readability and that zombies won’t eat your brains while you’re focused on reading too tiny print.

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 have to renumber everything. You can just slip it in halfway between the two elements you placed.  

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;

Meta Keywords Isn’t Good For SEO

You may have heard of meta keywords tag:

<meta name="keywords" content="zombie, undead, web development, HTML, CSS, SEO">

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. And if you see it, it wouldn’t hurt to delete it.

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.

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, that’s likely to make the text too small to read on some mobile devices and might make it way too big on a particularly large desktop monitor. Thus clamp allows us to set thresholds across which the font-size doesn’t go, but still have text that seamlessly scales with the size of the window.
    font-size: clamp( min, variable-size, max );
    font-size: clamp(1.25rem, 3vw, 5rem);

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 of the parent not the size of the entire screen.

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.

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.  

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.

Hexadecimal Transparency

You can add a fourth pair of hexadecimal numbers to a hexadecimal color to set an alpha value. FF would be fully opaque and 00 would be fully transparent e.g. color: #88DEAD88  

Color Coded Code

Color coded code editors make your code a lot easier to read and help you spot errors when code you expect to be colored one way isn’t.    

Feedback Shouldn’t Make You Cry

In design and even in development there can be a lot of negative feedback which is easy to take personally. Don’t. Just because someone doesn’t like what you did or the choices you made doesn’t mean you’re bad at your job. There is, however, always room for growth so if their feedback makes sense to you, take it under advisement.

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.

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

<video controls width="300" height="150"></video>

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

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 experience.

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. This can be very useful when you need to construct a message for the user, but can cause weird errors if you don’t what type a variable holds.

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 because they are difficult to override and work against the cascade requiring each element to be updated by hand. That said, it can come in handy when you’re in a jam and need to make updates to a handful of elements, don’t have access to the main style sheet and can’t use a style element.

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 some text

Disabling Zoom on Mobile is Bad

Don’t disable zoom on mobile:

Bad:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 

Good:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

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 with your site the way they want to.

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 of doilies, or if you simply don’t know where to start, I’ve got a book that can help. https://undead.institute/2022/05/22/forty-three-post-apocalyptic-website-project-ideas/)

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 you find. If you catch it early it’s more likely you can save them from a living death after the apocalypse.

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, br, hr, etc cannot have ::before and ::after because there’s no place to put them). Other pseudo elements are ::first-letter, ::first-line, and ::selection which select the first letter of content in an element, the first line of content in an element and the content you’ve highlighted with your keyboard and/or mouse, respectively.

Select Input by Type

Use attribute selectors to select and style inputs of various types differently.

input[type="text"]
input[type="search"]
input[type="color"]

Rounding Out Your Elements

You can create a fully round object (to throw at zombies) using border-radius: 50% however, if you want to make a pill shape set it to an arbitrarily high number like 100em or 1000px.

Relatively Positioning Absolute Elements

You can localize where an absolutely positioned element is placed by setting a position: relative on the parent element. Instead of letting a zombie wander all over, you lock him in a cell so he can only shuffle around within a defined area.

<div id=“zombie-dad”>
   <div id=“undead-daughter”></div>
</div>
<div class=“zombie-dad”>
   <div id=“undead-son”></div>
</div>
#undead-son { position: absolute;}
#undead-daughter { position: absolute;}
#zombie-dad { position: relative;}"

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. You can also use the new translate, rotate and scale properties. They should work for most needs, however, they have a prescribed order (translate, rotate, then scale) which may not fit your needs and there’s no way to do skew or 3D transforms with the single properties. Lastly you also can’t break up translating x and y directions the way you could with two elements.

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.

@media (pointer: fine) { /* Mouse */ }
@media (pointer: coarse) { /* touchscreen */ }

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 the numbers at a different place or the Boolean attribute reversed to reverse the order and have the numbers/letters count down.

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. 

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. 

Performant Animated Moves

When animating, use CSS transforms to move items around and scale them rather than changing padding/margin or width/height. Transforms will dramatically increase performance and prevent browsers from doing costly repaints.

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.

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.

box-shadow: 1px 1px 10px #000; 

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 whatever drop-shadow() will give you a drop shadow of your exact element and, when available, you’ll get hardware acceleration to boot.

filter: drop-shadow( 1px 1px 10px #000);

More Ways to Respond

Media queries don’t stop at device width or height. They can also handle things like screen density, animation preferences (like prefers reduced animation) and much, much 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 Standard

Should You Open it in a new Tab? Probably Not

Use target="_blank" very, very sparingly. You should really only use it to prevent users from losing their place in a site or when they need to reference material while looking at the current page. It can annoy users if every link opens in a new tab when they have thirty-seven tabs open just for your site, and it also short-circuits the back button so that they can’t go back (they’re in a new window with no history, so there’s nothing to go back to in this window/tab).

Less HTML is Better

Use as little HTML code as possible to achieve your goals. The less code you write the easier it is to maintain and the faster it downloads to your visitor.

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 to a client or similar) a lot of headaches and random errors where files can’t be found can be avoided if you just use lowercase consistently everywhere.

Same Company. Different Browser.

Browsers from the same company can look different on different platforms chrome for windows vs. chrome for OSX vs chrome for iOS vs chrome for android can all act differently (and this isn’t just because Chrome on iOS is a clone of Safari)

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 for anything simple like lining things up or simple reordering of items Flexbox can do it in a few lines of code without any complex mental calculations.

The Direct Descendant Combinator

Direct descendant selector combinator > prevents grandchildren from being selected for instance with this HTML

<div class="zombie">
    <p><a href="https://example.zom">hello zombie</a></p>
    <a href="https://example2.zom">goodbye zombie</a>
</div>

The following CSS will only select the “goodbye zombie” link

.zombie > a { color: red; }

People Skills are as Important as Tech Skills

While working on and improving your technical and design skills is important, it’s also important to work on your people skills, particularly if you would say you’re not good with people. Avoiding it lets it stagnate and makes it harder than ever for you to get along with and benefit from the relationships that website-work (and all work, really) requires.

You’ve Got a Blind Spot Where Your Site’s Concerned

No matter who you are or how good you are at building websites You cannot judge whether your own website is usable. You have too much knowledge of how it works. You cannot come to the site with the eyes of someone who’s never seen it before.

Block and Inline Elements

A block level element should not go inside an inline level/phrase element. There are exceptions, but generally a block level element can contain either block or inline elements, but an inline element can only hold other inline elements. The major exception is the a tag, that, since HTML5, is an inline element that is allowed to contain block elements

Choose Your Characters Carefully

When using any content management system (CMS) be careful with apostrophes. While most fields should handle them properly every once in a while you might find a field that breaks when you use an apostrophe. This is most likely because the content management system isn’t properly processing the content. Most CMSs use strings to pull in whatever you typed in the field. In computer languages though an apostrophe or single quote often signals the end of a string. The CMS is reading in the apostrophe as the closing apostrophe of the content and will then try to execute the remaining content as code. Often this just results in an error, but it can also be a source of attack if the field is public facing. A savvy person could add code after the apostrophe and access things they shouldn’t.

Turning the Current Color

Before CSS Custom Properties, CSS had a variable of sorts called currentColor that can still be used today. It corresponds to the current element or its parent’s foreground color. This becomes handy when you want to set border or drop shadow colors on the current element or even more useful when you can set the color on a parent and have it cascade through the children. It’s also a way to reduce duplicate code. You can set the colors for a class so that they cascade through, then use an id or additional class on that element to set the text color and watch different colors cascade through with a minimal amount of additional code.

Reset Your CSS for Better Compatibility

A CSS reset is a group of CSS rules that try to remove and/or reduce the differences between browsers. Each browser has its own default margin and padding etc. The reset attempts to make all those default settings consistent across browsers. There are many CSS Resets available, but I like normalize.css https://necolas.github.io/normalize.css/

Em Units are Your Friend

Use ems for (almost) everything. Em is a proportional unit that begins as equal to the default font size. If the user ups (or lowers) their font size, ems will scale up or down accordingly. This makes them great for margin and padding as well as for your breakpoints in Responsive Design. About the only thing you wouldn’t want to use them for is widths of elements. Use percentages for those so that they can properly respond to different screen sizes.

Changing the Look and Feel of Selected Text

You can change the look of a selection with the ::selection pseudo element. For instance,

::selection {
  background-color: pink;
}

changes the background color of the selection to pink. There are limits on what changes you can make using the selection pseudo element though, you can only change: color, background-color, text-decoration and text-shadow every other vendor-neutral property will be ignored.

Undercommunicate at Your Peril

When implementing someone else’s design. It’s often best to over communicate so that you both are happy with the results. You know what happens when you assume? You make zombies out of people and the apocalypse gets worse. Thanks for that… razzafrackin’ assumer… *grumble* *grumble*

Don’t Forget the Semi-colon

Always add a semi-colon whether it’s the end of a css declaration or a JavaScript line. While it may not technically be needed in every location, having it ensures that when you add something after it, that thing will always work. The time you save not having to debug why something’s not working is far greater than the time it takes to add a semi-colon. Let a minifier worry about removing stuff that isn’t necessary.

Open Details by Default

Add an “open” attribute (it does not need a value) to make a details element open by default.

<details open>
    <summary>Zombie Hunting Season</summary> 
    Open by default!
</details>

Normal Flow vs. Flexbox/Grid

When normal flow gives you the layout you want use it. If most of a section you’re laying out follows normal flow let it. Wrap the section you need a different layout for in a div and use Flexbox or grid just on that section. There’s no need to fight with Flexbox or grid to get back to a normal flow. Flexbox and grid can be used surgically to change layout where you want it changed. And they can be used in combination.