titangene / hexo-blog Goto Github PK
View Code? Open in Web Editor NEWHexo blog source code
Home Page: https://titangene.github.io/
Hexo blog source code
Home Page: https://titangene.github.io/
https://titangene.github.io/article/javascript-bigint.html
本篇介紹 ES2020 (ES11) 提供的 BigInt。
https://titangene.github.io/article/flutter-install-on-windows.html
最近剛接觸 Flutter,於是就把在 Windows 上建置環境的記錄寫成一篇筆記,裡面包括 Android Studio 和 VS Code 的開發流程。
https://titangene.github.io/article/jest-build-test-env.html
最近在學習單元測試,而 Jest 是在前端蠻常見的測試框架,可透過建立測試來確保自己寫的程式碼是否符合需求,而且當改動程式碼時,才能確保是否因不小心而產生的 bug,測試能讓我更有信心的去重構程式碼。
https://titangene.github.io/article/dart-sass.html
Dart Sass 是 Sass 的主要實作,過去常見的是 Ruby Sass,而現今 Sass 官方推薦大家改用 Dart Sass,尤其是用 JavaScript 或 Node.js 開發的相關專案。
https://titangene.github.io/article/hackmd-dark-theme.html
HackMD 是我常用的寫作平台,因官方沒有提供暗主題的瀏覽模式,所以我就刻了自訂的暗主題,也將自訂主題開源在 GitHub,歡迎大家發 PR 給我,並記得幫我按個 ⭐️ 星。
https://titangene.github.io/article/css-import.html
CSS 的 @import 規則可以從其他 style sheet 中 import 樣式規則,本篇將介紹如何使用。
https://titangene.github.io/article/jest-typescript.html
TypeScript 是 JavaScript 的 typed superset,提供強大的型別檢查系統,讓你在編譯時期就能即時發現錯誤,而不是到了 runtime 才發生未知的 bug。上次介紹了 Jest + Babel 的測試環境建置,這次來介紹 Jest + TypeScript 的測試環境建置過程。
https://titangene.github.io/article/jest-timer-mocks.html
常用的 native timer 包括 setTimeout、setInterval、clearTimeout、clearInterval 等,用到這些 timer 的函數可以說是依賴於真實流逝的時間。如果 timer 要跑幾秒後才會觸發,或是要確認某函數是否在固定週期內被呼叫幾次,你不可能真的去等待 timer 跑完才能驗證結果吧,那根本是浪費時間。所以應該要使用 mock 函數來 mock 掉
https://titangene.github.io/article/recommend-chrome-extension-1.html
本篇推薦一些我常用的 Chrome Extension,包含複製分頁的 Markdown 格式的連結、將頁面變為按主題。
https://titangene.github.io/article/css-introduction.html
CSS 是 Cascading Style Sheets 的縮寫,是一種 style sheet (樣式表) 語言,可將自訂的樣式 (例如:字體、顏色) 附加在 HTML 文件上。這篇會先簡介 CSS,以及如何在 HTML 設定 CSS。
https://titangene.github.io/article/javascript-promise-finally.html
本篇介紹 ES2018 (ES9) 提供的 Promise.prototype.finally()。
https://titangene.github.io/article/git-detached-head.html
在 Git 的世界中,想回到過去,也許你會用 git checkout 跳至某個過去的 commit,但 Git 會提醒你正在「detached HEAD」狀態。那 detached HEAD 是什麼?它能做什麼?要怎麼離開 detached HEAD 狀態?
https://titangene.github.io/article/git-tag-object.html
本篇將深入探討 Git tag 是什麼?如何建立 tag?Git 是如何儲存 tag?與 commit 和分支的差別在哪?
https://titangene.github.io/article/jest-matcher-assertion.html
Assertion (斷言) 就要測試程式碼的執行結果是否符合預期,如果結果一致,代表測試通過,否則 assertion 就會拋出錯誤,代表測試失敗。而 Jest 提供多種 matcher,能讓你 assert 程式碼執行結果的正確性。
https://titangene.github.io/article/css-selector-1.html
Selector (選擇器) 可用來選擇 HTML 和 XML 文件中的節點,並將樣式屬性綁定到文件 (HTML 和 XML) 中的元素上。當選擇器與某元素 match 的時候,就可以對選到的元素進行 CSS 樣式設定。
https://titangene.github.io/article/git-delete-remote-branch.html
本篇將介紹如何刪除 GitHub 或 GitLab 的遠端分支,以及透過是否可刪除遠端 master 分支 (雖然通常不會這樣做),以了解如何在 GitHub 和 GitLab 修改預設分支。
https://titangene.github.io/article/javascript-string-padstart-padend.html
在字串的前綴或後綴補字元,是字串處理常見的需求,過去要自行處理,終於在 ES2017 (ES8) 新增了 String.prototype.padStart() 和 String.prototype.padEnd(),解決常見的需求!本篇來介紹它們,以及在 ECMAScript spec 是如何定義的,並附上 polyfill。
https://titangene.github.io/article/git--blob-object.html
本篇將深入探討 Git 如何運作,在執行 git add 將檔案加入 index 時,Git 會如何建立和儲存 blob 物件。
https://titangene.github.io/article/git-auto-crlf.html
在使用 Git 的過程中,若在不同作業系統編輯同一個 repo 的檔案,可能就會發生斷行字元的問題。Git 在 config 提供了 core.autocrlf 選項並用 .gitAttributes 檔案來處理斷行字元的問題。
https://titangene.github.io/article/css-selector-pseudo-class-2.html
Selector (選擇器) 可用來選擇 HTML 和 XML 文件中的節點,並將樣式屬性綁定到文件 (HTML 和 XML) 中的元素上。當選擇器與某元素 match 的時候,就可以對選到的元素進行 CSS 樣式設定。本篇會介紹 structural pseudo-class (偽類),包括 :root、nth-child、nth-of-type …等 selector。
https://titangene.github.io/article/bootstrap-vue-env-import-components.html
本篇介紹在 Vue CLI 環境中,要如何全部引入或部分引入 BootstrapVue 的 Vue plugin、元件、directive 和元件的樣式。
https://titangene.github.io/article/jest-describe-test-case.html
上次介紹了 Jest 提供的 matcher,可讓你驗證程式碼是否符合預期,而這次來說明如何透過 describe 和 test 區塊來組織測試案例。當需求變多時,可針對需求來分類測試案例,將相關的測試放在同一個群組區塊內,此時就會用到 Jest 提供的 describe 和 test 區塊。
https://titangene.github.io/article/gcp-vm-nignx-web-server.html
本篇是紀錄在 Google 的 Qwiklab 平台內,完成「Creating a Virtual Machine」這個 quest 所學到的內容,包括如何透過 GCP Console 和 command-line 工具 gcloud 在 GCP 建立 instance,如何使用 gcloud 透過 SSH 連接到你的 instance,以及如何在 VM 上部署 NIGNX web server。
https://titangene.github.io/article/jest-setup-teardown.html
每個測試案例都必須是獨立的,不能互相影響,而解決方法就是讓每個測試在執行前進行重設,或在每個測試結束後清除痕跡。在 Jest,提供 setup 和 teardown 的函數,能讓你自訂在執行 describe 區塊或 test 區塊的前後分別要做什麼準備和收尾。
https://titangene.github.io/article/recommend-chrome-extension-4.html
本篇推薦我常用的 Chrome Extension,包含自動重播 YouTube 影片,以及把 YouTube 影片變成漂浮視窗,能讓你邊看影片時還能邊看其他內容。
https://titangene.github.io/article/vue-lottie.html
本篇介紹如何在 Vue 中使用 Lottie 動畫,順便練習將套件包成 Vue component。
https://titangene.github.io/article/sass-use-rule.html
若要模組化 Sass,最常用的就是 @import 規則。但在 Dart Sass 推出了一個新功能:模組系統,可用 @use 規則,並透過 namespace 來引入其他 stylesheet 中的成員。
https://titangene.github.io/article/vue-cli-gitlab-page-ci.html
手動將 Vue CLI build 出來,然後再 push 至遠端部署雖然步驟很簡單,但重複這些步驟不是很有效率,所以我們就能透過自動部署來處理。本篇會介紹如何使用 GitLab CI/CD 來將 Vue CLI 專案自動部署至 GitLab Page。
https://titangene.github.io/article/css-selector-pseudo-class-1.html
Selector (選擇器) 可用來選擇 HTML 和 XML 文件中的節點,並將樣式屬性綁定到文件 (HTML 和 XML) 中的元素上。當選擇器與某元素 match 的時候,就可以對選到的元素進行 CSS 樣式設定。本篇會介紹 pseudo-class (偽類)。
https://titangene.github.io/article/javascript-exponentiation-operator.html
寫程式應該很常會用到指數運算,過去我們會用 Math.pow(),但在 ES2016 (ES7) 提供了 exponentiation operator (指數運算子) 的讓寫法更簡潔。那這兩個差在哪?讓我們從 ECMAScript spec 中一探究竟吧。
https://titangene.github.io/article/hexo-disqus.html
Blog 最重要的是可以增進技術的交流,而交流就可以透過留言版來達成。大部分的 Blog 在每篇文章下面都會有留言板,而最常見的就是 Disqus 留言板,因此本篇會說明如何將 Disqus 留言板和各文章的留言數加入 Hexo 的主題中。
https://titangene.github.io/article/recommend-chrome-extension-2.html
本篇推薦一些我常用的 Chrome Extension,包含隨機風景照的新分頁、隨機小知識的新分頁,以及能列出訂閱技術文章的新分頁。
https://titangene.github.io/article/javascript-ecmascript-tc39.html
你很常聽到 ES6、ES7 等這些名稱嗎?有聽過 ECMA 和 TC39 嗎?ECMAScript 和 JavaScript 又是什麼?規範要去哪裡看?下面會各別介紹。
https://titangene.github.io/article/javascript-async-await-1.html
本篇來介紹 Async Functions & await expression。
https://titangene.github.io/article/css-cascading-and-specificity.html
CSS 可以在同份文件上使用多個 style sheet 來設定文件的樣式。如果你在不同 style sheet 內對同一個元素或屬性設定值時,就會 CSS 會透過 cascading 這個特性來解決這個衝突。本篇將介紹 CSS 的 Cascading 和 specificity。
https://titangene.github.io/article/css-series-catalog.html
終於來到鐵人賽的最後一天!本篇對「重新認識 CSS」此系列做個總結,並整理此系列中的每篇文章可對應到哪些 CSS Spec。
https://titangene.github.io/article/python-crawler-note.html
紀錄個人常用的 Python 爬蟲技巧,未來還會持續更新其他技巧。
https://titangene.github.io/article/jest-async-test.html
處理 JS 非同步的常見作法包括 callback、ES6 的 Promise 以及 ES7 的 async 和 await,而本篇會分別說明如何在 Jest 使用這些 JS 特性來測試非同步程式碼。
https://titangene.github.io/article/css-attribute-value.html
在介紹各種 CSS 屬性之前,先來介紹屬性值,CSS 的屬性值分為:整數和實數、Lengths (長度)、百分比、URLs 和 URIs、Counters (計數器)、顏色、字串。
https://titangene.github.io/article/python-logging.html#comments
開發 Python 時,很常使用 print() 來輸出變數以方便 debug,但要部署時,不需要這些訊息,需要自己手動去註解或刪除那些放在各處的 print()。而 Python 內建提供了 logging 模組可以用來取代 print(),logging 除了可以輸出訊息,也可以將訊息儲存至日誌檔保存。下面紀錄如何使用 logging 模組。
https://titangene.github.io/article/jest-snapshot-testing.html
若想確保 UI 不會因意外修改而產生 bug,snapshot 測試就是一個很好用的工具。
https://titangene.github.io/article/css-attribute-selector.html
Selector (選擇器) 可用來選擇 HTML 和 XML 文件中的節點,並將樣式屬性綁定到文件 (HTML 和 XML) 中的元素上。當選擇器與某元素 match 的時候,就可以對選到的元素進行 CSS 樣式設定。本篇會介紹 attribute selector (屬性選擇器)。
https://titangene.github.io/article/recommend-chrome-extension-3.html
本篇推薦一些我常用的 Chrome Extension,包含自動重播 YouTube 影片,以及把 YouTube 影片變成漂浮視窗,能讓你邊看影片時還能邊看其他內容。
https://titangene.github.io/article/jest-manual-mocks.html
manual mock 是用於透過 mock 資料來對功能進行 stub out。例如:若你不想存取網站或 DB 之類的遠端資源,可能需要使用 fake data 來 manual mock 這些功能,以確保可以快速測試且不會出錯。
https://titangene.github.io/article/flutter-loading-images.html
要如何在 Flutter 內載入圖片?這篇做個小記錄。
https://titangene.github.io/article/jest-jquery-dom-testing.html
若用 Jest 來測試直接操作 DOM 的程式碼,最大好處是不用安裝額外的套件就可以測試,因為 Jest 附帶了 jsdom,它是用來模擬 DOM 環境,讓你很像在瀏覽器上呼叫 DOM API,進而觀察 DOM 的操作是否符合預期,也就代表測畫面不用真的開啟瀏覽器,不用等待畫面渲染就可以進行測試。
npm 或 Yarn 都是最常見的 Node.js 套件管理器。本篇紀錄兩個 CLI 對應的指令。
https://titangene.github.io/article/javascript-array-includes.html
常會有找出陣列中是否包含某元素的需求,過去會使用 Array.prototype.indexOf() 來處理,但在 ES2016 (ES7) 提供了 Array.prototype.includes() 新的 Array method,更方便好用,那這兩個差在哪?解決過去的哪些問題?讓我們從 ECMAScript spec 中一探究竟吧。
https://titangene.github.io/article/jest-mock-function.html
Jest 提供的 mock 函數可讓你自行決定要 mock 到什麼程度,並且可讓你在呼叫該 mock 函數之後,捕捉呼叫的次數、傳入的參數、使用 new 實例化的 instance,以及你指定要回傳的值,我們可透過這些資訊來測試 mock 函數是否如預期的呼叫。
https://titangene.github.io/article/nvm.html#comments
nvm 是 Node.js 的版本管理器 (version manager),可在同一台主機上安裝多個版本的 Node.js 環境,因為不同專案可能會使用不同的 Node.js 版本,那就需要透過一個版本管理器來切換不同的 Node.js 版本。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.