Archived entries for References

Test Suites for CSS 2.1, ARIA, and HTML5

Just hours ago Microsoft released an amazing new resource that helps the entire frontend engineering industry. Their Windows Internet Explorer Testing Center contains thousands of test cases covering CSS 2.1, HTML5, and WAI-ARIA.

CSS gets the most coverage with 7005 tests, 3784 of them developed just since IE8’s “beta 2″ a few months ago. IE8 passes all 7005, including, mysteriously, 52 tests that do not pass on any other major browser.

For HTML5, coverage includes 13 cross-document messaging and 30 DOM Storage tests. For WAI – ARIA they submitted new samples to support their previously-submitted ARIA to MSAA roles, events, and mappings.

While a great resource for the standardization movement in general, it also goes a long way to support their stated belief that “IE8 RC1 has the most complete implementation of the CSS 2.1 specification in the industry.” It will be very interesting to see if any of the other browsers care to comment. I’m hoping for a four-way tie.

Read more:

Wireframing with Balsamiq Mockups

Thanks to Pras for the pointer to Balsamiq’s Mockups application. I was sketching wireframes quickly within minutes of finding the product.

I believe in low-fidelity sketching at the wireframe stage. Balsamiq makes it easy with its large library of UI control stencils, its auto-complete driven keybroad stencil selection, on-screen snap-to alignment guides, a powerful inspector for precise control when rarely needed, and, more of all, a simplicity that makes it easy to start sketching or tweaking your mockup immediately.

The output is Balsamiq files, PGN or flattened image files, and XML. Because it exports XML it’s possible to use Balsamiq as a programmatic ingredient for downstream engineering systems and tools (such as partially automating the creation of detailed functional specifications, or using it as source for the automated building on the actual interface.

There is a rumor that they’ll be announcing clickable output files shortly, which might allow for the fast creation of clickable wireframes for usability testing (and other) needs.

I haven’t noticed, but it should be possible to customize what’s in the included UI Widget Library to a) take on a different visual skin; b) reflect new or fewer interface widget options.

All and all, I’m pretty intrigued. It seems there’s a market for consumer-friendly ways to design interfaces. Once more people catch on how to much fun we’re having, they’ll want a shot at designing and realizing all the apps they’re dreaming up, too!

I’d love to hear what you think of this approach. Have you tried it? Does it work for your teams”

Balsamiq Mockups For Desktop - * New Mockup

HTML Slicers

I’ve heard about various services that charge a flat rate to chop Photoshop (etc) files into clean (X)HTML and CSS, generally for a flat fee and quick turnaround. The topic came up today when a freelancing application developer buddy asked me about this type of service.

So this morning I asked my twitter followers (follow me!) which services they knew of. Here’s what came back (in a matter of minutes – gotta love twitter!):

Then @jasonw22 pointed out that Jonathan Snook (a hero of mine) has a list of about 20 such services, and just this week posted a review of his experience auditioning the psd2html service.

If you’ve used any of these services, I’d love to hear about your experiences in the comments below (and of other services you may know of or recommend).

I’ll report back on my friend’s experience.

(I must mention, in closing, that I’m skeptical of such services. I’ve spent the last several years of my career promoting the professionalism of frontend engineering, and so I have a twang of fear that these services are a step in the wrong direction. Then again, perhaps services such as these — if, in fact, the quality is there — prove that some aspects of “professional grade” web development are now par for the course. Jury’s still out.)

Foreward to O’Reilly’s High Performance Web Sites Book by Steve Souders

Steve Souders wrote High Performance Web Sites: Essential Knowledge for Front-End Engineers last year for O’Reilly. He generously invited me to write the foreward.

The book was published about six months ago, but in writing the my last blog post (on the 20 new rules just released) I noticed that I didn’t have an easily-accessible copy of my contribution. So, please forgive me for pasting it here for future reference.

Book Cover: High Performance Web Sites

Foreword

