BBEdit Revised, Reviewed.

Jeffrey Zeldman Presents

I RECENTLY ATE dinner with a friend I hadn’t seen in 20 years. If you are in a position to do likewise, I highly recommend the experience. So much had changed, yet so much was still wonderfully the same. We were still the same joyously creative young fools, yet time had seasoned us. No longer poking the world with sharp sticks, we had found a place in it. I was pleasantly reminded of this existentially thrilling encounter while opening a pre-release version Bare Bones Software’s BBEdit 9.6 update—released to the public as of 12:19 EDT today.

A beloved and venerable HTML and text editor for Macintosh, BBEdit is tailored to the needs of web developers and designers who write their own code. Its no-frills interface consists of a document window in which you write your code; a side drawer that lists all pages you’re working on, enabling you to navigate between them; a stack of buttons (many with drop-downs) you can push to perform tasks like choosing and inserting a DOCTYPE, wrapping chunks of copy in paragraph tags, checking syntax and links for errors, and more; and a report window where you can view your test results and correct your errors.

Previous versions of BBEdit were updated with the precepts of Designing With Web Standards in mind, and the current version takes some of its feature cues from Jeremy Keith’s HTML5 For Web Designers. (When I say the software takes its cues from Mr Keith’s book, I mean that literally; Bare Bones Software head Rich Siegel and his team used HTML5 For Web Designers to help develop some of their testing suites.)

Given these antecedents, it’s no surprise that the new version adds support for HTML5, including published element lists from WHATWG and W3C; CSS3 properties, including vendor-specific properties for Mozilla, Safari/WebKit, and Opera browsers; a new contextual code-hinting feature tied to your chosen doctype that includes as-you-type popups for allowed elements, attributes, and (in CSS documents) style properties; and Bare Bones’s own offline validator (HTML 3.2 through HTML5, XHTML inclusive), baked right into BBEdit.

Using BBEdit 9.6 this morning, I was able to quickly update my site from XHTML 1.0 to HTML5. The syntax checker enabled me to use my preferred coding style (i.e. XHTML style) and the product identified outmoded attributes (“language=JavaScript”) and elements (“rev”), enabling me to correct them right in the error report window. It took no time at all.

BBEdit 9.6 also found the errors in WordPress plug-ins like fbLike Button and TweetMeme Retweet Button, enabling me to make an informed decision to stop using the former plug-in and helping me edit the PHP files of the latter plug-in so that it now validates here.

BBEdit 9.6 also offers increased performance for several common
operations, including search, and includes several enhancements and
refinements, plus fixes for reported issues. Detailed information on
all of the changes and improvements in BBEdit 9.6 can be found on the Release Notes page.

After using the new version for two days, I am switching back to BBEdit as my full-time coding platform.

BBEdit 9.6 is available free of charge to all registered BBEdit 9 customers from the Bare Bones Software website on the BBEdit Updates page. For more information, or to download a fully functional demo, visit Bare Bones Software’s site.

How to use TextMate

Jeffrey Zeldman Presents

For nearly 13 years, I created websites with PageSpinner, a charmingly old-fashioned HTML coding environment from the days of Netscape 1.0. But two years ago, seeking updated web page encoding and other modern conveniences, I switched to TextMate, “the missing editor for MacOS X.”

PageSpinner greatly helps coders (but offends the aesthete’s eye) with Microsoft-Word-like menu bars containing buttons that let you instantly create paragraphs, list items, and so on. In contrast, TextMate has no UI chrome whatever. A screenshot of the TextMate interface is like a photograph of snow.

For two years, I’ve created web pages in TextMate, hand-coding every entity with no help from the application because I didn’t know it offered any. But my friend Ethan Marcotte knew, and today, responding to my cry for help, he sent the following info:

I highly recommend starting here. (If you only read one thing in this email—and who could blame you?—make it that link.)

Moving on! Here’s a more exhaustive “getting started” tutorial.

Random feature blogs:

Macromates has some helpful screencasts (most of which could use a good editor, but they might be good train fodder):

Because I have no life, I’ll occasionally trawl through Vimeo to find random tips.

And here’s Dan Rubin’s macro to convert multi-line CSS to single-line (or vice versa).

HTML5, CSS3 default templates

Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.

Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.

Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)

My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.

10K Apart – inspire the web!

Just launched and just wonderful! The 10K Apart contest (“Inspire the web with just 10K”) presented by MIX Online and An Event Apart hearkens back to Stewart Butterfield’s 5k Contest of yesteryear while anticipating the HTML5-powered web of tomorrow … and encouraging us to design that web today.

