desideratum

Death to the Bottom Line

Wed, 25 Jul 2012 22:12:56 -0700

Some creative nth-child()-ing. In a table-esque inline-block list, it will remove the extra line that results from needing both container and list item borders.

Why might this be useful?

Rounded corners on container: setting a negative margin on list items in the top/bottom row leave the corners misaligned.
Pixel perfection: using a negative margin on either the top/bottom borders of the list items sometimes shaves off a pixel, resulting in slight vertical-misalignments.

For this example, I’ll be using a 3-column layout using only inline-block list items. The three selectors used in combination to select the bottom row in all permutations are:

There’s a pattern/strategy here. Let x be the total number of columns. All we have to do is figure out how to select each list item when it’s on the bottom row, and deselect it when it’s not. Let’s try this with four columns:

Select the last item, regardless of its position.
li:last-child
Select the next to last child, except when it’s in the rightmost column (where it’s not touching the bottom).
li:nth-last-child(2):not(:nth-child(xn))
Select the third to last child, except when it’s in the two rightmost columns.
li:nth-last-child(3):not(:nth-child(xn)):not(:nth-child(xn-1))
Select the fourth to last child, except when it’s in any column but the leftmost one.
li:nth-last-child(4):not(:nth-child(xn)):not(:nth-child(xn-1)):not(:nth-child(xn-2))

For additional columns, add another selector incrementing the nth-last-child() parameter, and add another :not(:nth-child(xn-?)), incrementing the ?.

Questions? Find me on Twitter and ask away! Or just view some working code on Dabblet.

A touching prelude to (what I imagine will be) a meaningful cup...

Wed, 20 Jun 2012 22:04:20 -0700

A touching prelude to (what I imagine will be) a meaningful cup of coffee. Great spot by the Google Creative Lab and BBH New York.

Not a fan of the folding/crumpling aesthetic. The designer needs...

Mon, 04 Jun 2012 21:59:42 -0700

Not a fan of the folding/crumpling aesthetic. The designer needs to stop dog-earing pages and start taking better care of their PSDs.

…that said, cross-eyed, stretched out Totoro is unbearably cute.

Neil DeGrasse Tyson observes how space exploration has impacted...

Mon, 04 Jun 2012 21:50:18 -0700

Neil DeGrasse Tyson observes how space exploration has impacted our perspective on the world in part two of the We Stopped Dreaming series.

DirecTV WTF

Thu, 01 Mar 2012 16:04:06 -0800

Ren: [the tv's] fixed, but here were all the problems:
Ren: 1) the first dish got filled to capacity, so they put up a 2nd dish and moved some of the connections to it (including ours)
Ren: 2) the guy who put up the second dish used four way splitters for all the cables going to the units when they didn't need to be split
Ren: 3) whoever did our original install also gave us a four way splitter inside our apartment, AND connected the wrong kind of cable ending to it (we only needed a two way splitter, one per receiver)
Ren: 4) the software update directv did made the receivers way better at detecting issues, which is why all this stuff didn't get found before
Keith: ho
Keith: ly
Keith: crap

Social Media Explained… with donuts

Tue, 07 Feb 2012 14:35:59 -0800

Social Media Explained… with donuts

Fresh Impressions on Brandmarks (from my 5-year-old) Guerilla...

Mon, 30 Jan 2012 21:00:09 -0800

Fresh Impressions on Brandmarks (from my 5-year-old)

Guerilla testing at its finest. “The baby is little” is my favorite.

"If I had only one hour to save the world, I would spend fifty-five minutes defining the problem, and..."

Wed, 25 Jan 2012 21:15:01 -0800

“If I had only one hour to save the world, I would spend fifty-five minutes defining the problem, and only five minutes finding the solution.”

- Albert Einstein

A Clean, Minimal Bing

Sat, 14 Jan 2012 09:00:00 -0800

Google’s Search+ and GKBO antics have really rubbed me the wrong way over the last couple of days. So in retaliation, I’ve switched my default search engine to Bing.

It hasn’t been a frictionless switch. The quality of image results for certain search terms is mediocre. The results pages are cluttered, squished and chock full of distractions. To help the transition along, I made some tweaks to the design and encapsulated them in a user style. Most of the changes should be fairly obvious, but if you’re interested in a full changelog, I’d be happy to put one up.

To be honest, the exercise was more challenging than I expected:

Can’t stand cluttered Bing search. And after hacking away at it with Stylish, I can’t really stand the circa-2001 source code either. #fb
— Keith Chu (@Catharsis) January 14, 2012

The code and coding sensibilities were remarkably dated. For example, the wonky tab around the current center nav item was using sliding doors, combined with corner images. Pipes inserted with markup or borders. Deep, deep classitis with redundant IDs for good measure. Random markup choices. Yuck.

Anyway, this user style was created to scratch a personal itch, but hopefully you’ll find it just as useful. If you have any questions/suggestions, feel free to get in touch with me on Twitter and let me know.

