The Will Will Web

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

如何在 Windows 10 周年更新安裝 Bash on Windows 並解決中文亂碼問題

今天趁著颱風天在家,花了 10 個小時把筆電升級到 Windwos 10 周年更新版本,並且裝了一直想安裝的 Bash on Windows 套件 ( Windows Subsystem for Linux ) ( 簡稱 WSL ),裝的過程還算順利,就唯獨「中文亂碼」問題很討厭,每每遇到這種問題,我就會本能的想要徹底了解背後的原理與嘗試從根本解決問題。本篇文章就來說說如何安裝這個 WSL 套件,並設法解決中文無法正常顯示與輸入的問題。

... 繼續閱讀 ...

前端工程研究:關於 JavaScript 中 Date 型別的常見地雷與建議作法

今天這篇文章,我想來談談 JavaScript 到底如何實作「日期字串」格式解析,日期時間有太多種表達方式,一般人在剛接觸日期格式的時候,都不會想太多跨瀏覽器的問題,通常都是遇到問題的時才來靠北瀏覽器有多爛多爛。有趣的是,有時候還會怪錯對象,例如 XXXX 框架好爛,我寫 JS 這麼久都沒遇過這問題,用了 XXXX 框架才遇到的。現在,我們就開始來對這個說常用不常用,用到時不熟悉的「日期」型別,話說從頭。

... 繼續閱讀 ...

如何在 ASP.NET Web API 2 專案中啟用表單驗證 (Forms Authentication)

使用 Visual Studio 2015 開發 ASP.NET Web API 2 專案時,有好幾種專案範本可以選擇,你可以從「空白」專案範本開始,也可以從「MVC」專案範本開始 (記得勾選 Web API 核心參考),也可以直接從「Web API」專案範本開始,由於專案範本通常夾雜大量的範例程式,很多時候我們並無法在第一時間得知每段程式碼與設定檔的細節,以至於在後續開發的過程發生許多問題。本篇文章將帶大家了解如何成功在 ASP.NET Web API 2 專案正確啟用 ASP.NET 的表單驗證機制 (FormsAuthenticaion)。

... 繼續閱讀 ...

Angular 2 開發心得分享 (01):使用 HTML 自訂元素的注意事項

使用 Angular 2 開發網站跟以前 Angular 1 最不一樣的地方在於「網頁元件化」的觀念,網頁中所有看到的東西都將變成一個個的 directive 元件,當你將現有網頁 HTML 版型變成 Angular 2 的 Directive 元件後,Angular 2 執行時會把這些 HTML 片段編譯過,並且找出這些 HTML 片段中是否含有其他的 Directive 元件,如果有找到,就會初始化這個 Directive 元件。不過當你的 HTML 版型中有用到「自訂的 HTML 元素」或「寫錯的 HTML 元素」,執行時期就會立刻發生錯誤,這問題發生的原因與解決方法,將是本文討論的重點。

... 繼續閱讀 ...

關於 TypeScript 2.0 之後的模組定義檔 ( Declaration Files ) ( *.d.ts )

為了讓 TypeScript 能與目前市面上各種 JavaScript 模組/函式庫一起運作,模組定義檔 ( Declaration Files ) ( *.d.ts ) 是 TypeScript 不可或缺的一部分,從最早期的 TSD (TypeScript Definition manager for DefinitelyTyped) 工具,到去年十月才推出的 typings (The TypeScript Definition Manager) 工具,今年六月 TypeScript 開發團隊決定從 TypeScript 2.0 改用 npm 來管理所有的模組定義檔,有在使用 TypeScript 的開發人員得要注意囉!

... 繼續閱讀 ...

如何修改 Visual Studio Code 內建的 TypeScript 版本

最近這兩周由於 Angular 2 已經來到了 RC5 版本,且 Angular CLI 也來到了 1.0.0-beta.11-webpack.2 版本,正式改用 webpack 作為 Angular 2 今後的模組管理工具,專案的整體編譯速度比以前用 SystemJS 快了好幾倍,我們用的非常開心。但唯獨有一點不太理想,就是當 Angular CLI 升級後所建立的專案,在 Visual Studio Code 裡面一直會出現討厭的警告訊息 ( 紅色下曲線 ),在經過幾天的消化與研究之後,終於發現原來是 Visual Studio Code 與 TypeScript 的問題,欲知詳情,請繼續看下去!

... 繼續閱讀 ...

新版 Docker for Windows 正式推出:全新安裝與快速上手

就在前天 (2016/7/29) docker 公司已正式推出全新的 Docker for Windows 版本,這個版本跟之前不同的是,本次推出的版本是個原生 Windows 應用程式,不再需要借助 VirtualBox、Docker Toolbox、boot2docker 或其他工具就可以執行,只要你的 Windows 作業系統是 Windows 10 專業版或企業版 (64-bit),並在安裝 Hyper-V 功能之後即可進行安裝與設定,這樣的改變帶來了更快、更穩定的容器環境,更增加許多全新功能與自動升級能力,幫助大家改善開發與部署的生產力。本篇文章將帶大家快速預覽新版 Docker for Windows 的安裝過程與使用方式。

