The AEA Digest: The Best Web News, Straight to Your Inbox!

We’ve started doing something fun this year: publishing The AEA Digest, a once-a-month email where we collect and share interesting and useful posts, tweets, and links for people who make websites. The first two issues went out in January and February, and we’ve been thrilled by the positive feedback from subscribers, including an appreciative email that said, “Awesome! Now I have all my web reading for the week.”

We publish the The AEA Digest in the second week of every month, which means Issue № 3 comes your way in just a few days. You can get your copy by signing up on our Subscribe page. Until then, here’s a wee sampling of tidbits from the previous two issues to whet your palate. Bon appétit!

Quick Clicks

Each issue has a small but potent selection of carefully curated links for your enjoyment.  Here are just a few from the first two issues.

  • Nice! A guide to preparing design mockups for web development—for designers, developers, and clients. This 43-page PDF discusses various methods, and tradeoffs. Pay what you wish for it. The Dev Pack.
  • UX How-To with Luke Wroblewski (@lukew): Learn mobile and multi-device design in 26 short videos.
  • In “Why Experts Reject Creativity” in “The Atlantic,” Derek Thompson explains how knowledge of our craft can turn us into over-thinkers who reject truly new ideas (as Steve Ballmer of Microsoft famously rejected the iPhone) ... and shares how to sell your boss a new idea by disguising it as an old one.

Recently On Twitter

In Issue № 1, we featured this great technique for keeping CSS animations from being too repetitive.

Speaker Tip

Chris Coyier (@chriscoyier) is a designer and developer, sharing web insights at CSS-Tricks.com and on his podcast, ShopTalk. He shared this trick with us in Issue № 2.

Highlighting rows of a table is pretty darn easy in CSS. tr:hover { background: #ffa; } does well there. But highlighting columns has always been a little tricker, because there is no single HTML element that is parent to table cells in a column. A dash of JavaScript can handle it easily, but Andrew Howe recently emailed me to share a little trick he found on StackOverflow, posted by Matt Walton.

The trick is using huge pseudo elements on the <td>s, hidden by the table overflow. You don’t know how big the table is from CSS, so just make the pseudo elements super tall with a negative top value of half of that.

table {
    overflow: hidden;
}

tr:hover {
    background-color: #ffa;
}

td:hover::after {
    content: "";
    position: absolute;
    background-color: #ffa;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}

The negative z-index keeps the pseudo element below the text. Negative z-index is a fun trick, but beware, this table can’t be nested within other elements with backgrounds, otherwise the highlight will go below them.

 

Want more? You know you do. So hightail it over to our Subscribe page and sign up for your free copy of The AEA Digest—your monthly guide to all things web, design, and developer-y.