We want beauty. We want utility. We want excitement. And we want it all under 10K:

HTML5 For Web Designers

Prizes, we got prizes! One grand prize winner will receive registration to An Event Apart plus $3,000 cash and a copy of HTML5 For Web Designers. Three runners-up (Best Design, Best Technical, and People’s Choice) will win free registration to An Event Apart plus a $1000 Visa cash card and HTML5 For Web Designers. Nine honorable mentions will receive HTML5 For Web Designers.

The judging panel that will evaluate all this awesomeness is made up of Jeremy Keith, Nicole Sullivan, Eric Meyer, Whitney Hess, and yours truly.

Sorry, no back-end, this is a client-side contest only.

Check the 10K Apart site for more info. Happy designing and developing!

UI Design Framework for Web Designers

Vincent (no last name given) has designed a beautiful, extremely useful, feature-rich interface design framework for web designers who create their initial design mock-ups in Adobe Illustrator. And it’s free for personal or commercial use (credit link required).

The set includes:

  • GUI library – Hundreds of vector elements for interface design
  • Minimal UI icons set – 260 vector icons for Illustrator
  • Styles library – 200 styles to apply in Illustrator

I’d pay cash money for the color schemes alone: 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.

The back-link requirement may be a deal breaker in some situations. I’d happily use these GUI icons on a personal project, but I might refrain on a client project if it seemed awkward to include a widget credit on the site. (It all depends on the client.)

That possible caveat aside, this is an extraordinary set of widgets and gizmos many web designers will want to have in their tool kit.

An InDesign for HTML and CSS?

In “CSS is the new Photoshop” (?), Adobe’s John Nack correctly observes, as have many of us, that “Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics.” Nack quotes Shawn Blanc, one of several concurrent authors of the phrase “CSS is the new Photoshop,” who cites as evidence Louis Harboe’s iOS icons and Jeff Batterton’s iPhone, both designed entirely in CSS and both only viewable in the latest Webkit browsers, Safari 5 and Google Chrome 5.

He’s not alone: Håkon Wium Lie from Opera predicts that CSS3 could eliminate half the images used on the Web. You can use various graphical tools to generate things like CSS gradients and rounded corners. As people can do more and more in code, it makes sense to ask whether even to use Photoshop in designing Web content.

I think Adobe should be freaking out a bit, but in a constructive way.

So far, so good. But Nack’s “constructive” suggestion for Adobe, quoting Michael Slade, is to create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.”

Nack acknowledges that this will be difficult. I propose that it will be impossible. Says Nack:

As I noted the other day, “Almost no one would look inside, say, an EPS file and harrumph, ‘Well, that’s not how I’d write PostScript’–but they absolutely do that with HTML.”

Well, there is a reason they absolutely do that with HTML. PostScript is a programming language designed to describe page layouts and text shapes in a world of known, fixed dimensions (the world of print), with no underlying semantics. PostScript doesn’t care whether an element is a paragraph, a headline, or a list item. It doesn’t care if a bit of content on one page cites another bit of content on a different page. PostScript is a visual plotting language. And HTML is anything but.

HTML is a language with roots in library science. It doesn’t know or care what content looks like. (Even HTML5 doesn’t care what content looks like.) Neither a tool like Photoshop, which is all about pixels, nor a tool like Illustrator, which is all about vectors, can generate semantic HTML, because the visual and the semantic are two different things.

Moreover, authoring good HTML and CSS is an art, just as authoring good poetry or designing beautiful comps in Photoshop is an art. Expecting Photoshop to write the kind of markup and CSS you and I write at our best is like challenging TextMate to convert semantic HTML into a visually appropriate and aesthetically pleasing layout. Certain kinds of human creativity and expertise cannot be reproduced by machines. Yes, there are machines that create music, and a composer like Brian Eno can program such systems to create somewhat interesting aural landscapes, but such music can never be the Eroica or “This Land is Your Land,” because there is no algorithm with the creative and life experience of Beethoven or Woody Guthrie.

Adobe already has a fine product in the code arena. Some hand coders knock Dreamweaver, but it does about as good a job as is possible of converting groupings of meaningless pixels into chunks of valid code. It is unreasonable to expect more than that from a tool that begins by importing a multi-layered Photoshop comp. Of course you can do much more with Dreamweaver if you use its code merely as a starting point, or if you use it simply as a hand-coding environment. But that’s the point. Some things, to be done right, must be done by the human mind.

