10個開發者放棄舊IE後可用的Web功能

今個星期收到的好消息,Microsoft將會在1月12日停止支援Internet Explorer (IE) 8, 9和10。雖然這些舊IE是不會一夜消失的,但各大公司的系統管理員應該有藉口讓這些過時軟件退休。大家最關心的是對開發者來講的實際意義是甚麼? 小編就挑了10個放棄支援這些IE後,你可以放心在下個Project使用的功能/效果。

1. HTML 5

HTML5加入多種Input種類,方便validation和使用者輸入,雖然可用各種UI framework(例如jQuery UI)已經有類似元件,不過有原生支援當然無任歡迎。

<input type="number" />

常用的有 number, email, tel, range, date 等等

另外HTML5新加的Video, audio元素

<video>
<audio>

多個檔案上載

<input type="file" name="myfiles" multiple="multiple">

2. 表單<input>的 Placeholder, autofocus

再見那個一片空白Input元素,加入placeholder可以提示使用者要輸入甚麼,也不會留下陋陋的空白

<input name="movie_name" type="text" placeholder="e.g. Forrest Gump">

Autofocus屬性可以讓cursor在頁面載入後自動移到搜尋框/表單第一個輸入等等。

<input name="keyword" type="text" autofocus>

3. CSS 3 Transition動畫

以住那些流行的UI framework的動畫,例如簡單的滑動, 淡出, 漸變色等等,在IE10以前都無法播放,或者要使用Javascript模擬出來。現在就不用了!

div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

4. CSS 3 Text-shadow

這個基本的css效果竟然到IE10才有支援,現在web programmer可以用過夠吧!

p{
text-shadow: 1px 1px 5px #000000;
}

5. CSS 3 border-radius

一個曾讓無數人抓狂的CSS3效果: 圓角。幸好IE9就有支援,不再需要用圖像來模擬

div{
border-radius:6px;
}

6. CSS 3 Gradients 漸變

無錯,CSS 3仍未數完。使用漸變,就可以令一粒平平無奇的按鈕立體起來。雖然潮流是平面化設計,但加入少量低調的漸變仍然可以達到吸引眼球的作用。

div{
background: #485563; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #485563 , #29323c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #485563 , #29323c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

 7. PNG favicons

不再另外弄一個ICO檔了,而且可以使用更高質素的PNG檔

<link rel="icon" type="image/png" href="http://example.com/image.png" />

8. Web Socket

Web socket容許雙向通信,IE10起就全面支援了,如果運用得好,寫系統時可以簡化很多,做Chatroom和Push notification等功能更容易。

9. Full Screen API

在IE 11之前,你都不能在應用中令IE全螢幕,現在就可以了!

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}

10. WebGL 3D canvas

IE 11起支援WebGL,意味著你可以創造更天馬行空既3D Web應用/遊戲!

Bonus

雖然一開始說10個,不過小編這裡都額外送幾個藉得一提的:

  1. ECMAScript 5 (只有IE8不支援)
  2. Hidden屬性
  3. CSS3 Border image
  4. Media Queries (responsive webpage)
  5. box-shadow
  6. CSS n-th child selector
  7. Input autofocus

有甚麼漏了? 歡迎在下面評論備充!

延申閱讀/參考資料

在Raspberry Pi 2上運行2500個web server

你在怎樣用你一時衝動買的Rapberry Pi 2呢? 也許你和筆者一樣把它呆在櫃子裏,或者用來做file server / media player,但有些工程師就決定把它的能力推到極限,使用Docker在上面跑上百個container,並向全世界發出挑戰,近日宣布結果,紀錄已達到2500個

甚麼是Docker

docker_logo

有留意Server端技術的讀者應該有聽過Docker的大名吧, 繼續閱讀 在Raspberry Pi 2上運行2500個web server

《主場新聞》網站離線備份 2012 May – 2014 Jan

主場結業,文章一瞬消失

上星期《主場新聞》突然結業,令我感到十分驚訝及可惜。當我知道消息後,第一時間到其網站打算看一看它"最後一面",可惜只能看見蔡東豪的最後宣言頁面,任何連結也只會顯示該頁,也沒有跡象會釋出過往的文章。心感難過,我決定尋找備份整個主場網站的方法。

繼續閱讀 《主場新聞》網站離線備份 2012 May – 2014 Jan

SneakerNet 的啟示

大家請想像一個小小的問題,你的電腦中有5TB的資料存在電腦的硬碟上,你要傳輸這10TB的資料給住在馬鞍山的朋友,你家住黃大仙。最快的方法是甚麼呢?