Download: [User Style] Bing - Clean, Minimal (userstyles.org)

Fotoshop by Adobé: an A+ satire by Jesse Rosten

Wed, 11 Jan 2012 17:14:50 -0800

Fotoshop by Adobé: an A+ satire by Jesse Rosten

Oh, that’s kind of neat. Pretty impressive. Wait,...

Sat, 07 Jan 2012 19:06:06 -0800

Oh, that’s kind of neat. Pretty impressive. Wait, what’s she… no way, one foot?? WHOA!

This Is by Alex Silver and Jon Tai 4½ years later, Cornell is...

Tue, 03 Jan 2012 22:40:58 -0800

This Is by Alex Silver and Jon Tai

4½ years later, Cornell is but a distant, fond memory — a line on a resumé and buried photos on Facebook — and yet this video fills me with breathtaking nostalgia. Every fast-forwarded moment: so vivid, so tangible, so frustratingly ephemeral. I miss the laughs, lessons and in-betweens, and I’m grateful for them.

So long, Cornell, and thanks for all the fish.

Autodeskers (@kaez158, @serpentvenom and I) celebrating Mobile...

Wed, 14 Dec 2011 17:12:11 -0800

Autodeskers (@kaez158, @serpentvenom and I) celebrating Mobile Web Design with @lukew (Taken with Instagram at An Event Apart SF 2011)

A very merry web design Christmas at #aea (with @zeldman and...

Tue, 13 Dec 2011 14:14:10 -0800

A very merry web design Christmas at #aea (with @zeldman and @awinterbottom) (Taken with Instagram at An Event Apart SF 2011)

Every Christmas I think of this song and happily, mushily...

Sun, 11 Dec 2011 00:15:51 -0800

Every Christmas I think of this song and happily, mushily reaffirm that yes, love is alive. I’m lucky.

A diagram by Jake Coolidge imagining what the BART system could...

Fri, 09 Dec 2011 02:06:37 -0800

A diagram by Jake Coolidge imagining what the BART system could look like if it, you know, actually connected all of the Bay Area.

It would at least be more comparable to the reach of the NYC and Chicago subway lines, without (somewhat unfortunately) being nearly as crazy as the Tokyo Metro.

Q: Where do the dreams of desk toys take them?A: To the Pacific...

Thu, 08 Dec 2011 23:34:30 -0800

Q: Where do the dreams of desk toys take them?
A: To the Pacific Coast

Address Is Approximate by Tom Jenkins is a stop-motion adventure that globe trots in beautiful, imaginative ways, without ever leaving the desk.

Photo

Fri, 02 Dec 2011 15:29:34 -0800

U.S. Foodservice Rebrand I really disliked the new logo until I...

Fri, 18 Nov 2011 14:40:00 -0800

U.S. Foodservice Rebrand

I really disliked the new logo until I saw this comment:

And just like that, I like this logo a little too much. “US. Wildlife Preserve” might benefit from it more though.

Adobe kills off (mobile) Flash

Wed, 09 Nov 2011 23:37:00 -0800

Adobe kills off (mobile) Flash:

(Source: shirt.woot)

The writing was on the wall long before Adobe shifted its interactive focus to HTML5/CSS3, offering up resources like Wallaby, Edge, the expressive web and so on. Steve Jobs was prescient—and perhaps instrumental in helping Adobe realign themselves—in offering his insight into the problem:

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short. […]

New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.

Browser plugins like Flash became widespread because there were no native alternatives. Prior to HTML5 video and recent advancements in CSS and JS, if you wanted to put a movie or interactive elements on your webpage, you had to use Flash. And in doing so, you generally had to compromise by tolerating a shorter battery life, a louder GPU fan, a slower computer, a hotter-to-the-touch laptop, and stuttering video. Having gone Flash-free for almost a year now, I can say you only notice how much better things are after you’ve gone cold-turkey.

On mobile, this suboptimal performance is unacceptable; but shouldn’t it be the same for desktop? To this end, Marco Arment posits:

If web developers must make non-Flash implementations of everything, why bother making the Flash versions at all? This isn’t just the death of mobile Flash: it’s a confirmation from Adobe that all Flash is on its way out.

I’d like to hone in on this observation by making one of my own: in hindsight, embedding Flash into a webpage has always been kind of awkward. Here’s some sample code from a Flash embed, with added bolding around the most relevant bits:



classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="400" height="300" id="movie" align="">
    value="movie.swf">

Including spaces, that’s 441 characters used when only 34 (the bolded characters) are necessary. It’s verbose, hard to remember, and inelegant. Looking at some HTML5 equivalents, this shortcoming becomes clearer:


¹

²

³

My point is that implementing Flash feels complicated and unnatural. It’s unfortunate that developers have had to live with it for years. Thankfully, embracing HTML5 presents the perfect opportunity to leave it all behind.