The Curiosity of _blank Anchor Tags

I'm often curious how so many websites still serve anchor <a> tags with targets set to "_blank".

I recently started browsing through www.104.com.tw, and was horrified to see how many times I was forced onto a new tab. A quick analysis showed me that 43% of the links on my profile editing page had a blank target set. ermahgerd.

This leads me to wonder if this is a conscious decision of the 104 developers. As a user I am consciously deciding my target on every single mouse click on an anchor/link. If I want it open in a new tab, then I middle-click (or ctrl-click),.. the ability to choose a new tab vs. current tab has long been given to me and the rest of the users of the world,.. why would some websites still decide to try force the user to use a new target?

I ran the following snippet of Javascript over a small sample of websites (some from Alexa top 10, some drawn from a hat).
Resulted in this log of results, which I've tried to summarize below.

The average use of _blank targets per country looked something like this for my sample:

Now I understand my sample is small (<50 pages); Edge cases may be skewing the statistic, but I it's fairly evident that some countries are definitely more accustomed to closing browser tabs than middle-clicking their mouse.

The top 13 results from my sample (excluding search result pages) looked like this:

Looking past the fact the top few sites have such a huge ratio of _blank targeted links, it's amazing that on the landing page of these Chinese sites the links number in the order of thousands.

It was also interesting comparing Bing's, Yahoo's and ebay's localized sites across the countries in question. It seems these sites have tailored their UX appropriately for their market.

Bing

Yahoo

ebay

If I had time to do this again properly, I would like to automatically crawl a more substantial sample of sites. The manual nature of my data-capture forced my sample to be focused and probably unfit for using in any real diagnosis.

Here's a good article to read. Agree or disagree with the use-cases, either way I hope more developers choose to use blank or new targets more appropriately.

Javascript載入動畫的plugin

在從前當我想要在網頁中載入自己的javascript於標頭時，通常會將其包含於page load script中。然而隨著時代的轉移，我們有著AMD/CMD (異步載入)的組件了，例如：RequireJS，SeaJS，CurlJS等等。因此現在我可以寫許多的JS組件並且僅在我需要它的時候將其異步載入。

在從前要在網頁內載入我們的JS時，通常我們需要某些UI控制器來指定何種資源是需要被載入的。當使用RequireJS後，此loading 時間是可以被分割到許多短暫的時間中的。 不過有時在載入JS resource 時仍然會花不少時間，也許是某些resource很大或複雜性比較高。然而理由到底為何，其實並不是很重要。最重要的是要讓用戶知道目前發生了什麼事, 故UI必須要可即時回應。

若用戶按某一個一個需要遠端載入resource的按鍵時，而RequireJS若只在resource完全載入後才回應使用者的話，當時間一久，使用者很可能會非常困惑且感到沮喪。因此，當然使用任何XHR 或遠端要求時，我也會希望如何UI 一樣的即時回應，來告知使用者目前發生了什麼事。

載入JS，當需要使用者等待時，你需要一個考慮周全的設備(device)用來顯示回應訊息於你的UI上。你可以從GitHub下載所有的程式碼，或是從下面另外一個分流的版本。

下載

使用範例

JQuery & SeaJS

Example Usage

JQuery & RequireJS

Mootools with no module loader

謝謝Hector Yeh幫我翻譯。
英文版

Javascript Loading Animation

Once upon a time I used to load all of my javascript in the head tag using script includes as the page loaded. Times are a changin', and now we have AMD devices such as RequireJS; Now I can write my JS in modules and load them as and when I need.

When loading all my JS on page load, I normally had some kind of UI control to indicate resources were being loaded. After having converted to RequireJS, this loading time has been divided into smaller more intermittent load times. The problem I've experienced is that sometimes a JS resource gets loaded really slowly, or perhaps it's just big or complicated. For whatever reason, it's not important.. The most important thing is to keep the user updated with whats happening, to have a responsive and active UI.

If a user clicks a button, which indirectly requires remote/new resources, then the response to that button click will only come to pass after RequireJS can download all the required resources. If this response time is too long, then this can confuse the user and/or lead to frustration. Actually,.. whenever I do any XHR or remote requests I want to have the same consistent active UI feedback telling the user what (or something) is happening.

Enter loading.js - A completely over-thought device to display feedback on your UI when it requires the user to wait. You can download all the code from GitHub or you can find a streamlined version of what you're looking for below.

I have tested in the current versions of Chrome (desktop & mobile), Firefox, IE, Safari (desktop & mobile). I don't have much intent in creating fixes for historical versions just yet,.. however I will happily accept pull requests.

Download

Example Usage

JQuery & RequireJS

JQuery & SeaJS

Mootools with no module loader