\n\n[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 可以說是 VS Code 上功能最強大的套件,它跟我在 VS Code 外最愛用的 Git 軟體 [GitKraken](https://www.gitkraken.com/) 是同一家公司開發的,這家公司在增強 git 體驗可以說是不遺餘力!這個套件一裝起來,在 Source Control 的頁籤瞬間就多了一堆功能可以使用!\n\nGitLens 對我來說有兩個很重要的功能,第一個是 blame,可以讓我們快速看到程式碼中每一行最後一次是由「誰」在「什麼時候」因為「什麼原因」異動的,在追查程式 bug 時非常方便,可以快速找到需要一起討論問題的人!\n\n{% asset_img 01.png %}\n\n{% note info %}\n\n當然你知道的,git blame 常常都是 blame 到自己 XD\n\n{% endnote %}\n\n另一個就是強大的 interactive rebase 功能了!GitLens 將 interactive rebase 做成了非常漂亮好用的介面,省去面對以往要改一堆文字內容的痛苦。\n\n{% asset_img 02.png %}\n\n{% note info %}\n\nGitLens 也有商用的付費功能,但整體來說免費的就非常非常夠用了!\n\n{% endnote %}\n\n# Git Graph\n\n\u003Cimg src=\"https://github.com/mhutchie/vscode-git-graph/raw/master/resources/demo.gif\" />\n\n[Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) 要做的事情非常簡單,就是把 git commit 記錄顯示出來,這個功能其實 VSCode 已經內建了,但個人覺得不怎麼美觀,在外觀部分,還是 Git Graph 大勝!Git Graph 圖形界面上同時也提供了一些如 merge、reset 等功能,方便我們直接操作!\n\n# Gitmoji\n\n\u003Cimg src=\"https://raw.githubusercontent.com/seatonjiang/gitmoji-vscode/main/images/gitmoji.gif\" />\n\n你是否看過一些 open source 的專案,會在 commit message 中加上一些 emoji?這其實是有一個規範在的,叫做 [gitmoji](https://gitmoji.dev/),Gitmoji 是一個 git commit message 的規範,它的目的是讓 commit message 更容易閱讀,也讓 commit message 更有趣!\n\n而在 VSCode 上,也有一個對應的套件 [Gitmoji](https://marketplace.visualstudio.com/items?itemName=seatonjiang.gitmoji-vscode),讓我們可以遵循 gitmoji 的規範來撰寫 commit message,讓整個 commit 記錄更加生動活潑。\n\n# gitignore\n\n[gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore) 可以說是非常重要,只是使用機會相對少的套件,它可以幫助我們快速產生一個 `.gitignore` 檔,只要我們執行 `F1` -> `Add gitignore`,就可以針對不同的專案類型直接選擇對應的 `.gitignore` 範本,對於專案初期來說是非常方便的!只是建立完後通常也就不會再用這個套件了,如果不是頻繁在建立專案的話,用到的機會也不多。\n\n# 本日小結\n\n以上就是幾個在 VSCode 上常用的 git 相關套件,如果你有其他推薦的,也歡迎在下方留言分享給大家!\n\n","POST_TOC":[{"text":"GitLens","level":1,"element":null,"active":false},{"text":"Git Graph","level":1,"element":null,"active":false},{"text":"Gitmoji","level":1,"element":null,"active":false},{"text":"gitignore","level":1,"element":null,"active":false},{"text":"本日小結","level":1,"element":null,"active":false}],"blog-posts.json":{"MySQL-connector-NET-Parameters":{"title":"MySQL connector .NET : Parameters","date":"2009-07-20 23:41:56","tags":["C#",".NET","Parameters"],"summary":"\u003Cp>最近要在.NET環境下連MySQL資料庫\u003C/p>\n\u003Cp>MySQL提供了MySQL Connector .NET來在.NET環境下連接MySQL\u003C/p>\n"},"analysis-webpack-bundle-size":{"title":"[Webpack] 分析產生後的 bundle 內容","date":"2022-01-21 18:15:42","categories":["前端軍火庫"],"tags":["Webpack","Angular"],"summary":"\u003Cp>Webpack 是強大的前端打包工具,可以幫助我們快速的將前端 JavaScript 程式及其用到的相關程式都打包成一個或數個 js 檔。同時也可以將不需要的程式透過 tree shaking 機制過濾掉。\u003C/p>\n\u003Cp>不過在前端的世界對於檔案大小是錙銖必較的,因此知道 webpack 到底打包了哪些程式,哪些程式是過濾不掉的,就非常重要了!\u003C/p>\n\u003Cp>好在 Webpack 提供了一個功能,讓我們能快速分析出打包的結果,到底包進哪些程式,程式大小等等清清楚楚,今天就來看看如何分析Webpack 打包後的結果。\u003C/p>\n"},"angular-14-standalone-components-directives-pipe-preview":{"title":"搶先體驗 Standalone Components / Directives / Pipes","date":"2022-05-14 08:42:44","categories":["Angular 大師之路"],"tags":["Angular","Angular 14","Standalone"],"summary":"\u003Cp>Angular 14 預計會推出一個重磅功能 - 「Standalone Components / Directives / Pipes」!這個功能允許我們「獨立」的使用 components、directives 和 pipes,不用再強制依靠 \u003Ccode>@NgModule\u003C/code>。\u003C/p>\n\u003Cp>目前 Angular 14 已經推出 RC.0 了,這個版本內也包含了 Standalone 的開發人員預覽版本(developer preview of standalone),讓我們可以搶先體驗一下這種\u003Cstrong>獨立使用元件\u003C/strong>的版本,這篇文章就來介紹一下為什麼要使用 Standalone 以及該如何使用。\u003C/p>\n","ogImage":"./assets/blog/angular-14-standalone-components-directives-pipe-preview/01.png"},"angular-14-strict-typed-reactive-forms":{"title":"搶先體驗強型別表單(Strict Typed Reactive Forms)","date":"2022-05-15 12:09:06","categories":["Angular 大師之路"],"tags":["Angular","Angular 14","Strict Typed Reactive Forms"],"summary":"\u003Cp>Angular 14 即將推出強型別的 Reactive Forms 表單功能,讓我們在開發過程中可以享受強型別定義帶來的好處,不用再擔心弱型別不小心打錯字等等問題,今天就來看一下如何使用強型別的表單功能!\u003C/p>\n","ogImage":"./assets/blog/angular-14-strict-typed-reactive-forms/01.png"},"angular-8-dynamic-load-module":{"title":"[Angular 大師之路] Angular 8 之後動態載入模組的方法 (非延遲載入路由)","date":"2019-06-04 20:10:38","categories":["Angular 大師之路"],"tags":["Angular","Angular8","Dynamic Import","Lazy Loading"],"summary":"\u003Cp>Angular 8 之後,將原來延遲載入路由模組的方式做了變動,改使用 \u003Ca href=\"https://developers.google.com/web/updates/2017/11/dynamic-import\">dynamic import\u003C/a> 的方法。這樣的方法替我們在開發時帶來非常大的優勢!隨著編輯器的資源,不管是模組路徑的設定還是選擇模組的方式,都擁有的自動完成的功能!\u003C/p>\n\u003Cp>不僅如此,如果不想透過路由設定就想達到在程式中動態載入模組也變得比過去簡單許多。今天就讓我們來看看該如何自行在程式中動態載入模組吧。\u003C/p>\n"},"angular-9-ng-object-for-debugging":{"title":"[Angular 大師之路] 使用 ng 物件幫助我們快速除錯","date":"2020-02-07 21:07:15","categories":["Angular 大師之路"],"tags":["Angular","Angular 9"],"summary":"\u003Cp>Angular 9 在今天 (2020/02/07) 正式推出了!在這個版本最重要的是加入了 Ivy,讓我們開發出更快、更輕巧的應用程式,同時也從 Ivy 延伸了許多有趣的新功能,不過在一般開發時其實習慣幾乎不會有太大的改變。不過有個功能,很有可能會改變未來開發的除錯和手動測試使用習慣,就是增強了 \u003Ccode>ng\u003C/code> 物件!\u003C/p>\n"},"angular-advanced-angular-elements-intro":{"title":"[Angular 進階議題] Angular Elements 簡介","date":"2018-05-08 20:30:33","categories":["Angular 進階議題"],"tags":["Angular","Angular 6","Angular Elements","Custom Elements"],"summary":"\u003Cp>Angular 6正式推出了Angular Elements的功能,讓我們可以將Angular元件轉換成標準的\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements\">Custom Elements\u003C/a>功能,在任何其他的HTML頁面中使用,這代表著Angular的應用範圍可以延伸到各種web應用去了!就算團隊中習慣用的是jQuery,我們也能夠把複雜的功能專換成Custom Elements,並且直接用在使用jQuery或其他靜態網站中,非常的方便!!\u003C/p>\n\u003Cp>今天我們就來簡單看看如何使用Angular Elements,以及實際把它運用到一般的HTML頁面,來學習理解Angular Elements的強大吧。\u003C/p>\n"},"angular-advanced-customize-component-with-ngmodel":{"title":"[Angular 進階議題]讓自訂的Component可以使用ngModel的方法","date":"2017-03-20 11:11:11","categories":["Angular 進階議題"],"tags":["Component","NG_VALUE_ACCESSOR","Angular","ControlValueAccessor","ngModel"],"summary":"\u003Cp>在設計Angular程式的時候,我們可以在各種基本的表單上加入**[(ngModel)]**來達到two way binding的效果,不過如果想要在Component中也能使用[(mgModel)]該怎麼辦呢?今天就來談談如何讓自訂的Component也可以直接使用ngModel達到two way binding!\u003C/p>\n"},"angular-advanced-customize-form-control-with-validation":{"title":"[Angular 進階議題] 在客製化表單控制項增加驗證(valid)結果","date":"2017-09-23 18:28:09","tags":["Angular","NG_VALIDATORS","NG_ASYNC_VALIDATORS","Validator"],"summary":"\u003Cp>在之前的文章「\u003Ca href=\"https://fullstackladder.dev/blog/2017/03/20/angular-advanced-customize-component-with-ngmodel/\">讓自訂的Component可以使用ngModel的方法\u003C/a>」我們提到可以替Component加入NG_VALUE_ACCESSOR及實作ControlValueAccessor,來讓我們的Component成為客製化的表單控制項,並能夠使用\u003Ccode>[(ngModel)]\u003C/code>達到two way binding的效果;既然成為了表單控制項,當然就該能享有驗證(Validation)的好處,以及在表單變化時得到一些額外的class支援,讓我們在設計上能夠有彈性!今天就要來如何讓別人在使用我們的表單控制項時能夠及時得知表單的內部驗證狀態(\u003Cstrong>NG_VALIDATORS和NG_ASYNC_VALIDATORS\u003C/strong>)。\u003C/p>\n"},"angular-advanced-dynamic-component-with-component-factory-resolver":{"title":"[Angular 進階議題]使用ComponentFactoryResolver動態產生Component","date":"2017-06-21 11:11:11","categories":["Angular 進階議題"],"tags":["Angular","ComponentFactoryResolver","ViewContainerRef"],"summary":"\u003Cp>Angular提供了\u003Ca href=\"https://angular.io/api/core/ComponentFactoryResolver\">ComponentFactoryResolver\u003C/a>,來協助我們在程式中動態的產生不同的Component,而不用死板板的把所有的Component都寫到View裡面,再判斷是否要顯示某個Component,當遇到呈現方式比較複雜的需求時非常好用,寫出來的程式碼也會漂亮很多。今天就來看看如何透過ComponentFactoryResolver來動態產生需要的Component。\u003C/p>\n"},"angular-advanced-handle-http-request-with-interceptor":{"title":"[Angular 進階議題]使用HttpInterceptort為HttpClient Request打點前後大小事","date":"2017-10-29 11:57:12","tags":["Angular","HttpInterceptor","HTTP_INTERCEPTORS","HttpClient"],"summary":"\u003Cp>在實際進行專案的時候,Angular內建的HttpClient其實常常是不符合需求的,因為我們可能會需要為每次的HttpRequest都加上一樣的Header,或針對HttpResponse要有一致性的處理,如果同樣的動作在每次Request都進行的話,只會產生一堆同樣的程式碼,既不美觀也容易出錯,好在Angular提供了\u003Ca href=\"https://angular.cn/api/common/http/HttpInterceptor\">HttpInterceptor\u003C/a>來幫助我們在Reqquest前主動幫我們處理好各種事情!\u003C/p>\n"},"angular-advanced-test-with-docker":{"title":"[Angular 進階議題]使用Docker測試Angular專案(包含Unit Test與E2E Test)","date":"2018-03-06 21:09:32","tags":["Angular","Unit Test","E2E Test","Docker"],"summary":"\u003Cp>透過Docker來執行或測試Angular專案是一種值得考慮的做法,我們可以將整個專案可能需要的環境等等包裝成一個Docker image,來使用一致環境去執行與測試,也能避免污染到本機上的環境。\u003C/p>\n\u003Cp>要使用Docker執行Angular專案其實並不難,使用包含node及npm的乾淨image即可,但在進行測試上則需要調整一些細節,今天就來看看該如何在Docker上測試Angular的專案吧!\u003C/p>\n"},"angular-advanced-testing-with-fakeasync-tick":{"title":"[Angular 進階議題]fakeAsync/tick-在Angular中測試非同步程式的時光魔術師!","date":"2017-08-07 11:11:11","categories":["Angular 進階議題"],"tags":["Angular","fakeAsync","tick"],"summary":"\u003Cp>Angular本來就是個把測試也考量進去的前端框架,因此提供了不少測試工具,由於現在寫JavaScript勢必會大量使用各種非同步執行的方式撰寫,因此Angular也提供了一些API讓我們在測試非同步執行的程式時更加容易,今天要講的fakeAsync跟tick就是其中一個神奇的工具!\u003C/p>\n"},"angular-advanced-testing-with-jest":{"title":"[Angular 進階議題]Karma + Jasmine跑測試太慢?試試看Jest吧!","date":"2017-08-13 11:11:11","categories":["Angular 進階議題"],"tags":["Angular","Jest","Snapshot Testing"],"summary":"\u003Cp>\u003Ca href=\"http://facebook.github.io/jest/\">Jest\u003C/a>是由Facebook開發出來的測試框架,就算Jest跟React是同一個爸爸,要拿來跑Angular的測試卻也沒有問題!今天就來看看如何把Jest套在Angular的專案上吧。\u003C/p>\n"},"angular-advanced-using-di-to-fix-third-party-bugs":{"title":"[Angular 大師之路] 透過 DI 容器修正第三方元件的 bug","date":"2022-10-07 20:08:13","categories":["Angular 大師之路"],"tags":["Angular","DI","Design Pattern"],"summary":"\u003Cp>最進公司內某個專案遇到了一個 bug 是因為第三方套件的已知 bug 導致,但又不可能等人家修好 bug 我們才能處理,於是來詢問我的想法;其實這並不是一個很難的問題,尤其是在 Angular 這種完整個框架下,透過 DI 容器就可以輕易的達成,只是不一定想得到而已,由於大多數我們會使用到 Angular 的 DI 機制常常都是再進行一些組態設定,難得有個案例是用來修 bug 的,就用這篇文章來記錄一下!\u003C/p>\n"},"angular-advanced-using-rxjs-sharereplay-operator-for-async-pipe":{"title":"[Angular 進階議題]使用shareReplay operator避免ajax時async pipe重複發request的問題","date":"2017-08-10 11:11:11","categories":["Angular 進階議題"],"tags":["RxJS","Angular","AsyncPipe"],"summary":"\u003Cp>Angular內建了一個\u003Ca href=\"https://angular.io/api/common/AsyncPipe\">async pipe\u003C/a>,讓我們在view中處理非同步資料時更加輕鬆,不論是Promise還是Observable都不需要額外做then或subscribe的動作,只要在view中加入async這個pipe就可以自動把該做的事情都做好,但當當一個非同步的結果會在不同地方顯示時,用async pipe就會發生重複處理的問題,這時就可以搭配RxJs的\u003Ca href=\"https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/sharereplay.md\">shareReplay\u003C/a> operator來解決這個問題。\u003C/p>\n"},"angular-book-review-9789864349821":{"title":"[開箱文] 圖像 Angular 開發入門:打造高靈活度的網頁應用程式","date":"2022-01-23 13:29:23","categories":null,"tags":["Angular"],"summary":"\u003Cp>難得的出現了一本 Angular 的繁體中文書籍,而且是台灣人自己寫的,不是翻譯版,今天就來開箱一下這本「圖像 Angular 開發入門:打造高靈活度的網頁應用程式」!\u003C/p>\n"},"angular-directive-composition-api-introduction":{"title":"Directive composition API 初體驗","date":"2022-11-20 12:02:43","categories":["Angular 大師之路"],"tags":["Angular","Angular 15","Directive","Directive Composition API"],"summary":"\u003Cp>Angular v15 推出了新的 feature - \u003Cstrong>directive composition API\u003C/strong>,可以方便我們更加容易組合出更複雜的 directive。\u003C/p>\n\u003Cp>這篇文章就讓我們來快速體驗一下 directive composition API 使用起來是什麼感覺!\u003C/p>\n"},"angular-inject-usage-sample":{"title":"使用 inject() 簡化建構式注入的內容","date":"2022-05-21 21:44:05","categories":["Angular 大師之路"],"tags":["Angular","Angular 14","inject"],"summary":"\u003Cp>Angular 14 將加強原有的 \u003Ca href=\"https://angular.io/api/core/inject\">inject\u003C/a> 功能,讓我們在元件的建構式內可以直接透過呼叫 \u003Ccode>inject(...)\u003C/code> 取得原本所有可以在建構式注入的內容,這種做法可以大幅簡化原來建構式的程式,但也可能帶來一些問題,今天就來看一下神奇的 \u003Ccode>inject()\u003C/code> 新用法。\u003C/p>\n"},"angular-material-01-intro":{"title":"[Angular Material 完全攻略]開始 & 簡介","date":"2017-12-19 20:54:15","categories":["Angular Material 完全攻略"],"tags":["Angular","Angular Material","Material Design"],"summary":"\u003Cp>從Angular第2版正式release後,根據全球最大工程師討論區StackOverflow的統計,從2016開始的Angular討論度就不斷竄升,甚至超越了React,直到了2017年,甚至擺脫了前一代Angularjs的陰影,躍升成為最熱門的前端議題!可以見得Angular這個前端框架確實具有它值得學習的地方,而在2017年底Angular正式邁向第5版,隔天Angular Material就從breaking changes不斷的beta版正式升到趨於穩定的rc版,沒幾個禮拜就直接正式release了!\u003C/p>\n\u003Cp>一個是由Google推出的前端框架,一個是由Google推出的設計語言的Angular實作,兩者結合想必能加乘產生N倍以上的爆發力!接下來的日子,我們將一步一步地\u003Cstrong>學會所有Angular Material的元件及特性、Angular CDK及一些進階的技巧\u003C/strong>,今天第一天就讓我們以比較輕鬆的節奏來認識所有的基礎知識吧!\u003C/p>\n"},"angular-material-02-installation":{"title":"[Angular Material 完全攻略]環境設定 & 安裝 & Hello World","date":"2017-12-20 20:33:28","categories":["Angular Material 完全攻略"],"tags":["Angular","Angular Material","Angular CLI","Material Design"],"summary":"\u003Cp>今天我們將開始正式邁入Angular Material的世界,要學習使用Angular Material打造高品質及高質感的網頁,當然要從安裝Angular Material套件開始,本篇文章就來介紹基本的Angular Material安裝步驟,並簡單加入一個元件來體驗一下\u003Cstrong>有質感\u003C/strong>是怎樣的一個感覺!\u003C/p>\n"},"angular-material-03-icon":{"title":"[Angular Material 完全攻略]MatIcon (及顏色配置介紹)","date":"2017-12-21 21:35:13","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","Material Icon","MatIcon"],"summary":"\u003Cp>今天是第一天正式介紹Angular Material的相關元件,就讓我們先從比較簡單輕鬆的\u003Ca href=\"https://material.angular.io/components/icon/overview\">Icon\u003C/a>來開始,雖然說是比較簡單輕鬆,但其實裡面也是有不少學問的,透過今天的介紹,你會發現其實Angular Material提供的Icon元件也是非常強大的!\u003C/p>\n"},"angular-material-04-buttons":{"title":"[Angular Material 完全攻略]MatButton、MatButtonToggle和MatRipple","date":"2017-12-22 17:35:13","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatButton","MatButtonToggle","MatButtonToggleGroup","MatRipple"],"summary":"\u003Cp>今天我們要來介紹Angular Material按鈕(button)的使用方法,按鈕可以說是一切互動介面的基本,只要按下了按鈕,所有事情都可能會發生,也因此設計良好的按鈕是非常重要的,除了讓事情發生外,也要讓使用者能夠明確的知道按鈕背後的意義,今天就讓我們看看Material Design中按鈕的設計思維,以及如何在Angular Material如何輕易地達到這些設計的目標吧!\u003C/p>\n"},"angular-material-05-sidenav":{"title":"[Angular Material 完全攻略]打造基本後台(1) - SideNav","date":"2017-12-23 12:33:12","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatSideNav"],"summary":"\u003Cp>我們終於要正式開始時做一個後台(dashboard)畫面啦,今天我們會先使用Angular Material的SideNav元件,把邊欄的空間先切出來,這個空間通常是用來放置主選單的空間,我們就來看看該如何開始吧!\u003C/p>\n"},"angular-material-06-toolbar":{"title":"[Angular Material 完全攻略]打造基本後台(2) - Toolbar","date":"2017-12-24 14:23:52","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatToolbar"],"summary":"\u003Cp>在昨天介紹SideNav時,我們有稍微提到過Toolbar,今天我們就比較認真的來看看Material Design中Toolbar的特性,及Angular Material中Toolbar可以呈現什麼樣的變化吧!\u003C/p>\n"},"angular-material-07-list":{"title":"[Angular Material 完全攻略]打造基本後台(3) - List","date":"2017-12-25 17:01:42","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatList"],"summary":"\u003Cp>昨天我們把整個後台系統的架構基本上完成了,今天我們要來學習使用Angular Material的List元件,來填滿SideNav。List元件功能非常強大,而且也是個在任何地方都很有可能會用到的功能,善用List可以產生各種不同的變化來滿足各種需求,Let’s GO!\u003C/p>\n"},"angular-material-08-menu":{"title":"[Angular Material 完全攻略]打造基本後台(4) - Menu","date":"2017-12-26 17:01:42","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatMenu"],"summary":"\u003Cp>今天我們要來講Angular Material的Menu元件,Menu可以說是非常具有歷史性的功能,使用機會也不低,只要有一系列的選擇要濃縮在一個範圍內時,就是使用Menu的好時機,接下來就讓我們看看Angular Material強大的Menu元件吧!\u003C/p>\n"},"angular-material-09-stepper":{"title":"[Angular Material 完全攻略]打造問卷頁面(1) - Stepper","date":"2017-12-27 20:04:48","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatStepper"],"summary":"\u003Cp>昨天我們已經完成了一個基本的後台版型,今天開始我們要使用Angular Material來製作一個問卷調查的頁面,這個練習主要會學到\u003Cstrong>所有Angular Material的表單元件\u003C/strong>,畢竟在前端的世界各式各樣的表單是必須面臨到的一大議題!不過在介紹表單元件之前,我們先來介紹一個還蠻適合放在問卷頁面的元件-Stepper。\u003C/p>\n"},"angular-material-10-input-autocomplete":{"title":"[Angular Material 完全攻略]打造問卷頁面(2) - Input、Autocomplete","date":"2017-12-28 20:10:48","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatInput","MatAutocomplete"],"summary":"\u003Cp>接下我們要來介紹幾個在Material Design中屬於Input,也就是文字輸入欄位相關的功能,文字輸入也可以說是表單裡面最常使用到的欄位!接下來就來看看Angular Material的Input、Autocomplete!!\u003C/p>\n"},"angular-material-11-datepicker":{"title":"[Angular Material 完全攻略]打造問卷頁面(3) - Datepicker","date":"2017-12-29 19:40:48","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatDatepicker"],"summary":"\u003Cp>昨天我們介紹了兩個常用的輸入元件,分別是Input及Autocomplete,在提到Input時有介紹當\u003Ccode><input type>\u003C/code>設為date時,會依照瀏覽器的不同產生不一樣的日期顯示方式,為了消除這種瀏覽器間的差異,我們會選擇不使用原生的畫面,而是自己刻(或找人家寫好的)一個元件來選擇日期。\u003C/p>\n\u003Cp>而在日期選擇方面,Material Design也有訂出一些設計參考,同時Angular Material提供了一個Datepicker,方便我們可以快速的選擇日期。\u003C/p>\n\u003Cp>至於該如何使用呢?就讓我們繼續看下去吧!\u003C/p>\n"},"angular-material-12-select":{"title":"[Angular Material 完全攻略]打造問卷頁面(4) - Select","date":"2017-12-30 19:41:48","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatSelect"],"summary":"\u003Cp>前兩天我們很精實的學習的跟Input相關的3個元件-Input、Autocomplete和Datepicker。今天我們用比較輕鬆的步調來介紹另一個常用的元件-Select。\u003C/p>\n"},"angular-material-13-form-field":{"title":"[Angular Material 完全攻略]打造問卷頁面(5) - Form Field","date":"2017-12-31 19:48:07","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatFormField"],"summary":"\u003Cp>前幾天我們介紹了幾個Angular Material常見的文字型表單欄位控制項,如Input、Autocomplete、Datepicker和Select。這些控制項在Angular 有一些特點,就是它們都會使用一個\u003Ccode><mat-form-field>\u003C/code>元件包起來,這個元件到底是有什麼能耐,讓這些表單欄位都離不開它呢?就讓我們繼續看下去吧!\u003C/p>\n"},"angular-material-14-checkbox-radio-switch":{"title":"[Angular Material 完全攻略]打造問卷頁面(6) - Checkbox、Radio和Slide Toggle","date":"2018-01-01 20:06:38","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design"],"summary":"\u003Cp>昨天我們介紹了Angular Material的Form Field,為我們的輸入類型控制項帶來一致的顯示成果;今天我們來介紹三個相對簡單但是使用頻率也非常高的元件-Checkbox、Radio和Slide Toggle,這三個元件有很多類似的地方,因此很適合放在一起學習,遇到類似的地方,還可以當做複習哩。\u003C/p>\n"},"angular-material-15-slider":{"title":"[Angular Material 完全攻略]打造問卷頁面(7) - Slider","date":"2018-01-02 14:06:38","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design","MatSlider"],"summary":"\u003Cp>今天我們要介紹目前Angular Material裡面關於Form Control的最後一個元件-Slider;完成Slider的學習之後,問卷頁面也會在此告一段落,進入下一個畫面的設計,學習更多Angular Material相關的元件,就讓我們以比較輕鬆的腳步完成今天的課題吧!\u003C/p>\n"},"angular-material-16-grid-list":{"title":"[Angular Material 完全攻略]設計一個部落格(1) - Grid List","date":"2018-01-03 17:06:38","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design"],"summary":"\u003Cp>在前幾天介紹完各式各樣的表單元件後,今天我們要先來看看在Material Design其中一種顯示清單資料的方法-Grid List,以及Angular Material中如何實現應用這樣的方法,把一個簡易的部落格版型給切出來!\u003C/p>\n"},"angular-material-17-card":{"title":"[Angular Material 完全攻略]設計一個部落格(2) - Card","date":"2018-01-04 13:06:38","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design"],"summary":"\u003Cp>在昨天介紹完Grid List之後,今天我們要介紹一個Material Design中被使用頻率非常高,且個人認為是Material Design中很經典的元件-Card。我們將利用Card來當作部落格列表的呈現方式。\u003C/p>\n"},"angular-material-18-progress-bar-progress-spinner":{"title":"[Angular Material 完全攻略]設計一個部落格(3) - Progress Bar、Progress Spinner","date":"2018-01-05 18:00:12","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design"],"summary":"\u003Cp>昨天我們介紹了好用的Card,並透過Card來顯示部落格的文章,今天我們要來介紹兩個跟\u003Cstrong>顯示進度\u003C/strong>有關係的元件,分別是Progress Bar和Progress Spinner,儘管這兩個元件相對簡單很多,但在SPA架構下,這兩個元件可以說是非常核心的功能哩。\u003C/p>\n"},"angular-material-19-dialog":{"title":"[Angular Material 完全攻略]設計一個部落格(4) - Dialog","date":"2018-01-06 17:38:25","categories":["Angular Material 完全攻略"],"tags":["Angular Material","Material Design"],"summary":"\u003Cp>昨天我們輕鬆地介紹兩個與進度有關的元件,今天讓我們稍微精實一點,來介紹一下寫程式多於寫HTML的Dialog,不管在不在SPA架構,Dialog都是經典且極為重要的元件,也因此我們會比較多的時間來介紹,好讓讀著們能完全的掌控Angular Material中的Dialog使用方式!\u003C/p>\n"},"angular-material-20-chip-tooltip-snackbar":{"title":"[Angular Material 完全攻略]設計一個部落格(5) - Chip、Tooltip、Snackbar","date":"2018-01-07 18:05:24","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material"],"summary":"\u003Cp>今天是Angular Material部落格篇的最後一天,我們要一口氣介紹三個元件,分別是Chip、Tooltip和Snackbar,其中Chip很適合用來當作類似標籤的功能;而Tooltip和Snackbar則是用在不同的地方,作為提示時使用。\u003C/p>\n"},"angular-material-21-expansion-panels":{"title":"[Angular Material 完全攻略]收件夾頁面(1) - Expansion Panels","date":"2018-01-08 12:54:09","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material"],"summary":"\u003Cp>今天開始我們又要進入一個新的頁面-「收件夾」囉!先從比較輕鬆的Expansion Panel開始,我們會使用這個元件在畫面左邊建立一個類似收件夾大綱/分類的清單;透過Expansion Panel我們可以展開/收合不同類型的資料,在瀏覽及管理上都非常方便,就讓我們繼續看下去吧!\u003C/p>\n"},"angular-material-22-tabs":{"title":"[Angular Material 完全攻略]收件夾頁面(2) - Tabs","date":"2018-01-09 18:28:12","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material"],"summary":"\u003Cp>昨天我們介紹了Expansaion Panels,替收件夾的左邊加上了基本的分類資訊,今天讓我們來使用Angular Material的Tab元件,來把右邊也填入些東西!\u003C/p>\n\u003Cp>Tab元件可以說是許許多多UI都會用到的功能,使用上雖然簡單,但也有許多不同的呈現模式,\u003Cstrong>可以說是最簡單也最複雜的元件之一\u003C/strong>,接下來就立刻來看看有些什麼變化吧!\u003C/p>\n"},"angular-material-23-table":{"title":"[Angular Material 完全攻略]收件夾頁面(3) - Table (基礎功能)","date":"2018-01-10 18:34:20","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material"],"summary":"\u003Cp>今天我們要來介紹Angular Material中最複雜的元件之一:\u003Cstrong>表格Table\u003C/strong>。透過組合table、sort header和paginator這三個功能,我們會完成一個大部分情境都適用的data table。\u003C/p>\n\u003Cp>Data table可以說是許多軟體都會被使用到的功能,尤其是管理各種資料的後台程式,更是使用data table的大宗來源,而在商務應用上後台軟體的開發需求也是源源不絕,因此data table可以說是前端應用最大的一個議題也不為過!\u003C/p>\n\u003Cp>也因此在Angular Material中要設計data table自然有非常多彈性可以調整的地方,尤其是我們會一次組合3種元件,來完成data table的功能,讓狀況更加的複雜,因此我們會將data table這個主題拆成2篇介紹,今天我們會先完成一個大部分情境都適用的data table,明天則會針對一些細節的部分做進階的介紹;準備好了嗎?開始囉!\u003C/p>\n"},"angular-material-24-table-advanced":{"title":"[Angular Material 完全攻略]收件夾頁面(4) - Table (進階功能)","date":"2018-01-11 11:23:40","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material"],"summary":"\u003Cp>昨天我們把一個data table的基礎功能-「\u003Cstrong>顯示資料、分頁、排序\u003C/strong>」都大致說明了一遍,今天我們來講一些進階的data table用法,以及分頁和排序元件的補充說明;Angular Material中的分頁和排序功能都很強,而且也不會和\u003Ccode><mat-table>\u003C/code>綁死,在任何地方可以應用。\u003C/p>\n\u003Cp>就讓我們繼續往下看吧!\u003C/p>\n"},"angular-material-25-cdk-intro":{"title":"[Angular Material 完全攻略]Angular CDK(1) - 基礎介紹","date":"2018-01-12 20:01:45","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material","Angular CDK"],"summary":"\u003Cp>我們即將要邁入新的篇章-\u003Cstrong>Angular CDK\u003C/strong>,我們今天先不來寫程式,而是大致的把目前(5.0.0)Angular CDK的架構做一個整體的介紹,讓讀者們能先在心中有個藍圖,在未來學習Angular CDK應該會更有感覺!\u003C/p>\n"},"angular-material-26-cdk-accessibility":{"title":"[Angular Material 完全攻略]Angular CDK(2) - Accessibility","date":"2018-01-13 19:34:20","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material","Angular CDK"],"summary":"\u003Cp>今天我們要來介紹第一個Angular CDK的分類功能-Accessibility。Accessibility(簡稱A11y)主要是放置一些方便與使用者互動的功能,以及讓我們在使用螢幕閱讀器時更加方便的工具。我們將介紹裡面幾個有趣的功能!\u003C/p>\n"},"angular-material-27-cdk-bidirectionality-layout":{"title":"[Angular Material 完全攻略]Angular CDK(3) - Bidirectionality、Layout","date":"2018-01-14 19:25:08","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material","Angular CDK"],"summary":"\u003Cp>今天我們來講Angular CDK中兩個跟版面配置有關的功能,分別是Bidirectionality、Layout。\u003C/p>\n\u003Cp>Bidirectionality主要是用來調整LTR(Left To Right)跟RTL(Right To Left)配置及偵測的工具。\u003C/p>\n\u003Cp>而Layout則是用來偵測瀏覽器可用的寬度與高度,來判斷目前網站使用在什麼樣的平台上,如果不使用任何其他的RWD工具,Layout可是Angular CDK中實現RWD不可或缺的幫手哩!\u003C/p>\n"},"angular-material-28-cdk-observables-scrolling":{"title":"[Angular Material 完全攻略]Angular CDK(4) - Observables、Scrolling","date":"2018-01-15 20:10:10","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material","Angular CDK"],"summary":"\u003Cp>今天我們要介紹兩個比較簡單的Angular CDK功能分類,分別是Observables和Scroll。這兩個功能使用上非常簡單,但乍看之下使用的機會不高,因此我們也會來稍微偷看一下Angular Material的原始碼,看看有什麼樣讓人意想不到的使用情境!\u003C/p>\n"},"angular-material-29-cdk-portal":{"title":"[Angular Material 完全攻略]Angular CDK(5) - Portal","date":"2018-01-16 15:39:19","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material","Angular CDK"],"summary":"\u003Cp>接下來我們要介紹Angular CDK中的Portal分類,透過這裡面的功能,我們可以很容易的動態切換各種不同的元件和templates,讓動態產生內容不再是件麻煩的事情!\u003C/p>\n\u003Cp>其實在Angular中,我們已經能夠使用\u003Ccode><ng-container>\u003C/code>搭配\u003Ccode>ngTemplateOutlet\u003C/code>或\u003Ccode>ngComponentOutlet\u003C/code>來切換不同的template或component了,而Angular CDK的Portal可以想像成是它的簡單好用加強版!甚至我們可以透過Portals裡面的功能,把元件放在整個Angular程式的控制範圍之外,但元件依然還在Angular的控制內,非常的強大!\u003C/p>\n\u003Cp>就讓我們繼續往下看吧!!\u003C/p>\n"},"angular-material-30-cdk-overlay":{"title":"[Angular Material 完全攻略]Angular CDK(6) - Overlay","date":"2018-01-17 18:30:35","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material","Angular CDK"],"summary":"\u003Cp>今天我們要來介紹Angular CDK中的Overlay!Overlay在Angular Material中可以說是隨處可見,只要是任何會從螢幕上\u003Cstrong>彈出\u003C/strong>資訊的功能,如Select、Dialog等等都免不了要使用Overlay;因此也能說Overlay是Angular Material中讓畫面\u003Cstrong>更具有立體感\u003C/strong>的大功臣,到底這個功能能幫助我們達到多少目標呢?就讓我們繼續看下去吧!\u003C/p>\n"},"angular-material-31-cdk-coercion-platform":{"title":"[Angular Material 完全攻略]Angular CDK(7) - Coercion、Platform","date":"2018-01-18 19:56:25","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material","Angular CDK"],"summary":"\u003Cp>今天我們來講兩個Angular CDK文件上沒有介紹,但很有機會使用到的\u003Cs>隱藏版\u003C/s>功能,分別是\u003Cstrong>型別轉換(coercion)、平台偵測(platform\u003C/strong>)。\u003C/p>\n"},"angular-material-32-custom-theme":{"title":"[Angular Material 完全攻略]雜項技巧(1) - 自己的theme自己設計","date":"2018-01-19 18:12:36","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material"],"summary":"\u003Cp>Angular Material內建了4種不同主題的theme,未來應該還會持續增加,但這些theme未必是我們喜歡的,而在Angular Material中,要設計自己的theme非常簡單,我們就來看看該如何做吧!\u003C/p>\n"},"angular-material-33-extra-css-tips":{"title":"[Angular Material 完全攻略]雜項技巧(2) - 其他CSS技巧","date":"2018-01-20 20:46:56","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material"],"summary":"\u003Cp>今天來分享一些筆者近期撰寫Angular Material文章,以及開始在實際專案中使用Angular Material所整理出來的一些CSS小技巧,有些在文件上可以輕鬆找到,有些則是遇到後才整理出來的,希望能對各位讀者大大們在使用Angular Material時有所幫助!\u003C/p>\n"},"angular-material-34-how-to-learn-angular-material":{"title":"[Angular Material 完全攻略]學習Angular Material的正確姿勢","date":"2018-01-21 19:00:03","categories":["Angular Material 完全攻略"],"tags":["Material Design","Angular Material"],"summary":"\u003Cp>今天來聊聊筆者這些日子學習Angular Material的方式,希望可以幫助大家能以更快的速度深入Angular Material,並能靈活運用在自己的專案當中。\u003C/p>\n\u003Cp>在筆者的經驗中,Angular Material要學得好,除了需要一定程度的Angular知識以外,另外還有Angular Material三寶:\u003Cstrong>文件、demo app和source code\u003C/strong>。\u003C/p>\n"},"angular-material-35-upgrade-to-6":{"title":"[Angular Material 完全攻略] Angular Material 6之快速安裝篇","date":"2018-05-04 16:28:51","categories":["Angular Material 完全攻略"],"tags":["Angular","Angular 6","Angular Material","Angular Material 6","Angular CLI"],"summary":"\u003Cp>Angular Material 6 在今天 (2018/05/04) 正式登場,從 Angular 本身、Angular CLI 到 Angular Material,全部都一次推出第 6 版!這個版本除了對齊版號以外,也投下了非常多驚人的震撼彈,許多都是跟程式架構與產生(schematics)有關!原本的安裝或升級都能夠藉此架構大幅節省心力,今天就讓我們看看,從 Angular 6 與 Angular Material 6 之後,要使用 Angular Material 到底變得有多簡單吧!\u003C/p>\n"},"angular-material-component-harnesses":{"title":"[Angular Material 完全攻略] 使用 Component Harness 寫出健全的測試程式","date":"2020-02-08 19:18:32","categories":["Angular Material 完全攻略"],"tags":["Angular","Angular Material","Angular CDK","ComponentHarnesses"],"summary":"\u003Cp>Angular CDK 9 推出了新的 Component Harness 功能,方便我們更容易寫出強健、好閱讀的整合測試或 E2E 測試程式碼,而幾乎所有 Angular Material 元件也都有實作對應的 ComponentHarness,大幅節省開發人員在撰寫測試程式來測試元件所需要花費的力氣!到底 Component Harness 是什麼?又要如何幫助我們寫著更強健的測試呢?今天就來一窺究竟!\u003C/p>\n"},"angular-material-writing-your-own-component-harness":{"title":"[Angular Material 完全攻略] 替我們的元件設計 Component Harness","date":"2020-03-08 15:02:16","categories":["Angular Material 完全攻略"],"tags":["Angular","Angular CDK","Component Harness"],"summary":"\u003Cp>在前一篇文章中我們介紹「\u003Ca href=\"https://fullstackladder.dev/blog/2020/02/08/angular-material-component-harnesses/\">如何透過 Angular Material Component Harness\u003C/a>」來測試 Angular Material 的相關元件,省去許多自己使用 \u003Ccode>querySelector\u003C/code> 的方式找到元件的麻煩,也可以避免未來元件改版破壞結構的麻煩,今天我們來看看如何替我們自己寫好的元件也設計對應的 Component Harnss,讓未來使用元件的人也能寫出更強健的測試程式碼!\u003C/p>\n"},"angular-pwa-service-worke-registration-options":{"title":"[Angular PWA] 改變 Servie Worker 註冊時機","date":"2019-07-28 11:50:01","tags":["Angular PWA","Service Worker","SwRegistrationOptions","registrationStrategy"],"summary":"\u003Cp>Angular PWA 套件幫助我們以非常簡易的方式,將 Service Worker 註冊到我們的應用程式中,然而一些特定的下,我們會需要做一些細節的調整,尤其是 Service Worker 的註冊時機點,今天就來看看使用 Angular PWA 該如何改變 Service Worker 註冊到應用程式的時間!\u003C/p>\n"},"angular-signals-example-pagination":{"title":"使用 Angular Signals 實作分頁功能","date":"2023-05-14 13:31:27","categories":["Angular 大師之路"],"tags":["Angular","Signals","Pagination"],"summary":"\u003Cp>今天這篇文章來簡單用 Angular Signals 實作一個分頁功能,體驗一下使用 Angular Signals 與 Reactive Programming 的開發思維。\u003C/p>\n"},"angular-tutorial-1-hello-world":{"title":"[Angular 速成班]簡介&Hello World!!","date":"2016-09-28 21:25:41","categories":["Angular 速成班"],"tags":["Angular","Angular CLI","TypeScript","JavaScript"],"summary":"\u003Cp>Angular前陣子終於脫離RC版堂堂邁入正式版本啦!這代表著基本上之後的更新原則上都不會再有重大的變化,也就是開發上可以比較穩定囉,所以今天就來介紹一下Angular以及使用官方推出的Angular CLI來建立一個簡單的Hello World程式吧!\u003C/p>\n"},"angular-tutorial-10-service":{"title":"[Angular 速成班]使用Service完成MVC架構的最後一塊拼圖","date":"2017-02-03 11:11:11","categories":["Angular 速成班"],"tags":["Angular","Service","@Injectable"],"summary":"\u003Cp>今天我們要介紹Angular的Service,透過Service我們可以\u003Cstrong>將資料和商業邏輯統一放到一個(或數個)類別中進行管理\u003C/strong>,並\u003Cstrong>在多個Components之間共享\u003C/strong>,讓程式架構更加明確!\u003C/p>\n"},"angular-tutorial-11-http-module":{"title":"[Angular 速成班]開發Ajax程式不可或缺的重要關鍵—Http Module","date":"2017-02-04 11:11:11","categories":["Angular 速成班"],"tags":["Angular","HttpModule","RxJS"],"summary":"\u003Cp>Angular是一個純前端的MVC框架,但在開發Web Application時我們有非常多的機會需要透過Ajax與後端的API進行資料的存取,因此Angular也提供了Http Module,來幫助我們的程式不在只是前端AP而已,而是能與後端聯繫的完整應用。\u003C/p>\n"},"angular-tutorial-12-pipe-basic":{"title":"[Angular 速成班]使用Pipe輕鬆改變view上的顯示內容(1)-Angular內建Pipe","date":"2017-02-06 11:11:11","categories":["Angular 速成班"],"tags":["Angular","Pipe","DatePipe","JsonPipe"],"summary":"\u003Cp>今天我們要介紹的是Angular的Pipe,透過Pipe我們可以不用在Component端寫程式改變資料的顯示模式,而是透過外部(也就是Pipe)的模式來調整要顯示的資料內容,如此一來我們就不用在Component中花太多心思去關注內容該如何呈現,再次達到關注點分離的效果。\u003C/p>\n"},"angular-tutorial-13-customize-pipe":{"title":"[Angular 速成班]使用Pipe輕鬆改變view上的顯示內容(2)-自訂Pipe讓內容顯示無死角","date":"2017-02-09 11:11:11","categories":["Angular 速成班"],"tags":["@Pipe","Angular CLI","Angular"],"summary":"\u003Cp>上一篇文章我們介紹了\u003Ca href=\"https://dotblogs.com.tw/wellwind/2017/02/06/Angular-pipe-basic\">Angular中內建的Pipe\u003C/a>,讓我們更容易在View中直接改變資料的顯示方式,今天我們來說明如何設計自己的Pipe。\u003C/p>\n"},"angular-tutorial-14-impure-pipe":{"title":"[Angular 速成班]使用Pipe輕鬆改變view上的顯示內容(3)-Impure Pipe參數:關於Pipe最重要的小事","date":"2017-02-12 11:11:11","categories":["Angular 速成班"],"tags":["@Pipe","Angular","Pure Pipe","Impure Pipe","AsyncPipe"],"summary":"\u003Cp>前兩篇文章我們已經認識了\u003Ca href=\"https://fullstackladder.dev/blog/2017/02/06/angular-tutorial-12-pipe-basic/\">Pipe的使用方法\u003C/a>以及\u003Ca href=\"https://fullstackladder.dev/blog/2017/02/09/angular-tutorial-13-customize-pipe/\">如何自訂Pipe\u003C/a>,基本上已經非常實用了,今天在Pipe的最後一篇要稍微深入的解釋自訂Pipe的一個小參數:\u003Cstrong>pure\u003C/strong>。\u003C/p>\n"},"angular-tutorial-15-directive-intro":{"title":"[Angular 速成班]使用attribute directive擴充元件屬性","date":"2017-02-14 11:11:11","categories":["Angular 速成班"],"tags":["Angular","Directive","@Directive","@HostListener"],"summary":"\u003Cp>今天我們要介紹Angular中的attribute directive,透過attribute directive,我們可以自行擴充元件的屬性,讓元件更富有變化性!\u003C/p>\n"},"angular-tutorial-16-module":{"title":"[Angular 速成班]透過Module組織管理你的程式","date":"2017-02-18 11:11:11","categories":["Angular 速成班"],"tags":["Angular CLI","Angular","@NgModule"],"summary":"\u003Cp>在過去的文章我們已經學到—Angular的應用程式是由一個一個的component所堆積組合起來的,這麼做的好處不用多說就是關注點分離,讓你專心在目前的功能上,也不用擔心影響到其他的component,但是當你的程式架構越來越龐大時,管理這些數以百計的components就變成一門學問了,這時候我們就可以透過模組化的機制,更有組織的管理你的所有components,這也就是我們今天要談的主題—Module。\u003C/p>\n"},"angular-tutorial-2-angular-cli":{"title":"[Angular 速成班]用Angular CLI節省你的開發時間","date":"2016-10-01 21:45:02","categories":["Angular 速成班"],"tags":["Angular","Angular CLI"],"summary":"\u003Cp>\u003Cstrong>Angular CLI\u003C/strong>是隨著Angular發展時一併產生的一個指令列工具,一樣基於「習慣取代配置」的優良傳統,我們可以用Angular CLI快速產生開發Angular程式時所需要的檔案範本,另外也包含了軟體開發生命週期會用到的\u003Cstrong>bundle, lint, unit test, end to end test\u003C/strong>等功能,也全都包在Angular CLI裡面了,因此透過Angular CLI工具,我們可以大幅節省許多準備檔案的時間!由於之後的Angular 速成班教學中我們也會大量使用Angular CLI來產生相關需要的檔案,因此今天就先來簡單介紹一下Angular CLI這個強大的產生器功能。\u003C/p>\n"},"angular-tutorial-3-angular-cli-project-structure":{"title":"[Angular 速成班]了解Angular CLI產生的專案目錄結構","date":"2016-10-15 11:11:11","categories":["Angular 速成班"],"tags":["Angular CLI","Angular"],"summary":"\u003Cp>在上一篇文章中我們快速介紹了Angular CLI的使用方式,透過Angular CLI我們可以很容易的建立一個具有一致性的專案架構,今天我們就來簡單介紹一下使用ng new指令產生的專案目錄內容,讓以後在開發Angular專案時可以很清楚知道檔案的存放位置。\u003C/p>\n"},"angular-tutorial-4-basic-concepts-and-create-components":{"title":"[Angular 速成班]來寫個TodoApp(1)-基本原理與架構","date":"2016-10-18 11:11:11","categories":["Angular 速成班"],"tags":["Angular CLI","Angular","NgModule","Component"],"summary":"\u003Cp>之前的文章介紹過Angular CLI的基本用法之後,本篇文章開始就來寫一個簡單的TodoApp,藉此來練習Angular的各種特色。\u003C/p>\n"},"angular-tutorial-5-data-binding":{"title":"[Angular 速成班]來寫個TodoApp(2)-認識Angular的4種data binding機制","date":"2016-11-12 11:11:11","categories":["Angular 速成班"],"tags":["Angular","TypeScript","Data Binding"],"summary":"\u003Cp>接下來我們來了解一下Angular中4種主要的data binding機制,如果沒有data binding機制的話,我們必須做很多事情才能讓一個JavaScript中的資料顯示在HTML上,反過來要抓取HTML DOM上的資料也是一件不容易的事情,因此許多前端框架都在努力讓事情變得簡單。透過Angular的data binding機制我可以更容易讓component與view進行互動,接下來就來看看這4種data binding機制如何使用吧。\u003C/p>\n"},"angular-tutorial-6-input-output-ngfor-ng-if":{"title":"[Angular 速成班]來寫個TodoApp(3)-學習@Input, @output, ngFor和ngIf","date":"2016-11-20 11:11:11","categories":["Angular 速成班"],"tags":["Angular","TypeScript","ngFor","ngIf","@Input","@Output"],"summary":"\u003Cp>在前一篇文章「認識Angular的4種data binding機制」我們學到了4種Angular的data binding機制後,今天我們一口氣要學習 \u003Cstrong>@Input, @output, ngFor和ngIf\u003C/strong>。這4樣東西學會後,基本上就算是把Angular最常用的功能都學起來了。我們也會在本篇文章中把基本的TodoApp給完成。\u003C/p>\n"},"angular-tutorial-7-css-process":{"title":"[Angular 速成班]關於CSS的使用","date":"2016-11-27 11:11:11","categories":["Angular 速成班"],"tags":["Angular CLI","Angular","CSS"],"summary":"\u003Cp>在web應用程式中使用CSS可以說是在基本不過的事情,就算移到的Angular,CSS當然還是依然會大量的被使用;使用CSS感覺好像沒什麼好聊的,不過Angular可是個花費了數年且結合了社群的腦力激盪開發最終才release的框架,對於處理CSS自然有更獨到方便管理的做法,今天就來談談在Angular中使用CSS的一些技巧吧!\u003C/p>\n"},"angular-tutorial-8-ngclass":{"title":"[Angular 速成班]使用NgClass動態為HTML element加入class","date":"2016-12-31 11:11:11","categories":["Angular 速成班"],"tags":["Angular","NgClass"],"summary":"\u003Cp>在\u003Ca href=\"https://dotblogs.com.tw/wellwind/2016/11/27/Angular-css-process\">上一篇\u003C/a>文章中我們學到了如何自訂CSS class,今天我們來學習透過ngClass來為畫面動態的加入或移除class。\u003C/p>\n"},"angular-tutorial-9-ngfor-vars":{"title":"[Angular 速成班]使用NgFor的5個特別變數,讓資料更有變化","date":"2017-01-02 11:11:11","categories":["Angular 速成班"],"tags":["Angular","NgFor"],"summary":"\u003Cp>在\u003Ca href=\"https://dotblogs.com.tw/wellwind/2016/11/20/Angular-input-output-ngfor-ng-if\">之前的文章中\u003C/a>我們學到使用NgFor來方式將陣列資料列舉到畫面上,今天我們更深入來使用NgFor內建定義的五個變數,讓畫面能夠有更豐富的變化。\u003C/p>\n"},"angular-universal-transfer-state":{"title":"[Angular Universal] 使用 TransferState 解決畫面閃爍問題","date":"2021-10-31 15:00:00","categories":["Angular 進階議題"],"tags":["Angular","Angular Universal","Server Side Rendering","TransferState","ServerTransferStateModule","BrowserTransferStateModule","TransferHttpCacheModule"],"summary":"\u003Cp>透過 Angular Universal 可以輕易達成 SSR 伺服器端渲染的效果,不過對於伺服器端產生的內容,到了 client 依然會重新進行產生,對於比較複雜的非同步處理如 HTTP 呼叫,就會發生重複呼叫,甚至造成畫面閃爍的問題。\u003C/p>\n\u003Cp>針對這個問題,Angular 提出了 Transfer State (狀態轉移) 的做法,將 server 抓取資料的狀態移轉到 client,讓 client 可以直接使用這些狀態資料,而不是重新產生,以避免畫面閃爍等問題。\u003C/p>\n\u003Cp>今天就來看看 Transfer State 的使用方式吧!\u003C/p>\n"},"angular-universal-with-firebase":{"title":"在 Firebase 上部署 Angular Universal","date":"2018-12-15 12:09:59","tags":["Angular","Angular Universal","Server Side Rendering","Firebase","Firebase Functions","Firebase Hosting"],"summary":"\u003Cp>Angular Universal 可以幫助我們以 server side 的方式把 Angular 畫面先產生好回傳給用戶端,而 Firebase 本身提供了 Firebase Hosting 服務,能讓我們輕易的部署靜態網站,若要部署 Angular Universal 的 express server的話,還可以搭配 Firebase Functions 功能。\u003C/p>\n\u003Cp>透過這樣的整合,我們可以把前端 SPA 架構的 Angular 網站都部署到 Firebase 上面,同時享有 Angular Universal 的 server side rendering (SSR、伺服器渲染) 功能,讓 SEO 排名更好,在做社群分享(如 facebook) 時,也能更正確的抓到資訊!\u003C/p>\n\u003Cp>今天就來分享一下將 Angular 程式部署到 Firebase,並同時支援 Angular Universal 的方法。\u003C/p>\n"},"ansible-windows-rsync-continuous-delivery":{"title":"[Ansible]搭配rsync在Windows Server上建置Continuous Delivery部署流程","date":"2017-01-08 11:11:11","categories":[""],"tags":["Continuous Delivery","Ansible","rsync"],"summary":"\u003Cp>最近因為工作需要建立一套部署機制,來改善過去人工部署的麻煩,盡可能讓事情都自動化;稍微survey了幾個工具後,決定使用Ansible作為部署的主要機制。今天就來分享一下如何利用Ansible與rsync將程式部署到Windows Server上面!\u003C/p>\n"},"azure-cloudshell-upload-download-file":{"title":"如何在 Azure CloudShell 上傳/下載檔案","date":"2022-07-05 18:51:20","categories":["Azure 小技巧"],"tags":["Azure","Azure CloudShell"],"summary":"\u003Cp>Azure CloudShell 可以幫助我們直接在 Azure Portal 上直接下指令進行各種資源的操作,不過偶爾我們需要將地端的檔案上傳到 Azure CloudShell 或是需要將在 Azure CloudShell 上面的檔案下載下來,今天分享一些小技巧,讓我們可以輕鬆的在 Azure CloudShell 上傳/下載檔案。\u003C/p>\n"},"azure-devops-cache-build-pipeline":{"title":"[Azure DevOps] 透過 cache 加快 CI pipeline 速度","date":"2022-12-17 12:04:50","categories":["Azure DevOps"],"tags":["Azure DevOps","Pipeline caching"],"summary":"\u003Cp>在 CI 階段時,我們經常會需要針對專案內容安裝各種套件,不過其實套件內容也很少更動,但每次安裝都會花上不少時間,雖然都放著讓 CI 跑就好了,但還是免不了要等一段時間,好在 Azure DevOps 提供了 \u003Ca href=\"https://learn.microsoft.com/en-us/azure/devops/pipelines/release/caching?view=azure-devops&wt.mc_id=DT-MVP-5003734\">Pipeline caching\u003C/a> 功能,讓我們可以將套件內容先暫存起來,下次就不用再安裝了,加快 CI pipline 的速度,這篇文章就來介紹一下 Pipeline caching 的工能。\u003C/p>\n","ogImage":"./assets/blog/azure-devops-cache-build-pipeline/02.png"},"azure-devops-intergrate-horusec":{"title":"[Azure DevOps] 整合 Horusec 掃描結果","date":"2023-01-08 10:40:05","categories":["Azure DevOps"],"tags":["Azure DevOps","Horusec","SARIF"],"summary":"\u003Cp>之前在文章中介紹了「\u003Ca href=\"https://fullstackladder.dev/blog/2023/01/07/introduction-horusec/\">Horusec\u003C/a>」這個強大的程式碼安全掃描工具,今天也來介紹一下如何整合到 Azure DevOps 的 CI pipeline 中。\u003C/p>\n","ogImage":"./assets/blog/azure-devops-intergrate-horusec/00.png"},"azure-devops-intergrate-security-code-scan":{"title":"[Azure DevOps] 整合 Security Code Scan 掃描結果","date":"2022-12-31 13:10:08","categories":["Azure DevOps"],"tags":["Azure DevOps","Security Code Scan","SARIF"],"summary":"\u003Cp>之前文章介紹過「\u003Ca href=\"https://fullstackladder.dev/blog/2022/12/24/introduction-security-code-scan/\">使用 Security Code Scan 為 .NET 應用程式進行程式碼安全性掃描\u003C/a>」,這篇文章接著來介紹一下如何在 Azure DevOps 的 CI pipeline 中整合 Security Code Scan 掃描結果。\u003C/p>\n","ogImage":"./assets/blog/azure-devops-intergrate-security-code-scan/00.png"},"change-crlf-in-vscode":{"title":"[Visual Studio Code 小技巧] 改變檔案的換行符號","date":"2022-09-10 21:12:52","categories":["Visual Studio Code 小技巧"],"tags":["Visual Studio Code"],"summary":"\u003Cp>換行符號在不同的作業系統上有不同的表示方式,Windows 會使用 CRLF (a.k.a \u003Ccode>\\r\\n\u003C/code>),而 Linux 則是使用 LF (a.k.a \u003Ccode>\\n\u003C/code>),這樣在不同的作業系統上,如果有人使用不同的換行符號,有時就會出現一些問題,所以我們需要在不同的作業系統上都使用相同的換行符號,這樣才能避免不同的問題。\u003C/p>\n\u003Cp>這篇文章就來說說如何用 VSCode 來改變檔案的換行符號。\u003C/p>\n"},"change-prefers-color-scheme-by-dev-tools":{"title":"[Chrome DevTools] 透過開發者工具動態切換暗黑模式","date":"2022-10-16 10:47:15","categories":["Chrome DevTools"],"tags":["Chrome DevTools","DarkMode"],"summary":"\u003Cp>Dark mode (暗黑模式) 已經逐漸成為現代網頁開發的主流,很多網站也都逐漸加入的對 dark mode 的支援,讓網站預設也可以跟著作業系統的深色或淺色模式自動切換\u003C/p>\n\u003Cp>雖然顏色偏好讓使用者體驗更好,但也確實增加了網站開發時期的負擔,我們必須同時測試兩種顏色模式的顯示效果,如果每次測試都要主動切換系統的模式,也未免太辛苦了!還好 Chrome DevTools 內建了主題切換,讓我們可以直接在開發工具切換目前網頁的顯示模式,大幅度的節省時間,今天就來看看如何在深色和淺色模式之間自由的切換!\u003C/p>\n","ogImage":"./assets/blog/change-prefers-color-scheme-by-dev-tools/04.png"},"chat-gpt-prompts-collection-english-dictionary":{"title":"[ChatGPT 咒語庫] 客製化英文字典","date":"2023-02-12 19:26:18","categories":["ChatGPT 咒語庫","AI 軍火庫"],"tags":["ChatGPT","AI"],"summary":"\u003Cp>想學英文,有個好字典是必須的,而且如果能力允許最好是「英英字典」,這樣才能學得更廣!\u003C/p>\n\u003Cp>這個咒語教你如何客製化一個自己的「英英字典」\u003C/p>\n","ogImage":"./assets/blog/chat-gpt-prompts-collection-english-dictionary/00.webp"},"chat-gpt-prompts-generate-document-comment":{"title":"[ChatGPT 咒語庫] 替程式碼加上文件註解","date":"2023-02-12 20:16:45","categories":["ChatGPT 咒語庫","AI 軍火庫"],"tags":["ChatGPT","AI"],"summary":"\u003Cp>是否要替程式碼加上註解,有很多不同的觀點,然而對於要開放給他人使用的屬性、函式或方法等,加上文件註解卻時可以有效的幫助其他人快速理解如何使用,同時也可以透過許多工具自動產生成文件,效益非常大。\u003C/p>\n\u003Cp>不過要產生文件還是蠻麻煩的,好在我們可以把程式交給 ChatGPT,讓他幫我們產生文件註解,非常方便!\u003C/p>\n","ogImage":"./assets/blog/chat-gpt-prompts-generate-document-comment/00.webp"},"chat-gpt-prompts-midjourney-analyzer":{"title":"[ChatGPT 咒語庫] Midjourney 咒語解析器","date":"2023-02-13 13:36:21","categories":["ChatGPT 咒語庫","AI 軍火庫"],"tags":["ChatGPT","AI","Midjourney"],"summary":"\u003Cp>前一篇文章我們提到可以\u003Ca href=\"https://fullstackladder.dev/blog/2023/02/13/chat-gpt-prompts-midjourney-generator/\">透過 ChatGPT 產生 Midjourney 咒語\u003C/a>,這讓我想到:「一直看人家的咒語來學習的效率可能有點低,是否能讓 ChatGPT 先幫我分析出幾個重要部分呢?」\u003C/p>\n\u003Cp>經過一些嘗試與調整,今天就來分享一下我用 ChatGPT 來分析與學習 Midjourney 咒語的咒語 🤔\u003C/p>\n","ogImage":"./assets/blog/chat-gpt-prompts-midjourney-analyzer/00.webp"},"chat-gpt-prompts-midjourney-generator":{"title":"[ChatGPT 咒語庫] Midjourney 咒語產生器","date":"2023-02-13 12:57:21","categories":["ChatGPT 咒語庫","AI 軍火庫"],"tags":["ChatGPT","AI","Midjourney"],"summary":"\u003Cp>Midjourney 應該算是當前最熱門的 AI 繪圖軟體之一了!只要把我們想像的文字丟進去給 Midjourney,就能產出非常精美的圖片,雖然細節有時候還是會有問題 (例如經典的手指頭…),但至少對於我這種美術白癡來說,已經是非常好看了!\u003C/p>\n\u003Cp>不過要能很好的跟 Midjourney 詠唱咒語,難度可是比 ChatGPT 高得多了,但也別低估 ChatGPT,我們可以透過 ChatGPT 幫助我們補強細節,讓 Midjourney 產生出更好的圖片!\u003C/p>\n","ogImage":"./assets/blog/chat-gpt-prompts-midjourney-generator/00.webp"},"codewars-online-kata-collection":{"title":"CodeWars-線上Kata練習解題的社群","date":"2016-09-15 22:46:25","tags":["CodeWars","Kata","Dojo"],"summary":"\u003Cp>第一次接觸到Kata這個詞是在Uncle Bob的The Clean Coder(無瑕的程式碼 番外篇:專業程式設計師的生存之)這本書中看到的,關於Kata的意思和跟程式設計有什麼關係網路上已經有很多資料了,就不多做詳細介紹,簡單來說就是用同樣的\u003Cstrong>套路\u003C/strong>(題目)來練習寫程式這件事情,藉由不斷進行同樣或類似的練習,來達到磨亮自己coding能力的目標。網路上可以找到很多Kata題目來進行練習,而\u003Ca href=\"http://www.codewars.com/r/xKC5Nw\">CodeWars\u003C/a>就是其中一個線上的Kata網站。\u003C/p>\n"},"create-azure-bot-service-for-testing-bot-framework":{"title":"建立 Azure Bot Service 來測試 Bot Framework","date":"2023-02-19 13:08:43","categories":["Azure Chat Bot"],"tags":["Microsoft Bot Framework","Bot Framework SDK","ChatBot","Azure Bot Service"],"summary":"\u003Cp>上一篇文章我們介紹了如何\u003Ca href=\"https://fullstackladder.dev/blog/2023/02/18/develop-chat-bot-using-microsoft-bot-framework/\">使用 Microsoft Bot Framework SDK 打造跨平台聊天機器人\u003C/a>,今天我們來介紹一下如何使用 Azure Bot Service 來測試 Bot Framework,並且為未來發佈到各個平台做準備。\u003C/p>\n","ogImage":"./assets/blog/create-azure-bot-service-for-testing-bot-framework/00.webp"},"csharp-expando-object":{"title":"[C#]簡介ExpandoObject","date":"2017-09-10 17:04:47","tags":["C#","ExpandoObject","IDictionary"],"summary":"\u003Cp>ExpandoObject 是 .Net Framework 4 之後出現的一個類別,可以幫助我們為物件動態的加入或移除屬性成員,今天就來聊聊 ExpandoObject 的特性及用法。\u003C/p>\n"},"csharp-observer-pattern-delegate-event":{"title":"[C#]Observer Pattern到Delegate和Event","date":"2016-05-22 22:02:43","tags":["C#","Design Pattern","Observer Pattern","Delegate","Event"],"summary":"\u003Cp>關於C#的delegate和event,我個人一直覺得是比較不好理解的部分,雖然直接使用別人設計好的功能時覺得很方便,但要自己使用delegate或event時總是不太順手;雖然過去曾經因為必須使用delegate奮鬥了一段時間,但幾年沒有用到後就又不太熟了XD。所以這篇文章就來從觀念開始紀錄一下delegate和event這兩個神奇的玩意。\u003C/p>\n"},"develop-chat-bot-using-microsoft-bot-framework":{"title":"使用 Microsoft Bot Framework SDK 打造跨平台聊天機器人","date":"2023-02-18 15:13:57","categories":["Azure Chat Bot"],"tags":["Microsoft Bot Framework","Bot Framework SDK","ChatBot"],"summary":"\u003Cp>最近 AI 聊天機器人正夯,也出現不少整合 AI 到這種聊天機器人的服務,方便我們整合到 LINE、Slack 或是 Microsoft Teams。\u003C/p>\n\u003Cp>而微軟推出的 Azure Bot Service 以及 Microsoft Bot Framework,可以幫助我們用一套程式碼,就整合到多家不同的聊天平台,今天就來介紹一下如何使用 Microsoft Bot Framework SDK 打造跨平台聊天機器人。\u003C/p>\n","ogImage":"./assets/blog/develop-chat-bot-using-microsoft-bot-framework/00.webp"},"dynamic-create-component-without-template":{"title":"[Angular 大師之路] 在動態的 HTML 中動態產生元件","date":"2022-01-16 13:12:26","categories":["Angular 大師之路"],"tags":["Angular","Angular 13","ApplicationRef","ViewContainerRef","ComponentFactoryResolver"],"summary":"\u003Cp>在之前的文章中我們曾經提到過「動態建立元件」的方法,透過建立一個 directive,並決定這個 directive 的樣版上要呈現成什麼元件,之後將元件產生在 directive 所屬的樣版上。\u003C/p>\n\u003Cp>這麼做很棒,不過還是有一個缺點,就是一定需要在樣板 HTML 上掛上這個 directive,才能產生動態的元件,雖然大部分情境都足夠了,但當遇到甚至連 HTML 都是完全自定義不是寫死在程式內的,如果需要由後端 API 回傳 HTML 內容,並在回傳的 HTML 特定位置放置元件,就會有困難。\u003C/p>\n\u003Cp>今天就來看看這種動態的 HTML 內如何插入一個元件!\u003C/p>\n"},"emotion-api-compared-from-github-orgs":{"title":"[Emotion API]蘋果工程師最瞧不起人?利用Emotion API分析各公司程式設計師的心情","date":"2016-04-11 21:23:04","tags":["Emotion Api","Project Oxford"],"summary":"\u003Cp>Emotion API是微軟Project Oxford專案提供的一組API,用來辨識圖片中人臉部上的情緒。之前曾經看到一篇文章:「\u003Ca href=\"http://buzzorange.com/techorange/2016/03/25/unofficial-investigation-for-program-language/\">不負責研究之程式開發者調查:java 工程師最年輕,但是臉最臭\u003C/a>」;利用GitHub上的developers照片配合Face API來分析各種語言開發人員的臉部特徵。覺得這是個滿有趣的主題,於是想說也來玩玩看,改用Emotion API來分析看看Apple、Facebook、Microsoft等公司工程師的表情如何。\u003C/p>\n"},"front-end-animate-css":{"title":"[前端軍火庫]Animate.css - 1秒鐘為你的網站加上動畫特效","date":"2016-12-04 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>過去我們要為網站加上動畫特效可能需要寫一大串的JavaScript,隨著web技術越來越發達,在CSS3中也加入了一系列的動畫屬性,以減少程式撰寫的成本;不過還是需要進行不少設定,而\u003Ca href=\"https://daneden.github.io/animate.css/\">Animate.css\u003C/a>就是一個幫你把一堆常見的特效打包好的CSS library。\u003C/p>\n"},"front-end-awesomplete":{"title":"[前端軍火庫]Awesomplete - AutoComplete就這麼做","date":"2016-12-23 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>今天要介紹一個autocomplete的library - \u003Ca href=\"https://leaverou.github.io/awesomplete/\">Awesomplete\u003C/a>,這是由一款功能強大但檔案小又容易使用使用的library,透過Awesomplete我們可以輕鬆地完成autocomplete功能,讓user在輸入文字時自動給予提示。\u003C/p>\n"},"front-end-base-bootstrap":{"title":"[前端軍火庫]Bootstrap - 最受歡迎的CSS framework","date":"2016-12-01 11:11:11","categories":["前端軍火庫"],"tags":["Bootstrap"],"summary":"\u003Cp>\u003Ca href=\"http://getbootstrap.com/\">Bootsrtap\u003C/a>可以算是目前最受歡迎的CSS framework之一,能夠用來套用目前主流的設計概念─\u003Cstrong>RWD及mobile first\u003C/strong>,即使沒有高深的HTML/CSS/JS技術,也能輕鬆設計出基本上能看能使用的web app,如下圖,雖然只是個很簡單的demo,但基本的配色、元件等等組裝起來,雖然不夠當做一個網站的門面,但當作後台也很夠用了,因此bootstrap其實非常適合用來快速建構一個後台程式,當然只要經過調整,要當前台門面也是完全沒有問題的!\u003C/p>\n\u003Cp>\u003Cimg src=\"./assets/blog/front-end-base-bootstrap/0.png\" alt=\"\" title=\"\" loading=\"lazy\" />\u003C/p>\n"},"front-end-chart-js":{"title":"[前端軍火庫]Chart.js - 輕鬆完成資料視覺化","date":"2016-12-30 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>隨著大數據越來越熱門,資料視覺化也變得越來越重要,能夠以簡單明瞭的圖像顯示數據的意義,對於決策者進行決策有非常大的幫助,過去要製作這些資料圖表大多必須依靠Excel這類軟體來繪製,但靈活度不高,也難以跟資料庫連接處理,更別說不太好看了。所以今天就來紀紹一個前端資料視覺化的library - \u003Ca href=\"http://www.chartjs.org/\">Chart.js\u003C/a>\u003C/p>\n"},"front-end-ckeditor":{"title":"[前端軍火庫]CKEditor - 最好用的Web版文字編輯器","date":"2016-12-07 11:11:11","categories":["前端軍火庫"],"tags":["CKEditor"],"summary":"\u003Cp>在開發前端的系統時,CMS(內容管理系統)可以說是非常常見的需求,像是系統公告、商品內容管理或是部落格等等;而一個好用的文字編輯器可以說是其中非常重要的核心功能!除非你能說服你的user都自己手刻HTML然後貼到一般的文字區塊裡面,否則編輯器是一定需要的。而CKEditor可以說是目前功能最完善的文字編輯器了,今天就來簡單介紹一下CKEditor吧!\u003C/p>\n"},"front-end-clock-picker":{"title":"[前端軍火庫]ClockPicker - 更直覺的時間選擇器","date":"2016-12-26 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>在web app中遇到需要選擇日期、時間需求的時候,日期通常很簡單,大部分的UI元件都可以用表格做出一個簡單的日曆來選擇,而時間通常就比較沒那麼直覺,多半都是用個下拉選單選擇時間,或是直接輸入;而今天要介紹的\u003Ca href=\"https://weareoutman.github.io/clockpicker/\">ClockPicker\u003C/a>,則是一個採用更直覺的方式,讓我們能直接在時鐘上選擇時間的酷炫library。\u003C/p>\n"},"front-end-dragula":{"title":"[前端軍火庫]Dragula - 一步完成Drag & Drop","date":"2016-12-19 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>\u003Ca href=\"https://bevacqua.github.io/dragula/\">Dragula\u003C/a>是一款協助前端開發人員完成拖曳(drag & drop)功能的library,透過Dragula我們可以輕鬆完成使用滑鼠進行清單的排序、移動位置等等功能,今天我們就來使用Dragula製作一個類似Trello的看板功能。\u003C/p>\n"},"front-end-dropzone":{"title":"[前端軍火庫]Dropzone.js - 上傳檔案的好幫手","date":"2016-12-17 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>上傳檔案是各種系統遇到機率都很高的一個功能,傳統要讓使用者上傳檔案,最簡單的方法就是加個 \u003Ccode><input type="file">\u003C/code> ,但呈現的結果並不是很好看,雖然可以透過CSS來調整外觀,但整體還是有受限的感覺,使用上也稍微不太方便;而今天要介紹的\u003Ca href=\"http://www.dropzonejs.com/\">Dropzone.js\u003C/a>可以幫助我們使用更加直覺簡單的方式,來完成上傳檔案的功能。\u003C/p>\n"},"front-end-font-awesome":{"title":"[前端軍火庫]FontAwesome - 最受歡迎的Icon Font - 超豐富圖示字型","date":"2016-12-11 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>\u003Ca href=\"http://fontawesome.io/\">FontAwesome\u003C/a>可以說是目前最受歡迎的Icon Font(也就是把icon圖示放到字體使用) css library,具有豐富的圖示(675+)可用,也有許多實用的API,因此在前端界可以說是無人不知無人不曉(什麼?你不知道?那你現在可以跟上潮流了XD)。在最近的FontAwesome5的募資甚至突破了100萬美金!由此可見其巨大的影響力。今天就來簡單介紹一下FontAwesome吧。\u003C/p>\n"},"front-end-fullcalendar":{"title":"[前端軍火庫]FullCalendar - 輕鬆完成專業級行事曆","date":"2016-12-21 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>行事曆功能在前端開發來說也是很常見的一種需求,例如透過行事曆來追蹤重要活動、代辦事項等等;而透過今天要介紹的\u003Ca href=\"https://fullcalendar.io/\">FullCalendar\u003C/a>,我們也能做出不輸給Google Calendar的強大行事曆!\u003C/p>\n"},"front-end-gitgraph":{"title":"[前端軍火庫]GitGraph.js - 畫出精美的Git分枝樹狀圖","date":"2016-12-18 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>身為一個程序猿,有在使用任一種版本控制系統是很正常的,用過2~3種以上的也絕不稀奇,以目前來說,最受歡迎的莫過於Git了,不過今天不是要介紹Git,而是要介紹一款可以畫出Git類型的樹狀結構的library - \u003Ca href=\"http://gitgraphjs.com/\">GitGraph.js\u003C/a>\u003C/p>\n"},"front-end-highlight-js":{"title":"[前端軍火庫]highlight.js - 前端也能讓程式碼highlight顯示","date":"2016-12-09 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>\u003Ca href=\"https://highlightjs.org/download/\">highlight.js\u003C/a>是一款負責讓程式碼highlight的JavaScript library,5 支援168種程式語言,而且有77種樣式可以選擇。雖然看起來很豐富,但老實說它的應用範圍比較小,只能用在像是IT幫幫忙、GitHub這類的技術社群上,或是使用的blog不支援highlight時想要自己掛上highlight功能等等,才會用到這個library。不過不管現在是否用得到,先學起來當收藏也是不錯的!\u003C/p>\n"},"front-end-intro-js":{"title":"[前端軍火庫]Intro.js - 把建好的UI直接變成說明文件","date":"2016-12-15 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>在設計系統的時候,常常因為需求複雜或龐大,UI也會越來越複雜,變得不直覺、難以操作;這時候有個操作手冊就變得非常重要,但是前端的變化速度又非常快,往往導致操作手冊跟不上UI的變化,這時如果有個響導能帶著你走過所有步驟,又不用擔心隨著UI的改變而無法使用,那真是再好不過了!今天要介紹的\u003Ca href=\"http://introjs.com/\">Intro.js\u003C/a>,就是一款能達到上述條件的神奇library。\u003C/p>\n"},"front-end-jquery-knob":{"title":"[前端軍火庫]jQuery Knob - 酷炫的旋鈕式數字選擇器","date":"2016-12-27 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>\u003Ca href=\"https://github.com/aterrien/jQuery-Knob\">jQuery Knob\u003C/a>是一款讓我們能夠用\u003Cstrong>旋鈕\u003C/strong>這種與眾不同的方式輸入數字的jQuery外掛,除了可以確保user輸入的一定是數字以外,也可以簡化user選擇/輸入數字的過程。\u003C/p>\n"},"front-end-jquery-qrcode":{"title":"[前端軍火庫]jquery.qrcode.js - 只靠前端也能產生QRCode","date":"2016-12-10 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>現在QRCode已經越來越流行了,從最簡單的掃描QRCode來取得網址,到利用QRCode完成報到程序等等;現在生活周遭已經到處都有機會看得到QRCode了,因此身為前端工程師,勢必會有越來越多機會在前端打上QRCode的圖片,今天就來介紹一款簡單易用的QRCode library吧!\u003C/p>\n"},"front-end-jspdf":{"title":"[前端軍火庫]jsPDF - 前端直接產生PDF也沒問題!","date":"2016-12-29 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>昨天我們介紹了PDF.js這套用來讓前端可以直接瀏覽PDF檔的library,今天我們來介紹一款可以在前端直接產生PDF檔的神奇程式-\u003Ca href=\"https://github.com/MrRio/jsPDF\">jsPDF\u003C/a>。\u003C/p>\n"},"front-end-lena-js":{"title":"[前端軍火庫]Lena.js - 為相片加上多種濾鏡","date":"2018-03-20 11:55:31","categories":["前端軍火庫"],"tags":["Lena.js","FrontEnd","image filter"],"summary":"\u003Cp>\u003Ca href=\"https://github.com/davidsonfellipe/lena.js\">Lena.js\u003C/a>是一個簡單易用的影像處理類別庫,內建了一些常見的濾鏡,可以用來補齊CSS濾鏡的不足,又不用擔心使用上太過困難,只要簡單幾行程式碼就可以套用濾鏡了。今天就來簡單玩玩Lena.js吧!\u003C/p>\n"},"front-end-linkify-js":{"title":"[前端軍火庫]linkify.js - 自動加上超連結的小幫手","date":"2016-12-08 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>在開發CMS相關系統時,有一個狀況也是常常遇到的,在張貼內容時加入一個網址,但沒有主動補上超連結,對於瀏覽內容的人來說就會稍微有點不方便,因此今天要介紹的\u003Ca href=\"https://github.com/SoapBox/linkifyjs/\">linkifify.js\u003C/a>,就是一款簡單易用、快速幫助你在內文中加入超連結的好幫手!\u003C/p>\n"},"front-end-loader-css":{"title":"[前端軍火庫]loader.css - 就算loading中,也要很美觀才行","date":"2016-12-06 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>隨著網頁技術越來越普及,ajax越來越被廣泛使用,為了讓ajax在傳輸時不會因為畫面都沒有變而感覺無聊,加上一個loading的icon是很常見的做法,早期甚至還可以看到不少loading圖片的產生器;但CSS功能越來越強,使用圖片的必要性也就變少了,今天要介紹的loader.css就是一款利用CSS產生loading圖示的library。\u003C/p>\n"},"front-end-material-design-materialize-css":{"title":"[前端軍火庫]Materialize - 遵循Google Material Design實作的CSS framework","date":"2016-12-02 11:11:11","categories":["前端軍火庫"],"tags":["Material Design"],"summary":"\u003Cp>首先,我們先來談談\u003Ca href=\"https://material.google.com/\">Material Design\u003C/a>,Material Design是由Google推出視覺語言,或可以說是一種設計準則,其中定義了基本的樣式、排版、元件等等的設計方向,目標是希望藉由一致的設計樣式規則,讓平面的UI更具立體感,卻又不失操作流暢度,提高使用者體驗(User Experience),例如設計一個Icon,要怎麼做比較好呢,就可以參考\u003Ca href=\"https://material.google.com/style/icons.html#\">https://material.google.com/style/icons.html\u003C/a> 裡面的說明;一個Menu的呈現方式該如何呢?\u003Ca href=\"https://material.google.com/components/menus.html\">https://material.google.com/components/menus.html\u003C/a> 也有詳細的說明。\u003C/p>\n"},"front-end-office-ui-fabric":{"title":"[前端軍火庫]Office UI Fabric - 打造與Office365相同樣式的UI框架","date":"2016-12-03 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>\u003Ca href=\"http://dev.office.com/fabric\">Office UI Fabric\u003C/a>是由Microsoft打造的UI框架,跟前兩天提到的Bootstrap和Materialize不一樣的地方是,透過Office UI Fabric我們可以很容易地打造出\u003Cstrong>具有Office365樣式的UI\u003C/strong>。\u003C/p>\n\u003Cp>如果你的user受到MS Office的啟發(?)希望你做一個類似的Office某個功能的UI,使用Office UI Fabric就會是最簡單的選擇!\u003C/p>\n"},"front-end-onsen-ui":{"title":"[前端軍火庫]Onsen UI - 專注於mobile web的UI框架","date":"2016-12-22 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>之前我們曾經就紹過Bootstrap這類的UI Framwork,目的是快速打造具有基本且通一的UI,並且支援RWD,不管是desktop或mobile瀏覽器都可以使用,而有時候我們可能不需要顧慮這麼多,只需要專注在mobile平台就可以了,這時候\u003Ca href=\"https://onsen.io/\">Onsen UI\u003C/a>就是非常適合使用的UI Framework了。\u003C/p>\n"},"front-end-pdf-js":{"title":"[前端軍火庫]PDF.js - 前端也能輕鬆顯示PDF","date":"2016-12-28 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>如果要說有一個放諸四海皆準的通用文件格式,那麼想當然一定就是PDF了,雖然PDF是一個標準的文件規格,但要瀏覽PDF檔還是需要透過安裝軟體來顯示的,而今天要介紹的\u003Ca href=\"https://mozilla.github.io/pdf.js/\">PDF.js\u003C/a>就是一款可讓我們直接在web上顯示PDF檔的JavaScrtipt library!\u003C/p>\n"},"front-end-placehold-it":{"title":"[前端軍火庫]placehold.it - 規劃中網站用來暫時放圖片的線上服務","date":"2016-12-16 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>\u003Ca href=\"http://placehold.it/\">placehold.it\u003C/a>跟過去介紹的library都不太一樣,它是一個線上服務,功用是在網站規劃中還只是雛型階段時,暫時用來表示\u003Cstrong>這裡有一張圖片\u003C/strong>的工具。也就是說,網站還未完成時,我們可能就需要進行一些DEMO,這時候某些預計要放圖片地方還沒有任何圖片可用;或是我們知道網站的某個地方一定會放置圖片,但沒有立即可用的圖片時,需要張占用的圖片放著,好確認版面不會亂掉等等,placehold.it就可以幫助你達到這些目標。\u003C/p>\n"},"front-end-reveal-js":{"title":"[前端軍火庫]Reveal.js - 用前端技術完成酷炫簡報","date":"2016-12-14 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>相信或多或少,大家都有製作投影片進行簡報的經驗,以製作投影片來說最主要的軟體大概非PoertPoint莫屬了;而想要使用PowerPoint做出絢麗的簡報沒有一番功夫可是做不到的…不過,我們可是前端工程師阿!如果有一款簡報軟體,可以使用我們熟悉的前端技術來完成,不是很棒的一件事情嗎?而Reveal.js就是這樣一款好用的簡報框架。\u003C/p>\n"},"front-end-screenfull-js":{"title":"[前端軍火庫]screenfull.js - 全螢幕顯示就是這麼簡單","date":"2016-12-20 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>全螢幕API(Fullscreen API)是JavaScript用來讓瀏覽器支援全螢幕的一種方式,透過Fullscreen API我們可以讓畫面可以一次呈現更多的資料,或是專注在某個影片或圖片上面等等,然後目前樓覽器的支援程度不一,因此要單純使用JavaScript的Fullscreen API,會變得複雜許多,而今天要介紹的\u003Ca href=\"https://github.com/sindresorhus/screenfull.js\">screenfull.js\u003C/a>,就是用來減少Fullscreen API在不同瀏覽器之間實作差異的library。\u003C/p>\n"},"front-end-sweet-alert":{"title":"[前端軍火庫]SweetAlert - 變化萬千的Dialog library","date":"2016-12-13 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>在上一篇文章我們介紹了toastr.js這類用來取代 \u003Ccode>alert\u003C/code> 並達到更好UX目的標notify library,接下來要介紹的是比起notify更具有互動效果的dialog library,也就是透過dialog的方式,來讓跟user的互動有加分的效果;今天我們主要要介紹的是\u003Ca href=\"http://t4t5.github.io/sweetalert/\">SweetAlert\u003C/a>這款功能強大、美觀又容易使用的dialog library。\u003C/p>\n"},"front-end-switchery":{"title":"[前端軍火庫]Switchery - 打造iOS風格的checkbox","date":"2016-12-24 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>\u003Ca href=\"http://abpetkov.github.io/switchery/\">Switchery\u003C/a>是一款具有iOS風格的開關library,透過Switchery我們可以快速的把一般的checkbox包裝成具有iOS開關的風格,在一些需要用開/關來表示狀態的情境能比使用checkbox更加直覺。\u003C/p>\n"},"front-end-toastr-js":{"title":"[前端軍火庫]toastr.js - 美化你的通知訊息","date":"2016-12-12 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>一般來說在前端要跳出通知訊息,最簡單的方式莫過於加個alert了,但使用alert其實對於UX來說並不是件好事,因為它會影響到user的操作行為,而且不同瀏覽器的顯示方式可能會有所不同,更不用說有些瀏覽器還可以在alert重複出現時,選擇把它關掉不顯示,當然這也是為了避免同樣的緒息一直出現變成畫面根本無法使用,但也讓alert變成了不穩定的未爆彈;因此像是\u003Ca href=\"https://github.com/CodeSeven/toastr\">toastr.js\u003C/a>這類的library就可以幫助你打造美觀的提示訊息,同時也不用擔心影響到user的畫面操作。\u003C/p>\n"},"front-end-wow-js":{"title":"[前端軍火庫]WOW.js - 動畫很炫,也要看得到才行啊!","date":"2016-12-05 11:11:11","categories":["前端軍火庫"],"tags":["WOW.js"],"summary":"\u003Cp>\u003Ca href=\"https://fullstackladder.dev/blog/2016/12/04/front-end-animate-css/\">上一篇文章\u003C/a>中我們介紹了Animate.css這個強大的動畫CSS library,不過Animate.css主要是專注在處理動畫的部分,該在什麼時機點讓動畫呈現就不是重點了,因此若是直接在HTML上加上呈現動畫的class,會出現一個問題就是:「儘管要呈現動畫的標籤不在畫面上,而是在整個HTML頁面很下方的地方,但當網頁loading完成後,依然會立刻執行動畫效果,也因此在畫面下方的動畫就會因為早就跑完而看不見了。」\u003C/p>\n\u003Cp>這其實是一件蠻可惜的事情,精心設計的呈現效果卻因為提早出現而變成沒有效果;這時候就需要JavaScript的輔助來讓動畫在捲動到標籤出現時才呈現了,而\u003Ca href=\"http://mynameismatthieu.com/WOW/index.html\">WOW.js\u003C/a>就是一個簡單的好幫手。\u003C/p>\n"},"front-end-x-editable":{"title":"[前端軍火庫]X-editable - 瀏覽、新增、修改三個願望一次滿足","date":"2016-12-25 11:11:11","categories":["前端軍火庫"],"tags":null,"summary":"\u003Cp>在設計CMS之類的系統時,常常會需要一個表單和一個瀏覽資料的頁面,以新型新增、修改和查詢的工作,不過畫面排版通常會非常類似,只差在表單有額外的表單控制項,而瀏覽頁面就是單純的文字而已,但當需要更新排版時,就需要兩個頁面都同時修改,非常不方便;這時候透過\u003Ca href=\"https://vitalets.github.io/x-editable/index.html\">X-editable\u003C/a>,就能夠在瀏覽的頁面同時編輯資料囉\u003C/p>\n"},"git-using-gitkraken-1-basic":{"title":"[Git]GitKraken 強大的剛剛好的Git GUI神器(1)基本篇","date":"2018-04-03 20:05:24","categories":["Git"],"tags":["Git","GitKraken","GitGUI","GitClient"],"summary":"\u003Cp>使用\u003Ca href=\"https://gitkraken.link/mikehuang\">GitKraken\u003C/a>作為個人管理的git工具已經有一年的時間了,最近也有機會開始推坑一些好友使用GitKraken,同時也讓他們用過就回不去了!\u003C/p>\n\u003Cp>為了讓推坑更加順利,決定來寫幾篇關於GitKraken的介紹,宣揚一下這套強剛剛好的強大的git GUI!\u003C/p>\n"},"git-using-gitkraken-2-advanced":{"title":"[Git]GitKraken 強大的剛剛好的Git GUI神器(2)進階篇-GitFlow、Commit Template和衝突管理","date":"2018-04-04 20:13:53","categories":["Git"],"tags":["Git","GitKraken","GitGUI","GitFlow","Commit Template"],"summary":"\u003Cp>昨天我們簡單的說明了\u003Ca href=\"https://fullstackladder.dev/blog/2018/04/03/git-using-gitkraken-1-basic/\">GitKraken的基本功能\u003C/a>,今天我們來介紹如何在GitKraken中一些其他的功能,包含GitFlow開發流程、Commit Template和衝突的處理方式\u003C/p>\n"},"git-using-gitkraken-3-remote":{"title":"[Git]GitKraken 強大的剛剛好的Git GUI神器(3)遠端篇","date":"2018-04-05 21:12:33","categories":["Git"],"tags":["Git","GitKraken","GitGUI"],"summary":"\u003Cp>這篇是GitKraken系列的最後一篇,前兩篇我們把常用的git操作對應GitKraken的方式都大致說明了一遍,接下來我們要來說明GitKraken如何與操作遠端的repository,這可是團隊開發中最重要的環節支一,因此就算不太困難,也很值得獨立一篇文章來說明。\u003C/p>\n\u003Cp>就讓我們繼續看下去吧!\u003C/p>\n"},"github-actions-auto-close-bot-issue":{"title":"[GitHub Actions] 自動關閉某個 bot 的 issues","date":"2021-11-01 15:02:02","categories":["GitHub Actions Snippets"],"tags":["GitHub Actions"],"summary":"\u003Cp>GitHub 非常的貼心,經常會發送一些 PR 或 issue 告訴我們目前的程式有漏洞有修補,或是我們自己寫的 bot,希望能在指定的條件下自動關閉,此時可以使用 \u003Ca href=\"(https://github.com/marketplace/actions/close-issue)\">Close Issue\u003C/a> 這個 GitHub Action,再搭配 \u003Ccode>if\u003C/code> 條件判斷,來自動關掉一些 bot 所開的 issue。\u003C/p>\n"},"github-actions-auto-pr-for-package-dependency":{"title":"[GitHub Actions] 當有套件建議更新時自動發送 PR","date":"2022-01-14 22:20:00","categories":["GitHub Actions Snippets"],"tags":["GitHub Actions"],"summary":"\u003Cp>今天從 \u003Ca href=\"https://jiaming0708.github.io/\">Jimmy 哥\u003C/a> 那邊學到的新招,透過 \u003Ca href=\"https://github.com/dependabot\">Dependabot\u003C/a> 及 GitHub Actions,可以在相依套件有更新時自動發送 PR。\u003C/p>\n"},"github-actions-print-events":{"title":"[GitHub Actions] 印出事件相關資訊","date":"2021-11-01 16:37:00","categories":["GitHub Actions Snippets"],"tags":["GitHub Actions"],"summary":"\u003Cp>當使用 GitHub Actions 時,經常要針對來源事件去進行一些額外處理,導致要去查詢事件相關屬性,非常不方便,可以使用 \u003Ca href=\"https://github.com/marketplace/actions/debug-action\">Debug action\u003C/a> 將相關資料印出,方便查找。\u003C/p>\n"},"github-actions-send-telegram":{"title":"[GitHub Actions] 發送 Telegram 訊息","date":"2021-11-01 16:27:00","categories":["GitHub Actions Snippets"],"tags":["GitHub Actions"],"summary":""},"github-projects-using-kanban":{"title":"[GitHub Projects]在GitHub上使用看板功能","date":"2016-09-16 22:54:47","tags":["GitHub","GitHub Projects","Kanban"],"summary":"\u003Cp>GitHub在2016/09/15推出了許多新的功能(文章來源\u003Ca href=\"https://github.com/blog/2256-a-whole-new-github-universe-announcing-new-tools-forums-and-features\">A whole new GitHub Universe: announcing new tools, forums, and features\u003C/a>),其中最令人興奮的功能之一就是\u003Ca href=\"https://help.github.com/articles/about-projects/\">Projects\u003C/a>這項功能,也就是GitHub直接內建看板啦!!剛才稍微試玩了一下,今天就來做個簡單的介紹吧!\u003C/p>\n"},"how-to-pass-kubernetes-ckad-cka-certificate":{"title":"[Kubernetes] CKAD/CKA 證照考試心得","date":"2023-07-29 11:37:18","categories":["Kubernetes"],"tags":["Kubernetes","CKAD","CKA"],"summary":"\u003Cp>為了即將到來的工作需求,最近開始準備 Kubernetes 的考試,花了一個月的時間學習,總算取得 CKAD 和 CKA 證照,在這邊分享一下我這一個月的學習心得。\u003C/p>\n","ogImage":"./assets/blog/how-to-pass-kubernetes-ckad-cka-certificate/ckad.png"},"how-to-paste-word-excel-to-web":{"title":"如何將 Word/Excel 等檔案內容貼到網頁上","date":"2022-02-14 22:36:33","categories":["前端錦囊"],"summary":"\u003Cp>源自前陣子我們家業務問的問題:「客戶原來的系統能將 Excel 儲存格內容貼到網頁上,我們辦得到嗎?」。\u003C/p>\n\u003Cp>實際上當然是肯定的,但還真的沒有特別嘗試過該如何做到,花了點時間研究發現也沒那麼困難,也把一些種點整理一下,以免以後自己忘記。\u003C/p>\n"},"how-to-survive-in-angular-12-strict-mode-using-async-pipe":{"title":"[Angular 大師之路] Angular 12 預設開啟 strict mode 的生存之道","date":"2021-06-21 08:44:59","tags":["Angular","Angular 12","strict mode"],"summary":"\u003Cp>Angular 12 預設在建立專案時,現在預設會開啟 \u003Ca href=\"https://angular.io/guide/strict-mode\">strict mode\u003C/a> 了,strict mode 會加上一些 TypeScript team 建議的檢查,以及 Angular 額外加入的檢查;這代表在不改變設定的情況下,撰寫 Angular 程式將會需要花費更多的心力去處理各種型別的宣告,以避免在 compile 階段發生錯誤。\u003C/p>\n\u003Cp>雖然感覺起來會越來越難寫,但往好處想,這些 strict mode 的檢查,都是為了減少程式在執行階段可能會發生的錯誤,減少非預期錯誤的可能性,也會減少許多 bug 發生的機會,讓我們寫出品質更好的程式碼,也省去更多 debug 的時間浪費!因此花些時間投資在寫出通過 strict mode 檢查的程式碼我覺得是很值得的,今天就來說幾個 strict mode 下容易發生的錯誤以及生存方法。\u003C/p>\n"},"inno-setup-continuous-integration-with-azure-devops":{"title":"[Inno Setup] CI 時自動產生安裝檔(以 Azure DevOps 為例)","date":"2022-02-06 18:06:42","categories":["Inno Setup"],"tags":["Inno Setup","Azure DevOps"],"summary":"\u003Cp>透過 Inno Setup 打包安裝檔非常方便,由於都是腳本指令,加上 Inno Setup 本身也支援以 CLI 的方式執行,因此要搭配 CI/CD 是完全可行的,本篇就以 \u003Ca href=\"https://azure.microsoft.com/en-us/services/devops/?WT.mc_id=DOP-MVP-500373\">Azure DevOps\u003C/a> 為例,說明一下使用 Inno Setup 打包安裝檔需要注意的一些事項。\u003C/p>\n\u003Cp>以下為使用 Pipeline as code 的方式說明,因此都是 yaml 設定檔,當然如果使用 Classic editor 的話,也都可以找到對應的 task\u003C/p>\n"},"inno-setup-environment-path-registry-by-code":{"title":"[Inno Setup] 安裝時設定環境變數 (Registry)","date":"2022-02-06 14:46:04","categories":["Inno Setup"],"tags":["Inno Setup","[Registry]","[Code]"],"summary":"\u003Cp>有些時候,我們的程式會提供 CLI 指令給使用者,讓使用者可以自行下指令進行一些自動化的操作,這些 CLI 當然也都是執行檔,為了執行方便我們可以將程式位置加入 \u003Ccode>Path\u003C/code> 環境變數,讓使用者可以直接輸入指令,而不用知道程式的所在位置。\u003C/p>\n\u003Cp>在 Inno Setup 該如何做到安裝時自動把指令路徑加入 \u003Ccode>path\u003C/code> 環境變數呢?\u003C/p>\n"},"inno-setup-install-with-startup":{"title":"[Inno Setup] 讓程式在系統登入時自動開啟執行","date":"2022-02-05 15:00:39","categories":["Inno Setup"],"tags":["Inno Setup","[Tasks]","[Icons]","{commonstartup}","{user startup}"],"summary":"\u003Cp>很多時候我們會希望常用程式能在登入時自動開啟執行,這麼一來可以省去我們手動去開啟程式的時間;當使用 Inno Setup 打包安裝檔時,我們也可以將程式設定成開機自動執行。\u003C/p>\n"},"inno-setup-quick-start":{"title":"使用 Inno Setup 快速包裝 Windows 安裝檔","date":"2022-02-02 14:51:01","categories":["Inno Setup"],"tags":["Inno Setup"],"summary":"\u003Cp>\u003Ca href=\"https://jrsoftware.org/isinfo.php\">Inno Setup\u003C/a> 是一套\u003Ca href=\"https://github.com/jrsoftware/issrc\">開源\u003C/a>但功能強大且完整的 Windows 安裝程式,透過 Inno Setup 可以幫助我們將開發好的程式打包並壓縮成一個安裝檔,提供給使用者快速安裝;在打包成安裝檔的過程中我們會撰寫一些腳本來處理中間的安裝過程,因此在安裝的過程中是可以高度客製化的,今天就來快速看一下如何使用 InnoSetup 打包出一份安裝檔。\u003C/p>\n"},"inno-setup-script-explain":{"title":"[Inno Setup] 使用精靈產生的腳本解說","date":"2022-02-03 15:42:20","categories":["Inno Setup"],"tags":["Inno Setup"],"summary":"\u003Cp>前一篇我們提到\u003Ca href=\"https://fullstackladder.dev/blog/2022/02/02/inno-setup-quick-start/\">使用 Inno Setup 的腳本精靈來產生安裝檔腳本\u003C/a>,並編譯這個腳本來建立安裝檔,不過這個腳本精靈通常只會使用一次,因為產出的檔案是無法再次使用腳本精靈設定的,因此最終我們還是需要自行去維護這個腳本,今天就來看一下預設使用腳本精靈產生的內容有哪些,未來要維護或新增功能時就可以更容易上手了。\u003C/p>\n"},"inno-setup-utf8-chinese-support":{"title":"[Inno Setup] 包裝安裝檔時顯示中文","date":"2022-02-03 18:59:52","categories":["Inno Setup"],"tags":["Inno Setup"],"summary":"\u003Cp>Inno Setup 內建多種語言的安裝檔,不過內建不支援繁體中文,雖然文件上有非官方語言包可以下載,但還是有一些地雷在,這篇文章就簡單記錄一下。\u003C/p>\n"},"introduction-angular-signals":{"title":"簡介 Angular Signals","date":"2023-05-07 12:02:27","categories":["Angular 大師之路"],"tags":["Angular","Signals"],"summary":"\u003Cp>Angular 16 推出了 Angular Signals 功能,雖然還在 developer preview,但個人覺得是個非常值得開始學習,並在未來正式版後開始使用的功能,這篇文章就來介紹一下 Angular Signals 的用法。\u003C/p>\n"},"introduction-horusec":{"title":"使用 Horusec 對程式碼安全性進行掃描","date":"2023-01-07 15:00:47","categories":null,"tags":["Horusec","OWASP"],"summary":"\u003Cp>\u003Ca href=\"https://github.com/ZupIT/horusec\">Horusec\u003C/a> 是一套開源的程式碼靜態分析工具,他可以幫助我們對程式碼進行安全性掃描,並且支援許多常見的語言,功能非常強大。\u003C/p>\n","ogImage":"./assets/blog/introduction-horusec/00.webp"},"introduction-modbustcp":{"title":"簡介 Modbus TCP","date":"2022-11-07 18:01:16","categories":null,"tags":["ModbusTCP"],"summary":"\u003Cp>Modbus 是在工業領域中廣泛使用的訊息交換規範,而 Modbus TCP 則是 Modbus 的一種實現,它使用 TCP/IP 作為傳輸層協定,因此可以透過網路傳輸。\u003C/p>\n\u003Cp>最近在著手開發一個跟工業相關的專案,需要透過 Modbus TCP 協定來取得設備上的資訊,這篇文章會紀錄一下 Modbus TCP 的基本概念及協定規格。\u003C/p>\n","ogImage":"./assets/blog/introduction-modbustcp/00.png"},"introduction-quest-pdf":{"title":"QuestPDF - 支援中文、免費好用的 C# PDF 產生器","date":"2023-02-05 13:15:31","categories":null,"tags":["QuestPDF"],"summary":"\u003Cp>產生 PDF 的套件並不難找,有趣的是,.NET 的 PDF 套件雖然不少,但幾乎都是商業授權,免費又好用的卻不多,最近找到一套 \u003Ca href=\"https://www.questpdf.com/\">QuestPDF\u003C/a>,它的 API 設計非常漂亮,支援中文,並且免費開源,雖然不一定是最強大的套件,但對於一般產生 PDF 的工作,已經非常好用了。\u003C/p>\n\u003C/p>\u003Cdiv class=\"note info\">\u003Cp>\u003Ccode>QuestPDF 2023.X\u003C/code> 版本後,已經變成有條件的 MIT 授權,所以如果要商用還是需要看一下詳細的授權條件。但 \u003Ccode>2022.12.X\u003C/code> 版本之前的版本,依然都是完全的 MIT 授權,因此若為商用且完全沒有付費打算,請注意安裝版本。\u003C/p>\n\u003Cp>\u003Ca href=\"https://github.com/QuestPDF/QuestPDF/discussions/491#discussioncomment-5946647\">原作者的承諾\u003C/a>\u003C/p>\u003C/div>\u003Cp>\n","ogImage":"./assets/blog/introduction-quest-pdf/03.png"},"introduction-security-code-scan":{"title":"使用 Security Code Scan 為 .NET 應用程式進行程式碼安全性掃描","date":"2022-12-24 13:34:32","categories":null,"tags":["Security Code Scan","OWASP","SARIF","sarif-tools"],"summary":"\u003Cp>\u003Ca href=\"https://security-code-scan.github.io/\">Security Code Scan\u003C/a> 是一套針對 .NET 的程式碼靜態分析工具,他可以針對程式碼中的安全性問題進行掃描,並且提供了一些程式碼修正的建議。今天這篇文章就來介紹一下如何使用 Security Code Scan 來進行程式碼安全性掃描。\u003C/p>\n","ogImage":"./assets/blog/introduction-security-code-scan/00.png"},"jquery-unobtrusive-dynamic-add-validate":{"title":"[Jquery.Unobtrusive] 動態增加驗證資訊","date":"2014-09-29 23:47:03","tags":["jquery","jquery.unobtrusive"],"summary":"\u003Cp>在使用jquery.unobtrusive時,可以在html表單欄位標籤中加入特殊屬性,讓表單在送出時自動驗證欄位而不必額外撰寫javascript就可以達到client端的驗證。不過當動態增加表單驗證欄位時,送出會無法對這些欄位檢查\u003C/p>\n"},"jwt-auth-with-asp-netweb-api":{"title":"[ASP.NET WebApi]使用JWT進行web api驗證","date":"2016-11-28 11:11:11","categories":[""],"tags":["WebApi","JWT"],"summary":"\u003Cp>在開發web api的時候,由於連線通常都是stateless的,因此驗證跟授權是一個比較艱鉅的挑戰,也因此出現了不少規範來解決這個問題如OAuth等等,而JWT則是一個相對簡單但又安全方式,\u003Ca href=\"http://xn--JWTAsp-9m7i2cr9fka43mooyci9018a2fbt7z881ikre312cr82b.Net\">今天就來介紹一下如何使用JWT來處理Asp.Net\u003C/a> WebApi的驗證。\u003C/p>\n"},"learn-angular-cli-builders":{"title":"透過 CLI Builder API 加強 Angular CLI 功能","date":"2021-10-23 12:12:56","categories":["Angular 大師之路"],"tags":["Angular","Angular CLI","Angular CLI Builders","CLI Builder API"],"summary":"\u003Cp>Angular CLI 可以幫助我們透過 \u003Ccode>ng\u003C/code> 指令完成許多繁雜的工作,像是啟動開發用的伺服器 (\u003Ccode>ng serve\u003C/code>)、將 Angular 專案建置成純前端網站 (\u003Ccode>ng build\u003C/code>) 、或是進行單元測試 (\u003Ccode>ng test\u003C/code>) 等等,這些指令其實背後都是一段又一段的程式,再搭配 Angular 的 CLI Builder API 整合起來的,而透過 CLI Builder API 也可以幫助我們將一些專案內經常運行的程式也整合到 Angular CLI 內,甚至可以藉此擴充原本內建的 Angular CLI 指令,今天就來看一下如何使用 CLI Builder API 吧!\u003C/p>\n"},"load-test-by-k6":{"title":"使用 k6 進行壓力測試","date":"2022-09-17 19:35:10","categories":null,"tags":["k6","load testing"],"summary":"\u003Cp>當系統預期有很多人同時上線時,可能會需要進行壓力測試。比起老牌工具 Apache Jmeter 的高學習難度,k6 是一套很好的壓力測試工具,對於開發人員來說非常友善。\u003C/p>\n\u003Cp>本文將簡單介紹如何使用 k6 進行壓力測試。\u003C/p>\n"},"luxon-display-format-with-utc":{"title":"[Luxon] 顯示 UTC 時間而非當地時間","date":"2021-07-10 19:33:07","tags":null,"summary":"\u003Cp>\u003Ca href=\"https://moment.github.io/luxon\">Luxon\u003C/a> 是一套輕巧但強大的時間處理 library,可以幫助我們快速解析來源時間字串,並處理好時區問題,不過預設處理時區有時候也會帶來一些困擾,今天就筆記一下如何用 Luxon 來處理各種時區問題。\u003C/p>\n"},"manipulate-azure-resource-using-client-credentials":{"title":"使用 Client Credentials 來取得具有 Azure REST API 權限的 Access Token","date":"2022-10-22 12:57:05","categories":["Azure"],"tags":["Azure","Client Credentials"],"summary":"\u003Cp>如果有在使用 Azure,一般會直接在 Azure Portal 上操作,或是透過 Azure CLI;但是如果要在程式中操作 Azure 資源,就需要透過 Azure REST API 來呼叫。\u003C/p>\n\u003Cp>Azure 當然也提供了許多 SDK 讓我們不需要花太多時間去研究 REST API,不過背後原理都是透過 REST API 呼叫,如果遇到使用的語言沒有對應的 SDK,還是必須自己用 REST API 來呼叫,因此研究一下背後的 API 還是很有價值的。\u003C/p>\n\u003Cp>這篇文章就來看一下如何透過 Client Credentials 的方式來呼叫 Azure REST API。\u003C/p>\n"},"mastering-angular-01-intro":{"title":"[Angular 大師之路] 開場閒聊","date":"2018-10-16 18:00:00","categories":["Angular 大師之路"],"tags":["Angular"],"summary":"\u003Cp>使用 Angular 作為前端開發框架也有兩三年的時間了,這段時間深深能體會到 Angular 是一個非常強大且易學的框架,只要是有點經驗的開發人員,在閱讀過官方的 \u003Ca href=\"https://angular.io/tutorial\">Tutorial 文件\u003C/a> 8 篇文章後,都能夠解決掉大部分的前端需求。\u003C/p>\n\u003Cp>而這次的鐵人賽系列文,則是希望能分享 Tutorial 8 篇文章以外的更多技巧,這些知識可能在官方文件都找得到,也可能是個人的一點經驗;而些知識儘管在平常不一定會使用到,但在適當的時機,卻能幫助我們\u003Cstrong>以更簡潔的程式碼來解決更複雜的問題\u003C/strong>!\u003C/p>\n"},"mastering-angular-02-angular-cli-monorepo":{"title":"[Angular 大師之路] 更加理解 Angular CLI 之 Monorepo 應用","date":"2018-10-17 11:26:20","tags":["Angular","Angular CLI","Angular CLI 6","Monorepo"],"summary":"\u003Cp>Angular CLI 基本上已經成為開發 Angular 應用程式的標準配備了,我們會透過 Angular CLI 建立專案、檔案骨架,或是用來執行以及打包應用程式,以及運行測試等等。透過 Angular CLI 可以減少許多開發時期以及執行程式的前置準備時間成本,讓生活變得更加美好!\u003C/p>\n\u003Cp>而到了 Angular CLI 第 6 版後,多了非常多和過去不同的設定,雖然在常用的功能體驗上完全沒有不同,但卻有了更多可以調整的地方,今天就來更加深入理解 Angular CLI 的相關指令、設定與應用吧。\u003C/p>\n"},"mastering-angular-03-application-start":{"title":"[Angular 大師之路] Angular 應用程式啟動過程","date":"2018-10-18 11:26:20","tags":["Angular"],"summary":"\u003Cp>任何程式要能夠運作,都應該有它的進入點,以及整個程式啟動的流程,今天我們就來看看,到底一個 Angular 應用程式是如何開始啟動的吧!\u003C/p>\n"},"mastering-angular-04-life-cycles":{"title":"[Angular 大師之路] 認識 Angular 的生命週期","date":"2018-10-19 18:00:00","categories":["Angular 大師之路"],"tags":["Angular","Life Cycles"],"summary":"\u003Cp>在設計 Angular 元件(component)時,可以在程式中針對 Angular 在運作程式時放入不同的 hooks(我們通常稱為 \u003Cstrong>lifecycle hooks\u003C/strong>),來在不同的行為中做出更深入的處理,今天就讓我們來看看整個元件在執行時所會發生的生命週期以及應用吧!\u003C/p>\n"},"mastering-angular-05-knowning-ng-module":{"title":"[Angular 大師之路] 認識 NgModule","date":"2018-10-20 20:57:59","categories":["Angular 大師之路"],"tags":["Angular","NgModule"],"summary":"\u003Cp>Angular 本身內建了一種\u003Cstrong>模組化\u003C/strong>的機制,這個機制可以幫助我們組織管理一系列相關的程式(如 component、pipe 和 service 等等),將類型或功能相似的程式封裝成一個一個不同的模組。在開發 Angular 應用程式時,我們一定會有一個根模組,也就是 \u003Ccode>AppModule\u003C/code> ,今天我們就來看看這個模組裡面到底要怎麼封裝不同的程式進來吧!\u003C/p>\n"},"mastering-angular-06-basic-modularize":{"title":"[Angular 大師之路] 模組化的基本觀念","date":"2018-10-21 20:21:59","categories":["Angular 大師之路"],"tags":["Angular","NgModule"],"summary":"\u003Cp>昨天我們簡單介紹了一個模組中的 \u003Ccode>@NgModule\u003C/code> 應該要放些什麼資料,今天我們來理解一下實務上開發 Angular 應用程式時,常見的一些模組化的方式。\u003C/p>\n"},"mastering-angular-07-simple-two-way-binding":{"title":"[Angular 大師之路] 一個簡易實踐 two way binding 的方法","date":"2018-10-22 22:11:04","categories":["Angular 大師之路"],"tags":["Angular","Two Way Binding","ngModel"],"summary":"\u003Cp>在 Angular 中,通常我們會使用 \u003Ccode>[(ngModel)]\u003C/code> 來實現 two way binding,這樣做基本上沒有什麼問題,但 \u003Ccode>ngModel\u003C/code> 只能 binding 在常見的表單控制項上,如 \u003Ccode>input\u003C/code>、\u003Ccode>select\u003C/code> 等,難以自行在元件上時作出 two way binding,雖然還是可以做到,但相對麻煩了一點,今天就先來講一個簡單的實現 two way binding 的技巧吧!\u003C/p>\n"},"mastering-angular-08-customize-form-control":{"title":"[Angular 大師之路] 自訂表單控制項","date":"2018-10-23 21:09:34","categories":["Angular 大師之路"],"tags":["Angular","Two Way Binding","ngModel","NG_VALUE_ACCESSOR","ControlValueAccessor"],"summary":"\u003Cp>昨天我們介紹了一個簡單的方法來實作 two way binding,這種方法在很多情境都非常好用,不過他還是有一些小問題,有些我們會需要在表單中使用自己設計的元件,但若使用 \u003Ccode>@Input\u003C/code> 加上 \u003Ccode>@Output\u003C/code> 的方法,會無法使用到在 Angular 中表單控制項的一些好處,例如加上驗證器的功能,也沒有一些如 \u003Ccode>ng-dirty\u003C/code> 、 \u003Ccode>ng-invalid\u003C/code> 等 CSS class 可用。因此今天我們來聊聊如何自己設計一個表單控制項吧!\u003C/p>\n"},"mastering-angular-09-get-directive-instance-with-exportAs":{"title":"[Angular 大師之路] exportAs - 取得 directive 實體的方法","date":"2018-10-24 21:35:33","categories":["Angular 大師之路"],"tags":["Angular","Directive","exportAs"],"summary":"\u003Cp>Angular 提供了一種可以很擴充元件或HTML標籤屬性的方式,叫做 \u003Ccode>directive\u003C/code>,透過這種方式我們可以很輕易地替現有的元件或 HTML 擴充它的顯示或行為,但單純擴充有時候是不夠的,如果我們希望能夠在程式中操作 directive 的話,今天學習的 \u003Ccode>exportAs\u003C/code> 就是一個很好的使用時機。\u003C/p>\n"},"mastering-angular-10-any-syntax":{"title":"[Angular 大師之路] 樣板語法中的冷知識 - $any","date":"2018-10-25 21:58:56","categories":["Angular 大師之路"],"tags":["Angular","$any"],"summary":"\u003Cp>Angular 提供針對 HTML 樣板的處理,提供了很多不同的語法,今天要講一個很少看到有人使用的語法 - \u003Ccode>$any\u003C/code>\u003C/p>\n"},"mastering-angular-11-ng-if-else":{"title":"[Angular 大師之路] *ngIf 有 else 可以用嗎?","date":"2018-10-26 22:01:09","categories":["Angular 大師之路"],"tags":["Angular","*ngIf","ng-template"],"summary":"\u003Cp>我們都知道,在 Angular 的樣板中可以使用 \u003Ccode>*ngIf\u003C/code> 語法來決定某段內容是否要呈現,但許多剛入門的 Angular 開發人員很少注意到其實 \u003Ccode>*ngIf\u003C/code> 是有個 \u003Ccode>else\u003C/code> 可以搭配使用的,今天就來看看該怎麼用吧!\u003C/p>\n"},"mastering-angular-12-advanced-ng-template-outlet":{"title":"[Angular 大師之路] *ngTemplateOutlet 與 ng-template 的完美組合","date":"2018-10-27 22:01:09","categories":["Angular 大師之路"],"tags":["Angular","*ngTemplateOutlet","ng-template"],"summary":"\u003Cp>昨天我們稍微提到了 \u003Ccode><ng-template>\u003C/code> ,並說明了可以把 \u003Ccode><ng-template>\u003C/code> 當作是一種樣板上等著被呼叫的方法(function),這時候應該會有兩個問題是:\u003C/p>\n\u003Col>\n\u003Cli>只有在 \u003Ccode>*ngIf\u003C/code> 的 \u003Ccode>else\u003C/code> 中可以使用嗎?\u003C/li>\n\u003Cli>既然是方法,是否可以帶入參數呢?\u003C/li>\n\u003C/ol>\n\u003Cp>今天介紹的 \u003Ccode>*ngTemplateOutlet\u003C/code> 可以幫助我們解答這些問題!\u003C/p>\n"},"mastering-angular-13-ng-container":{"title":"[Angular 大師之路] 認識 ng-container","date":"2018-10-28 22:01:09","categories":["Angular 大師之路"],"tags":["Angular","ng-container"],"summary":"\u003Cp>今天我們來聊聊在 Angular 上一個有趣又方便,也是個人非常喜歡使用的語法 - \u003Ccode><ng-container>\u003C/code>\u003C/p>\n"},"mastering-angular-14-dynamic-component-loader":{"title":"[Angular 大師之路] 動態載入元件 (簡易版)","date":"2018-10-28 22:01:09","categories":["Angular 大師之路"],"tags":["Angular","*ngComponentOutlet","EntryComponents"],"summary":"\u003Cp>在設計 Angular 程式時,我們很習慣的會將各種不同目標或功能的畫面拆成不同的元件,這麼一來每個元件的程式就會相對比較簡單,管理上也會更加容易,不過當樣板上要呈現不同元件時,就容易不小心把樣板程式碼弄髒了,因此我們需要更有技巧地來決定要怎麼顯示元件,也就是今天的主題 - \u003Cstrong>動態載入元件\u003C/strong>的方法\u003C/p>\n"},"mastering-angular-15-dynamic-component-loader-advanced":{"title":"[Angular 大師之路] 動態載入元件 (複雜版)","date":"2018-10-29 22:01:09","categories":["Angular 大師之路"],"tags":["Angular","ViewContainerRef","ComponentFactoryResolver","ComponentFactory"],"summary":"\u003Cp>昨天我們介紹了使用 \u003Ccode>*ngComponentOutlet\u003C/code> 的方法來動態產生元件,其實它是一個使用 \u003Ccode>ViewContainerRef\u003C/code> 來顯示不同內容的行為,因此我們也可以不透過樣板語法的方式,改成自行在程式中產生元件實體後方到畫面上;今天我們就稍微深入的來看看比較複雜的方式來動態載入元件吧!\u003C/p>\n"},"mastering-angular-16-custom-structural-directives":{"title":"[Angular 大師之路] 自己的樣板語法自己做 (Structural Directives)","date":"2018-10-31 21:56:46","categories":["Angular 大師之路"],"tags":["Angular","Structural Directives","Attribute Directives","EmbeddedViewRef","directive"],"summary":"\u003Cp>前幾天我們花了不少時間在介紹 \u003Ccode>*ngComponentOutlet\u003C/code> 以及 \u003Ccode>*ngTemplateOutlet\u003C/code> ,這種會\u003Cstrong>改變 DOM 結構的語法\u003C/strong>,像是 \u003Ccode>*ngIf\u003C/code> 或 \u003Ccode>*ngFor\u003C/code> 等等,在 Angular 裡都稱為 \u003Cstrong>Structural Directive\u003C/strong>,這種用法看起來跟我們自己設計 directive (像是 \u003Ccode>ngClass\u003C/code> 或 \u003Ccode>ngStyle\u003C/code> 等,又稱為 Attribute Directive) 很像,但多了個星號開頭,不過它其實只是個語法糖,原理是差不多的。如果我們想要設計這種符合語法糖的程式,該怎麼做呢?\u003C/p>\n"},"mastering-angular-17-http-interceptors":{"title":"[Angular 大師之路] 使用 HTTP_INTERCEPTORS 攔截 Http Request","date":"2018-11-01 21:43:31","categories":["Angular 大師之路"],"tags":["Angular","HTTP_INTERCEPTORS","HttpRequest","HttpHandler"],"summary":"\u003Cp>在開發 Angular 應用程式時,HTTP 請求絕對可以說是最常使用的功能之一,而在一般的應用情境上,我們很常會需要針對請求再做額外的包裝,或統一的管理,這時候我們就可以使用 \u003Ccode>HTTP_INTERCEPTORS\u003C/code> 來協助我們攔截 HTTP 請求,並做額外的處理!\u003C/p>\n"},"mastering-angular-18-error-handler":{"title":"[Angular 大師之路] 使用 ErrorHandler 集中處理錯誤","date":"2018-11-01 21:43:31","categories":["Angular 大師之路"],"tags":["Angular","ErrorHandler"],"summary":"\u003Cp>今天我們來看看,如何集中管理所有的錯誤訊息。\u003C/p>\n"},"mastering-angular-19-app-initializer":{"title":"[Angular 大師之路] 使用 APP_INITIALIZER 在程式運行早期處理資料","date":"2018-11-03 22:10:27","categories":["Angular 大師之路"],"tags":["Angular","APP_INITIALIZER"],"summary":"\u003Cp>在開發一個應用程式時,我們常常需要在程式正常運作前,進行一些初始化的動作,在 Angular 中則是提供了一個 \u003Ccode>APP_INITIALIZER\u003C/code> 設定,讓我們可以在 Angular 進行初始化動作時預先進行處理,今天我們就來看看這個功能開如何使用吧!\u003C/p>\n"},"mastering-angular-20-ngmodule-providers":{"title":"[Angular 大師之路] 在 @NgModule 的 providers: [] 自由更換注入內容 (1)","date":"2018-11-04 19:56:37","categories":["Angular 大師之路"],"tags":["Angular","NgModule","DI","providers","useClass","useExisting"],"summary":"\u003Cp>相依注入是一般物件導向程式設計的一個大重點,相依注入用得越好程式彈性就越高,而 Angular 本身架構就包含了非常強大的相依注入功能,讓我們自由切換想要注入的實體,今天就來看看在 \u003Ccode>@NgModule\u003C/code> 的 \u003Ccode>providers: []\u003C/code> 中該如何自由的切換不同注入的內容:\u003C/p>\n"},"mastering-angular-21-ngmodule-providers-2":{"title":"[Angular 大師之路] 在 @NgModule 的 providers: [] 自由更換注入內容 (2)","date":"2018-11-05 21:50:12","categories":["Angular 大師之路"],"tags":["Angular","NgModule","DI","providers","useValue","useFactory"],"summary":"\u003Cp>昨天我們提到了在 \u003Ccode>@NgModule\u003C/code> 中設定要抽換注入 token 的兩種比較簡單方法,今天我們把剩下兩種稍微複雜的也來介紹一下:\u003C/p>\n"},"mastering-angular-22-get-injection-tokens":{"title":"[Angular 大師之路] 各種在程式中取的注入 token 實體的方法","date":"2018-11-06 21:29:56","categories":["Angular 大師之路"],"tags":["Angular","DI","Inject"],"summary":"\u003Cp>前兩天我們學到了多種替換注入 token 內容的方法,今天我們來看看如何取得不同注入內容的方式:\u003C/p>\n"},"mastering-angular-23-injection-tokens":{"title":"[Angular 大師之路] 認識 InjectionToken","date":"2018-11-07 22:24:16","categories":["Angular 大師之路"],"tags":["Angular","InjectionToken"],"summary":"\u003Cp>在 Angular 中不是只有 service 可以當 token 被注入,我們也可以單純的注入某個物件,這個物件通常是一個全域的系統設定,或是單純的一個函數(function),這時候就會遇到一些問題,我們今天就來看看問題是什麼,以及如何解決!\u003C/p>\n"},"mastering-angular-24-ngzone":{"title":"[Angular 大師之路] 效能調校之認識 NgZone","date":"2018-11-08 21:13:19","categories":["Angular 大師之路"],"tags":["Angular","zone.js","NgZone"],"summary":"\u003Cp>許多 Angular 開發人員對於 NgZone 這個詞應該都不太陌生,尤其是在早期 Angular 剛推出時,只要發生錯誤,就會在 F12 開發人員工具看到一堆看不太懂的錯誤,但都會看到 \u003Ccode>zone.js\u003C/code> 或 \u003Ccode>NgZone\u003C/code> 之類的字眼。這個 NgZone 到底是什麼呢?今天就來簡單介紹一下。\u003C/p>\n"},"mastering-angular-25-change-detector-ref":{"title":"[Angular 大師之路] 效能調校之認識 ChangeDetectorRef","date":"2018-11-09 21:13:19","categories":["Angular 大師之路"],"tags":["Angular","ChangeDetectorRef"],"summary":"\u003Cp>昨天我們講到了 Angular 使用 NgZone 來決定變更偵測的時機,今天我們來認識一下 Angular 提供的另外一個比較常用來決定變更偵測時機的工具 - \u003Ccode>ChangeDetectorRef\u003C/code>\u003C/p>\n"},"mastering-angular-26-change-detection-strategy":{"title":"[Angular 大師之路] 認識元件的變更偵測策略","date":"2018-11-10 09:58:47","categories":["Angular 大師之路"],"tags":["Angular","ChangeDetectionStrategy","OnPush","ChangeDetectorRef","Pure Component"],"summary":"\u003Cp>今天我們來看看元件內的變更偵測策略,打造高效能元件!\u003C/p>\n"},"mastering-angular-27-async-pipe":{"title":"[Angular 大師之路] 認識 AsyncPipe (1) - 基本使用技巧","date":"2018-11-11 19:09:24","categories":["Angular 大師之路"],"tags":["Angular","AsyncPipe","RxJS","shareReplay"],"summary":"\u003Cp>在撰寫前端程式時,我們很難避免會遇到非同步的程式處理,在大量使用 RxJS 的 Angular 中更是如此,而今天我們要介紹的 AsyncPipe 在樣板上要處理非同步可以說是非常方便的工具!\u003C/p>\n"},"mastering-angular-28-async-pipe-advanced":{"title":"[Angular 大師之路] 認識 AsyncPipe (2) - 進階技巧","date":"2018-11-12 20:09:24","categories":["Angular 大師之路"],"tags":["Angular","AsyncPipe","ChangeDetectorRef","OnPush"],"summary":"\u003Cp>今天我們來認識一下兩個重要的 AsyncPipe 特性,可以幫助我們在使用 AsyncPipe 時更有信心,打造出更高效能的程式!\u003C/p>\n"},"mastering-angular-29-angular-with-rxjs-basic":{"title":"[Angular 大師之路] 在 Angular 中應用 RxJS 的 operators (1) - 基礎篇","date":"2018-11-13 21:51:21","categories":["Angular 大師之路"],"tags":["Angular","RxJS","map","tap","switchMap","mergeMap","concatMap","exhaustMap","combineLatest","forkJoin","startWith"],"summary":"\u003Cp>在前兩天介紹 AsyncPipe 時,我們不難發現當進入 RxJS 思維時,搭配 AsyncPipe 可以帶來非常多的好處!雖然透過這種不使用 \u003Ccode>subscribe()\u003C/code> 訂閱的方式,對於許多剛進入 Angular 或 RxJS 世界的朋友會感到不適應;尤其是當有更多複雜資料要處理時,不使用 \u003Ccode>subscribe()\u003C/code> 訂閱後處理資料還真的不知道該如何處理是好。\u003C/p>\n\u003Cp>其實只要透過 RxJS 提供的運算子(operators),便能夠幫助我們減少大量的程式,並寫出更加好維護的程式碼!這兩天就讓我們來看看一些我個人在開發 Angular 時常用的 RxJS 應用技巧吧!\u003C/p>\n"},"mastering-angular-30-angular-with-rxjs-advanced":{"title":"[Angular 大師之路] 在 Angular 中應用 RxJS 的 operators (2) - 進階應用","date":"2018-11-14 20:25:13","categories":["Angular 大師之路"],"tags":["Angular","RxJS","debounceTime","distinctUntilChanged","Subject","BehaviorSubject","ReplaySubject","AsyncSubject","catchError","throwError","finalize"],"summary":"\u003Cp>昨天我們講了幾個常用 RxJS operators,今天再來看看一些其他在 Angular 常見的應用吧!\u003C/p>\n"},"mastering-angular-31-how-to-create-new-http-client-and-ignore-http-interceptors":{"title":"[Angular 大師之路] 如何忽略 HTTP_INTERCEPTORS","date":"2019-01-06 20:59:46","categories":["Angular 大師之路"],"tags":["HttpClient","HttpBackend","HTTP_INTECEPTORS"],"summary":"\u003Cp>我們都知道在 Angular 中如果想要透過 ajax 呼叫 API,可以透過 HttpClient 服務來達成,同時在此之前我們也提過可以\u003Ca href=\"https://fullstackladder.dev/blog/2018/11/01/mastering-angular-17-http-interceptors/\">使用 HTTP_INTERCEPTORS 來攔截處理所有的 HTTP 請求\u003C/a>。但有時候我們會希望不要透過 \u003Ccode>HTTP_INTERCEPTORS\u003C/code>,幫我們處理那麼多事情,這有辦法解決嗎?今天就來介紹兩種方式來解決這個問題!\u003C/p>\n"},"mastering-angular-avoid-reserved-event-name":{"title":"設計 @Output 時的命名注意事項","date":"2019-02-16 21:16:12","categories":["Angular 大師之路"],"tags":["Angular","@Output"],"summary":"\u003Cp>最近在開發 Angular 程式時,遇到了一個詭異的情況,其實主要是來自對於 HTML 底層的一些觀念沒有弄清楚,跟\u003Ca href=\"https://www.facebook.com/will.fans\">保哥\u003C/a>討論釐清後,雖然不是 Angular 的問題,但要是一個沒注意,很容易不小心發生問題,因此在這篇文章記錄一下!!\u003C/p>\n"},"mastering-rxjs-01-intro":{"title":"[RxJS] 打通 RxJS 任督二脈","date":"2020-09-16 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS"],"summary":"\u003Cp>RxJS 是 ReactiveX (又稱 Reactive Extensions,簡稱 Rx) 這個概念的 JavaScript 實現版本;而 ReactiveX 本身的概念是透過組合一些常用的程式技巧,來處理**「非同步」及「串流(或事件)」**情境容易變得很複雜的問題,讓寫出來的程式碼更好理解、也更容易維護。\u003C/p>\n\u003Cp>儘管在近幾年 RxJS 的能見度已經越來越高,但許多人初進入 RxJS 世界就因為它太過抽象,而提早登出;甚至遇過客戶外包時因為害怕接手維護 RxJS,而禁止使用 RxJS 的情境!這是非常令人厄婉的一件事情。\u003C/p>\n\u003Cp>而我自己在比較理解 RxJS 後,則是深深的被其流暢的寫法及可維護性給吸引,開始在公司努力推坑同事使用 RxJS,也因此促成這系列文章,整理出我自己認為比較適合 (推坑成功率比較高?) 的學習路徑,希望幫助大家「打通 RxJS 任督二脈」!\u003C/p>\n"},"mastering-rxjs-02-environment-prepare":{"title":"[RxJS] 開始前的環境準備","date":"2020-09-17 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","CDN","Parcel","StackBlitz"],"summary":"\u003Cp>要開始練習 RxJS,當然要先準備好一個可以開始使用 RxJS 的環境,本篇文章會以完全沒接觸過 RxJS 為假設,介紹幾種起始的環境準備方式,當然對於已經有撰寫 RxJS 經驗的朋友來說,可以依照自己原來的使用習慣,這篇文章參考參考就好,不一定要跟我用一樣的環境囉。\u003C/p>\n"},"mastering-rxjs-03-quick-start":{"title":"[RxJS] 三步驟快速上手 RxJS","date":"2020-09-18 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Stream","Observable","Operators"],"summary":"\u003Cp>昨天我們學會了如何開始將專案加入 RxJS,今天讓我們從頭開始,認識一下基本的 RxJS 起手式吧!\u003C/p>\n"},"mastering-rxjs-04-counter-practice":{"title":"[RxJS] 隨堂測驗 - 簡易計數器","date":"2020-09-19 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","map","filter","fromEvent"],"summary":"\u003Cp>在昨天的文章最後我們出了一個「簡易計數器」的練習,今天就來看看該如何實作這些功能吧!\u003C/p>\n"},"mastering-rxjs-05-reactivex-asynchronous-programming-and-stream":{"title":"[RxJS] 認識非同步 (Asynchronous) 及串流 (Stream)","date":"2020-09-20 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Stream","Asynchronous"],"summary":"\u003Cp>\u003Cstrong>非同步\u003C/strong> (asynchronous) 與\u003Cstrong>串流\u003C/strong> (stream),是程式開發時經常必須面對的議題,各自有各自解決的問題,也各自都有其帶來的延伸問題,今天就先來對這兩個東西有基礎的理解吧!\u003C/p>\n"},"mastering-rxjs-06-observer-pattern":{"title":"[RxJS] 認識觀察者模式 - Observer Pattern","date":"2020-09-21 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Observer Pattern"],"summary":"\u003Cp>今天我們來認識 ReactiveX 的重要組成之一,也就是「觀察者模式 - Observer Pattern」。有學過物件導向程式設計的朋友應該都聽過設計模式 (Design Pattern),而觀察者模式就是其中一種,也是蠻常見的一種,同時也是 ReactiveX 的主要核心,所以如果你還不知道什麼是觀察者模式,務必繼續看下去喔!\u003C/p>\n"},"mastering-rxjs-07-video-notify-practice":{"title":"[RxJS] 隨堂測驗 - 影片上架通知功能","date":"2020-09-22 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Observer Pattern"],"summary":"\u003Cp>昨天的文章中我們實際撰寫 JavaScript 用「觀察者模式」完成了一個「影片上架通知」的功能,今天我們就練習看看直接使用 RxJS 來完成一樣的功能,你會發現一切變得非常的簡單!\u003C/p>\n"},"mastering-rxjs-08-iterator-pattern":{"title":"[RxJS] 認識疊代器模式 - Iterator Pattern","date":"2020-09-23 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Iterator Pattern"],"summary":"\u003Cp>前兩天的文章中我們介紹了「觀察者模式 - Observer Pattern」,今天我們來介紹另外一個在 ReactiveX 中也很重要的觀念:「疊代器模式 - Iterator Pattern」。其實我們在寫程式時會經常遇到疊代器模式,但通常不會直接碰觸到它,而是程式語言針對疊代器模式提供了原生語法的支持,將背後的細節隱藏了起來(這也是它的目的);大多數程式語言都提供疊代器模式整合到原生語法內,可見它有多們重要!\u003C/p>\n"},"mastering-rxjs-09-functional-programming-introduction":{"title":"[RxJS] 認識函式語言程式設計 - Functional Programming","date":"2020-09-24 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Functional Programming","side effect","pure function","high order function"],"summary":"\u003Cp>函式語言程式設計 (Functional Programming) 是 ReactiveX 應用中非常重要的一部份,在個人過去的經驗中,遇過不少覺得 RxJS 不好用,甚至寫出不好維護的程式,有很大的機會是因為沒有掌握到 functional programming 的一些觀念,當然有些觀念在一般學習程式語言時也會被提出來,但使用 functional programming 時這些觀念會顯得更加重要。\u003C/p>\n\u003Cp>在寫 RxJS 時,我們不用成為 functional programming 的專家,但瞭解一些 functional programming 的重要觀念,絕對可以幫助我們寫出更強健的程式碼!不管是否使用 RxJS 都是如此喔!!\u003C/p>\n"},"mastering-rxjs-10-functional-programming-basic-patterns":{"title":"[RxJS] Functional Programming 常用基本技巧及應用","date":"2020-09-25 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Functional Programming","Currying","Compose","Pipe","Tap"],"summary":"\u003Cp>昨天的文章我們把 functional programming 的大致概念介紹了一下,今天我們來介紹一些使用 functional programming 開發時常用的基本技巧!這些技巧可以讓程式碼的可讀性、可維護性都更高,習慣以後對於這種流暢的思考方式絕對會讓你覺得寫 code 是一件很過癮的事情啊!\u003C/p>\n"},"mastering-rxjs-11-marble-diagram":{"title":"[RxJS] 認識彈珠圖 Marble Diagram","date":"2020-09-26 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Marble Diagram","彈珠圖"],"summary":"\u003Cp>之前的文章我們花了不少篇幅把學習 ReactiveX 前應該具備的知識都建立起來了,接下來就讓我們回歸到 ReactiveX,認識一下 ReactiveX 本身需要知道的知識吧。第一天讓我們學習一下如何閱讀「彈珠圖 Marble Diagram」。\u003C/p>\n"},"mastering-rxjs-12-observable-subject-behaviorsubject-replaysubject-asyncsubject":{"title":"[RxJS] 建立 Observable 的基礎 - Observable / Subject / BehaviorSubject / ReplaySubject / AsyncSubject","date":"2020-09-27 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Observable","Subject","BehaviorSubject","ReplaySubject","AsyncSubject"],"summary":"\u003Cp>今天我們來介紹一下幾種最基本建立 observable 的方式。\u003C/p>\n"},"mastering-rxjs-13-cold-observable-hot-observable":{"title":"[RxJS] Cold Observable v.s Hot Observable","date":"2020-09-28 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Observable","Subject","Cold Observable","Hot Observable"],"summary":"\u003Cp>昨天我們介紹了 \u003Ccode>Observable\u003C/code> 和 \u003Ccode>Subject\u003C/code> 系列兩種不同的建立資料流物件的方法,也稍微說明了訂閱時會發生的不同,今天讓我們用比較專有的名詞:Cold Observable 和 Hot Observable 來說明這兩種的差別。從運作的方式去了解,能更幫助我們在開發時更加掌握技術的使用方式!\u003C/p>\n"},"mastering-rxjs-14-creatoin-operators-of-empty-range-iif-throwerror-ajax":{"title":"[RxJS] 建立類型 Operators (1) - EMPTY / of / range / iif / throwError / ajax","date":"2020-09-29 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","of","empty","range","iif","throwError","ajax"],"summary":"\u003Cp>今天開始進入各種 Operators 的介紹啦!首先我們先來看看「建立類型」的 operators,除了前兩天介紹從頭開始建立 Observable 的方法外,在 RxJS 內有非常多種內建的方法可以讓我們依照不同的情境需求來建立 Observable,今天先來看看其中幾種。\u003C/p>\n"},"mastering-rxjs-15-from-fromevent-fromeventpattern-interval-timer-defer":{"title":"[RxJS] 建立類型 Operators (2) - from / fromEvent / fromEventPattern / interval / timer / defer","date":"2020-09-30 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","from","fromEvent","fromEventPattern","interval","timer","defer"],"summary":"\u003Cp>今天我們來介紹更多建立類型的 operators,分別是 fromXXXX 系列,和一些跟時間操作有關的 operators。\u003C/p>\n"},"mastering-rxjs-16-concat-merge-partition-zip":{"title":"[RxJS] 組合/建立類型 Operators (1) - concat / merge / zip / partition","date":"2020-10-01 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","concat","merge","zip","partition"],"summary":"\u003Cp>接下來我們來介紹「組合/建立類型」的 operators,這類型 operators 的目標依然是「建立」新的 observable,但來源不再是特定的數值等,而是直將另外一個(或數個) Observable 當作資料來源建立新的 Observable。\u003C/p>\n"},"mastering-rxjs-17-combinelatest-forkjoin-race":{"title":"[RxJS] 組合/建立類型 Operators (2) - combineLatest / forkJoin / race","date":"2020-10-02 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","combineLatest","forkJoin","race"],"summary":"\u003Cp>今天再來介紹幾個常用的「建立/組合」類型的 operators。\u003C/p>\n"},"mastering-rxjs-18-map-scan-pairwise":{"title":"[RxJS] 轉換類型 Operators (1) - map / scan / pairwise","date":"2020-10-03 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","map","scan","pairwise"],"summary":"\u003Cp>在介紹完各種建立 Observable 的 operators 後,接下來我們開始介紹各式各樣放在 \u003Ccode>pipe\u003C/code> 裡面,讓 Observable 資料流向更加多采多姿的 operators。\u003C/p>\n\u003Cp>首先要介紹的是各種「轉換」類型的 operators。\u003C/p>\n"},"mastering-rxjs-19-switchmap-concatmap-mergemap-exhaustmap":{"title":"[RxJS] 轉換類型 Operators (2) - switchMap / concatMap / mergeMap / exhaustMap","date":"2020-10-04 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","switchMap","concatMap","mergeMap","exhaustMap"],"summary":"\u003Cp>今天介紹幾個使用頻率非常高、功能非常類似,又有很大差別的轉換類型 operators:\u003Ccode>switchMap\u003C/code> / \u003Ccode>concatMap\u003C/code> / \u003Ccode>mergeMap\u003C/code> / \u003Ccode>exhaustMap\u003C/code>。\u003C/p>\n\u003Cp>前一天介紹的轉換類型 operators 都是將 Observable 傳進來的事件值換成另外一個值,而今天介紹的類型都是將傳進來的值換成另外一個 Observable 資料流。什麼意思呢?繼續看下去就知道囉。\u003C/p>\n"},"mastering-rxjs-20-combineall-switchall-concatall-mergeall-startwith":{"title":"[RxJS] 組合類型 Operators (1) - switchAll / concatAll / mergeAll / combineAll / startWith","date":"2020-10-05 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","switchAll","concatAll","mergeAll","combineAll","startWith"],"summary":"\u003Cp>今天要介紹的是「組合類型」的 operators,這類型的 operators 會根據指定的條件將來源 Observable 的資料進行「組合」,變成一條新的 Observable 資料流。\u003C/p>\n"},"mastering-rxjs-21-filter-first-last-single":{"title":"[RxJS] 過濾類型 Operators (1) - filter / first / last / single","date":"2020-10-06 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","filter","first","last","single"],"summary":"\u003Cp>今天開始我們來介紹「過濾類型」的 operators,「過濾類型」的 operators 主要功能是讓 Observable 資料流內的事件在符合特定條件時才發生;這類型的 operators 數量不少,也都很實用,且多半也不太困難,值得多花點時間學習。\u003C/p>\n"},"mastering-rxjs-22-take-takelast-takeuntil-takewhile":{"title":"[RxJS] 過濾類型 Operators (2) - take / takeLast / takeUntil / takeWhile","date":"2020-10-07 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","take","takeLast","takeUntil","takeWhile"],"summary":"\u003Cp>今天來介紹 \u003Ccode>take\u003C/code> 系列的各種過濾類型 operators。\u003C/p>\n"},"mastering-rxjs-23-skip-skiplast-skipuntil-skipwhile":{"title":"[RxJS] 過濾類型 Operators (3) - skip / skipLast / skipUntil / skipWhile","date":"2020-10-08 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","skip","skipLast","skipUntil","skipWhile"],"summary":"\u003Cp>昨天介紹的 \u003Ccode>take\u003C/code> 系列是用來決定要「拿哪些資料」,今天來介紹 \u003Ccode>skip\u003C/code> 系列,越來決定「忽略哪些資料」。\u003C/p>\n"},"mastering-rxjs-24-distinct-distinctuntilchanged-distinctuntilkeychanged":{"title":"[RxJS] 過濾類型 Operators (4) - distinct / distinctUntilChanged / distinctUntilKeyChanged","date":"2020-10-09 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","distinct","distinctKey","distinctUntilChanged","distinctUntilKeyChanged"],"summary":"\u003Cp>今天來分享過濾類型的 operators - \u003Ccode>distinct\u003C/code> 系列,這系列的 operators 都是用來避免「重複的事件資料」發生,但各有不同的用處,讓我們繼續看下去吧!\u003C/p>\n"},"mastering-rxjs-25-audit-audittime-sample-sampletime-debounce-debouncetime":{"title":"[RxJS] 過濾類型 Operators (5) - sampleTime / sample / auditTime / audit / debounceTime / debounce","date":"2020-10-10 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","sampleTime","sample","auditTime","audit","debounceTime","debounce"],"summary":"\u003Cp>今天分享的過濾類型 operators 都具有依照時間條件讓原來資料流不要太過頻繁發生件的意味,但各自有不同處理邏輯,有些也比較抽象,建議多看看彈珠圖來理解。\u003C/p>\n"},"mastering-rxjs-26-isempty-defaultifempty-find-findindex-every":{"title":"[RxJS] 條件/布林類型 Operators (1) - isEmpty / defaultIfEmpty / find / finxIndex / every","date":"2020-10-11 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","isEmpty","defaultIfEmpty","find","findIndex","every"],"summary":"\u003Cp>今天介紹「條件/布林類型」的 operators,這類型的 operators 都是用來判斷整個 Observable 是否符合某些條件來當作新的 Observable 事件資料。\u003C/p>\n"},"mastering-rxjs-27-min-max-count-reduce":{"title":"[RxJS] 數學/聚合類型 Operators (1) - min / max / count / reduce","date":"2020-10-12 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","min","max","count","reduce"],"summary":"\u003Cp>今天要介紹「數學/聚合類型」的 operators,這些 operators 會把來源 Observable 當作一個單純的資料列,取得一些基本的資訊,也可以自訂如何判斷資訊;這些 operators 都非常直覺好懂,就讓我們輕鬆來學習吧!\u003C/p>\n"},"mastering-rxjs-28-tap-toarray-delay-delaywhen":{"title":"[RxJS] 工具類型 Operators (1) - tap / toArray / delay / delayWhen","date":"2020-10-13 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","tap","toArray","delay","delayWhen"],"summary":"\u003Cp>今天要介紹的是「工具類型」的 Operators,也都不太困難,很好理解,繼續輕鬆學習吧!\u003C/p>\n"},"mastering-rxjs-29-catcherror-finalize-retry-retrywhen":{"title":"[RxJS] 錯誤處理 Operators (1) - catchError / finalize / retry / retryWhen","date":"2020-10-14 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","catchError","retry","retryWhen","finalize"],"summary":"\u003Cp>今天來介紹一些跟「錯誤處理」有關的 operators。在使用 RxJS 時,資料流是透過 \u003Ccode>pipe\u003C/code> 及各式各樣的 \u003Ccode>operators\u003C/code> 在處理,且很多時候是非同步的,因此大多時候發生錯誤並不能單純的使用 \u003Ccode>try...catch\u003C/code> 方式處理,就需要透過這些錯誤處理相關的 operators 來幫忙囉!\u003C/p>\n"},"mastering-rxjs-30-multicast-publish-refcount-share-sharereplay":{"title":"[RxJS] Multicast 類 Operator (1) - multicast / publish / refCount / share / shareReplay","date":"2020-10-15 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","multicast","refCount","publish","share","shareReplay"],"summary":"\u003Cp>還記得之前我們介紹過 Cold Observable v.s. Hot Observable 嗎?\u003C/p>\n\u003Cp>Cold Observable 和觀察者 (Observer) 是一對一的關係,也就是每次產生訂閱時,都會是一個全新的資料流。而 Hot Observable 和觀察者則是一對多的關係,也就是每次產生訂閱時,都會使用「同一份資料流」,而今天要介紹的 operators 目的就是將 Cold Observable 轉成 Hot Observable,讓原來的資料流可以共用。\u003C/p>\n\u003Cp>今天的觀念會比較複雜一點,打起精神繼續看下去吧!\u003C/p>\n"},"mastering-rxjs-31-practicing-autocomplete-search-sort-pagination":{"title":"[RxJS] 實戰練習 - 自動完成 / 搜尋 / 排序 / 分頁","date":"2020-10-16 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","ajax","map","switchMap","debounceTime","distinctUntilChanged","share","shareReplay","filter","take","startWith","catchError","mapTo","scan"],"summary":"\u003Cp>今天我們用實際的例子來練習各種 RxJS operators 的組合運用!在一般的應用程式裡面,資料查詢應該算是非常常見的情境了,我們就實際使用資料查詢的功能做範例,加上各種變化,來練習一些 operators 的實際使用吧!\u003C/p>\n"},"mastering-rxjs-32-implement-flux-pattern-with-rxjs":{"title":"[RxJS] 實戰練習 - 使用 RxJS 實作 Flux Pattern","date":"2020-10-17 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Flux","BehaviorSubject","from","map","shareReplay","of","delay","concat"],"summary":"\u003Cp>使用 React 作為前端架構的朋友對於 Flux 應該都不陌生,React 也內建了 Flux 讓我們可以直接使用,同時也有許多其他的 library 以這個架構為基礎設計,並應用在各種前端框架下,如 \u003Ca href=\"https://redux.js.org/\">Redux\u003C/a> (for React)、\u003Ca href=\"https://ngrx.io/\">NgRx\u003C/a> (for Angular) 和 \u003Ca href=\"https://vuex.vuejs.org/\">Vuex\u003C/a> (for Vue) 等等。可以見得它是多麽重要的東西,今天我們來嘗試實際使用 RxJS 來實作一下這種架構,也藉此多認識一下 Flux Pattern 的重要觀念。\u003C/p>\n"},"mastering-rxjs-33-how-to-customize-operators":{"title":"[RxJS] 如何設計自己的 RxJS Operators","date":"2020-10-18 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Operator"],"summary":"\u003Cp>今天我們來聊點輕鬆(?)的主題 - 「如何設計出自己的 RxJS Operators」吧!\u003C/p>\n"},"mastering-rxjs-34-introduce-scheduler-of-rxjs":{"title":"[RxJS] 認識 Scheduler","date":"2020-10-19 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Scheduler","ObserveOn","SubscribeOn"],"summary":"\u003Cp>今天我們來認識一下 RxJS 的 Scheduler,雖然在一般使用 RxJS 開發應用程式時幾乎不會用到 Scheduler,但 Scheduler 可以說是控制 RxJS 至關重要的角色,偶爾也有可能會需要使用 Scheduler 來調整事件發生時機!\u003C/p>\n\u003Cp>到底什麼是 Scheduler?就讓我們繼續看下去吧!\u003C/p>\n"},"mastering-rxjs-35-how-to-test-rxjs-with-marble-diagrams":{"title":"[RxJS] 如何替 RxJS 撰寫測試 - 一般測試與彈珠圖測試方法","date":"2020-10-20 18:00:00","categories":["打通 RxJS 任督二脈","第 12 屆鐵人賽"],"tags":["RxJS","Testing","Marble Diagrams"],"summary":"\u003Cp>今天我們來聊聊如何撰寫測試程式來確保寫出來的 RxJS 如我們所想的一般運作,也就是撰寫測試程式碼!撰寫測試程式是軟體開發中非常重要的一環,雖然不是所有程式碼都一定要有對應的測試程式,但良好的測試程式卻可以幫助我們撰寫住更加穩固的程式碼。\u003C/p>\n\u003Cp>至於到底該怎麼測試 RxJS?撰寫 RxJS 測試程式時又有什麼需要注意的呢?就讓我們繼續看下去吧!\u003C/p>\n"},"modbustcp-client-using-csharp":{"title":"使用 C# 撰寫 ModbusTCP client","date":"2022-11-12 16:51:29","categories":null,"tags":["ModbusTCP"],"summary":"\u003Cp>在之前的文章「簡介 Modbus TCP」我們簡單介紹了工業上常見且簡單的通訊方式,Modbus 以及 ModbusTCP,由於 ModbusTCP 本身非常簡單,因此就算不靠任何 library,只要懂得撰寫簡單的 TCP 程式就可以自己實作一個 ModbusTCP client,所以今天就以 C# 為例,實作一個簡單具有讀取功能的 ModbusTCP client。\u003C/p>\n"},"native-script-with-angular-cli":{"title":"[NativeScript]使用Angular CLI來操作NativeScript專案","date":"2017-03-02 11:11:11","tags":["Angular CLI","Angular","NativeScript"],"summary":"\u003Cp>今天來談談如何在NativeScript專案中,使用Angular CLI建立component、directive和module等程式,節省開發時間。\u003C/p>\n"},"ngrx-01-introduce":{"title":"[NgRx 速成班] 簡介 NgRx","date":"2022-04-17 11:47:42","categories":["NgRx 速成班"],"tags":["Angular","NgRx","Redux","Flux"],"summary":"\u003Cp>NgRx 是一個強大,且功能完整的 Angular 狀態管理套件,在我們的應用程式越來越複雜的時候,它很適合用來管理一些全域的狀態,並透過適度的抽象化以及加入一定的規範,降低整體程式的耦合性,打造出更好維護及管理的程式碼。\u003C/p>\n\u003Cp>接下來的一系列文章將會介紹 NgRx 的核心精神,使用方式及相關工具。\u003C/p>\n","ogImage":"./assets/blog/ngrx-01-introduce/00.png"},"ngrx-02-schematics":{"title":"[NgRx 速成班] 使用 NgRx Schematics 快速產生程式碼骨架","date":"2022-08-01 11:47:42","categories":["NgRx 速成班"],"tags":["Angular","NgRx","Schematics"],"summary":"\u003Cp>在之前的文章「\u003Ca href=\"https://fullstackladder.dev/blog/2022/04/17/ngrx-01-introduce/\">簡介 NgRx\u003C/a>」中我們間單的的解釋了 NgRx 的一些基本角色,每個角色都有他的工作,也代表著我們要把一件事情拆成多個角色去負責,每個角色都會有各自獨立的程式碼,我們可以使用 \u003Ca href=\"https://ngrx.io/guide/schematics\">@ngrx/schematics\u003C/a> 套件來快速的幫助我們產生所有需要的程式碼!\u003C/p>\n","ogImage":"./assets/blog/ngrx-02-schematics/01.png"},"ngrx-03-store-selector":{"title":"[NgRx 速成班] 讀取狀態的基礎 Store & Selector","date":"2022-08-02 10:30:00","categories":["NgRx 速成班"],"tags":["Angular","NgRx","Store","Selector"],"summary":"\u003Cp>對 NgRx 基本架構和程式碼有了一些概念後,接著來看一下如何將狀態讀取出來給程式使用,這會利用到 Store 與 Selector 兩個角色。\u003C/p>\n\u003Cp>基本的程式骨架再上一篇「\u003Ca href=\"/blog/2022/08/01/ngrx-02-schematics/\">使用 NgRx Schematics 快速產生程式碼骨架\u003C/a>」已經說明過了,這邊將會直接沿用產生出來的程式骨架,繼續調整程式碼。\u003C/p>\n","ogImage":"./assets/blog/ngrx-03-store-selector/01.png"},"ngrx-04-action-reducer":{"title":"[NgRx 速成班] 更改狀態的基礎 Action & Reducer","date":"2022-08-03 16:27:30","categories":["NgRx 速成班"],"tags":["Angular","NgRx","Action","Reducer"],"summary":"\u003Cp>上篇文章我們介紹了 \u003Ca href=\"2022/08/01/ngrx-02-schematics/\">NgRx 的 Store 和 Selector\u003C/a>,這兩個角色主要是用來存放資料及讀取資料用的,接著我們來看看如何更新儲存的資料 - Action 和 Reducer。\u003C/p>\n\u003Cp>一樣的,基本的程式骨架已經在「\u003Ca href=\"/blog/2022/08/01/ngrx-02-schematics/\">使用 NgRx Schematics 快速產生程式碼骨架\u003C/a>」建立,接下來將會直接沿用產生出來的程式骨架,繼續調整程式碼。\u003C/p>\n","ogImage":"./assets/blog/ngrx-04-action-reducer/01.png"},"ngrx-05-effects":{"title":"[NgRx 速成班] 用 Effects 讓元件持續保持單純","date":"2022-08-07 09:01:34","categories":["NgRx 速成班"],"tags":["Angular","NgRx","Effects"],"summary":"\u003Cp>前幾天我們已經講 NgRx 狀態管理最重要的幾個核心角色 - Store、Selector、Action 和 Reducer 介紹過了;今天我們來講講 NgRx 另外一個很重要的角色 - Effects。\u003C/p>\n","ogImage":"./assets/blog/ngrx-05-effects/01.png"},"node-packages-to-create-beauty-cli":{"title":"[node.js] 打造美觀的互動式 CLI 介面","date":"2022-03-06 20:00:33","categories":["前端軍火庫"],"tags":["chalk","gradient-string","figlet.js","inquirer.js","nanospinner"],"summary":"\u003Cp>前陣子在 Youtube 上看到了一部影片,介紹了好幾個 node.js 的套件,來幫助我們打造漂亮的 CLI,才後知後覺的發現一直在使用的 Angular CLI、Schematics 等等,許多由 node.js 開發的 CLI 工具,背後那些美觀的畫面都是基於這些套件,而不是自己刻的,所以整理了一下這些套件的介紹與示範!\u003C/p>\n\u003Cp>\u003Cimg src=\"./assets/blog/node-packages-to-create-beauty-cli/00.png\" alt=\"\" title=\"\" loading=\"lazy\" />\u003C/p>\n","ogImage":"./assets/blog/node-packages-to-create-beauty-cli/00.png"},"notes-for-rx-net":{"title":"[C#] Rx.NET 筆記 (不定時更新)","date":"2021-04-17 09:47:02","tags":["ReactiveX","Rx.NET"],"summary":"\u003Cp>最近在專案中開始使用 \u003Ca href=\"http://Rx.NET\">Rx.NET\u003C/a> 了,剛開始有些不太適應,不過大致熟悉後,寫起來還是很過癮,不輸給使用 RxJS,以下做一些簡單的筆記,讓對 \u003Ca href=\"http://Rx.NET\">Rx.NET\u003C/a> 有興趣的朋友能快速上手。\u003C/p>\n\u003Cp>因為之前都是寫 RxJS 居多,也會有一些跟 RxJS 的比較,不過主軸還是以 \u003Ca href=\"http://Rx.NET\">Rx.NET\u003C/a> 為主。\u003C/p>\n"},"one-time-pass-introduce-with-hotp-totp-google-authenticator":{"title":"[OneTimePassword] 一次性密碼演算法:簡介HOTP、TOTP和Google Authenticator","date":"2017-09-07 23:36:41","tags":["One Time Password","OTP","HOTP","TOTP","JavaScript","otplib"],"summary":"\u003Cp>One Time Password(OTP、一次性密碼)主要用於實現雙因素認證(two-factor authentication)的功能,在使用者一般透過帳號密碼登入後,再透過輸入一組只能使用一次的密碼,完成相對比較安全的登入機制;或是在需要執行特定某些功能時,再次要求使用者輸入一次性的密碼,保護使用者資料不會被他人直接使用,這樣的情境在很多網路銀行線上交易都可以看到。今天就來簡單介紹兩個常見的OTP演算法-HOTP和TOTP\u003C/p>\n"},"openid-validate-token-with-rs256-and-jwks":{"title":"[OpenID] 使用 RS256 與 JWKS 驗證 JWT token 有效性","date":"2023-01-28 15:15:21","categories":["OpenID"],"tags":["OpenID","JWT","JWK","JWKs"],"summary":"\u003Cp>使用 JWT token 來進行身份認證已經是現在開發上的顯學了,常見的服務如 Microsoft 等透過 OAuth 2.0 登入後,有會拿到一組 JWT 格式的 access token,我們可以透過這個 token 去呼叫相關的 API 來取得想要得資料,但除了把 access token 丟給 API 外,我們有沒有其他方是可以驗證這個 token 是否有效呢?\u003C/p>\n\u003Cp>如果服務使用 RS256 對 token 簽章,且有跟著 OpenID 的規範走的話,是有一套完整在 client 端就可以自行驗證的流程的,這篇文章就來說明一下所有相關的技術,同時實際拿個 token 來驗證看看!\u003C/p>\n","ogImage":"./assets/blog/openid-validate-token-with-rs256-and-jwks/00.webp"},"passkeys-using-simplewebauthn":{"title":"使用 SimpleWebAuthn 實現 Passkeys 無密碼登入","date":"2023-06-11 10:17:41","categories":null,"tags":["Passkeys","WebAuthn"],"summary":"\u003Cp>前幾天看到「PAPAYA電腦教室」的影片,發現 Google 驗證也支援 Passkeys 了,實際使用的體驗感覺非常的棒,也好奇我們自己是否能提供一樣的服務,就做了一些研究,發現果然可行,目前常用的作業系統與行動裝置都支援了,這篇文章就筆記一下如何用 SimpleWebAuthn 套件來實踐 Passkeys 無密碼等入功能。\u003C/p>\n"},"ramda-multiple-sort-using-sort-with":{"title":"[Ramda] 使用 sortWith 輕鬆達成多欄位排序條件","date":"2021-10-10 12:21:01","tags":["ramda","sortWith"],"summary":"\u003Cp>多欄位排序是一件不太困難,但也有點麻煩的事情,雖然 JavaScript 本身提供的 \u003Ccode>sort()\u003C/code> 就可以達到目標,但寫起來就是醜醜的,而透過 Ramda 的 \u003Ccode>sortWith()\u003C/code> 就簡單得多,而且更加好閱讀,今天就來如何使用 \u003Ccode>sortWith()\u003C/code> 打造更好閱讀的排序程式。\u003C/p>\n"},"raspberry-pi-3-rc522-rfid":{"title":"解決Raspberry Pi3無法使用RC522讀取RFID的問題","date":"2016-08-02 22:22:54","tags":["RFID","RC522","Raspberry Pi"],"summary":"\u003Cp>最近開始研究起了Raspberry Pi其相關的周邊硬體,在玩到讀取RFID的時候出現了一些問題,照著網路上的範例接RC5232模組,卻怎麼樣也讀不到資料,經過一翻苦戰(google)後,總算是找到了問題與解決方法,在這邊紀錄一下。\u003C/p>\n"},"react-tutorial-1-hello-world":{"title":"[React 速成班]前言&Hello World!","date":"2016-03-04 15:40:42","categories":["React 速成班"],"tags":["React","Hello World"],"summary":"\u003Cp>如果要說2015年最熱門的前端框架,那肯定非\u003Ca href=\"https://facebook.github.io/react/\">React\u003C/a>莫屬了!之前看到一篇PTT上的文章\u003Ca href=\"www.ptt.cc/bbs/Soft_Job/M.1451695803.A.2B4.html\">「[心得] 前端/Front-End/F2E面試心得分享(22間)」\u003C/a>,作者發表了他個人面試22間公司的心得,其中以可以看到多數的公司現在都開始趨向使用React,其中也有提到一些目前AngularJS的問題,對於已經使用AngularJS一段時間的我來說也頗為感同身受!雖然即將現身(?)的Anular 2會對一些常見的問題進行改善,但跟風學學現在熱門的東西也不是個壞事…所以就決定摸索看看React。\u003C/p>\n"},"react-tutorial-2-ide-1-intro":{"title":"[React 速成班]有錢沒錢,選個編輯器好過年(1)-介紹篇","date":"2016-03-06 16:00:33","categories":["React 速成班"],"tags":["React","IDE","Visual Studio","Visual Studio Code","Sublime","Atom"],"summary":"\u003Cp>俗話說得好,\u003Cstrong>好的IDE帶你上天堂,壞的IDE讓你deat line delay住套房\u003C/strong>。在寫todo list練習之前,先讓我用幾篇文章來介紹一下IDE的部分。React雖然熱門,但畢竟還算是比較新的東西,所以許多常見編輯器或IDE針對React的支援度都還是有限,最常見的問題就是把JSX程式碼存成.js檔時,由於一般都會在裡面插入類似HTML的JSX語法,結果就導致了大部分編輯器語法highlight出錯。不過畢竟React可是當今世上最熱門的library啊,當然許多主流的編輯器還是多少都有支援的。今天就在不要太貪心,只要求語法highlight不要出錯、不管是否有autocomplete、intellisense等其他酷炫功能的條件下,來比較幾款常見的程式編輯器。\u003C/p>\n"},"react-tutorial-3-ide-2-vscode-develop-react":{"title":"[React 速成班]有錢沒錢,選個編輯器好過年(2)-用Visual Studio Code開發React支援Highlight, IntelliSense]","date":"2016-03-06 16:12:21","categories":["React 速成班"],"tags":["React","Visual Studio Code"],"summary":"\u003Cp>要讓Visual Studio Code開發React的語法highlight不要亂掉,只需要把.js檔改為.jsx檔即可,不過大部分React的範例還是會用.js檔來完成,這樣會造成我們在閱讀別人程式碼時的不便,所以今天就來介紹一下如何用Visual Studio Code開發React時可以在.js檔內開發JSX也不會造成highlight的問題,另外也介紹一下如何讓Visual Studio Code支援\u003Cstrong>React的intellisense\u003C/strong>。\u003C/p>\n"},"react-tutorial-4-ide-3-sublime-text-hightlight":{"title":"[React 速成班]有錢沒錢,選個編輯器好過年(3)-用Sublime Text 3開發React支援Highlight","date":"2016-03-11 16:26:56","categories":["React 速成班"],"tags":["React","Sublime Text"],"summary":"\u003Cp>單純以程式碼Highlight來說的話,Sublimt Text 3算是個人感覺看起來最舒服的(雖然我還是偏好使用Visual Studio Code),所以這篇就來快速說明一下如何設定讓Sublime Text 3可以支援JSX檔的Highlight吧!\u003C/p>\n"},"react-tutorial-5-react-basic-and-todolist-scaffold":{"title":"[React 速成班]從TodoList範例學習React(1)-基本架構","date":"2016-03-13 16:33:29","categories":["React 速成班"],"tags":["React"],"summary":"\u003Cp>接下來終於要開始透過從實做一個TodoList來學習React啦!本篇文章將會先對React的特色簡單做一些基本且必要的介紹,然後先框好我們的TodoList基本的內容,之後在後續文章一個一個去完成它。\u003C/p>\n"},"react-tutorial-6-props":{"title":"[React 速成班]從TodoList範例學習React(2)-透過實作TodoItems學習props","date":"2016-03-18 16:44:21","categories":["React 速成班"],"tags":["React","props"],"summary":"\u003Cp>上一篇文章中,我們學到了在React的世界中,一切都是由元件組成的,也在基於這樣概念中把TodoList基本上需要的元件框出來,接下來在這篇文章中我們將實作TodoItems的部分,順便學習React中元件與元件資料傳遞的方法。\u003C/p>\n"},"react-tutorial-7-state":{"title":"[React 速成班]從TodoList範例學習React(3)-透過實作AddTodoForm學習state","date":"2016-04-03 16:49:51","categories":["React 速成班"],"tags":["React","state"],"summary":"\u003Cp>上一篇文章中,我們學到如何使用props來取得元件傳遞的參數值,也實作了TodoItems及TodoItem元件,藉此了解props的應用。接下來我們將透過實作AddTodoForm部分,來學習React中state的使用。\u003C/p>\n"},"react-tutorial-8-jsx-1":{"title":"[React 速成班]深入JSX(1)-基本篇","date":"2016-04-10 20:59:12","categories":["React 速成班"],"tags":["React","JSX"],"summary":"\u003Cp>JSX與法是React中很特別的一個部分,它可以讓你用JavaScript產出HTML時用最直覺的方式去表達,也就是類似直接撰寫HTML的方式,大幅簡化產出元件的難度,今天我們就來比較深入的了解JSX!\u003C/p>\n"},"react-tutorial-9-jsx-2":{"title":"[React 速成班]深入JSX(2)-使用技巧","date":"2016-05-20 21:08:51","categories":["React 速成班"],"tags":["React","JSX"],"summary":"\u003Cp>在上一篇文章裡面我們已經針對JSX的原理和使用方法做了一些基本的說明,接下來就來談一些實際開發時的使用技巧吧!\u003C/p>\n"},"reduce-moment-bundle-size-in-angular":{"title":"[Angular 進階議題] 減少 moment.js 造成 bundle 檔案過大的問題","date":"2022-02-26 18:34:27","categories":["Angular 進階議題"],"tags":["Angular","Webpack","momentjs"],"summary":"\u003Cp>\u003Ca href=\"https://momentjs.com/\">momentjs\u003C/a>,可以說是最多人使用的老牌 JavaScript 時間處理類別庫;當然,隨著技術的進步,momentjs 也有不少議題被提出,其中最大的問題就是檔案太過龐大了,且隨著現在前端技術的發展,我們經常使用 webpack 等工具將前端程式進行打包,同時過濾 (tree shaking) 要不要的程式,以減少整體檔案大小。\u003C/p>\n\u003Cp>而 momentjs 由於原始設計的關係,在做 tree shaking 的時候會無法移除掉用不到的 API,同時還有龐大的語系檔,嚴重影響最終 bundle 檔案大小。\u003C/p>\n\u003Cp>抱怨歸抱怨,momentjs 還是非常多人在用,因此只能盡量的做到減少大小,至少不要把龐大的語系檔一起 bundle 進來。\u003C/p>\n\u003Cp>Angular 過去是將 webpack 整個封裝起來的,而隨著版本推移,現在也能自訂 webpack 了,今天就來看一下如何在 Angular 中自訂 webpack,同時移除 momentjs 中過大的語系檔。\u003C/p>\n"},"rxjs-debugging-with-rxjs-spy":{"title":"[RxJS] rxjs-spy:RxJS除錯神器","date":"2018-03-27 17:08:22","categories":["RxJS"],"tags":["RxJS","Angular","rxjs-spy","debugging"],"summary":"\u003Cp>\u003Ca href=\"https://cartant.github.io/rxjs-spy/\">rxjs-spy\u003C/a>,是一款專門用來除錯RxJS的套件,透過rxjs-spy,我們可以很輕易的在網頁執行階段理解每一步operator的動作,同時調整現有的observable,來驗證不同邏輯帶來的結果,最棒的是,整個過程幾乎不用動到原來的程式碼,可以說是非常方便的一款library,今天我們就來看看這個神奇的RxJS除錯神器-rxjs-spy吧!\u003C/p>\n"},"schematics-workshop-01-intro":{"title":"[Schematics 實戰] 基本介紹","date":"2019-11-30 20:18:19","tags":["Schematics","Angular"],"summary":"\u003Cp>\u003Ca href=\"https://www.npmjs.com/package/@angular-devkit/schematics\">Schematics\u003C/a> 是 Angular CLI 用來產生程式碼骨架的基礎,在接下來的幾篇文章中,我會分享如何使用 Schematics 來幫助專案或團隊產生一些必要的重複程式碼,以及一些個人在使用上的經驗及技巧。\u003C/p>\n\u003Cp>今天就先來簡單介紹一下到底什麼是 Schematics 與基本的觀念吧!\u003C/p>\n"},"schematics-workshop-02-getting-started-cli":{"title":"[Schematics 實戰] 撰寫第一個 Schematics","date":"2019-12-01 20:33:04","tags":["Schematics"],"summary":"\u003Cp>上篇文章我們介紹了\u003Ca href=\"https://fullstackladder.dev/blog/2019/11/30/schematics-workshop-01-intro/\">Schematics 的基礎\u003C/a>今天我們來快速學學如何撰寫第一個 Schematics。\u003C/p>\n"},"schematics-workshop-03-snippets":{"title":"[Schematics 實戰] 好用 VSCode 套件介紹 - Schematics Snippets","date":"2019-12-05 20:00:06","tags":["Schematics","Visual Studio Code"],"summary":"\u003Cp>今天來介紹一個自己開發來幫助增加 Schematics 開發生產力的 Visual Studio Code 套件 - \u003Ca href=\"https://marketplace.visualstudio.com/items?itemName=MikeHuang.vscode-schematics-snippets\">Schematics Snippets\u003C/a>。\u003C/p>\n"},"schematics-workshop-04-schema-json-setting":{"title":"[Schematics 實戰] 在 schema.json 內設定指令參數","date":"2019-12-08 20:28:34","tags":["Schematics"],"summary":"\u003Cp>之前我們撰寫了第一個 Schematics,也簡單介紹了好用的工具,接著我們開始來學習一些更進階的 Schematics 撰寫與應用,今天我們來看看如何讓 Schematics 接收參數,讓寫出來的工具更有彈性!\u003C/p>\n"},"schematics-workshop-05-apply-templates":{"title":"[Schematics 實戰] 從範本快速產生檔案","date":"2019-12-15 21:14:50","tags":["Schematics"],"summary":"\u003Cp>在學會\u003Ca href=\"https://fullstackladder.dev/blog/2019/12/01/schematics-workshop-02-getting-started-cli/\">撰寫第一個 Schematics\u003C/a> 後,我們已經了解該如何使用 \u003Ccode>tree\u003C/code> 來產生檔案,但有時候難免會遇到一些狀況,需要一次產生較多有關連的檔案,例如 Angular 的 component,預設就會產生 4 個相關連的檔案,雖然我們也能將這些檔案逐一用 \u003Ccode>tree\u003C/code> 產生,但若能有個預設的範本,產生時只要置換裡面的一些變數就好,維護起來將會更加容易!今天就來看看如何在 Schematics 內使用某個來源範本產生檔案吧!\u003C/p>\n"},"schematics-workshop-06-install-packages":{"title":"[Schematics 實戰] 使用 Schematics 幫我們安裝指定套件","date":"2019-12-22 21:03:35","tags":["Schematics"],"summary":"\u003Cp>在開發專案時,通常不會全部都靠自己處理,有些功能會使用現成的套件,以免重複打造輪子的問題;若我們使用 Schematics 建立的程式有相依某些套件,則必須多一個安裝的步驟,手動確認處理的話實在是太辛苦了!其實,我們也可以透過 Schematics 來幫我們進行安裝套件的動作。今天我們來看看如何透過 Schematics 安裝指定的第三方套件到專案內!\u003C/p>\n"},"schematics-workshop-07-local-test-schematics":{"title":"[Schematics 實戰] 在本機專案測試 Schematics 執行結果","date":"2020-01-01 10:58:24","tags":["Schematics"],"summary":"\u003Cp>之前的幾篇文章中,我們已經學會如何使用 Angular Schematics 來改變整個目錄的結構,並使用 Schematics CLI 在專案下測試,但 Schematics 真正的目標是在別的專案內也可以使用,所以我們就來看看如何在本機的其他專案測試 Schematics 的結果吧!\u003C/p>\n"},"speed-up-angular-build-time-by-remove-module-concatenation-plugin":{"title":"移除 ModuleConcatenationPlugin 以加快 Angular 建置速度","date":"2022-07-29 08:33:49","categories":["Angular 大師之路"],"tags":["Angular","Angular CLI","Webpack","ModuleConcatenationPlugin"],"summary":"\u003Cp>最近接手一個專案,需要將舊 Angular 9 專案加入之前客戶沒有實作的 lazy loading 功能,專案包含了將近 600 個頁面,之後還會增加。\u003C/p>\n\u003Cp>重構的過程是很順利的,不過在 lazy loading 架構完成後,卻出現了 production build 時間大幅增加的問題,花費了不少時間研究,總算是以較低的代價換回了 build 速度。\u003C/p>\n\u003Cp>這篇文章就來分享一下整個過程和結論。\u003C/p>\n","ogImage":"./assets/blog/speed-up-angular-build-time-by-remove-module-concatenation-plugin/00.jpg"},"ssms-intellisense-cache":{"title":"[SSMS]解決由別人新增資料表欄位時,在SSMS中查詢欄位會出現錯誤訊息的問題","date":"2016-08-29 22:41:47","tags":["SSMS","IntelliSense","Cache"],"summary":"\u003Cp>這是最近剛好遇到的小問題,由於只是個小小developer,並沒有管理資料庫的權限,因此工作上的資料庫欄位一直都是由別人在維護的,今天同事新增了一個欄位例如name,使用SELECT name FROM [Table]的時候可以查到,但欄位名稱下會出現紅色蚯蚓符號,提示資料行名稱 ‘name’ 無效,雖然可以很簡單推斷只是cache問題,也不影響查詢結果,但看了就是不太舒服,後來同事教了清除cache的方法,問題就解決了。\u003C/p>\n"},"ssms-set-delimiter-to-specflow":{"title":"[SpecFlow]使用SSMS將真實資料轉為Scenario Table的小技巧","date":"2016-04-29 21:55:08","tags":["SpecFlow","SSMS","SQL"],"summary":"\u003Cp>有些系統在開發時,常常會直接用真實世界資料庫中的資料做為測試案例,這樣在開發時會更貼近實際需求的行為;而當使用SpecFlow來描述Feature時,把真實資料庫中的資料轉成相關資料的Table時有一些小技巧可以使用。\u003C/p>\n"},"static-site-generator-using-angular-universal-prerender":{"title":"[Angular Universal] 使用 Prerender 建立自己的 Static Site Generator","date":"2021-10-16 13:32:39","categories":["Angular 進階議題"],"tags":["Angular","Angular Universal","Server Side Rendering","Prerender","Static Site Generator"],"summary":"\u003Cp>隨著 Angular 不斷的改版,原來難用且功能差強人意的 \u003Ca href=\"https://angular.io/guide/universal\">Angular Universal\u003C/a> 在不知不覺已經變得相當完整及強大,搭配 \u003Ca href=\"https://angular.io/guide/prerendering\">Prerender\u003C/a> 功能,不用再依靠如 Hexo、Scully 等工具,要刻出屬於自己的 Static Site Generator (靜態網站產生器) 也變得相當容易,今天就來簡單看一下 Angular Universal 現在變得多麼簡單,且透過 Prerender 功能來打造一個簡單的 Static Site Generator 吧!\u003C/p>\n"},"tauri-introduction":{"title":"Tauri 初體驗:前端打造桌面應用程式的小巧快速新選擇","date":"2022-10-30 14:56:12","categories":["Tauri"],"tags":["Tauri"],"summary":"\u003Cp>\u003Ca href=\"https://tauri.app/\">Tauri\u003C/a> 放在我的待研究項目裡面已經有好一段時間了,原本有研究了一小斷時間,但因為環境準備太過複雜而暫時停止。\u003C/p>\n\u003Cp>最新忽然發現 Tauri 出到 v1.1,不再是 beta 版了,看了一下文件發現整體環境準備變得非常簡單,而且功能及文件也都非常完整了,就花了點時間研究一下,整理成以下筆記,也說說自己的體驗心得。\u003C/p>\n","ogImage":"./assets/blog/tauri-introduction/00.png"},"tauri-with-blazor-web-assembly":{"title":"將 Blazor WebAssembly 整合進 Tauri 應用程式","date":"2022-12-10 09:10:11","categories":["Tauri"],"tags":["Tauri","Blazor","Blazor WebAssembly"],"summary":"\u003Cp>Tauri 內建了很多前端的專案範本,但可惜的是沒有 Blazor WebAssembly 的範本,但 Tauri 架構本身已經考量得很完善了,只要最終產出是純前端的網站,任何應用程式都可以包裝到 Tauri 內,今天這篇文章就來說明一下如何將 Blazor WebAssembly 加到 Tauri 應用程式內。\u003C/p>\n"},"tensorflow-js-basic":{"title":"[TensorFlow.js] 前端也能玩Machine Learning:TensorFlow.js初體驗","date":"2018-04-07 15:10:04","categories":["Machine Learning 機器學習"],"tags":["TensorFlow","TensorFlow.js","Machine Learning","機器學習"],"summary":"\u003Cp>\u003Ca href=\"https://js.tensorflow.org/\">TensorFlow.js\u003C/a>是Google將機器學習(Machine Learning、ML)框架TensorFlow的JavaScript版本,透過TensorFlow.js,讓JavaScript開發人員也有機會加入機器學習的領域。加上前端領域的生態圈支持,讓機器學習在瀏覽器上有了更多發揮的空間!例如結合攝影機、行動裝置的陀螺儀等等,只要裝置與瀏覽器支援,都能夠發會更多不同的變化,同時藉由在客戶端瀏覽器上執行的優勢,節省後端訓練的成本。\u003C/p>\n\u003Cp>今天我們就來簡單介紹一下TensorFlow.js,以及簡單的機器學習訓練方式吧!\u003C/p>\n"},"the-future-of-csharp-7":{"title":"C# 7新語法預覽","date":"2016-04-05 20:44:27","tags":["C#","Build 2016"],"summary":"\u003Cp>\u003Ca href=\"https://build.microsoft.com/\">Build 2016\u003C/a>過後微軟投出了很多讓開發人員感到驚豔的震撼彈,像是Win10未來可以run原生的使用linux指令,Xamrian免費等等。趁著連假也惡補了幾段內容,其中「\u003Ca href=\"https://channel9.msdn.com/Events/Build/2016/B889\">The Future of C#\u003C/a>」談到了一些未來C# 7的新語法,讓人感到滿興奮的,因此在這邊做個簡單的紀錄。\u003C/p>\n"},"type-script-2-typings-npm":{"title":"使用TypeScript2.0撰寫強型別的JavaScript並透過NPM管理定義檔","date":"2016-09-23 23:02:36","tags":["JavaScript","TypeScript","Visual Studio Code","NPM"],"summary":"\u003Cp>TypeScript在美國時間2016/09/22正式推出2.0啦!TypeSciprt 2.0除了推出更多方便的語法之外,個人認為最大的特色就是把原本的d.ts定義檔通通移到npm上去啦。這麼一來我們在專案上就可以省去很多不定要的設定步驟,今天就來介紹一下如何在TypeScript 2.0中使用npm上的定義檔。\u003C/p>\n"},"ui-testing-automation-with-stack-white":{"title":"使用TestStack.White進行Windows UI的自動化測試 (1) 基礎篇","date":"2015-12-22 20:26:07","tags":["UI Testing","Windows UI Testing","自動化測試"],"summary":"\u003Cp>本文章將簡單介紹TestStack.White這個Windows UI自動化測試的套件,並對一個簡單的加法器Windows Form程式進行Windows UI的自動化測試。\u003C/p>\n"},"unity-inject-mutiple-instances-with-same-type":{"title":"[Unity DI]使用Unity針對相同介面但有多個不同實作的注入方法","date":"2016-02-26 20:38:27","tags":["C#","Unity","DI"],"summary":"\u003Cp>使用Unity進行相依注入的時候,比較常見都是一個Interface對一個實作的Class,但是需求變得複雜,經過幾次重構後,很可能會拉出一個Interface出來,再由不同的Class去實作它,這時候要進行DI時code改怎麼寫?\u003C/p>\n"},"using-http-context-passing-data-to-http-interceptor":{"title":"使用 HttpContext 傳遞資料給 HttpInterceptor","date":"2021-11-07 15:00:00","categories":["Angular 大師之路"],"tags":["Angular","Angualr 12","HttpInterceptor","HTTP_INTERCEPTORS","HttpContext"],"summary":"\u003Cp>Angular 中的 HttpInterceptor 可以幫助我們攔截每個 HttpClient 送出的呼叫,幫助我們在呼叫前後打點各種大小事情,不過有時候我們反而希望 HttpInterceptor 不要自作主張幫我們處理太多事情,之前有些過一篇文章介紹\u003Ca href=\"https://fullstackladder.dev/blog/2019/01/06/mastering-angular-31-how-to-create-new-http-client-and-ignore-http-interceptors/\">如何忽略 HTTP_INTERCEPTORS\u003C/a>,而到了 Angular 12 之後,則內建了 \u003Ca href=\"https://angular.io/api/common/http/HttpContext\">HttpContext\u003C/a> 的功能,方便在程式中主動傳遞一些資料給我們自己設計的 HttpInterceptor,來達到一些更細緻的操作,這篇文章就來看一下 HttpContext 該如何使用。\u003C/p>\n"},"visual-studio-code-tips-save-encoding":{"title":"[Visual Studio Code 小技巧] 將檔案已指定編碼儲存","date":"2022-01-31 12:00:00","categories":["Visual Studio Code 小技巧"],"tags":["Visual Studio Code"],"summary":"\u003Cp>以下說明如何使用 Visual Studio Code 來將文字檔編碼進行轉換。\u003C/p>\n\u003Cp>範例如圖,目前是一個 Big5 編碼的文字檔:\u003C/p>\n\u003Cp>\u003Cimg src=\"./assets/blog/visual-studio-code-tips-save-encoding/01.png\" alt=\"\" title=\"\" loading=\"lazy\" />\u003C/p>\n\u003Cp>我們想轉換成 UTF-8,該如何處理呢?\u003C/p>\n"},"vscode-extensions-for-git-in-2022":{"title":"目前我在 VS Code 中使用的 Git 相關擴充功能 (2022 版)","date":"2022-09-03 17:01:48","categories":null,"tags":null,"summary":"\u003Cp>分享一下目前我有在使用 Git 相關的 VS Code 擴充功能。\u003C/p>\n"},"web-api-unify-response-message-exception-in-action":{"title":"[ASP.NET WebApi2]統一回傳訊息格式比較完整的處理方法 (2) Action中Exception處理","date":"2015-11-01 19:27:01","categories":["Asp.Net WebApi"],"tags":["WebApi","C#","Asp.Net"],"summary":"\u003Cp>在上一篇文章「統一回傳訊息格式比較完整的處理方法 (1)回傳訊息統一」中,我們利用自訂ActionFilter的方法成功把所有WebApi回傳的結果包裝成一個統一的格式,接下來我們會面臨到出現錯誤時,也要依照我們自己定義的格式回傳JSON。\u003C/p>\n"},"web-api-unify-response-message-global-exception":{"title":"[ASP.NET WebApi2]統一回傳訊息格式比較完整的處理方法 (3) 全域的Exception處理","date":"2015-11-13 19:31:40","categories":["Asp.Net WebApi"],"tags":["WebApi","C#","Asp.Net"],"summary":"\u003Cp>在上一篇文章「統一回傳訊息格式比較完整的處理方法 (2) Action中Exception處理」中,我們增加了一個繼承自ExceptionFilterAttribute的類別讓在Action中的方法產生例外時可以用統一的格式回傳。\u003C/p>\n"},"web-api-unify-response-message-handle-not-found":{"title":"[ASP.NET WebApi2]統一回傳訊息格式比較完整的處理方法 (5) 找不到正確API時的錯誤處理","date":"2016-02-25 19:31:40","categories":["Asp.Net WebApi"],"tags":["WebApi","C#","Asp.Net"],"summary":"\u003Cp>在之前的文章中,我們已經可以在一般呼叫API的情況下將回傳的JSON格式統一,且在Exception發生時也能夠將Exception已我們想要的格式回傳,\u003Ca href=\"http://xn--Asp-y39dw04hlnt.Net\">但由於Asp.Net\u003C/a> WebApi已經先幫我們做好了找不到正確的Controller和Action時的處理,導致當呼叫不存在的API時,還是無法依照想要的JSON格式回傳,這篇文章就來解決這個問題。\u003C/p>\n"},"web-api-unify-response-message-request-exception":{"title":"[ASP.NET WebApi2]統一回傳訊息格式比較完整的處理方法 (4) Request時的Exception處理","date":"2016-02-24 19:31:40","categories":["Asp.Net WebApi"],"tags":["WebApi","C#","Asp.Net"],"summary":"\u003Cp>在設計ASP.NET相關程式的時候,有時候我們必須在Global.asax中加入一些自訂的程式,例如希望每次Request時只會進行一次資料庫連線的建立,則可以在Application_BeginRequest中建立資料庫連線,然後在Application_EndRequest中將連線dispose掉。而在這個階段的處理若有exception時,之前的系列文章介紹的方法將無法正確處理傳回統一的JSON格式;如果有在Global.asax中做其他的處理,也希望在這裡有exception時可以用統一的方式回傳JSON結果,那們我們必須另外在Global.asax中處理這個錯誤。\u003C/p>\n"},"web-api-unify-response-message":{"title":"[ASP.NET WebApi2]統一回傳訊息格式比較完整的處理方法 (1)回傳訊息統一","date":"2015-10-20 19:14:12","categories":["Asp.Net WebApi"],"tags":["WebApi","C#","Asp.Net"],"summary":"\u003Cp>由於目前有一個實作Api Server的需求,是會開放給很多第三方使用的,因此需要不管任何情況(包含各種Exception)都將回傳的內容格式完全統一,以方便其他使用Api的人容易解讀內容’,研究了一整天,終於有點結論了。\u003C/p>\n"}}}