Category: Web Development

Win 8 IE10 初體驗﹣Front-end Web Developer 迎接 Win 8 IE 10 的挑戰

對於電腦使用者的你來說，WINDOW 8 的面世是一項電腦應用的新體驗。新的 Metro UI 一改沿用多年的介面，應對 iOS 的簡單介面而作出適合手提儀器改良的新介面。
Continue reading Win 8 IE10 初體驗﹣Front-end Web Developer 迎接 Win 8 IE 10 的挑戰

The fate of Adobe Flash on mobile platform

From the day Steve Jobs declare iPhone does not support Adobe Flash, it is the beginning of the decline of Adobe Flash. In sprite of being a Flash Developer in the past, I have to admit that Flash is not ideal to run on mobile device. Flash requires certain amount of resource to execute smoothly, while mobile device normally unable to provide such demand.

Android device keeps mentioning to support Flash, however, the disappointed user-experience causes people from joining their parties. So that from 15th Aug, Android is no longer provide Flash player for its devices.

Does HTML5 really the most suitable candidate for his task? My answer is: NO. I don’t thinking HTML5 can replace Flash game / Flash animation easily. Or the development of that game /animation will be complicated. No matter what, building multimedia content with HTML5 is the global trend. But if your target audience is not teenage, you probably keep using Flash as the tool, as Desktop has much powerful computing ability, with developer familiar with Flash programming, building fancy stuff with Flash can be much complicated but much faster.

Related reading:
Flash退出Android平台 正式告別移動端
http://news.cnyes.com/Content/20120816/KFM56OW8LB8KR.shtml
Did Steve Jobs kill Adobe Flash:
http://articles.cnn.com/2011-11-09/tech/tech_mobile_flash-steve-jobs_1_html5-battery-hog-photoshop?_s=PM:TECH

document.write causing blank page

Recently my company website has a 3rd-party site traffic tracking code blocking the site from rendering. The download of that JavaScript file never end until gateway timeout, hindering the site from complete loading.

I tried to make the JavaScript to be downloaded async so as to avoid the blocking issue, sadly it turns out a blank page.

Drill down to the root clause of the blank page issue, I find that it is caused by a document.write statement in the downloaded code. And find out that: document.write can only be used for inline,when the code is downloaded async, document.write will simply create a blank document and write the content on it.

To avoid it, we need to overwrite the document.write function to fit with the change. Detail can be found from the site:
https://github.com/eligrey/async-document-write

CodeIgniter 2.0 video tutorials by Big Name

With the famous PHP framework CodeIgniter upgraded into 2.0, I make use of this occasion to refresh my knowledge on this such great tool. Having an afternoon to surf in Google, I find a genius CI programmer kindly sharing his knowledge of writing some basic CI 2.0 tutorials, using the admin, blog, authentication scenario as demonstration. It really worth for people who wish to strength their PHP skill and programming logic like password validation, system flow.

New Lane Crawford site

It is incredible I have chance to participate in building up the Lane Crawford official site.

The visible website is just the tip of the whole iceberg. In the last 14 months, started from a 6 people team, we build up the whole project linking up various internal systems, collaborate with our vendor and overcoming different hardship. We finally come up with a presentable website. Yet it looks simple, the site aim to serve various browsers especially IE6. Yes, as its target audience is from the mainland… Continue reading New Lane Crawford site

Angelo’s Pizza is launched!!!

With an occasion brought by my colleague, I have a chance to offer my spare skill on building website for a well-known Italian restaurant, which open a new branch of dining service: Pizza Delivery – Angelo’s Pizza.

The site is customized CMS driven, bilingual, provide web master easier way to manage the site content.

Its mobile version is coming soon.

IE6 Duplicate Character for float element

Throughout the last couple months, I keep working on fixing a corporate site styling, JS execution issue, site performance for which was being implemented quite buggy. Debugging and fixing other people code is always challenging as you need to accommodate other coder’s styling, and try understanding what’s the purpose of writing something you think mean nothing, and avoid hitting some easter-egg issues. But it worths for me the meet such site and picking up such a challenging task as I am actually learning more and much aware something that I may also normally miss-out when I code. Continue reading IE6 Duplicate Character for float element

TypeKit and Web Fonts

For the project I currently come across is a very stylished corporation website. The site’s designer intends to use special font-face to empharise the brand feeling. This allows me find out something call TypeKit and Web Fonts.

In early web development period, whenever web designer need to use special font face, they may require people to download and install that particular font to client machine. When CSS turns out to a more widely used pratice for web layout control, we use font-family for assigning the font-face we use. But these techniques not yet help web designer to achieve something they want: the use of special, non-widely adopted font face, to their web product.