... 繼續閱讀 ...

前端工程的夢幻逸品:Angular 2 開發框架介紹

目前 Angular 2 已經進展到 RC4 版本,在過不久的將來就要推出正式版本,許多人磨刀霍霍,既期待又怕受傷害。期待的是,希望 Angular 2 能夠真正解決我們開發 Web 應用程式的各種難題,不單單只是網站而已,還必須考量到 SPA 架構、開發效率、執行效率、行動裝置、原生 App 應用、伺服器渲染、多國語支援、開發工具、… 等多種面向,想也知道這不是個容易的任務。害怕的是,不知道這個坑到底有多深,用下去之後會不會很難上手、系統越做越大會不會越來越難維護、多人開發的時候會不會很難套用開發規範、會不會很難偵錯、容不容易跟後端整合、… 等等。 而我希望在這篇文章中,能夠解開大家心中的疑惑。

... 繼續閱讀 ...

如何解決在 Windows 用 npm 安裝 TypeScript 之後 tsc 還是舊版的問題

由於 Angular 2 官方建議採用 TypeScript 做為主要的開發語言,一般來說 TypeScript 都會建議使用 npm 進行安裝,安裝後就可以在命令提示字元下使用 tsc 命令對 *.ts 進行編譯動作。不過這幾年 TypeScript 的變化很快,轉眼都已經到 1.8 版了。雖然透過 npm 安裝 TypeScript 是很容易的一件事,不過對於有安裝過 Visual Studio 的使用者來說,這條路可能會變得異常崎嶇,如果你在用 npm 安裝過 TypeScript 並且輸入 tsc.exe -v 總是顯示 1.0 版 ( 或低於 1.8 版) 的話,這篇文章你可能要繼續看下去。

... 繼續閱讀 ...

如何在執行 Web 單鍵發行時,一併輸出完整的 pdb 偵錯符號檔

我在前些陣子開了好幾個梯次的 Visual Studio 2015 開發與偵錯技巧 課程,課程中有提到我們在對 .NET 應用程式進行偵錯時,有個最重要的 pdb 符號檔必須隨著專案一起發行,才能夠在執行的過程中得知完整的偵錯資訊,否則不但無法在程式執行過程中載入偵錯工具 (Debugger),連例外狀況發生時也將無法得知錯誤發生的呼叫堆疊與程式碼行數。但我們在 Visual Studio 常用的 Web 單鍵發行功能,預設設定是採用 Release 方案組態進行發布,而且預設還會將所有 pdb 符號檔排除,也就是透過 Web 單鍵發行的網站,將完全不會有相對應的 pdb 檔案,本篇文章告訴該如何設定。

... 繼續閱讀 ...

從命令提示字元中開啟 Visual Studio Code 如何避免顯示惱人的偵錯訊息

由於我的 Visual Studio Code 大部分時候都是在命令提示字元下啟動,所以只要用 code . 就可以快速啟動 Visual Studio Code 並自動開啟目前所在資料夾。不過不知道從哪個版本開始,我在啟動 Visual Studio Code 之後,卻開始在原本所在的命令提示字元視窗中出現一堆惱人的偵錯訊息,本篇文章試圖解析這個現象,並提出解決辦法。

... 繼續閱讀 ...

考證照真的沒用嗎?一個從業 20 年的 IT 主管告訴你他怎麼看!

其實無論在哪個國家都有推行證照制度,且行之有年,台灣當然也不例外,這件事一開始的立意都是好的,就是希望透過一套公平的考試制度,評估一個人的技術能力是否達到一定程度水準,不但能當成一個人的能力指標,也可以讓大家有個明確目標朝專業之路邁進。其他的行業我不清楚,但就我本身熟悉的 IT 產業來說,不知何年何月開始,大家開始對證照制度嗤之以鼻、不屑一顧,甚至覺得是一個人能力的負指標 (也就是能力不好的人才需要靠證照證明自己)。你說這現象是何等的詭異?是什麼樣的天時、地利、人和,可以讓一個原本立意良善的制度,變成人人喊打的落水狗,可能連有張證照都還不敢承認的地步。今天,就來談談我的個人見解。

... 繼續閱讀 ...

ASP.NET MVC 開發心得分享 (28):深入了解 ModelState 內部細節

在 ASP.NET MVC 的 模型繫結 (Model Binding) 完成之後,我們可以在 Controller / Action 中取得 ModelState 物件,一般來說我們都會用 ModelState.IsValid 來檢查在「模型繫結」的過程中所做的 輸入驗證 (Input Validation) 與 模型驗證 (Model Validation) 是否成功。不過,這個 ModelState 物件的用途很廣,裡面存有非常多模型繫結過程的狀態資訊,不但在 Controller 中能用,在 View 裡面也能使用,用的好的話,可以讓你的 Controller 更輕、View 也更乾淨,本篇文章將分享幾個 ModelState 的使用技巧。

... 繼續閱讀 ...