現在日常的 JavaScript 已經完全離不開 TypeScript 了，在強型別的保護下，不但不容易寫出錯誤的代碼，還能透過開發工具提供的 IntelliSense 提高開發速度。但是如果手邊的程式碼只能使用 JS 來撰寫，那該怎麼辦呢？像是 Protractor 的設定檔 protractor.conf.js 就是一個典型的例子，本篇文章我將分享如何在現有 JavaScript 檔案下使用 TypeScript 的型別檢查提示。
... 繼續閱讀 ...
網站建置不是件簡單的事，我們都知道網站做好之後，有好多細節需要兼顧，所以許多公司花了大量的時間與金錢，耗用人力對維護中的網站進行不斷的、重複的人工測試，想達到的目的不外乎是希望網站不要出錯，可以給客戶/使用者最好的網站使用體驗。但你是否知道單元測試、整合測試、端對端測試之間的差異在哪裡？本篇文章將闡述他們之間不同的部分。
... 繼續閱讀 ...
最近推出的 Angular CLI 7.3 版本，新增了一個相當亮眼的特性。當你的 Angular 應用程式同時要符合 IE 或舊版瀏覽器時，以往都會用 Polyfill 來填充缺少的 HTML5/JS APIs，但這件事到了 Angular CLI 7.3 又變得更貼心了。不但如此，這個新特性一樣可以用在各種 SPA 框架中，像是 Vue, React 或其他函式庫也都可以套用相同技巧。欲知詳情請繼續看下去。
... 繼續閱讀 ...
在 2019 的今天，還有多少人在使用傳統前端技術在開發 Web 應用程式？撇除市面上知名的 SPA 框架不說，就算你公司內部還在使用 jQuery 開發網頁，你依然可以將自己升級到使用現代化前端技術的前端工程師。今天這篇文章，將分享如何將現有傳統網站逐步升級，改用如 ES6 / ES2015 等語法，以及透過好用的模組打包工具(module bundler)將全新的 JS 語法轉譯為舊版瀏覽器也能執行的 JS 語法。
... 繼續閱讀 ...
這陣子花了一些時間研究 Unicode 萬國碼，看著看著就研究起 Emoji 表情圖示來了。過程中還跑去看了 Unicode® Emoji 官方規格，要是沒有先建立對 Unicode 的理解，要完全看懂 Emoji 的來龍去脈是不太容易的。研究的過程中，還發現了一些有趣的冷知識，欲知詳情請繼續看下去！ 😉
... 繼續閱讀 ...
最近有個案子需要設法過濾表單中輸入的文字，有些欄位只能輸入英數字，有些則必須自動轉全形文字，還有些只能輸入中文，有些不允許輸入標點符號。這個需求照理說很簡單，透過 Regular Expression 一下子就可以達陣，但是光是完成這功能實在太無趣了，所以晚上徹底的研究並整理所有的 Unicode 編碼，發現許多有趣的冷知識。
... 繼續閱讀 ...
函式編程 ( functional programming ) 在這幾年變得有點熱門，像是 React 這套 JavaScript 框架，如果想學好他，通常也都必須要先熟悉函式編程的開發方法才行。畢竟函式編程只是一種程式設計方法，只要程式語言本身可以符合函式編程的基本概念，就可以宣稱用函式編程來開發程式。今天這篇文章，就想以 JavaScript 程式語言為出發，帶大家理解 JavaScript 函式編程的魅力與重要的核心概念。
... 繼續閱讀 ...
今天這篇文章，我想來談談 JavaScript 到底如何實作「日期字串」格式解析，日期時間有太多種表達方式，一般人在剛接觸日期格式的時候，都不會想太多跨瀏覽器的問題，通常都是遇到問題的時才來靠北瀏覽器有多爛多爛。有趣的是，有時候還會怪錯對象，例如 XXXX 框架好爛，我寫 JS 這麼久都沒遇過這問題，用了 XXXX 框架才遇到的。現在，我們就開始來對這個說常用不常用，用到時不熟悉的「日期」型別，話說從頭。
... 繼續閱讀 ...
為了讓 TypeScript 能與目前市面上各種 JavaScript 模組/函式庫一起運作，模組定義檔 ( Declaration Files ) ( *.d.ts ) 是 TypeScript 不可或缺的一部分，從最早期的 TSD (TypeScript Definition manager for DefinitelyTyped) 工具，到去年十月才推出的 typings (The TypeScript Definition Manager) 工具，今年六月 TypeScript 開發團隊決定從 TypeScript 2.0 改用 npm 來管理所有的模組定義檔，有在使用 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 的問題，欲知詳情，請繼續看下去！
... 繼續閱讀 ...
今年有越來越多企業開始跟我們接洽企業內訓的事，想請我幫他們培訓前端工程師，但你知道一個好的前端工程師絕對不是兩三個月可以養成的，需要多年的努力與磨練才會有點成績。而這幾年可謂前端正夯，有為數不少的人開始大規模的往前端開發移動，而我被問到最多的問題就是「請問 JavaScript 要怎麼學？」或「請問 JavaScript 該怎樣入門？」諸如此類的問題。大家都知道，對於一門程式技術來說，「會寫」與「會教」是兩個截然不同的領域，會寫 JavaScript 的人到處都是，但是會教的人就相對少很多了。我這幾年教授 JavaScript 開發實戰課程已經超過 15 梯次，在將近 500 位學員裡面，我所看到的大部分學員都是對 JavaScript 不勝理解，普遍處於一種一知半解、模糊不清的狀態。另一方面，我在公司內部也帶過不少工程師，總是有人會想學習 JavaScript 但不知道如何入門的情況，這讓我陷入深思，該如何幫助一個人學習 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 範例程式或函式庫的使用技巧。
... 繼續閱讀 ...
我們公司自從開出前端的職缺並成功找到人才後，就開始積極的切割 前端 / 後端 的工作，期望前後端的分工架構能夠形成，將網站建置的品質持續向上提升。然而，前端的工作並不輕鬆，其中一個很沒效率的工作就是「跨瀏覽器相容性測試」，經常擊倒不少人，因此打算整理一些不錯的相關資源，如果各位有任何推薦的相關資源，歡迎隨時留言給我，我隨時加上，感恩。
... 繼續閱讀 ...