PJCHENder那些沒告訴你的小細節

RSS 自動驗證·資料來源與計算方式 ⓘ

收錄文章: 304篇

部落格資料

名稱: PJCHENder那些沒告訴你的小細節
原站: https://pjchender.blogspot.com/ ↗
最後發文: 2022/8/7 01:24
抓取成功: 2026/10/28 17:22
發文頻率: 約每 3 週
檢查頻率: 每 6 小時檢查 RSS

內文來源

狀態: 暫緩處理· 等待下次處理
取得方式: HTML 抽取
平台: Blogger
最近成功: 2026/10/24 01:45
最近嘗試: 2026/10/24 03:06

各來源

HTML 抽取已取得內文 · 完整137 篇
RSS 全文部分取得 · 部分167 篇

使用的技術

成功觀測: 2026/10/26 09:37
觀測來源: https://pjchender.blogspot.com/ ↗

在網站雷達查看詳細結果 ↗

辨識到的網站軟體

BloggerCMS／平台
信心
高
規則
wappalyzer:blogger
證據
- generator 標記：Blogger
- 頁面標記：URL rule
觀測於
2026/10/26 09:37
Font Awesome程式庫
信心
高
規則
wappalyzer:fontawesome
證據
- 頁面標記：page markup rule
觀測於
2026/10/26 09:37
Google Fonts程式庫
信心
高
規則
wappalyzer:googlefonts
證據
- 頁面標記：page markup rule
觀測於
2026/10/26 09:37
jQuery程式庫
信心
高
規則
wappalyzer:jquery
證據
- 資源路徑：script URL rule
觀測於
2026/10/26 09:37
YouTube影音
信心
高
規則
wappalyzer:youtube
證據
- 頁面標記：page markup rule
觀測於
2026/10/26 09:37

主機與 CDN（低信心）

Google Hosted LibrariesCDN
信心
低
規則
wappalyzer:googlehosted
證據
- 資源路徑：script URL rule
觀測於
2026/10/26 09:37

使用的技術

正在讀取技術觀測…

部落格標籤

accelerated es6 javascript training ajax algorithm Android APP分享 blogger設計 Bootstrap CSS data structure deploy DevOps es6 Facebook FontAwesome golang gRPC HTC HTML i18n internationalization internet security JavaScript javascript:understanding the weird parts jQuery js30 learning algorithm in javascript from scratch Line Mac markdown Mobile MySQL NPM PHP Rails React React Router rwd samsung SVG turbolinks tutorial typescript Udemy VSCode Vue web development WebAPIs webrtc word 個人思考內容行銷其他資源分享好文轉載學習心得學習筆記目錄心理健康快樂生活技術分享投資操控人心數位生活時間管理理財疼痛控制研究生入門筆記整理統計經典理論看行銷網站經營網頁網頁設計學習筆記網頁設計資源分享職涯股票行為改變行銷評測文論文撰寫超人筆記軟體分享開箱文電子書電子發票馬老師雲端研究室

最新收錄

本頁 50 篇

