The Will Will Web

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

如何從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 檔案

前幾天一個負責前端的同事遇到一個問題,在實驗一些 JavaScript 函式庫時,發現無法直接從 GitHub 載入 JavaScript 檔案,Google Chrome 的 Console 視窗 (在開發者工具裡) 會出現一段 Refused to execute script from 'https://raw.github.com/moment/moment/develop/min/moment.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 的紅字 (紅字代表嚴重錯誤),而導致網頁無法正確執行,這篇文章將分享幾個注意事項,還有從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 範例程式或函式庫的使用技巧。

... 繼續閱讀 ...

關於 AngularJS 控制器 (ngController) 的多種宣告方法

初學 AngularJS 的人,寫到 ngController 之後一定會覺得 AngularJS 的 controller 怎麼這麼簡單,只要宣告一個 function 就馬上可以用了,而且 function 裡面的參數還會經由 AngularJS 自動注入物件。例如 $scope$http$window$log、…等等。不過,這種註冊 controller 的方式雖然簡單,卻還是有些缺點,例如這些 function 宣告不能被 最小化 (Minification),否則 function 內的區域變數被改成 a, b, c 之類的,AngularJS 就無法自動注入物件了,因此必須進一步學習更多的宣告方式,藉此解決 相依注入 (Dependency Injection) 的問題!

... 繼續閱讀 ...

The path ‘XXX’ is already mapped in workspace 的解決方法

昨天我的 Visual Studio 2012 突然發生一件離奇的事件,也就是當連接到 TFS Service 的時候,發生了 The path ‘XXX’ is already mapped in workspace 的錯誤訊息,這問題以前曾經發生過,不過只要重新登入登出 Live ID 就能夠解決,但這次卻怎樣都回復不了,而且是所有的專案都連不上了,上網尋找了一下解決方案,最後才知道是 TFS 的 Mapping 狀態亂掉了,必須清空 TFS Mapping 的狀態快取,才能正常使用。

... 繼續閱讀 ...

前端工程研究:HTML/CSS/JavaScript 相容性檢查資源整理

我們公司自從開出前端的職缺並成功找到人才後,就開始積極的切割 前端 / 後端 的工作,期望前後端的分工架構能夠形成,將網站建置的品質持續向上提升。然而,前端的工作並不輕鬆,其中一個很沒效率的工作就是「跨瀏覽器相容性測試」,經常擊倒不少人,因此打算整理一些不錯的相關資源,如果各位有任何推薦的相關資源,歡迎隨時留言給我,我隨時加上,感恩。

... 繼續閱讀 ...

前端工程研究:關於 JavaScript 中物件的 valueOf 方法

在 JavaScript 程式語言裡,這個 valueOf() 函式算是非常少用的一個內建函式,甚至於很多人連聽都沒聽過。然而,這個 valueOf() 函式十分重要,我在研究之後發現,理解了 valueOf() 的用途後,不但更能理解 JavaScript 如何針對物件進行數值布林字串運算,更能夠利用 valueOf() 解決 使用者定義物件 無法比對大小的問題。

... 繼續閱讀 ...

Linux 的 /tmp 目錄變成 1MB 的 overflow 檔案系統如何解決

今天有台 Linux 系統的硬碟滿了,導致系統發生異常,將空間清出之後,大部分的程式都可以正常運作,但是一個用 PHP 寫的網站卻出了點小問題,所有功能都能運作,MySQL 資料庫也能跑,但只要上傳超過 1MB 的檔案卻怎樣也上傳不成功 (UPLOAD_ERR_CANT_WRITE),查了好久才終於發現,原來是系統的 /tmp 暫存目錄只剩下 1MB 而已,而且檔案系統為沒聽過的 overflow 這個名稱,這篇文章用來解釋這個檔案系統的由來,以及解決方法。

... 繼續閱讀 ...

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

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

... 繼續閱讀 ...

ASP.NET MVC 4 在 .NET 4.0 與 .NET 4.5 的專案範本差異

