Page 19

I just finished a major redesign of this site and one of the most agonizing aspects for me was trying to pick an appropriate color scheme. It was a lot tougher than I expected to get the right tone, complement my fonts, and generally avoid clashing. Here’s a list of sites and articles that were particularly helpful:

A Simple Web Developer’s Guide To Color (Smashing Magazine) - This article pointed out simple things I hadn’t even thought of like how to match your grays to your base colors.

Coolors - A really handy color scheme generator. I really like the simplicity of it’s design.

Trendy Web Color Palettes and Material Design Color Schemes & Tools (Awwwards) - An article that analyzes Awwwards Site of the Day winner color palettes and includes a number of color resources itself.

Adobe Color CC - There are a few options to help you pick colors with a color wheel but I found Adobe’s easiest to use.

Pinterest - For me, Pinterest might have actually been the most useful site. Click through to see everything I saved to my color palettes board.

This is a fairly common request in my office: slide in animated drawers with fixed headers and scrollable bodies. Also, the content in the headers is constantly changing so both the body and header heights need to adapt.

Before flexbox, this was kind of a nightmare. Absolute positioning doesn’t play particularly nice with transforms. Multiple classes to set multiple heights seems like overkill. So does using JavaScript just to get this layout.

But with flexbox, it can be done in basically four lines (eight with prefixes). Use a flexbox column display for the drawer itself:

.drawer {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

And set the drawer body to grow and scroll:

.drawer-body {
    -webkit-box-flex: 2;
    flex-grow: 2;
    overflow-y: auto;
}

That’s all it takes. Here’s a Pen that also includes the code for animating on and off the page.

See the Pen Animated Drawer with Fixed, Variable Height Header by Lauren Ashpole (@laurenashpole) on CodePen.

It’s the holiday season so here’s a quick Pen featuring a trio of Christmas tags. Each tag has a festive little design around the edges and flips over on hover.

See the Pen CSS Christmas Tags (Flip on Hover) by Lauren Ashpole (@laurenashpole) on CodePen.

Just some fun tech related links:

Honest Diversity in Tech Report

The software engineer’s guide to asserting dominance in the workplace

Please Don’t Learn To Code From Stock Photos

Domino’s Becomes A Tech Company That Happens To Make Pizza