程式是人寫出來的，測試也是
- #技術分享
本文章首次刊登於 Web 長島計畫《第三期：測試，這不是測試》軟體測試是什麼軟體開發的過程中，除了功能本身的開發外，還有一個很重要的環節是「測試」。有的人聽到「寫測試」，直覺反應是「好麻煩」，或覺得這只是個浪費時間的事。如果程式一開始就寫的好，為什麼還需要花時間來寫測試呢？當然，如果能確定程式是「正確無誤的」，就可以省去寫測試的時間。然而，實際情況下，程式是人寫出來的；是人寫的，就有機會犯錯，只是錯的多或少罷了。如果把整個「軟體開發」的過程比喻做「寫考卷」，開發者就像是寫考卷的學生。不管你有沒有讀書，都還是可以作答並交出考卷。至於要怎麼知道答案寫的正不正確、能夠得到多少分數，就得要靠「對答案」才能知道了。「對答案」這個動作，其實就是「測試」在做的事。測試是在核對開發者開發出來的功能，是不是確實符合 PM 撰寫的產品規格。相信讀者一定有過這樣的經驗：我們認為這題答案一定是 A，但解答卻是 D。寫程式也是一樣，你可能會認為，程式這樣寫應該就「對了」。然而，程式執行後到底會不會有問題，還是得要做了「測試」才知道。實際上，平常在開發功能的過程中，開發者就一直在做測試了。假設你正在
2022/8/7 01:24PJCHENderhttps://pjchender.blogspot.com/2022/08/blog-post.html
在 Windows 上配對 Apple 鍵盤時需要輸入 PIN 碼（Apple keyboard PIN）
- #Mac
keywords: Mac 鍵盤、PIN 碼、Magic Keyboard、Windows、巧控鍵盤最近在把 Magic Keyboard 和 Windows 筆電配對時發生一件很奇怪的事，就是當我點擊「連結」時，它一直要求我「輸入『鍵盤』的 PIN」，但重點是，螢幕上沒有跳出任何告知我鍵盤 PIN 碼的畫面，我也不知道鍵盤的 PIN 碼到底什麼是什麼。後來找到了這篇文章（How do I pair apple wireless keyboard with windows 10），和底下留言的人說的一樣，這個解法非常荒謬，但它真的有效！後來我發現，原來在 Windows 配對 Magic Keyboard 時，重點是配對時需要在電腦上先隨意輸入一組 PIN 碼，接著再用 Apple 的鍵盤輸入同樣的 PIN 碼後按 Enter 就可以了，像是這樣：先讓你的鍵盤可以被電腦搜尋到，然後在電腦上點擊「新增藍芽或其他裝置」選擇「藍芽」找到鍵盤後，點擊「連結」這時候它會要求你「輸入『鍵盤』的 PIN」，這時候用「電腦原本的鍵盤」輸入任意一組數字（例如，12345678）輸入完後用滑
2021/8/30 22:26PJCHENderhttps://pjchender.blogspot.com/2021/08/windows-apple-pin-apple-keyboard-pin.html
從找衣服了解時間複雜度（Time Complexity）
- #algorithm
剛剛用日常上班前挑衣服的例子和沒學過程式的 00 說明時間複雜度的概念很好理解耶～！例子是這樣的... 一早要出門的時候，想要從衣櫃中找出紅色的上衣。其中一種方式是像左圖一樣，這是掏寶上很熱門的「疊衣服褲子收納神器」，雖然看起來整理的很乾淨，但如果你要從中找到紅色的衣服，你就得要由上而下一件一件找，最糟的情況就是一直翻到最下面才能找到你要的紅色衣服。另一種方式是像右圖一樣，把衣服用立起來的方式，一眼就可以看到紅色的衣服在哪，直接拿出來，幾乎不用找。左圖的那種方式，時間複雜的就是 O(n)，n 就是衣服的件數，雖然紅色的衣服有可能就放在最上面，一眼就可以看到，但在探討時間複雜度的時候都要考慮最差的情況，所以如果你有 n 件衣服，最差的情況就是要把 n 件衣服都翻過才會找到紅色那件。右圖的方式它的時間複雜度是 O(1)，在你沒有忘記其實衣服已經被丟到洗衣籃的前提下，你看一眼，翻都不用翻就可以把紅衣服直接取出（請先忽略掉人腦內建的視覺搜尋系統，那是另一個有趣的故事 XD）。這種不用一個一個找，就直接取出的，時間複雜度就是 O(1)。有了這個時間複雜度的概念後，是不是覺得左邊的那個
2021/5/4 00:15PJCHENderhttps://pjchender.blogspot.com/2021/05/time-complexity.html
心得2021 求職面試心得分享
- #職涯
由於過去求職時在 ptt 上或許多個人網誌中獲得了許多幫助，因此這次也來分享自己面試的心得，希望對於求職的大家們能夠有些幫助。這次求職過程中，在和幾位不同的 Team Lead 或是 CTO 面談的過程中，真的讓我感受到多數厲害的人總是自信而謙虛的，他們不會透過問題來讓你覺得自己不懂，反倒是很 open-minded 讓你感受到雖然這個自己現在不懂，但沒關係，甚至會進一步透過提問來協助你進一步釐清自己的思路。同樣地，我也期許對於自己的專業能夠是「自信而謙虛」的態度。過去雖然常聽大神說，工作一陣子後，通常就不用自己找工作，而是靠別人介紹或挖角，但我可能還沒到這個階段，周圍沒什麼人介紹，更別說是挖角，所以還是只能靠自己 XDD。下面是我這次有面試的幾間公司，主要找公司市場不侷限於台灣的公司，面試的職缺全部都是前端工程師。 Line Pay 首先 Line Pay 和 Line Taiwan、Line Bank 雖然都隸屬於 Line 集團底下，但在台灣是三間不同的公司。Line Pay 的面試過程較嚴謹，這次從投遞履歷到最終回覆的時間約需要一個多月的時間。 Line Pay 公司的
2021/4/26 23:01PJCHENderhttps://pjchender.blogspot.com/2021/04/2021.html
心得ALPHA Camp X 天下雜誌：那些年我們一起走過的數位轉型
這次很幸運有機會能夠擔任 ALPHA Camp 與天下雜誌合作舉辦的實體／線上活動，也是我自己第一次擔任活動主持人。從小，我家就非常多與天下相關的雜誌，不論是天下、康健、Cheers 都有，因為我爸媽算是很早期的訂戶，所以一開始收到 ALPHA Camp 詢問能否的擔任活動主持人時，我內心是有些興奮的，是一種竟然可以有機會進到從小就一直在接觸的媒體的雀躍感，而且天下雜誌多數時候也給我相當正面的感受，算是台灣媒體界的清流之一。除了天下雜誌相當知名的媒體之外，我也很好奇工程師在當今的媒體產業中究竟扮演了什麼角色。主力是在開發「內容管理系統」？或多在進行資料視覺化的專案？在這次的活動中很幸運能夠聽到已經在天下雜誌 10 多年的資深產品經理－紹謙，和數位轉型過程中加入團隊，負責從專案發想到實際落地的資深工程經理－世彥，一起來聽他們分享天下雜誌的數位轉型。數位轉型是什麼？在聽演講前，其實我完全不知道「數位轉型」究竟是怎麼一回事，我單純地以為就是把紙本書變成電子書，或是推出幾個 App 後，就算是完成了數位轉型？數位轉型不是事件的完成，而是持續且沒有終點的歷程然而，在聽完兩位講者的分
2021/4/20 21:03PJCHENderhttps://pjchender.blogspot.com/2021/04/alpha-camp-x.html
gRPC 是什麼？以 Golang 進行示範與說明
gRPC 說明影片 @ BESG :::tip source code 對應的程式碼可檢視 besg-grpc 的 repository。 ::: gRPC 是什麼：以 Golang 說明與實作 RPC 的全名是 remote procedure call，主要是作為電腦和電腦間溝通使用。A 電腦可以呼叫 B 電腦執行某些程式，B 電腦會將結果回傳給 A 電腦，A 電腦在收到回應後會再繼續處理其他任務。RPC 的好處在於，雖然 A 電腦是發送請求去請 B 電腦做事，但其呼叫的方式，就很像是 A 電腦直接在呼叫自己內部的函式一般。 gRPC 也是基於這樣的概念，讓想要呼叫 server 處理請求的 client，在使用這支 API 時就好像是呼叫自己內部的函式一樣簡單自然。從功能面來說，gRPC 就像 Web 常用的 Restful API 一樣，都是在處理請求和回應，並且進行資料交換，但 gRPC 還多了其他的功能和特色。 gRPC 是由 Google 開發的開源框架，它快速有效、奠基在 HTTP/2 上提供低延遲（low latency），支援串流，更容易做到權限驗證（authent
2021/3/26 20:53PJCHENderhttps://pjchender.blogspot.com/2021/03/grpc-golang.html
React讓父層可以取得子層的 DOM 元素：ForwardRef 的使用
- #React
圖片來源：Algolia blog 內文資料來源：Forwarding Refs @ React Docs 目的有些時候父層的元件希望能夠取得子層的 DOM 元素（例如，button 或 input），以便能夠在父層控制子層 DOM 元素的 focus, selection 或 animation 的效果。這時就可以使用 Ref forwarding 來讓父層取得子層 DOM 元素，以便控制和操作它。 :::note 通常需要被 forwardRef 的子層元件會是封裝好的元件（例如，套件），其他使用它的開發者無法直接修改，因此才需要透過 forwardRef 把控制權交給父層元件，讓其他開發者可以直接控制。 ::: forwardRef 基本使用舉例來說，我們建立一個 AwesomeInput 元件： const AwesomeInput = (props) => ; 接著我們在父層元件中使用元件： const App = () => { return ;
2021/3/8 00:10PJCHENderhttps://pjchender.blogspot.com/2021/03/react-dom-forwardref.html
敏捷開發：你我心中，都有一個屬於自己的 MVP
- #筆記整理
由於自己沒有真的很理解過敏捷開發或 Scrum 到底是怎麼一回事，但公司的新專案又開始想要嘗試用這種方式來做 MVP，基於凡事問網友的心態，在 ALPHACamp 社群以及 Twitter 上得到了很多有價值的回饋，很感謝大家分享意見讓我知道。我的問題大概是這樣的：「想要請問大家所謂的敏捷開發？團隊認為敏捷開發就是要快，不用管太多細節，先推出去收到市場回饋再來修改。但很多工程面的東西像是 DB 的設計，API 的規格的改動，添加幾個欄位還好，但若是動到比較大的架構改起來都很痛。是真的想要了解大家在碰到這種情況是怎麼處理？因為我沒有深入理解過敏捷開發，不清楚在實際執行上的細節，只知道每次都說就是要快，先不考慮其他情況。是不是我們沒有掌握到敏捷開發的核心？還是具體來說有那些東西是可以很「敏捷」？哪些東西不適合嗎？先謝謝有經驗到大家」下面則整理大家的想法和意見。 :::caution 本人並沒有任何實際了解過敏捷或 scrum 的學習經驗，因此若有任何錯誤或想法，都歡迎提出並一起討論。 ::: 敏捷的重點在於快速應對市場需求變化的能力首先，敏捷的重點在於快速應對市場需求變化的
2021/1/30 00:37PJCHENderhttps://pjchender.blogspot.com/2021/01/mvp.html
掘竅Golang - 使用 slice of pointers 或 slice of structs
- #golang
TL;DR; 如果這個 slice 或 slice 中的元素有可能會被操作修改，那麼就用 slice of pointers；如果這個 slice 單純只是拿來讀取，那麼就用 slice of structs；或者也可以無腦的使用 slice of pointers 以避免後續不小心而產生的 bug。為什麼會看到 slice of pointers 的用法在 Golang 中常會看到 slice 中存放的是 slice of pointers，使用 slice of pointers 或 slice of structs 有幾個很重要的差別。先來看看下面的程式碼。假設我們先定義一個名為 Vertex 的 struct： type Vertex struct { X int Y int } 接者在建立 slice of struct Vertex：當我們把「slice 中的 struct」取出來的時候，實際上是把 slice[1] 複製一份到 point1 裡面，因此即使修改了 point1 內的 X 和 Y，在輸出 slice 時並不會看到改變 func main() { va
2020/12/30 10:59PJCHENderhttps://pjchender.blogspot.com/2020/12/golang-slice-of-pointers-slice-of-struct.html
MobileAndroid Samsung Note 10 vs. Apple iPhone mini 12 使用心得
- #Mobile
- #數位生活
我是一個對智慧型手機莫名有興趣的人，曾經在 hTC 打工時寫過幾篇開箱文、去年也寫過 Samsung S10+ 和 Note 10 的簡單比較，從智慧型手機出到現在，曾經用過 Micrsoft Lumia 620、LG G 系列、小米 Mix2S、小米 Mi 9、Google Pixel 3XL、Samsung S 系列，一直到現在用的 Samsung Note 10。雖然換過許多不同的裝置，手邊用 Mac 和 iPad，耳機使用的是 AirPods Pro，但就是從來都沒有實際用過 iPhone。從去年的 iPhone 11 到今年年初推出的 iPhone SE 2020 都吸引到我一波，然後都忍住了 XD，到了年底的 iPhone 12 mini 是壓倒駱駝的最後一根稻草，是時候來感受看看所謂蘋果生態系的時候了！這篇文章就來分享一下當前使用 Note 10 和 iPhone 12 mini 的體驗心得。前言我覺得現在聊手機品牌，特別是聊到安卓（Android）和蘋果（Apple）的比較並不是一個令人太愉快的經驗，因為和他人討論這東西時，已經變成很像在聊「政治」，大家有自己很
2020/12/20 22:23PJCHENderhttps://pjchender.blogspot.com/2020/12/mobile-android-samsung-note-10-vs-apple.html
go-pkgcontext package
- #golang
此篇為各筆記之整理，非原創內容，資料來源可見下方連結與文後參考資料： Understanding the context package @ rungo pkg/context @ pkg.go.dev context package 最重要的就是處理多個 goroutine 的情況，特別是用來送出取消或結束的 signal。我們可以在一個 goroutine 中建立 Context 物件後，傳入另一個 goroutine；另一個 goroutine 即可以透過 Done() 來從該 context 中取得 signal，一旦這個 Done channel 關閉之後，這個 goroutine 即會關閉並 return。 Context 也可以是受時間控制，它也可以在特定時間後關閉該 signal channel，我們可以定義一個 deadline 或 timeout 的時間，時間到了之後，Context 物件就會關閉該 signal channel。更好的是，一旦父層的 Context 關閉其 Done channel 之後，子層的 Done channel 則會自動關閉。重要概
2020/11/16 23:03PJCHENderhttps://pjchender.blogspot.com/2020/11/go-pkg-context-package.html
go-pkgtime/rate package
- #golang
time/rate @ go.pkg Golang 標準庫限流器 time/rate 使用介紹 Golang time/rate 限速器 @ 簡書重要概念在 Golang 中使用 Limiter 來控制在特定頻率內，某個事件是否允許被執行。這個 Limiter 是實作 Token Bucket 的方式來達到限流的目的，也就是會先設定： event rate（r）：將 token 放入桶子的頻率，例如每秒將放入 n 個 token 到桶子（bucket）中。 burst size（b）：一個桶子（bucket）中能夠容納的 token 數量一開始桶子會是滿的，只要桶子中有剩餘的 Token 就可以取用，若沒有剩餘的 Token 則需要等待後才能取用。建立 Limiter：NewLimiter keywords: NewLimiter 使用 NewLimiter 來建立一個 non-zero Limiter： func NewLimiter(r Limit, b int) *Limiter Limiter 包含兩個主要的屬性： r：rate，型別是 Limit（ Limit 的型別
2020/11/16 22:16PJCHENderhttps://pjchender.blogspot.com/2020/11/go-pkg-timerate-package.html
AppTypora 自動上傳圖片到 imgur (for Mac)
- #APP分享
Typora 一直都是我覺得最好用的 Markdown 文字編輯器（目前沒有之一），除了所見即所得的功能之外，也可以在 markdown 原始碼間自由切換，而且因為我平常有自己備份 markdown 文件的習慣，因此也不太習慣使用第三方的軟體（例如，Bear、Evernote、Notion 等等）來做編輯，一來想要把所有內容備份到本機時比較麻煩、二來也比較難快速轉移發布到雲端空間的自由度。此外，還可以透過 CSS 直接調整成自己喜歡的樣式。大約從 2020 年 2 月開始 Typora 就支援將拉進 Markdown 的圖片自動上傳到雲端空間（imgur, AWS S3, Github, ...等）的服務，覺得這功能真的超級方便的：要特別留意的是，這些上傳到 imgur 的圖片都是公開的，所以記得不要上傳較隱私的文件或圖片。 STEP 1：安裝 uPic App Typora 整個幾個不同的第三方 App 可以用來上傳圖片，其中比較方便的包含 uPic 和 iPic，兩套都是免費的，前者是開源的軟體，後者則可以透過 App Store 下載。在這裡就以 uPic 為例，只需透過 h
2020/8/23 01:54PJCHENderhttps://pjchender.blogspot.com/2020/08/app-typora-imgur-for-mac.html
心得玩 moba 一年多來讓我了解什麼是團隊
- #個人思考
- #學習心得
說實話，以前的我其實不懂真正「團隊」的概念，就覺得好像是「分工合作」後，各自把自己該做的事情做好做完，就是一個團隊。而過去不論是打過的棒球、籃球這類團隊運動，也常覺得團隊中好像只要少數幾個很強的，就可以帶球隊贏得勝利。但和同事們玩一年多的 moba 下來，才真的讓我體會到什麼是「團隊」。團隊中當然還是有比較強的人，但只要遇到一個破口，就可以讓全隊輸掉。所以若想要贏得遊戲，只有讓大家都一起變強。當自己夠強的時候，就試著 carry 他人，讓整個團隊更好；當自己不夠強的時候，就趕緊把自己 backup 好，輔助而不要變成破口（不要小看自己的重要）。在小區域的競賽中，當然有機會靠一個人 carry 全場，但到了更高階的排位，只有大家一起進步，團隊才有機會贏。只是單打獨鬥不容易向前，而且可能會常覺得其他人很廢；但若是能讓團隊一起變強，大家便能一起更順利地往前！ --- #我其實不擅長玩moba #路人常說我廢 #好險大哥們carry我
2020/7/26 12:10PJCHENderhttps://pjchender.blogspot.com/2020/07/moba.html
掘竅了解這些，更快掌握 TypeScript 在 React 中的使用（Using TypeScript in React）
- #React
- #typescript
tl;dr $ npm init -y # 初始化 npm $ npm install -D typescript # 安裝 typescript $ npx tsc --init # 產生 TS 設定檔 tsconfig.json 內文這篇文章主要是給想要開始學習 TypeScript，並將 TypeScript 整合進 React 專案中的開發者，也是我自己在學習將 TypeScript 使用於 React 前，很希望有人能夠先提示我的先備知識或觀念。主要是因為若只是單純想要整合 TypeScript 到 React 中使用，你並不需要了解 TypeScript 中所有的語法就可以開始做這件事，但在學習前若沒有人整理哪些東西需要先看，哪些東西可以跳過之後再補的話，在學習上會顯得有些吃力。因此這篇文章的重點就是去蕪存菁的說明「在 React 中使用 TypeScript 時」需要先知道些什麼，相信閱讀這篇文章後，能夠節省你許多繞圈圈的時間。在這篇文章中不會說太多關於 TypeScript 語法深入的理論或概念，基本上就是用出來給讀者看，若對於 TypeScript 的語法想要有
2020/7/18 12:04PJCHENderhttps://pjchender.blogspot.com/2020/07/typescript-react-using-typescript-in.html
資安跨站偽造請求（Cross Site Request Forger, CSRF, XSRF）的說明與預防
- #internet security
Photo by Clint Patterson on Unsplash keywords: csrf, internet security, one-click-attack, session-riding, XSRF Cross Site Request Forgery 是什麼跨站偽造請求（cross-site request forgery）也稱為 one-click attack 或 session riding，通常縮寫為 CSRF（有時發音為 sea-surf）或 XSRF，這是一種利用伺服器所信任的網站來發送惡意請求的攻擊；和 cross-site scripting (XSS) 不同，XSS 是透過在網站上輸入惡意程式碼的方式來進行攻擊，通常利用的是「使用者對目標網站」的信任；而 CSRF 則是攻擊者利用「目標網站對該信用者」的信任。透過 CSRF 攻擊有機會讓使用者在無意間修改受害者的帳號密碼，或將帳戶內的金額轉帳給攻擊者。 CSRF 通常有以下流程：使用者使用正常流程登入「目標網站」「惡意網站」利用目標網站對使用者的信任（credentials），例如 Co
2020/5/27 19:38PJCHENderhttps://pjchender.blogspot.com/2020/05/cross-site-request-forger-csrf-xsrf.html
資料結構Binary Search Tree
- #algorithm
- #data structure
keywords: data structure, recursive function, 遞迴函式, queue, 佇列此系列筆記主要依照 [Udemy] Learning Data Structures in JavaScript from Scratch by Eric Traub 的課程脈絡加以整理，但部分程式碼是消化後以自己較易理解的方式重新撰寫，因此和原課程內容有些出入。 Binary Search Tree 有一個很重要的概念是，它是有「階層」的概念在內的，並不是把所有數字放在同一層排序在建立 BST instance 時會把 root 的 value 一併帶入新增值到 BST 時，會判斷這個值比 root 大或小，再以同樣的邏輯分派到 BST 的左下側或右下側檢驗 BST 中包含是否包含某一值時，也是使用同樣的邏輯，先判斷這個值比 root 大還是小，接著依同樣的邏輯往左下側或右下側尋找找出最小值的方式是從 root 開始一路往左下找；找出最大值的方式則是從 root 開始一路往右下找要疊代整個 BST 元素的方式可以分成 Depth First Trave
2020/5/26 00:20PJCHENderhttps://pjchender.blogspot.com/2020/05/binary-tree.html
資料結構Hash Table
- #algorithm
- #data structure
keywords: data structure 此系列筆記主要依照 [Udemy] Learning Data Structures in JavaScript from Scratch by Eric Traub 的課程脈絡加以整理，但部分程式碼是消化後以自己較易理解的方式重新撰寫，因此和原課程內容有些出入。觀念 Hash Table 本身是一個陣列，裡面的每一個元素都是帶有 key-value 的物件，稱作 Buckets。透過自訂的 hash 函式，可以決定新增的資料要放在 Hash Table 中的哪個位置。當有不同的內容放到相同編號的 Buckets 時，會發生所謂的 collision，這時候相同 Bucket 內的資料，會透過 Linked List 的方式串接在一起。當 insert 了相同 key 的資料時，會有更新的效果。其中會包含的方法有： hash insert get, retrieveAll Big O Notation Hash Table 常用在儲存使用者的 Email、使用者資料。缺點：除非在同一個 bucket 內，否則資料（Node）
2020/5/26 00:20PJCHENderhttps://pjchender.blogspot.com/2020/05/hash-table.html
資料結構Linked List
- #algorithm
- #data structure
此系列筆記主要依照 [Udemy] Learning Data Structures in JavaScript from Scratch by Eric Traub 的課程脈絡加以整理，但部分程式碼是消化後以自己較易理解的方式重新撰寫，因此和原課程內容有些出入。資料結構（Data Structure）是什麼不同的資料結構有不同的強弱項，有的在儲存（storing）和紀錄（recording）資料的速度較快，有的則是在搜尋（searching）和提取（retrieving）上比較快。資料結構的使用會影響到效能表現（performance）和程式運行的效率 Linked List Linked List 中，會紀錄該 Linked 的 head 和 tail 每一個 Node 則會紀錄它的 value, prev 和 next 其中會包含的方法為: addToHead, addToTail removeHead, removeTail search, indexOf Big O Notation Constant Time - O (1) 新增／移除 Head 新增／移除 Tail
2020/5/26 00:19PJCHENderhttps://pjchender.blogspot.com/2020/05/linked-list.html
掘竅為什麼要使用 rel="noreferrer noopener"，談 target="_blank" 的安全性風險
- #HTML
- #internet security
在網頁撰寫的過程中，經常當我們要另開視窗時，很容易使用這樣的寫法，但如果你有使用 ESLint 的話，它會建議你在 a 標籤中要加上 rel="noreferrer noopener"，也就是： Google 之所以要加上這行，是因為當瀏覽器使用 target="_blank" 來打開新視窗時，新的視窗所在的網頁是有辦法透過 window.opener 這個物件來操作你原本的頁面。舉例來說，當你在 A 站點了超連結另開新視窗到 B 站時，B 站可以在它的頁面中執行： window.opener.location = 'https://www.google.com'; 這時候你會發現你在 A 站的網頁默默轉址到了 Google 的頁面。這種做法主要是利用一般人只會注意新開的視窗（B 站），而忽略了原有的視窗（A 站），但若不進一步處理，新開的視窗是有機會可以修改到原視窗內所瀏覽的網
2020/5/25 18:09PJCHENderhttps://pjchender.blogspot.com/2020/05/relnoreferrer-targetblank.html
Mobile給開發者用：將 Android 裝置畫面投影到 MAC / PC 上的工具（scrcpy）
keywords: screen sharing, screen mirroring, miracast, android, screen recording 💡 備註：如果你是 iOS 裝置要投放到 Mac 的話則非常簡單，透過內建的 QuickTime 就可以了，只需選擇「File -> New Movie Recording」後，將來源選到 iOS 裝置即可，可參考圖一和圖二的說明。最近因為有把手機（Android）的操作畫面投影到電腦上的需求，試了幾套不同的工具後，發現許多工具都需要在手機和電腦端同時裝 App，除了會有較明顯的時間差外，大多都是透過 Android 內建的「投放」功能來達到這個效果。但這裡因為某些理由，我不能使用原生的投放功能來投放螢幕，而是需要直接把手機畫面顯示在電腦上，找這找著找到這套很好用的 Android 投放手機螢幕工具，稱作 scrcpy。這套工具除了可以投放螢幕外，還可以錄製螢幕、傳輸檔案、並直接由電腦操作手機，最重要的是操作流暢度非常好！但這套工具比較是給開發者的，因為需要透過終端機下一些指令，當然你也可以照著打就好了。關於使用的方式
2020/5/1 00:36PJCHENderhttps://pjchender.blogspot.com/2020/05/mobile-android-mac-pc-scrcpy.html
發佈 npm 套件 - 從手動到自動（7）：Coveralls 的測試覆蓋率與 README 中的標章（code test coverage badge）
keywords: deploy, publish, release, CLI, npm, package.json 這篇將會是這個系列文章的最後一篇，到目前為止已經可以在「把專案推到 github 上」後，自動在 CI 上幫執行測試、打包專案、更新版號、建立 CHANGELOG、發佈到 npm、產生 commit 和在 Github 上產生 release tags。最後一篇則要來說明 README 中常使用到的標章（badge）。先來看一些常見的標章，最後再說明如何產生相當重要的「程式碼測試覆蓋率（code test coverage）」標章吧！在 README 中加入常見的 badge Travis CI 的 badge 一般 README 中的 badge 其實就是單純套用在 markdown 中的圖檔，而許多不同的服務會提供各自的 badge 讓大家使用，以 Travis CI 來說，在官網的文件 Embedding Status Images 即有說明套用的方式，只需點選 Travis CI 專案中的 badge 即會顯示嵌入 markdown 的寫法： [![Buil
2020/2/20 00:30PJCHENderhttps://pjchender.blogspot.com/2020/02/npm-7coverall-readme-code-test-coverage.html
發佈 npm 套件 - 從手動到自動（6）：semantic-release 的外掛設定與自動產生 CHANGELOG
keywords: deploy, publish, release, CLI, npm, package.json 在上一篇文章中已經有透露如果要對 semantic-release 套用外掛（plugin）或進行更多的設定，可以在根目錄建立一支 .releaserc.json 的檔案，現在我們一樣可以透過這支檔案，來讓 semantic-release 自動產生 CHANGELOG.md 的檔案。安裝 semantic-release 外掛預設的情況下，semantic-release 就已經安裝了幾個外掛（plugin），像是： "@semantic-release/commit-analyzer" "@semantic-release/github" "@semantic-release/npm" "@semantic-release/release-notes-generator" 為了要產生 CHANGELOG 檔案，並且保存推進 git 中，需要再安裝 @semantic-release/changelog 和 @semantic-release/git 這兩個外掛
2020/2/19 10:35PJCHENderhttps://pjchender.blogspot.com/2020/02/npm-6semantic-release-changelog.html
發佈 npm 套件 - 從手動到自動（5）：semantic-release 自動發佈到 npm
keywords: deploy, publish, release, CLI, npm, package.json 在前一篇文章中，我們已經知道預設的情況下 semantic-release 它會自動在 CI 的過程中將套件發佈到 npm 上，如果你的套件是在本地打包好，而且最終打包好的 dist 資料夾也會上 git 的話，這麼做當然沒問題。然而，多數實際的情況是，dist 資料夾因為是打包壓縮過的專案，因此一般是會寫入 gitignore 中而不會上 git 的。因此，在上篇文章的最後，你會發現透過 npm install 把我們的套件下載後，會發現套件裡面「空空的」而沒辦法使用。在這篇文章中我們會說明怎麼樣在 Travis CI 中，執行打包的動作，在 CI 中打包完之後 dist 資料夾中就會有東西，此時發佈到 npm 上時，套件就可以正常運作了。修改 .travis.yml 設定檔要讓 Travis CI 可以幫我們執行 build 的指令，只需修改 .travis.yml 這支設定檔：這裡有兩個要留意的地方：在 release 階段中透過 script 的項目，
2020/2/17 23:05PJCHENderhttps://pjchender.blogspot.com/2020/02/npm-5semantic-release-npm.html
發佈 npm 套件 - 從手動到自動（4）：semantic-release 自動更新套件版號
keywords: deploy, publish, release, CLI, npm, package.json 在這篇文章中我們會先說明「語意化版本（semver）」，接著說明如何透過 semantic-release 這個工具結合 CI 來自動更新套件的版本。這篇文章算是這整個系列文章中相對最複雜的一篇，只要完成了這篇設定，只後的動作都會輕鬆很多。語意化版本（semver）既然要發佈到 npm 上，很重要的一點自然就是套件的版本號，而 npm 上所有的套件都是遵循「語意化版本」的「慣例」。「語意化版本」的全名是 Semantic Versioning，常會簡稱為 semver，它的核心概念在於讓使用該套件的開發者在看到版號時就能夠知道該版本有無重大更新或需要留意的地方。一個套件的版本共會由三個數字組成，像是 1.0.0，三個數字由左至右，分別指的是「主版號（major）」、「次版號（minor）」和「修訂號（patch）」。每個版號的變更都有它所代表的意義：主版號（major）：表示這個套件修改了原本的 API，使其無法向下相容，這是開發者最需要留意的情況，算是重大改
2020/2/12 23:31PJCHENderhttps://pjchender.blogspot.com/2020/02/guide-npm-4semantic-release.html
發佈 npm 套件 - 從手動到自動（3）：整合 Travis CI 和 Github 進行自動化測試
keywords: deploy, publish, release, CLI, npm, package.json 在前一篇文章中我們已經說明了如何透過手動的方式將套件發佈上 npm，接著就可以進一步了解如何轉為自動化發佈，而自動化發佈的過程則有賴於「持續整合（Continuous Integration, CI）」的服務。「持續整合」簡稱 CI，簡單來說，就是指當開發者把程式碼提交（commit）到 repository 後，可以自動地進行後續的一些動作，這些動作像是執行測試、打包原始碼、發佈和部署專案程式碼。例如，當開發者把程式碼發佈到 Github 上後，就可以透過 CI 立即對剛推上 Github 的程式碼進行測試，確保最新的程式碼是可以正確運作的，測試結束後則自動地繼續進行打包和部署。由於持續整合的這些動作（例如，執行測試、打包、部署）都需要伺服器才能執行，因此勢必需要透過一些工具或服務才能達到。常見的 CI 服務包括 Travis CI、CircleCI，或是由 Github 本身提供的 Github Actions 等等，這些服務都能和 Github 上的 repo
2020/2/7 10:39PJCHENderhttps://pjchender.blogspot.com/2020/02/npm-3-travis-ci-github.html
發佈 npm 套件 - 從手動到自動（2）：手動 publish 篇
keywords: deploy, publish, release, CLI, npm, package.json 在前一篇文章中，我們已經完成了基本的 package.json 設定，現在就來試著發佈上 npm 吧！如果你還沒完成前一篇的專案內容，可以到 Github 這裡下載。在邁入自動化發佈 npm 套件之前，我們仍然需要先了解如果要手動發布的話該如何執行，畢竟自動化的工具也就是幫我們把一連串的指令自動化執行。 ⚠️ 撰寫文章時使用的 npm 版本為 6.13.7 透過 npm publish 手動發佈套件其實要把套件手動發佈到 npm 上並不難，只需要透過 npm publish 這個指令就可以了。但在那之前，如果你還沒申請帳號的話，需要先到 npmjs 上註冊一個帳號。註冊完之後，讓我們來試試看，打開終端機進入到專案的根目錄： # 如果尚未登入 npm，需要輸入 npm 的帳號密碼 $ npm login 接著在專案目錄內輸入 npm publish $ npm publish 這時候就發佈到 npm 上面啦！是不是非常簡單呢！？你可以到 npmjs 點選右上角的頭
2020/2/3 23:38PJCHENderhttps://pjchender.blogspot.com/2020/02/guide-npm-2.html
發佈 npm 套件 - 從手動到自動（1）：發佈前所需的設定檔 package.json
keywords: deploy, publish, release, CLI, npm, package.json 在前一篇的文章中我們已經建立好了一個簡單的套件。現在要來說明 npm 套件中最重要的一支檔案 - package.json。 ⚠️ 撰寫文章時使用的 npm 版本為 6.13.7 package.json 每一個 npm 專案中，一定會包含一支 package.json，這支檔案就像是這個套件的「身分證」，裡面說明了和這個套件有關的各種訊息，其中像是套件名稱（name）、作者（author）、套件版本（version）等等。因此當你想要了解別人的套件時，可以先從 package.json 這隻檔案入手，同樣的，別人要認識你的專案時，一樣也會從這支檔案開始。這裡我們就先來撰寫 function-benchmarker 這個套件的 package.json 吧！下面列出一個 npm 套件中 package.json 會常用到的欄位，完整的說明可以參考 npm 官方文件： name, version：套件名稱與版本，如果要發布到 npm 的話，名稱和版本會形成一個識別碼，
2020/2/2 23:41PJCHENderhttps://pjchender.blogspot.com/2020/02/guide-npm-1packagejson.html
發佈 npm 套件 - 從手動到自動（0）：專案與套件建置篇
keywords: deploy, publish, release, CLI, npm 對於 JavaScript 的開發者來說要發布 JavaScript 套件到 npm 上面，只要對於 npm 的專案架構本身已經有基本的理解，並不是太困難的事。在這一系列的文章中，會說明如何從專案開發到發佈 npm 套件的這個流程，從手動透過 npm 的指令發佈到自動化持續整合（Continuous Integration, CI）的過程做一個整理。這裡，就讓我們先從手動開始。在這篇文章中會談到：建立隸屬於某 scope 底下的 npm 套件撰寫一個範例套件透過 rollup 打包範例套件透過 Jest 測試範例套件這篇文章主要是建立一個範例的 npm 套件，以供後續說明發佈使用，並且說明套件中通常會包含打包和測試的流程，若想要直接看最後套件完整的程式碼，可以看此 Github 上的 Commit。 ⚠️ 撰寫文章時使用的 npm 版本為 6.13.7。註冊 npm 帳號首先要請你到 npm 的官網上註冊自己的帳號。建立 npm (scoped) 專案一般的情況下，會習慣直接使
2020/2/2 20:53PJCHENderhttps://pjchender.blogspot.com/2020/02/guide-npm-0.html
Vue整合 Vue style guide, eslint-plugin-vue 和 VSCode
- #VSCode
- #Vue
在 Vue Style Guide 中對於 Vue 專案的程式風格提供了許多建議，但有些時候在撰寫程式時還需要額外留意這些撰寫風格反而變成一種負擔，好在這時候 Vue 提供了好用的 eslint-plugin-vue (@vue/cli-plugin-eslint)，透過 eslint 可以幫我們檢查哪些程式碼中的內容是不符合 Style Guide 所建議的，並且予以修正。同時搭配上 VSCode 後，可以在存檔後自動根據 eslint 的建議來重新編排程式碼，不只省下了許多需要調整撰寫風格的認知負擔，更重要的是省下了許多時間，可以專注在程式開發上。在這篇文章中就說明如何根據 Vue Style Guide 一併整合 eslint-plugin-vue 與 VSCode。安裝 eslint-plugin-vue 建立專案這裡快速的透過 Vue CLI 的工具快速建立專案： # 這裡使用的 Vue CLI 版本為 4.2.3 $ vue create vue-eslint-sandbox 安裝用於 Vue 的 eslint 設定檔套件接著透過 Vue CLI 安裝 eslin
2019/12/28 22:05PJCHENderhttps://pjchender.blogspot.com/2019/07/vue-vue-style-guide-eslint-plugin-vue.html
WebAPIsPicture In Picture of Video
- #JavaScript
- #WebAPIs
keywords: video, WebAPIs TL;DR 新技術一定有風險，瀏覽器有支援有不支援（目前只有 Chrome 預設是支援的），使用前應詳閱公開說明書！ // 檢驗瀏覽器有無支援 Picture In Picture API if ('pictureInPictureEnabled' in document) { // 有支援... } // 進入 video 的 PIP 模式 videoElement.requestPictureInPicture().catch((error) => { // 錯誤處理... }); // 離開 video 的 PIP 模式 document.exitPictureInPicture().catch((error) => { // Error handling }); 這篇文章內容主要整理自 An Introduction to the Picture-in-Picture Web API @ CSS Tricks Picture In Picture 是什麼？ Video 元素的 Picture in Picture 模式可以讓影片
2019/12/6 16:51PJCHENderhttps://pjchender.blogspot.com/2019/12/webapis-picture-in-picture-of-video.html
WebAPIsWeb Share API 的使用 - navigator.share
- #Mobile
- #WebAPIs
keywords: WebAPIs, mobile, navigator.share TL;DR // 判斷瀏覽器是否支援 Web Share API if (navigator.share) { // navigator.share 會回傳 Promise navigator.share({ title: 'Web Fundamentals', text: 'Check out Web Fundamentals — it rocks!', url: 'https://developers.google.com/web', }) .then(() => console.log('Successful share')) .catch((error) => console.log('Error sharing', error)); } Web Share API 的說明用手機瀏覽網頁的時候，不知道你有沒有注意過，當你按下分享按鈕時它會跳出一個選單，讓你可以選擇要分享到哪個 App 的選單，像是這樣：這個功能過去需要透過點擊手機瀏覽器上的「分享」後才會出現：但現在透過 Web Shar
2019/11/20 16:15PJCHENderhttps://pjchender.blogspot.com/2019/11/webapis-web-share-api-navigatorshare.html
Samsung沒辦法看訊息通知？讓 Bixby Routines 朗讀通知給你聽
平常在開車或是工作時，並不是非常方便看手機，這種時候若收到 Line 或者簡訊通知時，常常都只聽得到通知卻不知道也不方便點開來看內容，這時候就會很希望手機的語音助理能夠把通知直接念出來讓我知道，至少可以知道是不是有急著需要處理的事情。其實這個功能已經內建在三星這個看似毫無作用的 Bixby Routine 中了，這篇文章中就來看看可以怎麼樣使用。如果懶得看文字的話可以直接參考這個影片：進入 Bixby Routine 要進入 Bixby Routine 可以從「設定」-->「進階功能」-->「Bixby Routines」中找到：接著點擊上方的新增，可以為這個 routine 取個名稱，例如這裡我叫「唸給我聽」：接著就可以設定「如果⋯則⋯」，這裡我先設定手動啟動（即，已輕觸開始按鈕），平常我也會設成一旦連接到藍芽耳機就啟動：按下完成儲存後，像是這種需要手動開啟的 routine，會詢問你要不要新增到桌面上，點選是支後桌面上就會多了啟動和關閉這個 Routine 的按鈕：當你希望手機擁有朗讀通知的功能時，例如開車、工作時，只要點選這個按鈕，一旦有收到推播通知，手機就會念出來給
2019/11/16 00:21PJCHENderhttps://pjchender.blogspot.com/2019/11/samsung-bixby-routines.html
Mac如何透過 iMovie 輸出高畫質影片（4k, 1080p）
- #Mac
- #數位生活
iMovie 的專案會依據「第一部」匯入到時間軸中的媒體，以此決定這個影片最後可以輸出成多高的解析度，因此若你最後想輸出成 4K 的影片，只需要：先到網路上下載一部 4k 的影片（參考影片下載連結）新增一個全新的專案（專案一定要是全新的，因為是以第一個匯入時間軸的媒體來決定最後輸出的解析度）將 4k 影片匯入媒體後，拖曳到時間軸內，成功的話，在右邊齒輪（設定）的地方點一下，會看到解析度出現 4k 選項：接著，如果原本已經有編輯好的內容，可以複製貼在時間軸後面把第一個放入時間軸的 4k 影片移除選擇匯出成 4k 影片：專案一定要是全新的，因為是以第一個匯入時間軸的媒體來決定最後輸出的解析度示範操作影片參考資料 Cannot export movie to 1080p, already tried all the tips/tricks i researched. @ reddit
2019/9/3 15:00PJCHENderhttps://pjchender.blogspot.com/2019/09/mac-imovie-4k-1080p.html
多圖三星 Samsung S10+ Plus 與 Note 10 選擇困難？相機拍照、螢幕與效能比較心得
- #數位生活
- #samsung
keywords: samsung, camera, s10+, s10plus, note10, performance, screen 最近剛好有機會同時入手三星（Samsung）的 S10+ Plus 和 Note 10（不是 Note 10+），可以分享一下這兩隻使用上的心得。直接說結論：相較於 Note10，S10+ 的螢幕真的無可挑惕，色彩的呈現和解析度都非常棒；而 Note10 則是在 App 的安裝速度上有較明顯的提升。兩隻在主鏡頭的拍攝略有差異，主要體現在 Note 10 的成像有更明顯的對比，因此天空會更藍一些，較為吸睛，但有時對比太重會有色偏或修圖感較重的情況（覺得和這幾年 iPhone 成像對比也變強有些相似）；S10+ 則中規中矩，在顏色的呈現上和原本的色彩比較接近。台灣上市的 S10+ CPU 使用的是三星自家的 exynos 9820；Note 10 則是使用高通 Qualcomm 855。螢幕（screen）以前對於螢幕都沒有特別的感覺（不論是小米、三星、LG、HTC），至少不會讓我馬上感覺到「怪怪的」，但這次用了 Note10 之後，第一次感
2019/8/31 16:49PJCHENderhttps://pjchender.blogspot.com/2019/08/samsung-s10-plus-note-10.html
三星全面屏手勢操作，一個滑動手勢快速動作（關閉螢幕、返回上一頁）- One Hand Operation +
keywords: swipe gesture, samsung, one hand operation, lock screen, back 最近把手機換到三星，一開始一直有個地方很不習慣，之前在小米的 MIUI 上有提供了非常簡單易用的全面屏手勢，簡單來說就是把安卓傳統下方的三個功能鍵隱藏之外，只要透過「手勢」就可以做出回上一頁（從左右其中一側的螢幕向內撥）、回到主頁面、顯示應用程式清單頁的功能。但是一開始換到三星手機時找不到這個功能，雖然一樣有全面屏的設定，但其實只是把下方三個功能鍵的區塊變成「一條線」，使用方式和傳統的操作方式幾乎一樣。對於大螢幕的手機來說，每此回到上一頁還需要把手指放到最下方真的很不方便，要嘛就變成需要雙手操作。另一點不習慣的是電源鍵位置實在有點高，每次要關閉螢幕常要勾很久，而先前用的手機可以放置「關閉螢幕」的按鈕在桌面上，等於可以不用使用到電源鍵就可以做到關閉螢幕的功能。這兩個功能讓我在一開始切換過來時很不適應，直到我發現三星有推出自己的手勢功能 App - One Hand Operation + 後覺得實在是太好用了，這個官方推出的 App 比先前
2019/8/11 15:47PJCHENderhttps://pjchender.blogspot.com/2019/08/one-hand-operation.html
筆記使用 react-intl 在 React 實作多語系功能 i18n, internationalization
Photo by Aaron Burden on Unsplash keywords: i18n, Internationalization, intl, format react-intl @ Github API @ react-intl doc Components @ react-int doc 這篇文章主要說明如何透過 React Intl 來實作網頁上的 i18n，先備知識必須要已經基本會使用 React。 ⚠️ 文章使用的是 react-intl @ 2.9，部分功能在 3.0 後不再支援（文章最下方會說明）。開始使用 react-intl Intl Provider Component 我們直接用 create-react-app 的頁面來做練習：建立 React 專案直接透過 create-react-app 建立 React 專案： $ create-react-app react-intl-sandbox $ cd react-intl-sandbox 安裝 react-intl $ npm install react-intl 接著就可以透過 npm ru
2019/7/3 15:52PJCHENderhttps://pjchender.blogspot.com/2019/07/react-intl-react-i18n.html
筆記WebRTC 網路影音－實作篇（demo of media, video, audio）
Photo by freestocks.org on Unsplash 以下內容完全為整理自 30天之即時網路影音開發攻略(小白本) by 我是小馬克 @ iThome 的筆記，無原創內容。建立串流點播工具將影音檔轉成 HLS 用的串流檔透過 ffmpeg 即可將影音檔（例如，mp4）轉成 .m3u8 和 .ts 適用於 HLS 的串流檔。在 Node.js 中可以使用 fluent-ffmpeg 這個工具進行轉換： // ./ffmpeg-helper.js // 把 mp4 檔轉換成 .m3u8 索引檔和多支 .ts 檔 const ffmpeg = require('fluent-ffmpeg'); module.exports = { convertToHls: async (file) => { return new Promise((resolve) => { ffmpeg(file, { timeout: 432000 }) .addOptions([ '-profile:v baseline', // for H264 video codec '-level 3
2019/7/2 10:55PJCHENderhttps://pjchender.blogspot.com/2019/07/demo-of-media-video-audio.html
筆記WebRTC 網路影音－通訊協定篇（protocol of media, video and audio）
Photo by freestocks.org on Unsplash 以下內容完全為整理自 30天之即時網路影音開發攻略(小白本) by 我是小馬克 @ iThome 的筆記，無原創內容。影音資料的傳輸方法一：將檔案直接透過網路丟給對方透過 AirDrop 直接把檔案丟到別人的電腦先上傳到雲端空間，產生連結後給他人下載缺點：全部下載完才能開始聽或看影片方法二：以串流的方式傳送給對方將資料切成一段一段傳出去，使用者可以一邊下載一邊觀看不會花費使用者的儲存空間，串流的檔案會儲存在使用者的緩衝記憶體中，播完後即捨棄傳統的影音檔由表頭和表身組成，通常需要在所有資料都傳輸完成後，才可以根據表頭知道這個影音的編碼為何，解碼完後才可以開始觀看。串流的影音則需要先透過伺服器轉成「流容器」，流容器的一個檔案中包含多塊的表頭和表身，每次傳輸的資料都同時包含了表頭和表身，因此可以一邊傳送檔案一邊觀看影音。方法三：即時影音傳輸（直播、視訊通話）基本的原理和串流傳輸相同，但同時需要使用「推流傳輸協議」，例如 RTMP（Real Time Messaging Protocol —即時訊息
2019/7/2 10:53PJCHENderhttps://pjchender.blogspot.com/2019/07/protocol-of-media-video-and-audio.html
筆記WebRTC 網路影音－基礎知識篇（basic knowledge of media, video, and audio）
Photo by freestocks.org on Unsplash 以下內容完全為整理自 30天之即時網路影音開發攻略(小白本) by 我是小馬克 @ iThome 的筆記，無原創內容。圖片來源： 30天之即時網路影音開發攻略(小白本) @ iThome 聲音採集脈碼調變（PCM, pulse-code modulation）：可以用來指將類比訊號轉換為數位訊號的「方式」，或者指透過這個方式產生的「編碼」，可以想像成是聲音的 RAW 檔，又稱「無損編碼」。位元率 (bps) = 採樣率(hz) x 採樣大小(bit) x 通道位元率（bps, bit Per Second）：在聲音中通常使用 bps 來衡量音訊的品質，越高就代表質量越好，同時也需花費越多的儲存空間，例如 10 bps 指的是這段聲音每秒共有 10 bit 的資料量；32 kbps(32,000 bit/sec)，表示每秒要處理 32 kbit 的量，當音訊有 10 秒時，則需要 32 * 10 = 320 kbit 的空間。採樣率：表示每秒鐘會抓取幾次，採樣率越高音樂越優質，單位為 Hz。通道（chan
2019/7/2 10:50PJCHENderhttps://pjchender.blogspot.com/2019/07/basic-knowledge-of-media-video-and-audio.html
MiAmazfit 小米手錶匯出 GPS 路徑 (gpx, kml, tcx)
- #數位生活
之前出外爬山健走時，一直都有利用小米 Amazfit 米動手錶紀錄 GPS 軌跡的習慣，但就只是每次運動完看一下路徑截圖紀錄而已。最近心血來潮想要把裡面的 GPS 軌跡匯出來，發現內建並沒有這個功能，於是搜尋了一下，分享給有需要的朋友。小米 Amazfit 米動手錶匯出 GPS 軌跡因為小米 Amazfit 米動手錶官方的「小米運動」App 並不支援匯出 GPS 路徑的功能，搜尋了一下，發現 XDA 論壇已經有開發者寫好了－MifitTcxExport，並且持續都有在更新。這個 App 基本上和小米運動是一模一樣的，它是架構在小米運動的 App 之上，只是多了匯出 GPS 軌跡的功能。這種基於官方 App 添加額外功能的軟體一般稱作 Mod。下載的位置是在作者所提供的的 AndroidFileHost - https://androidfilehost.com/?w=files&flid=284328，或者可以從 XDA 論壇討論帖最下方一樣有提供這串下載連結。有興趣可以到 XDA 論壇的 [MOD][4.4+] MifitTcxExport based on officia
2019/3/31 22:00PJCHENderhttps://pjchender.blogspot.com/2019/03/amazfit-gps-gps-amazfit-gps-amazfit-app.html
關於「自學」這件事
- #個人思考
- #學習心得
Photo by Tim Mossholder on Unsplash 之前我覺得「自學」只是個包裝出來的詞，大家覺得自學好棒棒，所以補習班或線上課程就告訴你來這你就能「自學」。但我覺得幾乎沒有什麼東西是不用別人教「自己就學得會」的。但最近對於「自學」有了一些不一樣的想法。我現在認為自學能力指的是「能夠主動學習學會一件自己想學的事／技術」，簡單來說就是你能夠找到適合你自己的方式（不管是什麼方式，自己冥想或是補習上課），去學會你想學的東西。這通常是一個動態的過程，重要的是找到自己適合的方式。什麼意思呢？從我自己的經驗來說，以前還不懂 JavaScript ，最一開始我習慣的學習方式是先去網路上找線上課程，線上課程會讓我有一個通盤的概念，接下來我在自己去閱讀網路上其他的文件都會容易許多。當我進了職場後，聽到不懂的技術時，我就會用這樣的學習方式去主動學習新的技術。公司用的是 Ruby on Rails 這是我以前從沒用過的框架，於是我就上網看了和 Ruby on Rails 有關的線上課程，挑了適合自己的，下班後回家就繼續惡補；專案用的是 Vue，為了能夠快速參與這個專案，於是我
2019/3/17 09:09PJCHENderhttps://pjchender.blogspot.com/2019/03/blog-post.html
JS透過 JavaScript 處理檔案上傳（AJAX Upload byte / JSON / formData File）
HTML Input File 使用取得使用者想要上傳的檔案： multiple 屬性可以一次上傳多個檔案 accept 屬性可以限制上傳檔案的類型限制可上傳的檔案類型 Accept Attribute accept="image/png" accept=".png" accept="image/png, image/jpeg" accept=".png, .jpg, .jpeg" accept="image/*" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" 取得上傳檔案的基本資訊 keywords: fileInput.files 透過 e.ta
2019/1/16 15:23PJCHENderhttps://pjchender.blogspot.com/2019/01/js-javascript-input-file-upload-file.html
React搭配 React Router 打造一個動態麵包屑（dynamic breadcrumb）
這篇文章主要說明如何整合 react-router 來製作一個具有導覽功能的麵包屑（breadcrumb），也就是這個麵包屑可以根據當前使用者瀏覽的路由動態顯示出對應的名稱。由於會說明之所以這麼做的思路，因此篇幅較長；如果想要直接看如何使用這段程式碼，可以到 Github 上檢視 ReadMe，當中的說明較為精簡。前往範例頁前往 Github 看原始碼這篇文章不會從頭開始說明 React 和 React Router 的使用，因此建議閱讀前應該具備基本的 React 和 React Router 知識，不然可能會看得相當吃力。來看看怎麼做吧！建立 React 專案在這裡我們直接使用 create-react-app 來建立一個簡單的 React 專案，就稱作 react-router-breadcrumb： $ create-react-app react-router-breadcrumb # 透過 create-react-app 建立專案 $ cd react-router-breadcrumb # 進入建立好的專案資料夾另外，需要使用到 react-router-
2018/11/17 14:58PJCHENderhttps://pjchender.blogspot.com/2018/11/react-react-router-dynamic-breadcrumb.html
JS使用 JavaScript 解析網址與處理網址中的參數（URL Parameters）
- #JavaScript
- #web development
keywords: parse URL, parameter, URL, query string 由於前後端分離的趨勢，很多的前端網頁都是透過 API 的方式向後端要資料，而最普遍的就是使用 GET 方法在網址後面加上「參數（parameters）」或稱「查詢字串（query string）」來向後端索取資料。由於在瀏覽器內建用來發送 AJAX 請求的 Fetch API 似乎除了把整個 URL 代進去之外，好像沒有看到其他比較漂亮用來設定網址參數的方法，但是網址參數的部分有時候真的是又臭又長，把它整個放進去實在不太好閱讀。找了一下，發現其實不需要額外裝什麼套件就可以處理網址的解析和網址參數的設定，瀏覽本身提供了 URL 和 URLSearchParams 的 WebAPIs 可以使用。 // 直接把網址參數代入 fetch('https://github.com/search?q=react&type=Code') .then(function(response) { // Do something ... }) 如果對於網址各部分的名稱不太清楚，可以參考這篇：網址 URL 英
2018/8/31 22:47PJCHENderhttps://pjchender.blogspot.com/2018/08/js-javascript-url-parameters.html
Guide瞭解網頁中看不懂的編碼：Unicode 在 JavaScript 中的使用
- #JavaScript
- #web development
keywords: unicode, utf-8, JavaScript 如果只是想要簡單知道 Unicode 是什麼，沒有要瞭解使用方式的話，可以觀看計算機科學速成課（第四集）：二進制，在此教學影片的後半段有提到文字符號的編碼概念。在學習網頁開發的過程中，一定會慢慢的碰到所謂的 Unicode, UTF-8 還有其他幾種不同的編碼方式，這麼說你可能不會太有感覺，讓我們以 Facebook 為例，你可以看到在資料傳遞的過程中，常常有這種看不太懂的東西... 我們把它拿出來編排一下大概長這樣： "profiles": { "768320183253420": { "name": "PJCHENder\u7db2\u9801\u524d\u7aef\u8cc7\u6e90\u7ad9", "firstName": "PJCHENder\u7db2\u9801\u524d\u7aef\u8cc7\u6e90\u7ad9", "businessID": 0, "businessName": null, "allBusinessData": [ { "businessID": 0, "bus
2018/6/30 13:59PJCHENderhttps://pjchender.blogspot.com/2018/06/guide-unicode-javascript.html
APP如何撰寫 Typora 中 markdown 的客製化樣式
- #APP分享
- #markdown
此文件翻譯自 Write Custom Theme for Typora @ Typora 官網。翻譯時間為 2018-04-24。總結如果你想要為 Typora 撰寫客製化的樣式，你需要：建立一個新的 css 檔案，這個檔案的名稱不能包含大寫字母或空格，例如，my-typora-theme 就是一個有效的檔案名稱。寫 CSS 檔案。我們準備了一個 toolkit 讓你可以快速開始，並做一些簡單的測試。如果你是要從開始寫，可以從裡面的 template.less 開始。如果你想要套用 Wordpress 或 Jekyll 等現有主題的 css 檔案，只要把內容複製下來，加上那些在 css 檔案中沒有涵括到的部分樣式，像是 "toc" 的樣式，或是其他的 UI 元素。檢測／除錯你的 CSS 檔案：將你所建立的 CSS 檔案放入 toolkit/theme/test.css 中，並記得放入你引用到的圖片或字體檔，接著打開在 toolkit/core 和 toolkit/eletron 內的 HTML 檔案來預覽你的 CSS。若你的作業系統是 Mac 則使用 Safari
2018/4/24 11:55PJCHENderhttps://pjchender.blogspot.com/2018/04/app-typora.html
JS用 JavaScript 打造視訊錄影 APP（MediaRecorder API）
- #JavaScript
keywords: mediaRecorder, mediaStream, mediaDevices, Blob 最近剛好有需要透過瀏覽器來做錄影的操作，於是便和 Andyyou 和 Calvert 一塊研究開始試著實作，這個範例將示範如何透過瀏覽器內建的 MediaStream API 來打造影音錄影的功能。專案下載位置 @ Github 做出來的效果類似這樣：閱讀建議在閱讀這篇文章前，建議已經知道如何透過 JavaScript querySelector() 來選取 DOM 元素；對於 JavaScript 的 addEventListener 和 Promise 有最基本的觀念即可（知道 .then() 的使用）。由於需要透過瀏覽器取得系統的攝影機，在 Chrome 的瀏覽器操作下，這個 API 只能在安全的來源（secure origins only）下才能使用，也就是只能在網址來自 HTTPS 或 localhost 下才能使用，因此建議直接 clone 專案下來執行（貼到 codepen 或 JSFiddle 可能無法正常執行）。將程式碼拉下來執行後，可先簡單閱
2018/2/5 22:22PJCHENderhttps://pjchender.blogspot.com/2018/02/js-javascript-mediarecorder-api.html
5 分鐘快速了解 FontAwesome 5
- #CSS
- #FontAwesome
keywords: icon, logo, fa FontAwesome 正式釋出第五版，在 FontAwesome 5 中，除了主色系從綠色變成藍色之外，究竟第 5 版中還多了哪些新功能呢？讓我們用 5 分鐘快速了解 FontAwesome 5 帶來什麼新功能吧！本篇內容完全出自 FontAwesome 5 官網的內容，整理後希望能讓大家利用 5 分鐘了解 FontAwesome 5 的主要功能和差異，關於更多其他的使用方式還是建議大家到 FontAwesome 5 逛逛看看。將所有的圖示分成四大類在 FontAwesome 將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。在上面的圖示中，各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。因此在使用的時候，不再需要一次載入一大包所有的圖示，而是可以根據自己的需要，分別載入這 4 類型的圖示。至於要怎麼知道該類型中有哪些圖示，可以到搜尋 ICONs 的地方，透過左邊的篩選視窗來看哪些
2017/12/8 16:33PJCHENderhttps://pjchender.blogspot.com/2017/12/5-fontawesome-5.html
JS談談 JavaScript 中的錯誤處理 Error Handling
- #JavaScript
圖片來源：Proper Error Handling in JavaScript @ Scotch keywords: exception handling, javascript, 錯誤處理, 例外處理本文主要內容翻譯自 Exceptional Exception Handling in JavaScript @ SitePoint 在撰寫程式的過程中發生錯誤（error）或出現例外情況（exception）是經常出現的情況，一般我們會把「錯誤」稱作「例外」，兩者可以交替著使用。當 JavaScript 程式執行的過程中發生錯誤時，它會丟出例外狀況（throw an exception），JS 並不會繼續往下走，而是尋找有沒有任何程式碼能夠處理這些錯誤（exception handling code），如果沒有找到任何可以處理錯誤狀況的程式碼，則它會從丟出例外狀況的函式中跳出（return），就這樣重複尋找錯誤處理的程式碼、跳出，直到觸及到最外層的函式（top level function）後終止。錯誤類型當例外產生時，會產生一個用來代表錯誤的物件。在 JS 中內建了 7 種
2017/12/7 11:17PJCHENderhttps://pjchender.blogspot.com/2017/12/js-error-handling.html

本頁 50 篇

程式是人寫出來的，測試也是
- #技術分享
本文章首次刊登於 Web 長島計畫《第三期：測試，這不是測試》軟體測試是什麼軟體開發的過程中，除了功能本身的開發外，還有一個很重要的環節是「測試」。有的人聽到「寫測試」，直覺反應是「好麻煩」，或覺得這只是個浪費時間的事。如果程式一開始就寫的好，為什麼還需要花時間來寫測試呢？當然，如果能確定程式是「正確無誤的」，就可以省去寫測試的時間。然而，實際情況下，程式是人寫出來的；是人寫的，就有機會犯錯，只是錯的多或少罷了。如果把整個「軟體開發」的過程比喻做「寫考卷」，開發者就像是寫考卷的學生。不管你有沒有讀書，都還是可以作答並交出考卷。至於要怎麼知道答案寫的正不正確、能夠得到多少分數，就得要靠「對答案」才能知道了。「對答案」這個動作，其實就是「測試」在做的事。測試是在核對開發者開發出來的功能，是不是確實符合 PM 撰寫的產品規格。相信讀者一定有過這樣的經驗：我們認為這題答案一定是 A，但解答卻是 D。寫程式也是一樣，你可能會認為，程式這樣寫應該就「對了」。然而，程式執行後到底會不會有問題，還是得要做了「測試」才知道。實際上，平常在開發功能的過程中，開發者就一直在做測試了。假設你正在
2022/8/7 01:24PJCHENderhttps://pjchender.blogspot.com/2022/08/blog-post.html
在 Windows 上配對 Apple 鍵盤時需要輸入 PIN 碼（Apple keyboard PIN）
- #Mac
keywords: Mac 鍵盤、PIN 碼、Magic Keyboard、Windows、巧控鍵盤最近在把 Magic Keyboard 和 Windows 筆電配對時發生一件很奇怪的事，就是當我點擊「連結」時，它一直要求我「輸入『鍵盤』的 PIN」，但重點是，螢幕上沒有跳出任何告知我鍵盤 PIN 碼的畫面，我也不知道鍵盤的 PIN 碼到底什麼是什麼。後來找到了這篇文章（How do I pair apple wireless keyboard with windows 10），和底下留言的人說的一樣，這個解法非常荒謬，但它真的有效！後來我發現，原來在 Windows 配對 Magic Keyboard 時，重點是配對時需要在電腦上先隨意輸入一組 PIN 碼，接著再用 Apple 的鍵盤輸入同樣的 PIN 碼後按 Enter 就可以了，像是這樣：先讓你的鍵盤可以被電腦搜尋到，然後在電腦上點擊「新增藍芽或其他裝置」選擇「藍芽」找到鍵盤後，點擊「連結」這時候它會要求你「輸入『鍵盤』的 PIN」，這時候用「電腦原本的鍵盤」輸入任意一組數字（例如，12345678）輸入完後用滑
2021/8/30 22:26PJCHENderhttps://pjchender.blogspot.com/2021/08/windows-apple-pin-apple-keyboard-pin.html
從找衣服了解時間複雜度（Time Complexity）
- #algorithm
剛剛用日常上班前挑衣服的例子和沒學過程式的 00 說明時間複雜度的概念很好理解耶～！例子是這樣的... 一早要出門的時候，想要從衣櫃中找出紅色的上衣。其中一種方式是像左圖一樣，這是掏寶上很熱門的「疊衣服褲子收納神器」，雖然看起來整理的很乾淨，但如果你要從中找到紅色的衣服，你就得要由上而下一件一件找，最糟的情況就是一直翻到最下面才能找到你要的紅色衣服。另一種方式是像右圖一樣，把衣服用立起來的方式，一眼就可以看到紅色的衣服在哪，直接拿出來，幾乎不用找。左圖的那種方式，時間複雜的就是 O(n)，n 就是衣服的件數，雖然紅色的衣服有可能就放在最上面，一眼就可以看到，但在探討時間複雜度的時候都要考慮最差的情況，所以如果你有 n 件衣服，最差的情況就是要把 n 件衣服都翻過才會找到紅色那件。右圖的方式它的時間複雜度是 O(1)，在你沒有忘記其實衣服已經被丟到洗衣籃的前提下，你看一眼，翻都不用翻就可以把紅衣服直接取出（請先忽略掉人腦內建的視覺搜尋系統，那是另一個有趣的故事 XD）。這種不用一個一個找，就直接取出的，時間複雜度就是 O(1)。有了這個時間複雜度的概念後，是不是覺得左邊的那個
2021/5/4 00:15PJCHENderhttps://pjchender.blogspot.com/2021/05/time-complexity.html
心得2021 求職面試心得分享
- #職涯
由於過去求職時在 ptt 上或許多個人網誌中獲得了許多幫助，因此這次也來分享自己面試的心得，希望對於求職的大家們能夠有些幫助。這次求職過程中，在和幾位不同的 Team Lead 或是 CTO 面談的過程中，真的讓我感受到多數厲害的人總是自信而謙虛的，他們不會透過問題來讓你覺得自己不懂，反倒是很 open-minded 讓你感受到雖然這個自己現在不懂，但沒關係，甚至會進一步透過提問來協助你進一步釐清自己的思路。同樣地，我也期許對於自己的專業能夠是「自信而謙虛」的態度。過去雖然常聽大神說，工作一陣子後，通常就不用自己找工作，而是靠別人介紹或挖角，但我可能還沒到這個階段，周圍沒什麼人介紹，更別說是挖角，所以還是只能靠自己 XDD。下面是我這次有面試的幾間公司，主要找公司市場不侷限於台灣的公司，面試的職缺全部都是前端工程師。 Line Pay 首先 Line Pay 和 Line Taiwan、Line Bank 雖然都隸屬於 Line 集團底下，但在台灣是三間不同的公司。Line Pay 的面試過程較嚴謹，這次從投遞履歷到最終回覆的時間約需要一個多月的時間。 Line Pay 公司的
2021/4/26 23:01PJCHENderhttps://pjchender.blogspot.com/2021/04/2021.html
心得ALPHA Camp X 天下雜誌：那些年我們一起走過的數位轉型
這次很幸運有機會能夠擔任 ALPHA Camp 與天下雜誌合作舉辦的實體／線上活動，也是我自己第一次擔任活動主持人。從小，我家就非常多與天下相關的雜誌，不論是天下、康健、Cheers 都有，因為我爸媽算是很早期的訂戶，所以一開始收到 ALPHA Camp 詢問能否的擔任活動主持人時，我內心是有些興奮的，是一種竟然可以有機會進到從小就一直在接觸的媒體的雀躍感，而且天下雜誌多數時候也給我相當正面的感受，算是台灣媒體界的清流之一。除了天下雜誌相當知名的媒體之外，我也很好奇工程師在當今的媒體產業中究竟扮演了什麼角色。主力是在開發「內容管理系統」？或多在進行資料視覺化的專案？在這次的活動中很幸運能夠聽到已經在天下雜誌 10 多年的資深產品經理－紹謙，和數位轉型過程中加入團隊，負責從專案發想到實際落地的資深工程經理－世彥，一起來聽他們分享天下雜誌的數位轉型。數位轉型是什麼？在聽演講前，其實我完全不知道「數位轉型」究竟是怎麼一回事，我單純地以為就是把紙本書變成電子書，或是推出幾個 App 後，就算是完成了數位轉型？數位轉型不是事件的完成，而是持續且沒有終點的歷程然而，在聽完兩位講者的分
2021/4/20 21:03PJCHENderhttps://pjchender.blogspot.com/2021/04/alpha-camp-x.html
gRPC 是什麼？以 Golang 進行示範與說明
gRPC 說明影片 @ BESG :::tip source code 對應的程式碼可檢視 besg-grpc 的 repository。 ::: gRPC 是什麼：以 Golang 說明與實作 RPC 的全名是 remote procedure call，主要是作為電腦和電腦間溝通使用。A 電腦可以呼叫 B 電腦執行某些程式，B 電腦會將結果回傳給 A 電腦，A 電腦在收到回應後會再繼續處理其他任務。RPC 的好處在於，雖然 A 電腦是發送請求去請 B 電腦做事，但其呼叫的方式，就很像是 A 電腦直接在呼叫自己內部的函式一般。 gRPC 也是基於這樣的概念，讓想要呼叫 server 處理請求的 client，在使用這支 API 時就好像是呼叫自己內部的函式一樣簡單自然。從功能面來說，gRPC 就像 Web 常用的 Restful API 一樣，都是在處理請求和回應，並且進行資料交換，但 gRPC 還多了其他的功能和特色。 gRPC 是由 Google 開發的開源框架，它快速有效、奠基在 HTTP/2 上提供低延遲（low latency），支援串流，更容易做到權限驗證（authent
2021/3/26 20:53PJCHENderhttps://pjchender.blogspot.com/2021/03/grpc-golang.html
React讓父層可以取得子層的 DOM 元素：ForwardRef 的使用
- #React
圖片來源：Algolia blog 內文資料來源：Forwarding Refs @ React Docs 目的有些時候父層的元件希望能夠取得子層的 DOM 元素（例如，button 或 input），以便能夠在父層控制子層 DOM 元素的 focus, selection 或 animation 的效果。這時就可以使用 Ref forwarding 來讓父層取得子層 DOM 元素，以便控制和操作它。 :::note 通常需要被 forwardRef 的子層元件會是封裝好的元件（例如，套件），其他使用它的開發者無法直接修改，因此才需要透過 forwardRef 把控制權交給父層元件，讓其他開發者可以直接控制。 ::: forwardRef 基本使用舉例來說，我們建立一個 AwesomeInput 元件： const AwesomeInput = (props) => ; 接著我們在父層元件中使用元件： const App = () => { return ;
2021/3/8 00:10PJCHENderhttps://pjchender.blogspot.com/2021/03/react-dom-forwardref.html
敏捷開發：你我心中，都有一個屬於自己的 MVP
- #筆記整理
由於自己沒有真的很理解過敏捷開發或 Scrum 到底是怎麼一回事，但公司的新專案又開始想要嘗試用這種方式來做 MVP，基於凡事問網友的心態，在 ALPHACamp 社群以及 Twitter 上得到了很多有價值的回饋，很感謝大家分享意見讓我知道。我的問題大概是這樣的：「想要請問大家所謂的敏捷開發？團隊認為敏捷開發就是要快，不用管太多細節，先推出去收到市場回饋再來修改。但很多工程面的東西像是 DB 的設計，API 的規格的改動，添加幾個欄位還好，但若是動到比較大的架構改起來都很痛。是真的想要了解大家在碰到這種情況是怎麼處理？因為我沒有深入理解過敏捷開發，不清楚在實際執行上的細節，只知道每次都說就是要快，先不考慮其他情況。是不是我們沒有掌握到敏捷開發的核心？還是具體來說有那些東西是可以很「敏捷」？哪些東西不適合嗎？先謝謝有經驗到大家」下面則整理大家的想法和意見。 :::caution 本人並沒有任何實際了解過敏捷或 scrum 的學習經驗，因此若有任何錯誤或想法，都歡迎提出並一起討論。 ::: 敏捷的重點在於快速應對市場需求變化的能力首先，敏捷的重點在於快速應對市場需求變化的
2021/1/30 00:37PJCHENderhttps://pjchender.blogspot.com/2021/01/mvp.html
掘竅Golang - 使用 slice of pointers 或 slice of structs
- #golang
TL;DR; 如果這個 slice 或 slice 中的元素有可能會被操作修改，那麼就用 slice of pointers；如果這個 slice 單純只是拿來讀取，那麼就用 slice of structs；或者也可以無腦的使用 slice of pointers 以避免後續不小心而產生的 bug。為什麼會看到 slice of pointers 的用法在 Golang 中常會看到 slice 中存放的是 slice of pointers，使用 slice of pointers 或 slice of structs 有幾個很重要的差別。先來看看下面的程式碼。假設我們先定義一個名為 Vertex 的 struct： type Vertex struct { X int Y int } 接者在建立 slice of struct Vertex：當我們把「slice 中的 struct」取出來的時候，實際上是把 slice[1] 複製一份到 point1 裡面，因此即使修改了 point1 內的 X 和 Y，在輸出 slice 時並不會看到改變 func main() { va
2020/12/30 10:59PJCHENderhttps://pjchender.blogspot.com/2020/12/golang-slice-of-pointers-slice-of-struct.html
MobileAndroid Samsung Note 10 vs. Apple iPhone mini 12 使用心得
- #Mobile
- #數位生活
我是一個對智慧型手機莫名有興趣的人，曾經在 hTC 打工時寫過幾篇開箱文、去年也寫過 Samsung S10+ 和 Note 10 的簡單比較，從智慧型手機出到現在，曾經用過 Micrsoft Lumia 620、LG G 系列、小米 Mix2S、小米 Mi 9、Google Pixel 3XL、Samsung S 系列，一直到現在用的 Samsung Note 10。雖然換過許多不同的裝置，手邊用 Mac 和 iPad，耳機使用的是 AirPods Pro，但就是從來都沒有實際用過 iPhone。從去年的 iPhone 11 到今年年初推出的 iPhone SE 2020 都吸引到我一波，然後都忍住了 XD，到了年底的 iPhone 12 mini 是壓倒駱駝的最後一根稻草，是時候來感受看看所謂蘋果生態系的時候了！這篇文章就來分享一下當前使用 Note 10 和 iPhone 12 mini 的體驗心得。前言我覺得現在聊手機品牌，特別是聊到安卓（Android）和蘋果（Apple）的比較並不是一個令人太愉快的經驗，因為和他人討論這東西時，已經變成很像在聊「政治」，大家有自己很
2020/12/20 22:23PJCHENderhttps://pjchender.blogspot.com/2020/12/mobile-android-samsung-note-10-vs-apple.html
go-pkgcontext package
- #golang
此篇為各筆記之整理，非原創內容，資料來源可見下方連結與文後參考資料： Understanding the context package @ rungo pkg/context @ pkg.go.dev context package 最重要的就是處理多個 goroutine 的情況，特別是用來送出取消或結束的 signal。我們可以在一個 goroutine 中建立 Context 物件後，傳入另一個 goroutine；另一個 goroutine 即可以透過 Done() 來從該 context 中取得 signal，一旦這個 Done channel 關閉之後，這個 goroutine 即會關閉並 return。 Context 也可以是受時間控制，它也可以在特定時間後關閉該 signal channel，我們可以定義一個 deadline 或 timeout 的時間，時間到了之後，Context 物件就會關閉該 signal channel。更好的是，一旦父層的 Context 關閉其 Done channel 之後，子層的 Done channel 則會自動關閉。重要概
2020/11/16 23:03PJCHENderhttps://pjchender.blogspot.com/2020/11/go-pkg-context-package.html
go-pkgtime/rate package
- #golang
time/rate @ go.pkg Golang 標準庫限流器 time/rate 使用介紹 Golang time/rate 限速器 @ 簡書重要概念在 Golang 中使用 Limiter 來控制在特定頻率內，某個事件是否允許被執行。這個 Limiter 是實作 Token Bucket 的方式來達到限流的目的，也就是會先設定： event rate（r）：將 token 放入桶子的頻率，例如每秒將放入 n 個 token 到桶子（bucket）中。 burst size（b）：一個桶子（bucket）中能夠容納的 token 數量一開始桶子會是滿的，只要桶子中有剩餘的 Token 就可以取用，若沒有剩餘的 Token 則需要等待後才能取用。建立 Limiter：NewLimiter keywords: NewLimiter 使用 NewLimiter 來建立一個 non-zero Limiter： func NewLimiter(r Limit, b int) *Limiter Limiter 包含兩個主要的屬性： r：rate，型別是 Limit（ Limit 的型別
2020/11/16 22:16PJCHENderhttps://pjchender.blogspot.com/2020/11/go-pkg-timerate-package.html
AppTypora 自動上傳圖片到 imgur (for Mac)
- #APP分享
Typora 一直都是我覺得最好用的 Markdown 文字編輯器（目前沒有之一），除了所見即所得的功能之外，也可以在 markdown 原始碼間自由切換，而且因為我平常有自己備份 markdown 文件的習慣，因此也不太習慣使用第三方的軟體（例如，Bear、Evernote、Notion 等等）來做編輯，一來想要把所有內容備份到本機時比較麻煩、二來也比較難快速轉移發布到雲端空間的自由度。此外，還可以透過 CSS 直接調整成自己喜歡的樣式。大約從 2020 年 2 月開始 Typora 就支援將拉進 Markdown 的圖片自動上傳到雲端空間（imgur, AWS S3, Github, ...等）的服務，覺得這功能真的超級方便的：要特別留意的是，這些上傳到 imgur 的圖片都是公開的，所以記得不要上傳較隱私的文件或圖片。 STEP 1：安裝 uPic App Typora 整個幾個不同的第三方 App 可以用來上傳圖片，其中比較方便的包含 uPic 和 iPic，兩套都是免費的，前者是開源的軟體，後者則可以透過 App Store 下載。在這裡就以 uPic 為例，只需透過 h
2020/8/23 01:54PJCHENderhttps://pjchender.blogspot.com/2020/08/app-typora-imgur-for-mac.html
心得玩 moba 一年多來讓我了解什麼是團隊
- #個人思考
- #學習心得
說實話，以前的我其實不懂真正「團隊」的概念，就覺得好像是「分工合作」後，各自把自己該做的事情做好做完，就是一個團隊。而過去不論是打過的棒球、籃球這類團隊運動，也常覺得團隊中好像只要少數幾個很強的，就可以帶球隊贏得勝利。但和同事們玩一年多的 moba 下來，才真的讓我體會到什麼是「團隊」。團隊中當然還是有比較強的人，但只要遇到一個破口，就可以讓全隊輸掉。所以若想要贏得遊戲，只有讓大家都一起變強。當自己夠強的時候，就試著 carry 他人，讓整個團隊更好；當自己不夠強的時候，就趕緊把自己 backup 好，輔助而不要變成破口（不要小看自己的重要）。在小區域的競賽中，當然有機會靠一個人 carry 全場，但到了更高階的排位，只有大家一起進步，團隊才有機會贏。只是單打獨鬥不容易向前，而且可能會常覺得其他人很廢；但若是能讓團隊一起變強，大家便能一起更順利地往前！ --- #我其實不擅長玩moba #路人常說我廢 #好險大哥們carry我
2020/7/26 12:10PJCHENderhttps://pjchender.blogspot.com/2020/07/moba.html
掘竅了解這些，更快掌握 TypeScript 在 React 中的使用（Using TypeScript in React）
- #React
- #typescript
tl;dr $ npm init -y # 初始化 npm $ npm install -D typescript # 安裝 typescript $ npx tsc --init # 產生 TS 設定檔 tsconfig.json 內文這篇文章主要是給想要開始學習 TypeScript，並將 TypeScript 整合進 React 專案中的開發者，也是我自己在學習將 TypeScript 使用於 React 前，很希望有人能夠先提示我的先備知識或觀念。主要是因為若只是單純想要整合 TypeScript 到 React 中使用，你並不需要了解 TypeScript 中所有的語法就可以開始做這件事，但在學習前若沒有人整理哪些東西需要先看，哪些東西可以跳過之後再補的話，在學習上會顯得有些吃力。因此這篇文章的重點就是去蕪存菁的說明「在 React 中使用 TypeScript 時」需要先知道些什麼，相信閱讀這篇文章後，能夠節省你許多繞圈圈的時間。在這篇文章中不會說太多關於 TypeScript 語法深入的理論或概念，基本上就是用出來給讀者看，若對於 TypeScript 的語法想要有
2020/7/18 12:04PJCHENderhttps://pjchender.blogspot.com/2020/07/typescript-react-using-typescript-in.html
資安跨站偽造請求（Cross Site Request Forger, CSRF, XSRF）的說明與預防
- #internet security
Photo by Clint Patterson on Unsplash keywords: csrf, internet security, one-click-attack, session-riding, XSRF Cross Site Request Forgery 是什麼跨站偽造請求（cross-site request forgery）也稱為 one-click attack 或 session riding，通常縮寫為 CSRF（有時發音為 sea-surf）或 XSRF，這是一種利用伺服器所信任的網站來發送惡意請求的攻擊；和 cross-site scripting (XSS) 不同，XSS 是透過在網站上輸入惡意程式碼的方式來進行攻擊，通常利用的是「使用者對目標網站」的信任；而 CSRF 則是攻擊者利用「目標網站對該信用者」的信任。透過 CSRF 攻擊有機會讓使用者在無意間修改受害者的帳號密碼，或將帳戶內的金額轉帳給攻擊者。 CSRF 通常有以下流程：使用者使用正常流程登入「目標網站」「惡意網站」利用目標網站對使用者的信任（credentials），例如 Co
2020/5/27 19:38PJCHENderhttps://pjchender.blogspot.com/2020/05/cross-site-request-forger-csrf-xsrf.html
資料結構Binary Search Tree
- #algorithm
- #data structure
keywords: data structure, recursive function, 遞迴函式, queue, 佇列此系列筆記主要依照 [Udemy] Learning Data Structures in JavaScript from Scratch by Eric Traub 的課程脈絡加以整理，但部分程式碼是消化後以自己較易理解的方式重新撰寫，因此和原課程內容有些出入。 Binary Search Tree 有一個很重要的概念是，它是有「階層」的概念在內的，並不是把所有數字放在同一層排序在建立 BST instance 時會把 root 的 value 一併帶入新增值到 BST 時，會判斷這個值比 root 大或小，再以同樣的邏輯分派到 BST 的左下側或右下側檢驗 BST 中包含是否包含某一值時，也是使用同樣的邏輯，先判斷這個值比 root 大還是小，接著依同樣的邏輯往左下側或右下側尋找找出最小值的方式是從 root 開始一路往左下找；找出最大值的方式則是從 root 開始一路往右下找要疊代整個 BST 元素的方式可以分成 Depth First Trave
2020/5/26 00:20PJCHENderhttps://pjchender.blogspot.com/2020/05/binary-tree.html
資料結構Hash Table
- #algorithm
- #data structure
keywords: data structure 此系列筆記主要依照 [Udemy] Learning Data Structures in JavaScript from Scratch by Eric Traub 的課程脈絡加以整理，但部分程式碼是消化後以自己較易理解的方式重新撰寫，因此和原課程內容有些出入。觀念 Hash Table 本身是一個陣列，裡面的每一個元素都是帶有 key-value 的物件，稱作 Buckets。透過自訂的 hash 函式，可以決定新增的資料要放在 Hash Table 中的哪個位置。當有不同的內容放到相同編號的 Buckets 時，會發生所謂的 collision，這時候相同 Bucket 內的資料，會透過 Linked List 的方式串接在一起。當 insert 了相同 key 的資料時，會有更新的效果。其中會包含的方法有： hash insert get, retrieveAll Big O Notation Hash Table 常用在儲存使用者的 Email、使用者資料。缺點：除非在同一個 bucket 內，否則資料（Node）
2020/5/26 00:20PJCHENderhttps://pjchender.blogspot.com/2020/05/hash-table.html
資料結構Linked List
- #algorithm
- #data structure
此系列筆記主要依照 [Udemy] Learning Data Structures in JavaScript from Scratch by Eric Traub 的課程脈絡加以整理，但部分程式碼是消化後以自己較易理解的方式重新撰寫，因此和原課程內容有些出入。資料結構（Data Structure）是什麼不同的資料結構有不同的強弱項，有的在儲存（storing）和紀錄（recording）資料的速度較快，有的則是在搜尋（searching）和提取（retrieving）上比較快。資料結構的使用會影響到效能表現（performance）和程式運行的效率 Linked List Linked List 中，會紀錄該 Linked 的 head 和 tail 每一個 Node 則會紀錄它的 value, prev 和 next 其中會包含的方法為: addToHead, addToTail removeHead, removeTail search, indexOf Big O Notation Constant Time - O (1) 新增／移除 Head 新增／移除 Tail
2020/5/26 00:19PJCHENderhttps://pjchender.blogspot.com/2020/05/linked-list.html
掘竅為什麼要使用 rel="noreferrer noopener"，談 target="_blank" 的安全性風險
- #HTML
- #internet security
在網頁撰寫的過程中，經常當我們要另開視窗時，很容易使用這樣的寫法，但如果你有使用 ESLint 的話，它會建議你在 a 標籤中要加上 rel="noreferrer noopener"，也就是： Google 之所以要加上這行，是因為當瀏覽器使用 target="_blank" 來打開新視窗時，新的視窗所在的網頁是有辦法透過 window.opener 這個物件來操作你原本的頁面。舉例來說，當你在 A 站點了超連結另開新視窗到 B 站時，B 站可以在它的頁面中執行： window.opener.location = 'https://www.google.com'; 這時候你會發現你在 A 站的網頁默默轉址到了 Google 的頁面。這種做法主要是利用一般人只會注意新開的視窗（B 站），而忽略了原有的視窗（A 站），但若不進一步處理，新開的視窗是有機會可以修改到原視窗內所瀏覽的網
2020/5/25 18:09PJCHENderhttps://pjchender.blogspot.com/2020/05/relnoreferrer-targetblank.html
Mobile給開發者用：將 Android 裝置畫面投影到 MAC / PC 上的工具（scrcpy）
keywords: screen sharing, screen mirroring, miracast, android, screen recording 💡 備註：如果你是 iOS 裝置要投放到 Mac 的話則非常簡單，透過內建的 QuickTime 就可以了，只需選擇「File -> New Movie Recording」後，將來源選到 iOS 裝置即可，可參考圖一和圖二的說明。最近因為有把手機（Android）的操作畫面投影到電腦上的需求，試了幾套不同的工具後，發現許多工具都需要在手機和電腦端同時裝 App，除了會有較明顯的時間差外，大多都是透過 Android 內建的「投放」功能來達到這個效果。但這裡因為某些理由，我不能使用原生的投放功能來投放螢幕，而是需要直接把手機畫面顯示在電腦上，找這找著找到這套很好用的 Android 投放手機螢幕工具，稱作 scrcpy。這套工具除了可以投放螢幕外，還可以錄製螢幕、傳輸檔案、並直接由電腦操作手機，最重要的是操作流暢度非常好！但這套工具比較是給開發者的，因為需要透過終端機下一些指令，當然你也可以照著打就好了。關於使用的方式
2020/5/1 00:36PJCHENderhttps://pjchender.blogspot.com/2020/05/mobile-android-mac-pc-scrcpy.html
發佈 npm 套件 - 從手動到自動（7）：Coveralls 的測試覆蓋率與 README 中的標章（code test coverage badge）
keywords: deploy, publish, release, CLI, npm, package.json 這篇將會是這個系列文章的最後一篇，到目前為止已經可以在「把專案推到 github 上」後，自動在 CI 上幫執行測試、打包專案、更新版號、建立 CHANGELOG、發佈到 npm、產生 commit 和在 Github 上產生 release tags。最後一篇則要來說明 README 中常使用到的標章（badge）。先來看一些常見的標章，最後再說明如何產生相當重要的「程式碼測試覆蓋率（code test coverage）」標章吧！在 README 中加入常見的 badge Travis CI 的 badge 一般 README 中的 badge 其實就是單純套用在 markdown 中的圖檔，而許多不同的服務會提供各自的 badge 讓大家使用，以 Travis CI 來說，在官網的文件 Embedding Status Images 即有說明套用的方式，只需點選 Travis CI 專案中的 badge 即會顯示嵌入 markdown 的寫法： [![Buil
2020/2/20 00:30PJCHENderhttps://pjchender.blogspot.com/2020/02/npm-7coverall-readme-code-test-coverage.html
發佈 npm 套件 - 從手動到自動（6）：semantic-release 的外掛設定與自動產生 CHANGELOG
keywords: deploy, publish, release, CLI, npm, package.json 在上一篇文章中已經有透露如果要對 semantic-release 套用外掛（plugin）或進行更多的設定，可以在根目錄建立一支 .releaserc.json 的檔案，現在我們一樣可以透過這支檔案，來讓 semantic-release 自動產生 CHANGELOG.md 的檔案。安裝 semantic-release 外掛預設的情況下，semantic-release 就已經安裝了幾個外掛（plugin），像是： "@semantic-release/commit-analyzer" "@semantic-release/github" "@semantic-release/npm" "@semantic-release/release-notes-generator" 為了要產生 CHANGELOG 檔案，並且保存推進 git 中，需要再安裝 @semantic-release/changelog 和 @semantic-release/git 這兩個外掛
2020/2/19 10:35PJCHENderhttps://pjchender.blogspot.com/2020/02/npm-6semantic-release-changelog.html
發佈 npm 套件 - 從手動到自動（5）：semantic-release 自動發佈到 npm
keywords: deploy, publish, release, CLI, npm, package.json 在前一篇文章中，我們已經知道預設的情況下 semantic-release 它會自動在 CI 的過程中將套件發佈到 npm 上，如果你的套件是在本地打包好，而且最終打包好的 dist 資料夾也會上 git 的話，這麼做當然沒問題。然而，多數實際的情況是，dist 資料夾因為是打包壓縮過的專案，因此一般是會寫入 gitignore 中而不會上 git 的。因此，在上篇文章的最後，你會發現透過 npm install 把我們的套件下載後，會發現套件裡面「空空的」而沒辦法使用。在這篇文章中我們會說明怎麼樣在 Travis CI 中，執行打包的動作，在 CI 中打包完之後 dist 資料夾中就會有東西，此時發佈到 npm 上時，套件就可以正常運作了。修改 .travis.yml 設定檔要讓 Travis CI 可以幫我們執行 build 的指令，只需修改 .travis.yml 這支設定檔：這裡有兩個要留意的地方：在 release 階段中透過 script 的項目，
2020/2/17 23:05PJCHENderhttps://pjchender.blogspot.com/2020/02/npm-5semantic-release-npm.html
發佈 npm 套件 - 從手動到自動（4）：semantic-release 自動更新套件版號
keywords: deploy, publish, release, CLI, npm, package.json 在這篇文章中我們會先說明「語意化版本（semver）」，接著說明如何透過 semantic-release 這個工具結合 CI 來自動更新套件的版本。這篇文章算是這整個系列文章中相對最複雜的一篇，只要完成了這篇設定，只後的動作都會輕鬆很多。語意化版本（semver）既然要發佈到 npm 上，很重要的一點自然就是套件的版本號，而 npm 上所有的套件都是遵循「語意化版本」的「慣例」。「語意化版本」的全名是 Semantic Versioning，常會簡稱為 semver，它的核心概念在於讓使用該套件的開發者在看到版號時就能夠知道該版本有無重大更新或需要留意的地方。一個套件的版本共會由三個數字組成，像是 1.0.0，三個數字由左至右，分別指的是「主版號（major）」、「次版號（minor）」和「修訂號（patch）」。每個版號的變更都有它所代表的意義：主版號（major）：表示這個套件修改了原本的 API，使其無法向下相容，這是開發者最需要留意的情況，算是重大改
2020/2/12 23:31PJCHENderhttps://pjchender.blogspot.com/2020/02/guide-npm-4semantic-release.html
發佈 npm 套件 - 從手動到自動（3）：整合 Travis CI 和 Github 進行自動化測試
keywords: deploy, publish, release, CLI, npm, package.json 在前一篇文章中我們已經說明了如何透過手動的方式將套件發佈上 npm，接著就可以進一步了解如何轉為自動化發佈，而自動化發佈的過程則有賴於「持續整合（Continuous Integration, CI）」的服務。「持續整合」簡稱 CI，簡單來說，就是指當開發者把程式碼提交（commit）到 repository 後，可以自動地進行後續的一些動作，這些動作像是執行測試、打包原始碼、發佈和部署專案程式碼。例如，當開發者把程式碼發佈到 Github 上後，就可以透過 CI 立即對剛推上 Github 的程式碼進行測試，確保最新的程式碼是可以正確運作的，測試結束後則自動地繼續進行打包和部署。由於持續整合的這些動作（例如，執行測試、打包、部署）都需要伺服器才能執行，因此勢必需要透過一些工具或服務才能達到。常見的 CI 服務包括 Travis CI、CircleCI，或是由 Github 本身提供的 Github Actions 等等，這些服務都能和 Github 上的 repo
2020/2/7 10:39PJCHENderhttps://pjchender.blogspot.com/2020/02/npm-3-travis-ci-github.html
發佈 npm 套件 - 從手動到自動（2）：手動 publish 篇
keywords: deploy, publish, release, CLI, npm, package.json 在前一篇文章中，我們已經完成了基本的 package.json 設定，現在就來試著發佈上 npm 吧！如果你還沒完成前一篇的專案內容，可以到 Github 這裡下載。在邁入自動化發佈 npm 套件之前，我們仍然需要先了解如果要手動發布的話該如何執行，畢竟自動化的工具也就是幫我們把一連串的指令自動化執行。 ⚠️ 撰寫文章時使用的 npm 版本為 6.13.7 透過 npm publish 手動發佈套件其實要把套件手動發佈到 npm 上並不難，只需要透過 npm publish 這個指令就可以了。但在那之前，如果你還沒申請帳號的話，需要先到 npmjs 上註冊一個帳號。註冊完之後，讓我們來試試看，打開終端機進入到專案的根目錄： # 如果尚未登入 npm，需要輸入 npm 的帳號密碼 $ npm login 接著在專案目錄內輸入 npm publish $ npm publish 這時候就發佈到 npm 上面啦！是不是非常簡單呢！？你可以到 npmjs 點選右上角的頭
2020/2/3 23:38PJCHENderhttps://pjchender.blogspot.com/2020/02/guide-npm-2.html
發佈 npm 套件 - 從手動到自動（1）：發佈前所需的設定檔 package.json
keywords: deploy, publish, release, CLI, npm, package.json 在前一篇的文章中我們已經建立好了一個簡單的套件。現在要來說明 npm 套件中最重要的一支檔案 - package.json。 ⚠️ 撰寫文章時使用的 npm 版本為 6.13.7 package.json 每一個 npm 專案中，一定會包含一支 package.json，這支檔案就像是這個套件的「身分證」，裡面說明了和這個套件有關的各種訊息，其中像是套件名稱（name）、作者（author）、套件版本（version）等等。因此當你想要了解別人的套件時，可以先從 package.json 這隻檔案入手，同樣的，別人要認識你的專案時，一樣也會從這支檔案開始。這裡我們就先來撰寫 function-benchmarker 這個套件的 package.json 吧！下面列出一個 npm 套件中 package.json 會常用到的欄位，完整的說明可以參考 npm 官方文件： name, version：套件名稱與版本，如果要發布到 npm 的話，名稱和版本會形成一個識別碼，
2020/2/2 23:41PJCHENderhttps://pjchender.blogspot.com/2020/02/guide-npm-1packagejson.html
發佈 npm 套件 - 從手動到自動（0）：專案與套件建置篇
keywords: deploy, publish, release, CLI, npm 對於 JavaScript 的開發者來說要發布 JavaScript 套件到 npm 上面，只要對於 npm 的專案架構本身已經有基本的理解，並不是太困難的事。在這一系列的文章中，會說明如何從專案開發到發佈 npm 套件的這個流程，從手動透過 npm 的指令發佈到自動化持續整合（Continuous Integration, CI）的過程做一個整理。這裡，就讓我們先從手動開始。在這篇文章中會談到：建立隸屬於某 scope 底下的 npm 套件撰寫一個範例套件透過 rollup 打包範例套件透過 Jest 測試範例套件這篇文章主要是建立一個範例的 npm 套件，以供後續說明發佈使用，並且說明套件中通常會包含打包和測試的流程，若想要直接看最後套件完整的程式碼，可以看此 Github 上的 Commit。 ⚠️ 撰寫文章時使用的 npm 版本為 6.13.7。註冊 npm 帳號首先要請你到 npm 的官網上註冊自己的帳號。建立 npm (scoped) 專案一般的情況下，會習慣直接使
2020/2/2 20:53PJCHENderhttps://pjchender.blogspot.com/2020/02/guide-npm-0.html
Vue整合 Vue style guide, eslint-plugin-vue 和 VSCode
- #VSCode
- #Vue
在 Vue Style Guide 中對於 Vue 專案的程式風格提供了許多建議，但有些時候在撰寫程式時還需要額外留意這些撰寫風格反而變成一種負擔，好在這時候 Vue 提供了好用的 eslint-plugin-vue (@vue/cli-plugin-eslint)，透過 eslint 可以幫我們檢查哪些程式碼中的內容是不符合 Style Guide 所建議的，並且予以修正。同時搭配上 VSCode 後，可以在存檔後自動根據 eslint 的建議來重新編排程式碼，不只省下了許多需要調整撰寫風格的認知負擔，更重要的是省下了許多時間，可以專注在程式開發上。在這篇文章中就說明如何根據 Vue Style Guide 一併整合 eslint-plugin-vue 與 VSCode。安裝 eslint-plugin-vue 建立專案這裡快速的透過 Vue CLI 的工具快速建立專案： # 這裡使用的 Vue CLI 版本為 4.2.3 $ vue create vue-eslint-sandbox 安裝用於 Vue 的 eslint 設定檔套件接著透過 Vue CLI 安裝 eslin
2019/12/28 22:05PJCHENderhttps://pjchender.blogspot.com/2019/07/vue-vue-style-guide-eslint-plugin-vue.html
WebAPIsPicture In Picture of Video
- #JavaScript
- #WebAPIs
keywords: video, WebAPIs TL;DR 新技術一定有風險，瀏覽器有支援有不支援（目前只有 Chrome 預設是支援的），使用前應詳閱公開說明書！ // 檢驗瀏覽器有無支援 Picture In Picture API if ('pictureInPictureEnabled' in document) { // 有支援... } // 進入 video 的 PIP 模式 videoElement.requestPictureInPicture().catch((error) => { // 錯誤處理... }); // 離開 video 的 PIP 模式 document.exitPictureInPicture().catch((error) => { // Error handling }); 這篇文章內容主要整理自 An Introduction to the Picture-in-Picture Web API @ CSS Tricks Picture In Picture 是什麼？ Video 元素的 Picture in Picture 模式可以讓影片
2019/12/6 16:51PJCHENderhttps://pjchender.blogspot.com/2019/12/webapis-picture-in-picture-of-video.html
WebAPIsWeb Share API 的使用 - navigator.share
- #Mobile
- #WebAPIs
keywords: WebAPIs, mobile, navigator.share TL;DR // 判斷瀏覽器是否支援 Web Share API if (navigator.share) { // navigator.share 會回傳 Promise navigator.share({ title: 'Web Fundamentals', text: 'Check out Web Fundamentals — it rocks!', url: 'https://developers.google.com/web', }) .then(() => console.log('Successful share')) .catch((error) => console.log('Error sharing', error)); } Web Share API 的說明用手機瀏覽網頁的時候，不知道你有沒有注意過，當你按下分享按鈕時它會跳出一個選單，讓你可以選擇要分享到哪個 App 的選單，像是這樣：這個功能過去需要透過點擊手機瀏覽器上的「分享」後才會出現：但現在透過 Web Shar
2019/11/20 16:15PJCHENderhttps://pjchender.blogspot.com/2019/11/webapis-web-share-api-navigatorshare.html
Samsung沒辦法看訊息通知？讓 Bixby Routines 朗讀通知給你聽
平常在開車或是工作時，並不是非常方便看手機，這種時候若收到 Line 或者簡訊通知時，常常都只聽得到通知卻不知道也不方便點開來看內容，這時候就會很希望手機的語音助理能夠把通知直接念出來讓我知道，至少可以知道是不是有急著需要處理的事情。其實這個功能已經內建在三星這個看似毫無作用的 Bixby Routine 中了，這篇文章中就來看看可以怎麼樣使用。如果懶得看文字的話可以直接參考這個影片：進入 Bixby Routine 要進入 Bixby Routine 可以從「設定」-->「進階功能」-->「Bixby Routines」中找到：接著點擊上方的新增，可以為這個 routine 取個名稱，例如這裡我叫「唸給我聽」：接著就可以設定「如果⋯則⋯」，這裡我先設定手動啟動（即，已輕觸開始按鈕），平常我也會設成一旦連接到藍芽耳機就啟動：按下完成儲存後，像是這種需要手動開啟的 routine，會詢問你要不要新增到桌面上，點選是支後桌面上就會多了啟動和關閉這個 Routine 的按鈕：當你希望手機擁有朗讀通知的功能時，例如開車、工作時，只要點選這個按鈕，一旦有收到推播通知，手機就會念出來給
2019/11/16 00:21PJCHENderhttps://pjchender.blogspot.com/2019/11/samsung-bixby-routines.html
Mac如何透過 iMovie 輸出高畫質影片（4k, 1080p）
- #Mac
- #數位生活
iMovie 的專案會依據「第一部」匯入到時間軸中的媒體，以此決定這個影片最後可以輸出成多高的解析度，因此若你最後想輸出成 4K 的影片，只需要：先到網路上下載一部 4k 的影片（參考影片下載連結）新增一個全新的專案（專案一定要是全新的，因為是以第一個匯入時間軸的媒體來決定最後輸出的解析度）將 4k 影片匯入媒體後，拖曳到時間軸內，成功的話，在右邊齒輪（設定）的地方點一下，會看到解析度出現 4k 選項：接著，如果原本已經有編輯好的內容，可以複製貼在時間軸後面把第一個放入時間軸的 4k 影片移除選擇匯出成 4k 影片：專案一定要是全新的，因為是以第一個匯入時間軸的媒體來決定最後輸出的解析度示範操作影片參考資料 Cannot export movie to 1080p, already tried all the tips/tricks i researched. @ reddit
2019/9/3 15:00PJCHENderhttps://pjchender.blogspot.com/2019/09/mac-imovie-4k-1080p.html
多圖三星 Samsung S10+ Plus 與 Note 10 選擇困難？相機拍照、螢幕與效能比較心得
- #數位生活
- #samsung
keywords: samsung, camera, s10+, s10plus, note10, performance, screen 最近剛好有機會同時入手三星（Samsung）的 S10+ Plus 和 Note 10（不是 Note 10+），可以分享一下這兩隻使用上的心得。直接說結論：相較於 Note10，S10+ 的螢幕真的無可挑惕，色彩的呈現和解析度都非常棒；而 Note10 則是在 App 的安裝速度上有較明顯的提升。兩隻在主鏡頭的拍攝略有差異，主要體現在 Note 10 的成像有更明顯的對比，因此天空會更藍一些，較為吸睛，但有時對比太重會有色偏或修圖感較重的情況（覺得和這幾年 iPhone 成像對比也變強有些相似）；S10+ 則中規中矩，在顏色的呈現上和原本的色彩比較接近。台灣上市的 S10+ CPU 使用的是三星自家的 exynos 9820；Note 10 則是使用高通 Qualcomm 855。螢幕（screen）以前對於螢幕都沒有特別的感覺（不論是小米、三星、LG、HTC），至少不會讓我馬上感覺到「怪怪的」，但這次用了 Note10 之後，第一次感
2019/8/31 16:49PJCHENderhttps://pjchender.blogspot.com/2019/08/samsung-s10-plus-note-10.html
三星全面屏手勢操作，一個滑動手勢快速動作（關閉螢幕、返回上一頁）- One Hand Operation +
keywords: swipe gesture, samsung, one hand operation, lock screen, back 最近把手機換到三星，一開始一直有個地方很不習慣，之前在小米的 MIUI 上有提供了非常簡單易用的全面屏手勢，簡單來說就是把安卓傳統下方的三個功能鍵隱藏之外，只要透過「手勢」就可以做出回上一頁（從左右其中一側的螢幕向內撥）、回到主頁面、顯示應用程式清單頁的功能。但是一開始換到三星手機時找不到這個功能，雖然一樣有全面屏的設定，但其實只是把下方三個功能鍵的區塊變成「一條線」，使用方式和傳統的操作方式幾乎一樣。對於大螢幕的手機來說，每此回到上一頁還需要把手指放到最下方真的很不方便，要嘛就變成需要雙手操作。另一點不習慣的是電源鍵位置實在有點高，每次要關閉螢幕常要勾很久，而先前用的手機可以放置「關閉螢幕」的按鈕在桌面上，等於可以不用使用到電源鍵就可以做到關閉螢幕的功能。這兩個功能讓我在一開始切換過來時很不適應，直到我發現三星有推出自己的手勢功能 App - One Hand Operation + 後覺得實在是太好用了，這個官方推出的 App 比先前
2019/8/11 15:47PJCHENderhttps://pjchender.blogspot.com/2019/08/one-hand-operation.html
筆記使用 react-intl 在 React 實作多語系功能 i18n, internationalization
Photo by Aaron Burden on Unsplash keywords: i18n, Internationalization, intl, format react-intl @ Github API @ react-intl doc Components @ react-int doc 這篇文章主要說明如何透過 React Intl 來實作網頁上的 i18n，先備知識必須要已經基本會使用 React。 ⚠️ 文章使用的是 react-intl @ 2.9，部分功能在 3.0 後不再支援（文章最下方會說明）。開始使用 react-intl Intl Provider Component 我們直接用 create-react-app 的頁面來做練習：建立 React 專案直接透過 create-react-app 建立 React 專案： $ create-react-app react-intl-sandbox $ cd react-intl-sandbox 安裝 react-intl $ npm install react-intl 接著就可以透過 npm ru
2019/7/3 15:52PJCHENderhttps://pjchender.blogspot.com/2019/07/react-intl-react-i18n.html
筆記WebRTC 網路影音－實作篇（demo of media, video, audio）
Photo by freestocks.org on Unsplash 以下內容完全為整理自 30天之即時網路影音開發攻略(小白本) by 我是小馬克 @ iThome 的筆記，無原創內容。建立串流點播工具將影音檔轉成 HLS 用的串流檔透過 ffmpeg 即可將影音檔（例如，mp4）轉成 .m3u8 和 .ts 適用於 HLS 的串流檔。在 Node.js 中可以使用 fluent-ffmpeg 這個工具進行轉換： // ./ffmpeg-helper.js // 把 mp4 檔轉換成 .m3u8 索引檔和多支 .ts 檔 const ffmpeg = require('fluent-ffmpeg'); module.exports = { convertToHls: async (file) => { return new Promise((resolve) => { ffmpeg(file, { timeout: 432000 }) .addOptions([ '-profile:v baseline', // for H264 video codec '-level 3
2019/7/2 10:55PJCHENderhttps://pjchender.blogspot.com/2019/07/demo-of-media-video-audio.html
筆記WebRTC 網路影音－通訊協定篇（protocol of media, video and audio）
Photo by freestocks.org on Unsplash 以下內容完全為整理自 30天之即時網路影音開發攻略(小白本) by 我是小馬克 @ iThome 的筆記，無原創內容。影音資料的傳輸方法一：將檔案直接透過網路丟給對方透過 AirDrop 直接把檔案丟到別人的電腦先上傳到雲端空間，產生連結後給他人下載缺點：全部下載完才能開始聽或看影片方法二：以串流的方式傳送給對方將資料切成一段一段傳出去，使用者可以一邊下載一邊觀看不會花費使用者的儲存空間，串流的檔案會儲存在使用者的緩衝記憶體中，播完後即捨棄傳統的影音檔由表頭和表身組成，通常需要在所有資料都傳輸完成後，才可以根據表頭知道這個影音的編碼為何，解碼完後才可以開始觀看。串流的影音則需要先透過伺服器轉成「流容器」，流容器的一個檔案中包含多塊的表頭和表身，每次傳輸的資料都同時包含了表頭和表身，因此可以一邊傳送檔案一邊觀看影音。方法三：即時影音傳輸（直播、視訊通話）基本的原理和串流傳輸相同，但同時需要使用「推流傳輸協議」，例如 RTMP（Real Time Messaging Protocol —即時訊息
2019/7/2 10:53PJCHENderhttps://pjchender.blogspot.com/2019/07/protocol-of-media-video-and-audio.html
筆記WebRTC 網路影音－基礎知識篇（basic knowledge of media, video, and audio）
Photo by freestocks.org on Unsplash 以下內容完全為整理自 30天之即時網路影音開發攻略(小白本) by 我是小馬克 @ iThome 的筆記，無原創內容。圖片來源： 30天之即時網路影音開發攻略(小白本) @ iThome 聲音採集脈碼調變（PCM, pulse-code modulation）：可以用來指將類比訊號轉換為數位訊號的「方式」，或者指透過這個方式產生的「編碼」，可以想像成是聲音的 RAW 檔，又稱「無損編碼」。位元率 (bps) = 採樣率(hz) x 採樣大小(bit) x 通道位元率（bps, bit Per Second）：在聲音中通常使用 bps 來衡量音訊的品質，越高就代表質量越好，同時也需花費越多的儲存空間，例如 10 bps 指的是這段聲音每秒共有 10 bit 的資料量；32 kbps(32,000 bit/sec)，表示每秒要處理 32 kbit 的量，當音訊有 10 秒時，則需要 32 * 10 = 320 kbit 的空間。採樣率：表示每秒鐘會抓取幾次，採樣率越高音樂越優質，單位為 Hz。通道（chan
2019/7/2 10:50PJCHENderhttps://pjchender.blogspot.com/2019/07/basic-knowledge-of-media-video-and-audio.html
MiAmazfit 小米手錶匯出 GPS 路徑 (gpx, kml, tcx)
- #數位生活
之前出外爬山健走時，一直都有利用小米 Amazfit 米動手錶紀錄 GPS 軌跡的習慣，但就只是每次運動完看一下路徑截圖紀錄而已。最近心血來潮想要把裡面的 GPS 軌跡匯出來，發現內建並沒有這個功能，於是搜尋了一下，分享給有需要的朋友。小米 Amazfit 米動手錶匯出 GPS 軌跡因為小米 Amazfit 米動手錶官方的「小米運動」App 並不支援匯出 GPS 路徑的功能，搜尋了一下，發現 XDA 論壇已經有開發者寫好了－MifitTcxExport，並且持續都有在更新。這個 App 基本上和小米運動是一模一樣的，它是架構在小米運動的 App 之上，只是多了匯出 GPS 軌跡的功能。這種基於官方 App 添加額外功能的軟體一般稱作 Mod。下載的位置是在作者所提供的的 AndroidFileHost - https://androidfilehost.com/?w=files&flid=284328，或者可以從 XDA 論壇討論帖最下方一樣有提供這串下載連結。有興趣可以到 XDA 論壇的 [MOD][4.4+] MifitTcxExport based on officia
2019/3/31 22:00PJCHENderhttps://pjchender.blogspot.com/2019/03/amazfit-gps-gps-amazfit-gps-amazfit-app.html
關於「自學」這件事
- #個人思考
- #學習心得
Photo by Tim Mossholder on Unsplash 之前我覺得「自學」只是個包裝出來的詞，大家覺得自學好棒棒，所以補習班或線上課程就告訴你來這你就能「自學」。但我覺得幾乎沒有什麼東西是不用別人教「自己就學得會」的。但最近對於「自學」有了一些不一樣的想法。我現在認為自學能力指的是「能夠主動學習學會一件自己想學的事／技術」，簡單來說就是你能夠找到適合你自己的方式（不管是什麼方式，自己冥想或是補習上課），去學會你想學的東西。這通常是一個動態的過程，重要的是找到自己適合的方式。什麼意思呢？從我自己的經驗來說，以前還不懂 JavaScript ，最一開始我習慣的學習方式是先去網路上找線上課程，線上課程會讓我有一個通盤的概念，接下來我在自己去閱讀網路上其他的文件都會容易許多。當我進了職場後，聽到不懂的技術時，我就會用這樣的學習方式去主動學習新的技術。公司用的是 Ruby on Rails 這是我以前從沒用過的框架，於是我就上網看了和 Ruby on Rails 有關的線上課程，挑了適合自己的，下班後回家就繼續惡補；專案用的是 Vue，為了能夠快速參與這個專案，於是我
2019/3/17 09:09PJCHENderhttps://pjchender.blogspot.com/2019/03/blog-post.html
JS透過 JavaScript 處理檔案上傳（AJAX Upload byte / JSON / formData File）
HTML Input File 使用取得使用者想要上傳的檔案： multiple 屬性可以一次上傳多個檔案 accept 屬性可以限制上傳檔案的類型限制可上傳的檔案類型 Accept Attribute accept="image/png" accept=".png" accept="image/png, image/jpeg" accept=".png, .jpg, .jpeg" accept="image/*" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" 取得上傳檔案的基本資訊 keywords: fileInput.files 透過 e.ta
2019/1/16 15:23PJCHENderhttps://pjchender.blogspot.com/2019/01/js-javascript-input-file-upload-file.html
React搭配 React Router 打造一個動態麵包屑（dynamic breadcrumb）
這篇文章主要說明如何整合 react-router 來製作一個具有導覽功能的麵包屑（breadcrumb），也就是這個麵包屑可以根據當前使用者瀏覽的路由動態顯示出對應的名稱。由於會說明之所以這麼做的思路，因此篇幅較長；如果想要直接看如何使用這段程式碼，可以到 Github 上檢視 ReadMe，當中的說明較為精簡。前往範例頁前往 Github 看原始碼這篇文章不會從頭開始說明 React 和 React Router 的使用，因此建議閱讀前應該具備基本的 React 和 React Router 知識，不然可能會看得相當吃力。來看看怎麼做吧！建立 React 專案在這裡我們直接使用 create-react-app 來建立一個簡單的 React 專案，就稱作 react-router-breadcrumb： $ create-react-app react-router-breadcrumb # 透過 create-react-app 建立專案 $ cd react-router-breadcrumb # 進入建立好的專案資料夾另外，需要使用到 react-router-
2018/11/17 14:58PJCHENderhttps://pjchender.blogspot.com/2018/11/react-react-router-dynamic-breadcrumb.html
JS使用 JavaScript 解析網址與處理網址中的參數（URL Parameters）
- #JavaScript
- #web development
keywords: parse URL, parameter, URL, query string 由於前後端分離的趨勢，很多的前端網頁都是透過 API 的方式向後端要資料，而最普遍的就是使用 GET 方法在網址後面加上「參數（parameters）」或稱「查詢字串（query string）」來向後端索取資料。由於在瀏覽器內建用來發送 AJAX 請求的 Fetch API 似乎除了把整個 URL 代進去之外，好像沒有看到其他比較漂亮用來設定網址參數的方法，但是網址參數的部分有時候真的是又臭又長，把它整個放進去實在不太好閱讀。找了一下，發現其實不需要額外裝什麼套件就可以處理網址的解析和網址參數的設定，瀏覽本身提供了 URL 和 URLSearchParams 的 WebAPIs 可以使用。 // 直接把網址參數代入 fetch('https://github.com/search?q=react&type=Code') .then(function(response) { // Do something ... }) 如果對於網址各部分的名稱不太清楚，可以參考這篇：網址 URL 英
2018/8/31 22:47PJCHENderhttps://pjchender.blogspot.com/2018/08/js-javascript-url-parameters.html
Guide瞭解網頁中看不懂的編碼：Unicode 在 JavaScript 中的使用
- #JavaScript
- #web development
keywords: unicode, utf-8, JavaScript 如果只是想要簡單知道 Unicode 是什麼，沒有要瞭解使用方式的話，可以觀看計算機科學速成課（第四集）：二進制，在此教學影片的後半段有提到文字符號的編碼概念。在學習網頁開發的過程中，一定會慢慢的碰到所謂的 Unicode, UTF-8 還有其他幾種不同的編碼方式，這麼說你可能不會太有感覺，讓我們以 Facebook 為例，你可以看到在資料傳遞的過程中，常常有這種看不太懂的東西... 我們把它拿出來編排一下大概長這樣： "profiles": { "768320183253420": { "name": "PJCHENder\u7db2\u9801\u524d\u7aef\u8cc7\u6e90\u7ad9", "firstName": "PJCHENder\u7db2\u9801\u524d\u7aef\u8cc7\u6e90\u7ad9", "businessID": 0, "businessName": null, "allBusinessData": [ { "businessID": 0, "bus
2018/6/30 13:59PJCHENderhttps://pjchender.blogspot.com/2018/06/guide-unicode-javascript.html
APP如何撰寫 Typora 中 markdown 的客製化樣式
- #APP分享
- #markdown
此文件翻譯自 Write Custom Theme for Typora @ Typora 官網。翻譯時間為 2018-04-24。總結如果你想要為 Typora 撰寫客製化的樣式，你需要：建立一個新的 css 檔案，這個檔案的名稱不能包含大寫字母或空格，例如，my-typora-theme 就是一個有效的檔案名稱。寫 CSS 檔案。我們準備了一個 toolkit 讓你可以快速開始，並做一些簡單的測試。如果你是要從開始寫，可以從裡面的 template.less 開始。如果你想要套用 Wordpress 或 Jekyll 等現有主題的 css 檔案，只要把內容複製下來，加上那些在 css 檔案中沒有涵括到的部分樣式，像是 "toc" 的樣式，或是其他的 UI 元素。檢測／除錯你的 CSS 檔案：將你所建立的 CSS 檔案放入 toolkit/theme/test.css 中，並記得放入你引用到的圖片或字體檔，接著打開在 toolkit/core 和 toolkit/eletron 內的 HTML 檔案來預覽你的 CSS。若你的作業系統是 Mac 則使用 Safari
2018/4/24 11:55PJCHENderhttps://pjchender.blogspot.com/2018/04/app-typora.html
JS用 JavaScript 打造視訊錄影 APP（MediaRecorder API）
- #JavaScript
keywords: mediaRecorder, mediaStream, mediaDevices, Blob 最近剛好有需要透過瀏覽器來做錄影的操作，於是便和 Andyyou 和 Calvert 一塊研究開始試著實作，這個範例將示範如何透過瀏覽器內建的 MediaStream API 來打造影音錄影的功能。專案下載位置 @ Github 做出來的效果類似這樣：閱讀建議在閱讀這篇文章前，建議已經知道如何透過 JavaScript querySelector() 來選取 DOM 元素；對於 JavaScript 的 addEventListener 和 Promise 有最基本的觀念即可（知道 .then() 的使用）。由於需要透過瀏覽器取得系統的攝影機，在 Chrome 的瀏覽器操作下，這個 API 只能在安全的來源（secure origins only）下才能使用，也就是只能在網址來自 HTTPS 或 localhost 下才能使用，因此建議直接 clone 專案下來執行（貼到 codepen 或 JSFiddle 可能無法正常執行）。將程式碼拉下來執行後，可先簡單閱
2018/2/5 22:22PJCHENderhttps://pjchender.blogspot.com/2018/02/js-javascript-mediarecorder-api.html
5 分鐘快速了解 FontAwesome 5
- #CSS
- #FontAwesome
keywords: icon, logo, fa FontAwesome 正式釋出第五版，在 FontAwesome 5 中，除了主色系從綠色變成藍色之外，究竟第 5 版中還多了哪些新功能呢？讓我們用 5 分鐘快速了解 FontAwesome 5 帶來什麼新功能吧！本篇內容完全出自 FontAwesome 5 官網的內容，整理後希望能讓大家利用 5 分鐘了解 FontAwesome 5 的主要功能和差異，關於更多其他的使用方式還是建議大家到 FontAwesome 5 逛逛看看。將所有的圖示分成四大類在 FontAwesome 將所有圖示分成 4 大類，分別是 SOLID, REGULAR, LIGHT, BRADNS。在上面的圖示中，各類別下方的圖示如果以藍色顯示，表示需要是 FontAwesome Pro 的使用者才可以使用。Light 類別中所有的圖示都是給 Pro 使用者的。因此在使用的時候，不再需要一次載入一大包所有的圖示，而是可以根據自己的需要，分別載入這 4 類型的圖示。至於要怎麼知道該類型中有哪些圖示，可以到搜尋 ICONs 的地方，透過左邊的篩選視窗來看哪些
2017/12/8 16:33PJCHENderhttps://pjchender.blogspot.com/2017/12/5-fontawesome-5.html
JS談談 JavaScript 中的錯誤處理 Error Handling
- #JavaScript
圖片來源：Proper Error Handling in JavaScript @ Scotch keywords: exception handling, javascript, 錯誤處理, 例外處理本文主要內容翻譯自 Exceptional Exception Handling in JavaScript @ SitePoint 在撰寫程式的過程中發生錯誤（error）或出現例外情況（exception）是經常出現的情況，一般我們會把「錯誤」稱作「例外」，兩者可以交替著使用。當 JavaScript 程式執行的過程中發生錯誤時，它會丟出例外狀況（throw an exception），JS 並不會繼續往下走，而是尋找有沒有任何程式碼能夠處理這些錯誤（exception handling code），如果沒有找到任何可以處理錯誤狀況的程式碼，則它會從丟出例外狀況的函式中跳出（return），就這樣重複尋找錯誤處理的程式碼、跳出，直到觸及到最外層的函式（top level function）後終止。錯誤類型當例外產生時，會產生一個用來代表錯誤的物件。在 JS 中內建了 7 種
2017/12/7 11:17PJCHENderhttps://pjchender.blogspot.com/2017/12/js-error-handling.html

引用與交流近 90 天

全站關係圖 →

非正文連結

留言 57 條