There’s something to what Nack says. Photoshop could be made friendlier to serious web designers. Adobe could also stop ignoring Fireworks, as Fireworks is a better starting place for web design. They might even interview serious, standards-oriented web designers and start from scratch, as a new tool will suffer from fewer political constraints and user expectations than a beloved existing product with deep features and multiple audiences.

But while our current tools can certainly stand improvement, no company will ever create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.” The very assumption that a such thing is possible suggests a lack of understanding of the professionalism, wisdom, and experience required to create good HTML, CSS, and JavaScript. Fortunately, a better understanding is easy to come by.

A Feed Apart 2.0

A Feed Apart

As promised, a super-hot update to A Feed Apart, the official feed aggregator for An Event Apart, is up and running for your web design conference pleasure. You can now tweet from inside the application, and can even arrange meet-ups and make other social connections there.

Must-read: Designer Ali M. Ali talks about the interface design.

Steve Losh did back-end programming.

Nick Sergeant and Pete Karl created the original A Feed Apart and led the redesign effort.

If you can’t attend the sold-out show, which begins Monday, May 24, you can follow the live Tweetage from the comfort of your cubicle.

Enjoy An Event Apart Boston 2010 on A Feed Apart.

Happy 15th birthday, DragThing


On 1 May 1995, young James Thomson released the first version of DragThing, “the original dock designed to tidy up your Macintosh desktop.” On 1 May 2010, a still young James Thomson celebrated his product’s 15th birthday the way any good indie software developer would: with a free update.

It’s been over six years since we last charged for an update, and we’ve released over twenty free updates since then, so this should really be a paid one. But since it’s a relatively minor release, this is still free for people who bought any earlier version of DragThing 5.

My favorite DragThing feature

… is the ability to assign keystrokes to my favorite apps. I launch TextEdit with F1, Mail with F2, Fetch with F3, TextMate with F6, Photoshop with F7, Safari with F8, Illustrator with F10. The best part is that even when I’m working in a half-dozen or more apps at once, I can easily switch between them with a keypress—for instance, after copying a selection in Illustrator, I can hit F7 and paste it into Photoshop.

There are certainly other ways of doing these things (including other ways of assigning keystrokes to applications), but DragThing makes it easy.

Trash Can love

DragThing also lets you stick documents, folders, and applications in single or multiple, highly configurable docks, and can store frequently used text and photo clippings for pasting into other applications with a click. Plus you can assign sounds to actions (now you can hear when you empty the Trash can), stick the Trash can back on the desktop where it belongs, and play with all manner of dock styles and color schemes (caution! a little goes a long way).

You can take my copy of DragThing when you pry it out of my cold, dead hands.

Congratulations, James Thomson. The rest of you, download DragThing 5.9.6.

More Mod on the Digital Book

Embracing the Digital Book by Craig Mod.

A Reading Heatmap: Key passages illuminated by layering all readers’ highlights for the same text.

LAST MONTH, he wowed us with Books in the Age of the iPad, a call to make digital books as beautiful as printed ones. This month, Craig Mod is back with Embracing the Digital Book, an article (or blog post if you must) that begins as a critique of iBooks and Kindle and moves on to discuss the e-reader of our dreams, complete with reasoned social features:

I’m excited about digital books for a number of reasons. Their proclivity towards multimedia is not one of them. I’m excited about digital books for their meta potential. The illumination of, in the words of Richard Nash, that commonality between two people who have read the same book.

We need to step back for a moment and stop acting purely on style. There is no style store. Retire those half-realized metaphors while they’re still young.

Instead, let’s focus on the fundamentals. Improve e-reader typography and page balance. Integrate well considered networked (social) features. Respect the rights of the reader and then — only then — will we be in a position to further explore our new canvas.

Embracing the digital book — Craig Mod

Touch Gesture Reference Guide

The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces including iPhone, Windows 7, Windows Phone 7, Android, and more.

The guide contains an overview of the core gestures used for most touch commands. It tells how to use these gestures to support major user actions; provides visual representations of each gesture to use in design documentation and deliverables; and additionally provides an outline of how popular software platforms support core touch gestures. All in seven pretty PDF pages. It was conceived, researched, illustrated, and designed by Craig Villamor, Dan Willis, Luke Wroblewski, and Jennifer Rhim (document design).

Platform support information comes from the following sources: