The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

介紹好用工具:JS Bin ( 網站前端工程師的學習利器 )

我好像很久沒有介紹好用工具了,並不是我偷懶不玩工具,而是最近介紹工具的資訊大多分享在 Will 保哥的技術交流中心 為主,不知道的人記得過去按「」喔。今天這篇文章,主要介紹 JS Bin 這套好用的網頁前端工具,我覺得 JS Bin 介面非常簡潔,非常對我的胃口,雖然此工具還在不斷發展,但是目前的品質已經非常好了,因此覺得可以發表一篇文章來介紹這套工具,並分享一些不容易發現的使用技巧!

... 繼續閱讀 ...

網站建置不是件簡單的事 @ 跨瀏覽器網頁設計密技 (2)

設計跨瀏覽器網頁經常要在不同瀏覽器版本之間進行微調,調整的地方不一定只有 CSS 樣式,我們有時候會為了避開一些瀏覽器在特定版本下的 JavaScript 臭蟲,也會需要針對不同的瀏覽器版本撰寫不同的程式碼來因應,在這篇文章裡我會介紹各瀏覽器 CSS Hack 技巧以及 IE 條件式註解,幫助各位更輕易的設計出跨瀏覽器網頁。

... 繼續閱讀 ...

網站建置不是件簡單的事 @ 跨瀏覽器網頁設計密技 (1)

自從上次發表【網站建置不是件簡單的事 @ 打造網站的步驟】之後收到許多網友熱烈的迴響,因此萌生撰寫系列文章的想法,為了要延續【網站建置不是件簡單的事】系列,我想對設計師來說最痛苦的事莫過於跨瀏覽器網頁設計,我們通常在設計好網頁後,會進入「跨瀏覽器相容性測試」的步驟,這時幾乎 100% 都會遇到網頁相容性的問題,同一份網頁在不同瀏覽器裡顯示時多少都會有些差異,接下來的文章就是分享一些我們經常使用的跨瀏覽器網頁設計技巧,礙於篇幅考量,我會依據不同主題拆成多篇文章撰寫。

... 繼續閱讀 ...

網站建置不是件簡單的事 @ 打造網站的步驟

在筆者這十多年的工作歲月中,大部分的時間都與網站建置這件事糾纏不清,最早期剛接觸網頁時還是用HE5 (漢書) 或 Notepad 開始撰寫 HTML 開發網站,偶爾回想起來感覺當時寫網頁好辛苦,都沒有設計工具或開發工具可用,不過若換個角度想,其實當時才是最幸福的,你想想今日的網頁設計即便有那麼多好用的工具支援,但設計網頁的過程中有變簡單嗎?有太多網頁設計相關的問題需要被克服,像是跨瀏覽器相容性的問題、互動網頁的挑戰、伺服器端的程式開發、針對海量網頁要求的架構、AJAX、JSON、HTML5、CSS3、…,有太多東西要學了。

... 繼續閱讀 ...

介紹好用工具:jsFiddle - Online Editor for the Web

今天介紹這工具可說是在 Web 界非常實用的線上編輯器,編輯什麼呢?就是 HTML, CSS, JavaScript 這些東西啦。以往為了要展示或分享一些 JavaScript 的功能或 CSS 樣式,必須要架設一個網站放這些檔案才能讓其他人知道這東西執行後的結果,但 jsFiddle 的出現可謂是佛心來的,幫我們「代管」這個程式碼在「雲」上,讓我們可以將任意網頁內容放上去測試、驗證、存檔、分享。

... 繼續閱讀 ...

關於各瀏覽器對【表單內容送出】的編碼處理補充說明

網友 chihwen 提供了一條關於 瀏覽器對 "表單內容送出" 的編碼處理 的新線索,經我詳細測試下發現各瀏覽器之間的確還是有不同的處理規則,尤其是 IE 瀏覽器對這個屬性的實做不太老實進行了智慧型判斷處理,所以有必要特別說明,請看以下分析。

... 繼續閱讀 ...

手邊有一張速查表(Cheat Sheets)是件很方便的事

我個人有習慣收集一些網路上別人整理的速查表,因為程式開發的細節真的太多了,要能全部背起來不太可能,也沒什麼意義,甚至於有人說程式設計就是一件查詢、複製、貼上的工作而已。對我來說,寫程式首重觀念與經驗,有了完整而正確的觀念,就算記不得要怎麼寫,查詢一下就馬上能寫了;而有了經驗,對於一些難解的 Bug 自然能夠迅速解開。

... 繼續閱讀 ...

如何檢查 HTML 中的元素是否被隱藏

我們常會使用 element.focus() 方法,讓鍵盤游標停留在某個欄位上。例如說「會員登入」頁面開啟時,鍵盤輸入的游標就直接停在「帳號」欄位上,讓頁面開啟來後就可以直接輸入帳號。

... 繼續閱讀 ...