假設問題容後再答,筆者正好需要給朋友傳送2.8GB 的資料,奈何筆者家住舊區,家中上網upload 速度連理論值都只有500Kb/s ,實際的上載速度能有30KB/s 已經是不錯了。結果僅是2.5GB的資料,需時十小時。無甚耐性筆者當然不會慢慢等待 繼續閱讀 SneakerNet 的啟示

正名的疑惑

筆者工作的正式頭銜是software engineer;但當街頭的問卷小姐問筆者的職業時,我卻隨意就答了一句:「我是任職programmer的。」;並非任職IT的朋友總是認為你如果在IT一行的話,你的工作就是寫code,那不就應該名為coder更為準礭嗎?可是如果你上網閱讀opensource community ,部份人卻喜歡把我們叫做hacker(此hacker不同anonymous之類的駭客組織,詳情請參看維基百科。https://en.wikipedia.org/wiki/Hacker_%28computer_security%29 ); 至於筆者自己,最喜歡的卻是developer 的稱呼。那到底以上所有稱呼,到底是同一個職位的不同的稱呼,還是本來就是有微妙的分別呢?

http://www.hanselman.com/blog/content/binary/Windows-Live-Writer/Learning-to-code-and-shopping-at-Ikea_14066/CoderDeveloperHackerHanselmanVennv2_77a2dcf3-ea76-4508-8645-2b7e0f261d40.png

上網看到了一個有趣的分類。你覺得自己應該在那裏呢?

張貼的網站還展示了不少不同的入門網站。http://www.hanselman.com/blog/ACoderAProgrammerAHackerADeveloperAndAComputerScientistWalkIntoAVennDiagram.aspx

香港中學的電腦教育

近日編者與任職老師的哥哥談起中學現時的電腦教育,讓編者甚為驚訝的是,現在初中的電腦課竟然仍然是在教授Flash,Word  之類的技術,跟編者當年在初中學習的課程差不多。以現今電腦技術變遷的速度來看,香港的電腦教育可以說是落後起碼了兩三個世代之多。

編者不會抹殺學習使用這些軟件 的重要性,但令編者疑惑的是,從編者的中學時代開始,直至今天香港的電腦教育仍然停留在教授軟件的使用方法,而非教授概念為主。以下有幾個明顯例子: 學校教的是「Windows」,不是「Operating System」;教的是「Word」,不是「Word Processor」; 教的是「Photoshop」,不是「Raster Graphic Editor」。 即便編者聽聞有些學校開引入Mac ,但是教學的重心仍然是未曾改變。

對每天以電腦工作的上班族,學習上述的軟件自然是有必要。但學校電腦教育的重心卻應是如何為仍然在學的青少年打好電腦學習的基礎,仍然堅持十年前的方法明顯是背道而馳。再者千禧年以後自由軟件更有長足進展,更有一些專為教育而開發的Linux distro,例如Edubuntu , EduLinux 之類的教育分支。不知道現今教育官僚能否有如此遠見改變現狀呢?

編者卻認為非不能也,不為也。

好用的Password Manager-Keepass

keepass

不知大家如何管理數以十計的帳戶密碼呢?有研究表明,現代人會有平均廿三個帳戶,那麼多帳戶卻對使用者不太方便。一來編者恐怕即是像編者那樣的「IT人」,也很難像保安專家建議那樣,為每個帳戶設定一個不同的密碼。結果唯有重用密碼。二來我們所能設計的密碼强度有限,往往都是簡單數字及字母排列,太複雜的排列又無辦法記得。

幸好現在有不少password manager 可以幫助用家記住複雜的密碼,例如LastPass , 1Password 等等。今次編者要介紹的卻是Keepass(http://keepass.info/) ,編者認為Keepass 的一大好處就是Keepass並非像LastPass一樣將密碼儲在第三方的server裏,而且Keepass本身是一個open source 的software,也有非常好的跨平台support。Keepass 的Windows client 本身更可以安裝在usb 手指上,帶同由AES-256 bit 加密的password file,就可以在其他電腦上面使用。

如果想在smartphone 上便用,編者認為最佳的方法就是將password database 放在dropbox 裏,就可以在不同的device 上面方便便用了。

keepass

2014 蘋果的新程式語言: Swift

Swift !! Apple程式猿要學新語言了!
不過作為不會說Obj.C的小編,這個相當像javascript的新語言比Obj.C make sense很多~
這個新語言令學習門檻降低,可能令更多programmer投身Apple陣營 (當然仍要看今年的新硬件是否live up to the hype)

Swift Ebook on iBooks <

swift-screenshot

快速看看Swift是甚麼樣子

Variables 用var, Constant用let

variables
variables and constants

for / foreach loop

for-loop

 

一段較完整的example

example-code-fragment

這是Function的樣子

function

Classes的樣子

classes

Class和inheritance

class-inheritance

Strut加上Generics和Associated Types的樣子

struts