You can save up to $300 on registration when you register online (or via 800-280-6218) and use my special promo code SPKOE. Plus, using that code is worth a couple drinks on me after the sessions!

Here are longer descriptions of the two sessions. I’m still creating both of them, so please feel free to leave a comment below with feedback or requests for stuff you’d like to hear about.

Professional Frontend Engineering

“In 2001, most web developers simply pushed pixels. The Web was pieced together by print designers and back-end engineers – almost no one was deeply focused on the front-end. Today, in 2008, as front-end engineers we author complex and efficient software and bend reluctant browsers to our will. And we are broadly recognized and respected as a first-order engineering specialization.

In this talk, I will define the characteristics and important practices of our discipline. I’ll discuss the key challenges we still face. And I’ll offer 13 tactical tips from the front lines that you can put into practice today.”

Enhancing Web Sites with the Yahoo! User Interface (YUI) Library

“YUI is chock full of more than 40 utilities, widgets and tools that make web development and browser-wrangling less painful for small personal sites and heavy-duty industry-leading applications alike. This all-new talk covers what’s new in 2008 (lots), what’s coming next (some very cool stuff), and some practical tips from the trenches. If you’re a seasoned YUI pro, you’ll learn about hidden features and optimization tips. If you’ve never heard of YUI, you’ll learn how to get started. And if you use a different library, you’ll learn about YUI’s library-agnostic tools for things like compression, profiling and unit testing. It’s gonna be fun.”

Meet Up?

