Archived entries for Tutorials

Notes on the New YUI Library Update

I hope you already saw the good news over on the YUI Blog: We just released a new version of the YUI Library, bringing it to v0.12. We’ve been releasing updates about monthly, but this is a substantial one with several changes, and moves us beyond the v0.11 branch after several rounds of dot releases at that level.

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

Tip: Disable PDF Display in Firefox (Use Reader Instead)

Erik Bruchez on the XForms Everywhere blog walks through the steps necessary to make pdf files open in your dedicated pdf viewer instead of in Firefox. He also does a nice job summarizing why you’d want to do this:

  • 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.

How To: Find Your “Friend ID” for Yahoo! My Web 2.0

I was looking for the url that points to my links on Yahoo!’s MyWeb 2.0 social search and social bookmarking product. When I’m logged in, it shows a clean url, but if you’re not logged in as me that generic url wouldn’t take you to my links.

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?

Yahoo! My Web improves Search

If you’re not using Yahoo!’s My Web yet, allow me to recommend it. The value of My Web is what it does to your experience on Search.

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.

Y! My Web SERP

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”.

Y! My Web - Contact Page

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.

Awesome Firefox Extensions

Anthony Lieuallen of Arantius.com has a great page called Awesome Firefox Extensions. If you’re new to Firefox or extensions, or are interested in finding some great new one, definitely head over there to check it out.

One extension not listed that I would personally recommend is Target Alert. This extension adds a small icon next to any links that aren’t to standard web pages. For example, it inserts a small envelope icon next to any email links, and a small PDF icon next to any .pdf links. (The PDF alert is particularily useful, since loading a PDF is slow sluggish and I often want to avoid it all together!) It offers alerts for many file extension (you can turn on and off as needed), and also alerts to links that will open new windows. The new window alert is great, because I then know to press alt-shirt to force the load into a new tab instead of a new browser window.

Anyways, I’ve been meaning to publish my recommended list of extensions, but this will have to do for now.

Flickr Tips: Monitoring Comments and Configuring Alerts

Monitoring Comments and Conversations

After I used Flickr for a while, I started to pay more and more attention to the social and community aspects. I haven’t ventured onto the message boards or chat yet, but I enjoy leaving comments on photos and having conversations there.

In several instances, I’ve asked for travel advice and questions about the locations and people in certain photos. Other times I’ve inquired about the techniques used to capture wonderful photographs or after-effects. In all these cases, it’s easy to comment but it had always been hard for me to remember where I’d commented, and notice when a reply was posted.

Then I discovered the Photos you’ve commented on page. This page solves all those problems for me: in a clean way, it presents all the photos you’ve commented on. It’s ordered by most recent activity, so you see photos you’ve recently commented on, as well as those that have been recently replied to. It works great, and has encouraged me to contribute and participate even more.

Notes and also Comments are shown in this nicely-integrated view.

Configuring Flickr Alerts

The Flickr mailbox is OK, but it doesn’t’ really fit into my personal online workflow. I prefer to receive my notifications in email. To set it up so Flickr sends you email instead of only adding to your Flickr mailbox, click My Account from the top of any page. From there click Notifications from Flickr (which you’ll see on the right, under the Privacy Settings header) and adjust the settings. For the four choices on the page, I have “Yes”, “Yes”, “As soon as it happens” and “Yes please!”.

To modify which email address these messages are sent to, click “Edit your email address” from back on the My Account page. (I set up an Address Guard on Yahoo Mail, which allows you to create a unique mail address, which I use to keep “alert” messages like this out of my main inbox.)

If you haven’t played with Flickr for at least 10 hours, start now. You’ll discover cooler and cooler features the more you use it. In fact, this “discoverability” aspect of Flickr is one of it’s great strengths and attributes.



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.