Tips, Tricks, & Zombie Hits

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. 

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. 

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.

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.

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);

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

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. 

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

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.

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.

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)

Use an attribute selector to find images without alternative text.

[alt=""] { 
    outline: 5px solid blue; 
}

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.

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; }

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.

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.

Validate your work. Just because the browser you’re testing your code with works doesn’t mean it’ll work in every browser always. W3C offers both an HTML Validator  and a CSS Validator

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

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.

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.

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/

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.

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.

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*

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.

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>

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.