I’m looking forward to meeting designers and developers from all around Chicagoland. Please drop me a comment or email if you’re gonna be at the show — or even just in the area — and want to catch up for a drink or dinner. (I’m also planning on being in Madison, Wisconsin — my hometown — the weekend before the conference. So give me a shout if you’re in that neck of the woods.

The Details

• Official Web Design World Chicago site
• Web Design World on Upcoming

See you there!

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.

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

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.

Yesterday I ran the update to 10.5.1. Not so good: It knocked out my Cisco VPN client. Permanently. Rebooting did not help. Reinstalling did not help. (I rely on VPN non-stop, even to retrieve my office email.)

So today I poked around for a while and after some deep searching found the fix. It’s easy, and worked for me on the first try. The solution was on Anders Brownworth’s site (thanks Anders!), and I’m reprinting an excerpt here in the hopes that it will make it easier to find for somebody else.

If you are running Cisco’s VPNClient on Mac OSX, you might be familiar with (or tormented by) “Error 51: Unable to communicate with the VPN subsystem”. The simple fix is to quit VPNClient, open a Terminal window, (Applications -> Utilities -> Terminal) and type the following:

sudo /System/Library/StartupItems/CiscoVPN/CiscoVPN restart

and give your password when it asks. This will stop and start the “VPN Subsystem”, or in other words restart the CiscoVPN.kext extension.

Also, I suppose I should let you know that I’m flying out on a redeye flight tonight to start my winter holiday. I hope to write once more before shuttering things, but if I don’t get a chance let me be among the first to wish you a very happy new year.

Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests

What’s new in YUI v0.12? Thanks for asking:

1. Matt Sweeney has contributed a potent new control, TabView, built with the same high-quality thinking obvious in his Dom and Animation utilities. Want to progressively enhance existing markup with useful but unobtrusive JavaScript? Us too. Prefer completely built-from-script controls? No problem. Want the tabs on the top, right, bottom, or left? All supported out of the box. You can populate the tabs with static on-the-page content, or, of course, pull it down on-demand with Ajax. It’s all good.
2. Adam Moore has completely reworked our generated-docs API documentation system (see the API docs for Dom), and it’s pretty damn slick. It’s much smarter now, and provides richer information cross-linked in more usable ways. Don’t miss the autocomplete-powered search on the API Docs main page. I was happy to read Carson’s comment on the YUIBlog: “[the] new documentation about brought a tear to my eye.”
3. Steven Peterson revisited his Calendar control in a serious way, and the results are great. In addition to the new and improved multi-calendar interface, he created in-depth tutorial-style examples of YUI Calendar highlighting all the key features and use cases for Calendar (as well as for the entire Container family). There has been more than one question on the ydn-javascript mailing list about how to do this or that with Calendar of Container, and he’s taken many of those and answers them definitively in the new well-written tutorials.
4. Eric Miraglia did selfless work, as always, to offer some key new features on the YUI site. Don’t miss the YUI Theater, with its ever-growing collection of video lectures and instruction (including great content from Yahoo!’s Douglas Crockford, and Firebug’s Joe Hewitt). On the home page itself, notice the piped-in live content from the mailing list and our blog; I hope that will bring even more people into the conversation. On each component’s landing page, notice one-click access to all the examples from the right column under the component’s cheat sheet. Eric has also brought all the cheat sheets up-to-date to this release; there’s a new cheat sheets for YUI’s CSS foundation files (Reset, Fonts, Grids), and for TabView.
5. The rest of the team has been busy too. Our director, Thomas Sha, improved Connection so that when you’re uploading files via setForm() and the asyncRequest includes a POST data argument, the appendPostData() method will automagically create hidden input fields for each postData label/value and append each field to the form object. Niiice. Jenny Han modified AutoComplete so that it’s a bit more efficient (always-on container don’t send show and hide events), and a bit more powerful (minQueryLength now supports zero and negative numbers). If the zillion options weren’t enough before, now you’ve got a zillion plus two. Todd Kloots didn’t rest either, and Menu now has more elegant internals, and a bit more functionality exposed.
6. For my part, I completed a pretty substantial rewiring of YUI Grids. The most exciting change is that Grids now offers Liquid/Fluid Layouts out of the box. At what cost? Just seven-tenths of a kb of new page weight. In addition, there’s more power, more stability, and more flexibility across the board. I’m a big fan of fluid layouts, but if Fluid isn’t your thing this release also has 950px page widths baked in, in addition to the original 750px width. Best of all, if you don’t want to use Fluid or the two preset sizes, it’s super easy to set your own custom width. The Template Presets and Nesting Grids offer the same functionality as always, but they’re a bit more bulletproof now, and they now enjoy spreading their wings within the new page widths. As before, the entire system is in ems and percents, so it breathes with the user’s font size – a favorite accessibility and usability feature of mine. The new system is fully backward-compatible, so give it a shot and let me know how it goes.

I hope you enjoy all the new features in this release. I’d love to hear your feedback in the comments below, or straight on the ydn-javascript mailing list.

Thanks,
Nate

• The Adobe Acrobat Reader plugin, like any Adobe application, takes ages to start. While it is starting, your browser is frozen and you can’t do anything else.

• When it doesn’t work, it crashes your entire browser, or just freezes it (the case with Adobe Acrobat 6.0 and Firefox).

• When it works, usual browser shortcuts don’t work, including those to close your window or tab, navigate between tabs, go back and forward, etc.

• To make things worse, there is really no reliable warning when you follow a hyperlink that you are going to open a PDF file. So you hang, crash or freeze without any courtesy notice.

I’m sure there’s an easier way to find this “public url” for your links, but I had a hard time finding it just now. Here’s how you can do it relatively quickly:

1. Remember one of your most-recent or unique tags (that you’ve used to save a bookmark to MyWeb)
2. Log out of Yahoo!
3. Go to the “Everyone’s Tags” page and do a search for your tag.
4. In the results, find your name in the “Shared by” of a link with that tag. Click your name.
5. Copy that url, it’s the public view of your MyWeb page. Here’s mine.

This process could be smoother, but it must be on the to-do list. Others get it right, like Y!360, Y!Calendar, del.icio.us and Flickr. They all use your username in the url of your page: http://360.yahoo.com/triz_n, http://calendar.yahoo.com/triz_n, http://del.icio.us/natekoechley, http://flickr.com/photos/natekoechley/.

By the way, have you claimed your MyWeb badge yet?

At first glance, most see similarities between My Web and del.icio.us. It’s true, My Web contains a full featured social bookmarking service, complete with tags and RSS-love.

But My Web is much more than that: My Web is relevant search. Human-verified search. Better search.

Here’s a screen shot of a Yahoo! Search results page for javascript, with My Web enabled.

Over on Flickr, I’ve extensively annotated that screenshot. In short, it shows the following:

• Of the about 265,000,000 results for javascript, 1,569 have the unique distinction of being personally saved and annotated by people in my community.
• For each link, My Web shows who and how many people saved it, what they said about it, and if they’re currently online.
• Lower on the page, the normal search results are enhanced and show which links have been saved by either me or my community, and any notes I may have made about the link.
• For every result, there’s an quick way for me to save it to My Web. Thanks to the goodness of some AJAX DHTML, clicking Save brings up an on-page editor that lets me annotate and save the link without leaving or refreshing the page.
• (As a bonus, Yahoo! Search also tells me if the site in question has an RSS feed, and if so gives me access to the XML feed, and a one-click “Add to My Yahoo!” link.)

In addition to an improved SERP, My Web also offers what I’ll call the “Browse” view (screenshot below, again annotated). The Browse View lets you surf the data in interesting and useful ways. There are three objects you can explore: Pages, Tags and Contacts. Pages are my favorite, exposing tons of interesting and relevant links. You can scope your exploration to My Pages, My Community’s Pages, or Everyone’s Pages. I spend most of my time on the My Community page, since these are the people I’m most interested in, who’s interests I care about, and who’s expertise I value. If Jeremy comments on MySQL, I know it’s a quality link. If Douglas Crockford saves a link on Javascript, I know it’s a must-read.

The pages — links — are arranged chronologically, with the most recently saved toward the top of the page. (You can sort by popularity, title or URL too.) The most common tags in my community are listed on the left. Clicking one limits the pages to those with that tag. Selecting multiple tags is an AND operation, so I can quickly see all My Communities links that deal with “CSS” + “Hacks”.

I actually have this My Community page (not Jeremy’s page as in the screenshot above) set as my browser homepage. Each time I look at this page, I’m seeing the web sites my friends and colleagues have recently deemed worthy. I see high quality, fresh links, and get insight into what coworkers are thinking about at this very moment. More than once I’ve pinged somebody on IM to talk about something they just saved. It’s great for staying in-the-know.

There’s much more to My Web — invites, cached pages, a sweet API, RSS feeds for each facet, optional search history, tag clouds — but the two I described are the most important to me. I’ll let you discover the rest on your own, that’s half the fun, right?

If you want more information, there’s no place better than the official My Web blog or FAQ. Of you could read what Michael Nguyen, Yahoo!’s Jeremy Zawodny, or the blogosphere had to say.

Be on the lookout for new features all the time. In the last few weeks, the team has improved the auto-complete tagging features and the RSS feeds, and provided slick inline editing capabilities. 2.0 is lightyears better that the 1.0 product, and it’s getting even better every few days.

Have you tried it? What do you think? How do you use it? What features are most important to you?

PS: If you’re interested, it’s API is ready and waiting.