Book Review: Don't Make Me Think

The second edition of Don't Make Me Think by Steve Krug which came out in 2005 is a short 200-page stylish book on Web Usability. It has glowing reviews on Amazon. Jeff Atwood (I'm a long-time follower of his blog and I discovered "Code Complete" after reading through some of this articles) is a big fan of this book.

Going by the reviews, I picked this book thinking it is a classic on this topic. I found that one-fourth of the short book was just pleasantries, credits, index, author plugging about his successful career as a consultant ["I'm writing this book for people who can't afford to hire (or rent) someone like me."], workshops & his (then) forthcoming book and lots of blank space.

The author tells us 'I was proud of how short the book was. It took a lot of work, but it was an important part of the "practices what it preaches" business' but when you read the chapter "Omit needless words" that has 4 pages, it feels ironical. 

The book stresses on the importance of Usability testing. It provides some guidelines & reinforces those ideas through case-studies.  However it had fewer takeaways than I expected. This advice in a chapter on Accessibility lives up to the book's tagline "A Common Sense Approach to Web Usability" - 3 of the "The 5 things you can do right now":

• Read an article
• Read a book
• Start using Cascading Style Sheets

The author frequently references Amazon for its good usability practices. So after you understand the basics, I think the best way to learn about Web Usability is by "looking at good sites". Considering that the Web is constantly evolving, Web Usability is a topic that you can never finish learning about.

Read More

HOW TO extract subtitles from a YouTube video

Subtitles within videos help non-native speakers clearly understand & follow what's going on while the video is playing. If you wish to take notes from a YouTube video, you will find this tip for extracting the subtitles from a YouTube video (that has subtitles) to be a time-saver. I have adapted this tip from an answer to a related question on the Quora website -

• Open the video page in Chrome browser (or any other browser that provides HTTP debugging/Developer Tools) and pause the video
• Right click anywhere on the page, and click on Inspect Element OR hit the F12 function key.
• Click on Network tab
• Under the Network tab look for an item called timedtext. 
• Right click on it and open that file in a new tab.
• An xml file containing subtitles with their timestamps(the stuff inside of <>) opens up.

To get rid of the timestamps and just have the plain transcript, here is what you have to do:

• Open up Microsoft Excel
• Copy paste the subtitles inside one cell
• Press Ctrl+H
• In the replace tab type <*> in the Find What textbox and leave the Replace With  textbox  blank, and click Replace All. The search expression will remove all tags within the original text.

[Update:16-July-2012] As per this WebApps StackExchange forum thread, there are two other ways to get the subtitles:

By specifying the language and VideoId in this generic URL - http://video.google.com/timedtext?lang=<LANG>&v=<VIDEOID> you can get an .xml file containing the subtitles in the desired language for a choosen video.

There is an open-source tool called Google2SRT that downloads all available subs from a YouTube video with one click & converts them into .srt format so that it can be used within media players like VLC Media Player.

Also see:
Low bandwidth? Try mobile version of popular websites on PC/laptop
HOW TO add subtitles to YouTube videos
Summaries of Google Webmaster Central YouTube videos

Read More

HOW TO show expanded form of shortened URL within a tweet using Twitter API

The Twitter micro-blogging service converts URLs within a tweet to a shortened form using its t.co domain to conserve the number of characters so that users can pack more into a 140-character limited tweet.

Some evil guys misuse this service to cloak hyperlinks to shady websites. An unsuspecting reader may fall into the trap if the tweet is crafted to make the user click the link.

While security is one reason why a developer may want to show the expanded form of the URL while displaying a customized view of a Twitter stream, there are other benefits of using the expanded URL that the Twitter API provides. If the expanded URL points to an image or video, the URL can be parsed to show it directly in the customized view.

Here's a code sample to show expanded URLs alongwith tweets. It utilizes a script from the CodeBrunch site that displays a collection of Tweets with "infinite scrolling" -

