matthewgruman.com

I finally put up a portfolio!

Keyboard/Notebook concept from Yamaha Concepts, via Yanko Studio.

Via Boing Boing Gadgets.

Via Design You Trust.

I’ve recently made the switch from Firefox to Safari. Ever since Safari 3 was released, I’ve found it harder and harder to justify the speed issues with Firefox on Mac OS, and as someone who doesn’t really surf the web anymore, I have little use for the extensions outside of a development (Web Developer and Firebug are essential for me) environment.

Overall, I’m very satisfied. Safari is the fastest browser I’ve ever used, it’s find/search function is beyond reproach, and it has that sexy look of Mac OS. The only problem? Viewing source code is awful. Compare this, from Safari:

WIth this, from Firefox:

It’s not hard to figure out which one is easier to read (it’s Firefox!).

Viewing Source

As a website designer, I look at source code A LOT; even during casual browsing. It’s part learning (new techniques), part respect (you’d be surprised how much work goes into a really great website), and part horror (I’m an elitist; bad code makes me shudder). But, also as a designer, I like things to look and work great; Safari’s view source ironically does neither.

Sexist Analogy

The best analogy I can come up with is x-ray specs. Imagine having the ability to see through anyones clothes and check out what’s going on underneath. For the sake of this analogy, you can’t see full nudity (that would require access to server-side languages), but you can see underwear.

Underwear’s important. Even though other people don’t usually see it, you know it’s there. A guy on a date will be more confident wearing nice boxer-briefs than tighty whities that same way a woman with a sexy matching set feels more confident than someone in granny panties. There’s something about nice underwear that shows a real control of style and everyone knows that the most appreciated things are those that usually go unappreciated.

So viewing a website’s source is like checking out a hot girl’s underwear. But when you’re using Safari, they’re all wearing unmatching granny panties. I don’t want to look at that. I don’t even understand why that happens. Why would I continue to look at Ms. Granny Pants when Ms. Black Lace is standing next to her?

Enter Safari Source

Safari Source is a plugin that adds syntax highlighting. It’s like Safari goes to a lingerie store and comes back looking like this:

And that’s just awesome.

Fashion and style are not interchangeable. You can be the most fashionable person in the world and still have absolutely no sense of style. Conversely, the most stylish people in the world rarely, if ever, follow fashion.

Style is static. If you had a real sense of style in 1954, you probably still look stylish today. Fashion, on the other hand, is what creates things like mullets, scrunchies, neon colours, and other awful things that make you embarrassed years later.

Fashion can only be stylish by coincidence.

Source: Gizmodo.

The 70m2 apartment was remodeled by London-based Levitate Architects, who created “a new bedroom level and increasing the floor area of the flat by approximately one third.” The staircase is both the way to access the bedroom and a perfect place to store books, movies or CDs. “With a skylight above lighting the staircase, it becomes the perfect place to stop and browse a tome,” says Levitate’s Tim Sloan, who also pointed out the unique structure of each step, allowing for anyone to comfortably sit down while picking a book.

Source: Ironic Sans.

Source: The RPF.

Just a couple of days ago, I was wondering how long you could live frozen in carbonite, and if it could be used in a Walt Disney kind of way. As awesome as this desk is, I’m pretty sure that fictional theoretics would really kill my productivity. That and the constant worry it was real and an angry Harrison Ford would wake and attack me at any given moment.

Over the past couple of months, I’ve read a number of articles about formatting CSS. To my surprise, there’s actually a large debate about horizontal VS vertical formatting. Vertical formatting, like I’m used to, looks like this:

abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
font-style: normal;
}

Horizontal formatting rewrites that same rule as:

abbr, acronym {border-bottom: 1px dotted #666; cursor: help; font-style: normal;}

At first glance, individual properties are much easier to parse vertically; and this is true when it comes to small style sheets.

Huge Style Sheet

Some people separate their CSS into separate sheets: one for structure, one for fonts, etc. I got in the habit of using tab-styling/comments in my CSS and prefer not to make it modular; this works great for the average CSS. With large sites that have a large number of styles however, it starts to get a bit ridiculous. I’m a neurotic adjuster and constantly access and change my CSS throughout the development of a site. And, while I like to think I’m well-organized/structured, I also have the habit of throwing random styles in random places and forgetting about proper tabbing until it’s too late. Leaves me with a mess of a CSS that needs lots of time to work with, and too much maintenance.

I’ve been working on a database entry system that’s going to be used by a lot of different students, so static appearance and usability are incredibly important. My CSS was approaching 1000 lines and I just couldn’t deal with it anymore, so I tried converting it to a horizontal format. It was one of those shave-off-all-your-hair moments (“why did you close the program Matthew! You can’t even Undo anymore! We’re all doomed!”) But then I looked at the length: ~150 lines.

Alphabetization

That first day I started working with the horizontal sheet was the day I stopped doing things vertically. The amount of time I’m able to save by quickly scanning is incredible. While I thought declarations would be difficult to parse, they’ve actually given me a good reason to keep them alphabetical — and this makes ALL the difference.

We usually see alphabetization in list form, but it’s surprisingly easy when it’s in-line, too. Just choose a random place in the string and scan left and right; there’s the property you were looking for. Another benefit of alphabetization is portability: anyone taking over from you will have an easier time understanding your work.

Think of it like putting your alarm clock on the other side of your bedroom. You know logically you should get up when it goes off (alphabetize), but sometimes it’s just not going to work out if you’re close enough to hit snooze (vertical CSS).

Hooray for Horizontal

I’m about to start work on renovating the first major website I ever made with CSS. I kid you not, it’s ~2000 lines long and is probably responsible for the deaths of a million helpless children. You can bet that the first thing I’m doing is a reformat.