昨天在【ASP.NET MVC 4 開發實戰】課程中,學員們發現了一個問題,就是在實作與測試 ASP.NET MVC 的 Routing (路由) 機制的過程中,發現有個功能有些人做得出來,有些人卻做不出來,當我前去查看時也沒立即發現問題癥結,中午休息的空檔終於找到的這個細微的差異之處,所以還是寫篇文章提醒正準備開始使用 .NET Framework 4.5 的 ASP.NET MVC 開發人員。

... 繼續閱讀 ...

ASP.NET MVC 開發心得分享 (24):擴充部分類別的建構子

在 ASP.NET MVC 使用 Entity Framework 資料庫先行開發模式 (Database-First Development) 的時候,因為所有 POCO (Plain Old CLR Object) 類別都會透過 *.tt 程式碼產生器範本自動建立,當我們想擴充資料模型時,勢必不會直接把驗證屬性直接寫在這些類別裡,而是在另一個部分類別檔案中,透過 MetadataType 屬性 (Attribute) 宣告一個 Metadata 類別 (又稱 Buddy Class)。另一方面,我們也會在資料模型的 POCO 類別的「建構子」方法中宣告屬性的預設值,但這時問題來了,如果我們在自動產生的資料模型類別中,已經宣告過「建構子」的話,那我們該如何在另一個部分類別檔案中再次「宣告」建構子呢?這就是這篇文章想要解決的難題。

... 繼續閱讀 ...

多奇數位創意 Outlook 行事曆使用技巧 (會議通知、會議告知)

身為資訊工作者,每天要應付大量資訊,手邊就算有強大的軟體支援,但若不會使用,或是觀念不夠完整,都將無法有效運用。而且,現今的工作,很少有僅自己一人獨立完成的,若要召開會議或會議告知,在使用 Outlook 的過程中都有些注意事項。今天我要來分享我這幾個月刻意整理起來的一些 Outlook 行事曆使用技巧,以及在公司裡經常耳提面命的小細節,大多都是與召開會議相關的小細節。

... 繼續閱讀 ...

使用 NuGet 更新套件時將 jQuery 升級到 2.0.2 應該如何降級

我們在 Visual Studio 2012 裡面會使用 NuGet 管理員管理那些常用的開發函式庫,例如 jQueryJson.NETEntityFrameworkELMAH、… 等等。各位可能也了解到,目前 jQuery 最新版為 2.0.2 版,這個最新版基本上僅支援 IE9 以上瀏覽器 ( IE8 以下不支援 ),因此大部分人應該都不會選擇安裝最新版的 jQuery,但是在使用 NuGet 安裝或更新套件的過程中,卻有可能不小心將 jQuery 套件自動升級到最新版,導致網站發生許多相容性的問題。今天這篇文章主要就是說明如何手動將 jQuery 降級到 1.x 的版本。註: 此方法適用於任何 NuGet 套件,所以若要指定降級版本,都可以參考這篇文章。

... 繼續閱讀 ...

AngularJS 的 ngSwitch 指令 (directive) 使用陷阱與範圍觀念

我們公司目前已經有兩、三個案子開始使用 AngularJS 進行開發,過程中自然會遇到一些陷阱,我們當然也知道,這些陷阱是因為觀念不完整所造成的,只要你認真看完看懂官網文件在講些甚麼,自然不會犯這種錯,但我也相信 99% 的開發人員不會把官網文件全部看完才開始撰寫程式。這次同事遇到的問題是在使用 ngSwitch 指令用以切換不同網頁內容時,會抓不到 Model 的問題,我們就來看看遇到這種問題應該如何解決。

... 繼續閱讀 ...

Visual Studio 2013 – ASP.NET 與 Web 功能快速預覽

TechEd North America 2013 正如火如荼的進行中,看了第一天的幾場,又再次陷入資訊爆炸的狀態。這次看見 Visual Studio 2013 推出了許多 ASP.NET 與 Web 相關功能預覽,覺得還蠻興奮的,特別摘錄 Microsoft ASP.NET, Web, and Cloud Tools Preview 影片中幾個亮點,讓大家快速掌握 VS2013 與 ASP.NET 的新功能。

... 繼續閱讀 ...