Read More

HOW TO convert a RSS feeed to a JSONP feed on the fly

JavaScript cannot be used to load a feed if the domain from which the feed is originating is not the same as the site where it is going to be consumed programmatically. That's were a JSONP feed can be helpful.

JSONP does not use XMLHttpRequest (XHR). It uses the script element so data can be pulled into any site, from any site. The purpose is to circumvent the same-source policy limitations of XMLHttpRequest.

Google provides a REST-based feed conversion API, Google Feed API, to convert a RSS feeed to a JSONP feed on the fly. Here's a code sample that shows the latest 15 article titles from Scott Gu's RSS blog feed -


If Google ever pulls this plug off for this service, there are alternatives.

Read More

Dig deeper into jQuery with "jQuery Succinctly"

jQuery Succinctly by Cody Lindley is an ebook that Syncfusion is offering as a free download (requires registration).

I've been working with jQuery on & off for the last four years and this book made me realize there is so much more to my favorite JavaScript library. The book lives up to the title as it covers the practical aspects of jQuery  in a straight-forward manner in just 100 pages with 100 code samples. This is a gem of a book - the best technical book I've read this year (I read about one a month) and one of the best books I've read on jQuery (jQuery in Action and  Learning jQuery are the others I read earlier)

It meets all the expectations I have of a good technical book - author is an expert on the topic, it's written in plain-English with no fluff and it provides a number of take-aways that you can apply at work. I had several 'aha' moments while reading through the facts like these -

The nth-child() filter doesn't have a zero index

The default context used by the jQuery function when selecting DOM elements is the document element (e.g. $('a', document)). This means that if you do not provide the jQuery function (e.g. jQuery()) with a second parameter to be used as the context for the DOM query, the default context used is the document element, more commonly known as <body>. 

One might incorrectly assume that the text() method only returns the text node of the first element in a wrapper set. However, it will actually join the text nodes of all elements contained in a wrapper set and then return the concatenated value as a single string.

Many of the samples are well-commented & display DOM manipulation wizardry. I'm sure I'll run into ocassions where I can put the tricks mentioned in this book to good use.

It would be nitpicking to say there are a few typos here & there. This book is a great resource for intermediate & advanced jQuery developers.

Read More

Getting Started with Windows 8

Windows 8 is reportedly due to arrive by this year-end. For those who can't wait to try out Microsoft's newest "reimagined" Windows operating system, there are preview releases - the latest one is called Windows Release Preview.

If you don't have spare hardware to experiment with the new OS, you can try out Windows Release Preview with free Virtual Machine software like VMWare Player or Oracle's VirtualBox. Unlike VirtualBox, VMWare Player requires registration but it is worth the effort as it provides a better experience.

Step-by-step guides for installing Windows 8 Preview in VirtualBox and VMWare Player are available.

So what's new in Windows 8?

• Start screen - the Start button is no more the focal point.
• Faster startup - 30 to 70% faster than Windows 7
• Metro style UI - clean typography and animations, touch-optimized interface, Metro style apps fill entire screen
• Works on a variety of devices - x86 and x64 PCs, ARM devices
• IE 10 - touch-first browsing experience, supports HTML5. 2 flavors - Desktop IE, Metro style IE
• Touch keyboard 
• Windows Store - screened apps, you can install your purchased apps on up to five Windows 8 PCs.
• Connected Microsoft account - you can sign in to a Win 8 PC with a local account or use a connected Microsoft account.  When you sign in with your connected Microsoft account to another PC running Windows 8, your Metro style apps and settings go with you. 
• Windows To Go -  bootable USB storage devices containing a copy of Windows 8, along with their business apps, data, and settings - no need to carry a laptop or tablet
• Client Hyper-V -  run multiple operating system instances simultaneously on their Windows 8 computer.
• Native PDF Reader

work in progress...

References -
Windows 8 Guide (PDF)

Read More