You’re lucky to be holding this book. More importantly, your web site’s users are lucky. Implement even a few of the 14 techniques Steve shares in this groundbreaking book and your site will be faster immediately. Your users will thank you.

Here is why it matters. As a frontend engineer, you hold a tremendous amount of power and responsibility. You’re the users’ last line of defense. The decisions you make directly shape their experience. I believe our number one job is to take care of them and to give them what they want—quickly. This book is a toolbox to create happy users (and bosses, too). Best of all, once you put these techniques in place—in most cases, a one-time tweak—you’ll be reaping the rewards far into the future.

This book will change your approach to performance optimization. When Steve began researching performance for our Platform Engineering group at Yahoo!, I believed performance was mainly a backend issue. But he showed that frontend issues account for 80% of total time. I thought frontend performance was about optimizing images and keeping CSS and JavaScript external, but the 176 pages and 14 rules you’re holding in your hand right now are proof that it’s much more.

I’ve applied his findings to several sites. Watching already-fast sites render nearly twice as quickly is tremendous. His methodology is sound, his data valid and extensive, and his findings compelling and impactful.

The discipline of frontend engineering is still young, but the book in your hands is an important step in the maturation of our craft. Together we’ll raise expectations about the Web by creating better and faster (and therefore more enjoyable) interfaces and experiences.

Cheers to faster surfing!

–Nate Koechley

Senior Frontend Engineer
Yahoo! User Interface (YUI) Team,
Platform Engineering, Yahoo! Inc.

San Francisco, August, 2007

The 34-Blade Razor from Yahoo!

Congratulations to my friend and colleague Stoyan Stefanov for the publication of Yahoo!’s Latest Performance Breakthroughs after presenting them at the PHP Quebec Conference in Montreal last week. The 20 new tips bring to 34 the total performance tips his team at Yahoo! has published in the past two years.

Stoyan (who authors the phpied.com blog) is part of an established tradition of Yahoo! sharing performance research publicly and widely. Stoyan’s teammate Tenni Theurer concluded the official blog post announcing these data and findings by saying, “We share our findings so that others can join us in accelerating the user experience on the web.”

I agree. That’s why I was honored to help disperse their 14 Rules for Faster Web Sites in my presentation at the @Media conference in London last year.

And that’s why it was a special honor to write the foreward to Steve Souders’ High Performance Web Sites book for O’Reilly last year. (Steve used to head up the Performance team at Yahoo!.) In the foreward I tried to express why performance matters to professional frontend engineers:

Here is why it matters. As a frontend engineer, you hold a tremendous amount of power and responsibility. You’re the users’ last line of defense. The decisions you make directly shape their experience. I believe our number one job is to take care of them and to give them what they want—quickly. This book is a toolbox to create happy users (and bosses, too). Best of all, once you put these techniques in place—in most cases, a one-time tweak—you’ll be reaping the rewards far into the future.

Read more about Yahoo!’s Latest Performance Breakthroughs on the Yahoo! Developer Network site.

The YUI Team, December 20, 2007

Yesterday during our weekly YUI team staff meeting we headed outside to snap a year-end picture of the team. Here it is!

From Left: Satyen Desai, Georgiann Puckett, Nate Koechley, Lucas Pettinati, Adam Moore, Douglas Crockford, Thomas Sha (behind the sign), Luke Smith, Matt Sweeney, Jenny Donnelly, and Dav Glass. Not Pictured: Todd Kloots and Eric Miraglia.

From Left: Satyen Desai, Georgiann Puckett, Nate Koechley, Lucas Pettinati, Adam Moore, Douglas Crockford, Thomas Sha (behind the sign), Luke Smith, Matt Sweeney, Jenny Donnelly, and Dav Glass. Not Pictured: Todd Kloots and Eric Miraglia.

(Photo credit: Eric Miraglia. The YUI Team, December 20, 2007
Originally uploaded by superfluity.
)



San Francisco, California | Creative Commons By-2.5 License | Contact

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.