TypeKit and Web Fonts come to the place for this purpose, with the evolution of cloud service development. TypeKit and Web Fonts acts as a font provider for online purpose. They work in this way:

  1. Web designer sign up for the online font service
  2. Select font face that provided by TypeKit/Web Fonts and define CSS selector for assign font-face effect
  3. Generate JavaScript Snipplet for the fonts service
  4. Put the snipplet to designated web page so as to provides necessary font resource to the web page the snipplet was adopted. Designated CSS selector will take effect with the web font

Therefore, without explicitly storing the font raw file, no installation step on client side. By this mean, web designer can use their ideal font and client side can enjoy the visual effect without any extra font installation.

TypeKit does not provide as many font as Fonts.com Web Fonts provides. And as a Chinese, what I can observe is that TypeKit does not provide any chinese font-face.

Making good use of this technique can definitely help enhancing web layout while not affecting the site SEO concern, say no longer need to use image replacement to show special font design in some case.

Typekit: http://typekit.com/

Fonts.com Web Fonts: http://webfonts.fonts.com/

Cross Browser Compatibility & Progressive Enhancement

隨著網路的發展，網頁所包含的不單止有文字圖案，不同種類的多媒體應用漸漸被應用於一些尖端前衛的網站上，固有的瀏覽器未必能應付這樣的需求。由Internet Explorer vs Netscape 的年代開始，瀏覽器的戰爭自此沒有停過。林林種種的瀏覽器出現，Firefox, Chrome, Safari, Opera等等，對用家來說是多了選擇，對Web Developer來說分分鐘是惡夢的開始。

假如各門路的瀏覽器能夠把任何一個網頁都一致地呈現，這是最理想的情況。但事實上各家各有自己對網頁的編譯方法，甚至運行上的不同做法，都使 Web Developer 再神勝不過。意思說，作為 Web Developer ，有責任的話，他需要讓其製作的網頁能在絕大部份的瀏覽器 / 視窗平台中順利運行，這就是所謂 Cross Browser Compatibility 。要做到這點，並不是把一切基本網頁編寫的 HTML，JavaScript 學會就是了。還得要從各個瀏覽器的特性方面著手。由標準HTML (W3C Standard HTML)學起，到逐步了解不同瀏覽器對 HTML 的演譯方法，接著學寫標準的JavaScript，並且查找某些JavaScript在不同瀏覽器中編寫文法的例外，到較後學習如何利用CSS對版面作改動，與及留意不同瀏覽器所支援的 CSS 版本，為網頁作出適當的 CSS 調整。

從前 Cross Browser Support 主要依賴人手在各個瀏覽器上作測試，而現在坊間有說多途徑去減化這些測試動作。這個網站羅列了數個測試方法：

7 Fresh and Simple Ways to Test Cross-Browser Compatibility | FreelanceFolder

詳細的不說了，重點就是作為 Web Developer ，對自己所製作的網站傑作，都應該執行 Cross Browser Compatibility 測試，好使自己的作品不會在某些執行環境中出洋相。

當然，在云云瀏覽器存在的世代，正如我說不同瀏覽器對網頁的呈現會有不同的演譯方法，然而強行要將一個網頁完全順利一式一樣的在各個瀏覽器呈現，並不是沒可能，只是不夠實制。比方說，對不同瀏覽器對網頁中的元作執位方面會有偏差，這個還不算太難應對。但對一些網站運用了許多視覺優化，如圓角表單、文字陰影、背景漸變等等，從前人們會用 Table、Div或背景圖來規劃一些組件來製作相關效果。但隨著 CSS 的廣泛應用，CSS版本進展到CSS3，利用它能夠將許多效果實現。這些進化了的效果在較舊的瀏覽器上當然未能完整呈現，但呈現出的結果因背後有 Backward Compatibility 的概念而也不算太強差人意。這個網站有提出一個例子解釋：

When Should You Use Progressive Enhancement

嗯，本文另一個字眼出現了：「Progressive Enhancement」。其大意是一個網頁的表現結果在各個瀏覽器都大致一樣，唯獨對新技術有所支援的瀏覽器中，會展示較好的呈現結果。以上網站顯示了一個表單資料的顯示情況。用較新的瀏覽器觀看網站，會得到較漂亮的版面，然而在較舊的瀏覽器中，亦不失其功能上的表現。當然，對於一些不明白上文所述的一切，又要要求 Web Developer 把網頁做到在任何網站一式一樣的老闆來說，那只有苦了該 Web Developer 去花心機時間做盡一切方法將其老闆的想法實現。