\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"}}}