2026-04-03T09:32:47+00:00 https://www.cythilya.tw 2025-12-28T20:00:00+00:00 https://www.cythilya.tw/2025/12/28/annual-review 這是我在 2025 年最想聊的一些事。 2025-07-17T01:00:00+00:00 https://www.cythilya.tw/2025/07/17/mocking-next-auth-for-ssr-testing-in-nextjs Next.js 是一個支援伺服器端渲染 (SSR) 的框架。在實作中通常採用混合方式—應用程式的某些部分依賴於 SSR 傳遞資料，而其他部分則使用客戶端渲染 (CSR)。然而，目前針對 `next-auth` 的端到端 (E2E) 測試設定僅涵蓋 CSR 的情境。本文目的為試圖擴展測試的範圍，使其也能支援 SSR，同時具備根據不同條件動態配置的彈性。為了實現這一目標，SSR 和 CSR 都必須能支援模擬身分驗證，否則在測試期間將不得不完全忽略身分驗證。 2025-06-09T01:00:00+00:00 https://www.cythilya.tw/2025/06/09/laos 當初會想到寮國玩只是因為朋友一句話「到寮國玩看起來很酷」當晚就買了機票，然後開始規劃行程。 2025-04-16T01:00:00+00:00 https://www.cythilya.tw/2025/04/16/testing-strategy-in-micro-frontend-architecture 在微前端的架構之下，為了確保其內包含的應用程式能正常運作，這就需要我們在微前端的架構下進行測試。 2025-01-31T01:00:00+00:00 https://www.cythilya.tw/2025/01/31/git-rebase-onto 提交 PR 前需要更新 feature branch 的 base branch，這時候就可以使用 `rebase --onto` 來無痛更新分支，直接將 feature branch 的 commit 接到 main branch 之後。 2024-12-28T01:00:00+00:00 https://www.cythilya.tw/2024/12/28/annual-review 這是我在 2024 年最想聊的一些事。 2024-12-27T01:00:00+00:00 https://www.cythilya.tw/2024/12/27/webconf2024-ui-causes-testing-to-fail 如何撰寫具彈性的測試程式 | 2024 WebConf Taiwan 2024-08-24T01:00:00+00:00 https://www.cythilya.tw/2024/08/24/loading-performance-optimization 這篇文章會分享 Google 制定的 Web Vitals 效能指標與使用者體驗的關係與實際應用、如何在專案中利用模擬與實地的方式測量與監控，以及如何優化專案以提升效能與使用者體驗。 2024-07-31T01:00:00+00:00 https://www.cythilya.tw/2024/07/31/translate-and-sync-to-repo 感謝科技的進步，讓我能夠借助工具來進行翻譯，最近實作了一個小工具 Translate and Sync to Repo，協助自動翻譯中文稿。 2024-06-06T01:00:00+00:00 https://www.cythilya.tw/2024/06/06/frontend-testing-guide-strategies-and-practices 在前端領域，快節奏且不斷革新的開發環境下，如何能在迅速產出的同時保持高品質的程式碼成為一大挑戰，因此「測試」變得十分重要。選擇何種測試方式、如何撰寫和執行測試成為開發者必須深思的議題。缺乏測試的程式碼難以確保品質，而解決這個問題的關鍵在於建立適當的測試策略。因此想藉由這本書來分享我在前端測試領域所積累的實務經驗，希望能對大家有所啟發和幫助。 2024-06-05T01:00:00+00:00 https://www.cythilya.tw/2024/06/05/integrating-unit-testing-into-the-organization 「單元測試的藝術」讀書會 - 在組織中推行單元測試 (The Art of Unit Testing, 3e - Integrating unit testing into the organization) 閱讀筆記。 2024-06-04T01:00:00+00:00 https://www.cythilya.tw/2024/06/04/developing-a-testing-strategy 「單元測試的藝術」讀書會 - 規劃測試策略 (The Art of Unit Testing, 3e - Developing a testing strategy) 閱讀筆記。 2024-05-01T01:00:00+00:00 https://www.cythilya.tw/2024/05/01/ isolation-frameworks 「單元測試的藝術」讀書會 - 隔離框架 (The Art of Unit Testing, 3e - Isolation Frameworks) 閱讀筆記。 2024-04-26T01:00:00+00:00 https://www.cythilya.tw/2024/04/26/interaction-testing-using-mock-objects 「單元測試的藝術」讀書會 - 利用模擬物件進行互動測試 (The Art of Unit Testing, 3e - Interaction Testing Using Mock Objects) 閱讀筆記。 2024-04-19T01:00:00+00:00 https://www.cythilya.tw/2024/04/19/how-to-create-an-outstanding-resume 「履歷」是求職者的名片，是簡短的自我介紹，也是展示專業能力的重要文件。一份好的履歷可以讓你在眾多求職者中脫穎而出，獲得面試的機會。那麼，如何打造一份出色的履歷呢？ 2024-04-18T01:00:00+00:00 https://www.cythilya.tw/2024/04/18/breaking-dependencies-with-stubs 在實作單元測試時，為了有效測試特定情境和條件，必須利用 stub 對給定的函式或模組進行隔絕依賴，目的是為了讓測試更加穩定，避免造成不穩定的測試結果。本文將會討論 stub 的目的、使用情境，以及如何透過不同的注入技術來隔絕依賴。 2024-04-10T01:00:00+00:00 https://www.cythilya.tw/2024/04/10/a-first-unit-test 「單元測試的藝術」讀書會 - 你好，單元測試 (The Art of Unit Testing, 3e - A First Unit Test) 閱讀筆記。 2024-03-28T01:00:00+00:00 https://www.cythilya.tw/2024/03/28/the-basics-of-unit-testing 「單元測試的藝術」讀書會 - 單元測試的基本概念 (The Art of Unit Testing, 3e - The Basics of Unit Testing) 閱讀筆記。 2024-03-05T01:00:00+00:00 https://www.cythilya.tw/2024/03/05/js-mv-patterns JavaScript Patterns 讀書會 - MV* Patterns 逐字稿。 2024-02-10T01:00:00+00:00 https://www.cythilya.tw/2024/02/10/atomic-css-and-tailwind-css 過去在實作功能的時候，大致都切分成三部份：HTML、CSS 和 JavaScript，各自有各自的任務。HTML 負責版面與元件要怎麼安排、CSS 負責樣式呈現，以及 JavaScript 負責動作，而 CSS 會用 class 作為三者連接的橋樑。 2024-01-16T01:00:00+00:00 https://www.cythilya.tw/2024/01/16/ai-that-writes-codes 可能由於是演算法實驗室畢業的？AI 對我來說一直都不是什麼新東西，直到 ChatGPT 和 GitHub Copilot 的出現才驚嘆「哇！這是什麼酷東西，一定要好好玩一玩」。來聊聊我怎麼用 Copilot 和 ChatGPT 提升產能與加速學習好了，分幾種狀況來說明。 2023-12-28T01:00:00+00:00 https://www.cythilya.tw/2023/12/28/annual-review 這是我在 2023 年最想聊的一些事。 2023-12-12T01:00:00+00:00 https://www.cythilya.tw/2023/12/12/pre-push-mechanism 我在推 code 之前會先跑 lint 和 unit test，確保推 code 到 remote 上的每個 commit 都是符合團隊規範並且是正確的。不過這樣的流程若靠人為確認是很麻煩也困難的，最好的方法就是能成為一種機制，來自動化幫我們處理。 2023-08-29T01:00:00+00:00 https://www.cythilya.tw/2023/08/29/linter-husky-lint-staged-and-teamwork 大部份的工程師都是謹慎的，除了桌上的物品要放整齊外，寫 code 更是井井有條，例如：開頭要幾個空白還是 tab、要在哪裡斷行、一行限制多少字等，說是細節卻也是基本禮貌。 2023-08-12T01:00:00+00:00 https://www.cythilya.tw/2023/08/12/build-front-end-performance-monitoring-mechanism-from-scratch-webconf-tw-2023 從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿 2023-07-11T01:00:00+00:00 https://www.cythilya.tw/2023/07/11/test-performance-with-cypress-and-sentry 在自動化測試前端效能時，可能會考慮的解法有：(1) Lighthouse CI Action 或 web-vitals library + 丟到某個地方做資料儲存和 dashboard；另一個解法是 (2) 利用 Cypress + Sentry 來取得相關資訊並做呈現。這篇文章會針對 Cypress + Sentry 這個解法做說明，並比較兩種解法。 2023-06-29T01:00:00+00:00 https://www.cythilya.tw/2023/06/29/how-to-use-sentry-to-monitor-performance 剛好最近在找個能進行效能監控的工具，在考量是否能有效記錄與追蹤特定指標和錯誤、整合、即時通知與 self-hosted 後，決定使用 Sentry 來協助團隊進行效能與錯誤的監控。 2023-06-06T01:00:00+00:00 https://www.cythilya.tw/2023/06/06/how-to-deploy-and-host-micro-frontend-for-free-using-firebase 本文主要會談如何利用 Firebase 來部署與託管微前端專案，分為幾個部份：(1) 建立 Firebase 專案；(2) 建立 Firebase 設定檔；(3) 部署與託管；(4) 自動化部署；(5) 總結。 2023-05-25T01:00:00+00:00 https://www.cythilya.tw/2023/05/25/implement-redux-by-react-context-api-and-useReducer 要選 Redux 還是 context API + useReducer 來做狀態管理呢？context API + useReducer 能完全取代 Redux 嗎？ 2023-04-29T01:00:00+00:00 https://www.cythilya.tw/2023/04/29/shimanami-kaido 島波海道。單車跳島之旅 2023-03-30T01:00:00+00:00 https://www.cythilya.tw/2023/03/30/cross-micro-frontends-communication-pub-sub-vs-custom-events 本文主要探討如何在微前端的跨應用程式間溝通，尤其針對兩種解法「發布/訂閱 (Pub/Sub)」與「傳遞自訂事件 (Custom Events)」說明和比較。 2023-03-14T01:00:00+00:00 https://www.cythilya.tw/2023/03/14/lunba-xibin-100k 單車菜鳥初登場！輪霸西濱對新手友善，評估目前的體能和訓練狀況後，選 100K 似乎是比較適當，於是揪了三五好友一起參加。 2023-01-28T01:00:00+00:00 https://www.cythilya.tw/2023/01/28/monolith-vs-multi-repo-vs-mono-repo 專案隨著開發時間愈長，伴隨而來的除了體積和複雜度增加之外，也產生難以擴充、缺乏彈性以及打包和部署時間長、效率差等問題。這時候就會開始考慮切分專案，在這裡來聊聊三種管理專案的架構 - Monolith、Multi-Repo 與 Monorepo，這篇文章會談到過去在建置專案時遇到的問題，以及根據不同情境而選用的解法，並在最後推薦工具與提供利用 Module Federation 達成 Micro Frontends 的範例來快速上手和總結比較。 2022-12-31T01:00:00+00:00 https://www.cythilya.tw/2022/12/31/annual-review 這是我在 2022 年最想聊的一些事。 2022-12-04T01:00:00+00:00 https://www.cythilya.tw/2022/12/04/career-advice-for-junior-developers 如果出社會一 ~ 三年左右，對職涯有些迷茫，也許你可以參考這篇文章。在這裡，我會從幾個方面來聊聊：(1) 如何探索職涯方向；(2) 如何成長，提升軟硬技能；(3) 如何加薪。 2022-12-02T01:00:00+00:00 https://www.cythilya.tw/2022/12/02/dynamodb-with-serverless-framework 本文說明如何利用 Serverless Framework 建立一個經由 RESTful API 讀取 DynamoDB 資料庫的專案。 2022-11-11T01:00:00+00:00 https://www.cythilya.tw/2022/11/11/dynamodb-pagination 如何為 DynamoDB 做分頁呢？本文主要分三個部份：(1) 為什麼要做分頁？；(2) 利用 LastEvaluatedKey 與 ExclusiveStartKey 實作分頁；(3) 範例。 2022-10-31T01:00:00+00:00 https://www.cythilya.tw/2022/10/31/how-to-create-i-am-user 在前面的文章提到，某 root user 建立了許多資源，那麼要怎麼分享給其他人呢？在這裡可以用 root user 來建立 IAM user 來管理對資源存取的權限，就能讓團隊成員一同共享資源。 2022-10-29T01:00:00+00:00 https://www.cythilya.tw/2022/10/29/read-data-from-dynamodb-using-aws-api-gateway-and-lambda-function 如何利用 API Gateway 與 Lambda Function 從 DynamoDB 讀資料呢？本文主要分三個部份：(1) 利用 DynamoDB 建立資料表；(2) 利用 Lambda Function 執行 Scan Operation；(3) 透過 API Gateway 觸發 Lambda Function。 2022-10-19T01:00:00+00:00 https://www.cythilya.tw/2022/10/19/javascript-date-timezone 利用 JavaScript 的 Date object 計算不同時區的時間。 2022-10-15T02:00:00+00:00 https://www.cythilya.tw/2022/10/15/mopcon-visual-testing 「Visual Testing」MOPCON 2022 逐字稿，歡迎搭配投影片與範例一同服用。 2022-09-28T01:00:00+00:00 https://www.cythilya.tw/2022/09/28/hello-lambda-function 如何撰寫一個 Lambda function 並且能讓外部來叫用呢？本文主要分三個部份：(1) 基本使用，利用瀏覽器或 Postman 呼叫網址，觸發 Lambda 來做一些事情；(2) 怎麼帶網址參數；(3) 利用 API Gateway 來建立 RESTful API。 2022-09-01T01:00:00+00:00 https://www.cythilya.tw/2022/09/01/golang-program-structure 本文是《精通 Go 程式設計》(The Go Programming Language) 第 2 章「程式結構」(Program Structure) 的閱讀筆記。 2022-08-17T01:00:00+00:00 https://www.cythilya.tw/2022/08/17/visual-testing-ignore-elements 在動態內容的快照處理上有兩種方法，第一是事先塞入假資料，讓內容維持一致；第二是忽略這個會變動的元素區塊，本文要探討的是如何忽略特定元件。 2022-08-04T01:00:00+00:00 https://www.cythilya.tw/2022/08/04/visual-testing-interactions 若希望經過特定操作流程後，再做快照，可以嗎？ 2022-07-28T01:00:00+00:00 https://www.cythilya.tw/2022/07/28/visual-testing-tools-assessment 比較 Percy、Chromatic 與 jest-image-snapshot。 2022-06-15T02:00:00+00:00 https://www.cythilya.tw/2022/06/15/tot-ch10 本文是《美國四星上將教你打造黃金團隊：從急診室到NASA都在用的領導策略》(Team of teams: new rules of engagement for a complex world) 的第 4 部「賦權執行」之第 10 章「放手」後半部的部份小章節閱讀筆記，小章節有 (1) 各種情況下都善用良好的判斷力 (2) 決策速度和品質都提升 (3) 每一位艦長都是尼爾森。 2022-06-02T01:00:00+00:00 https://www.cythilya.tw/2022/06/02/architecting-on-aws-networking Networking。 2022-06-01T01:00:00+00:00 https://www.cythilya.tw/2022/06/01/architecting-on-aws-backup-and-restore Backup and Restore。 2022-05-31T01:00:00+00:00 https://www.cythilya.tw/2022/05/31/architecting-on-aws-edge-services Edge Services。 2022-05-30T01:00:00+00:00 https://www.cythilya.tw/2022/05/30/architecting-on-aws-serverless Serverless。 2022-05-28T01:00:00+00:00 https://www.cythilya.tw/2022/05/28/architecting-on-aws-container Container。 2022-05-27T01:00:00+00:00 https://www.cythilya.tw/2022/05/27/architecting-on-aws-automation 自動化服務 (Automation)。 2022-05-26T01:00:00+00:00 https://www.cythilya.tw/2022/05/26/architecting-on-aws-monitoring-and-scaling Monitoring and Scaling。 2022-05-25T01:00:00+00:00 https://www.cythilya.tw/2022/05/25/architecting-on-aws-database-services 資料庫服務 (Database Services)。 2022-05-24T01:00:00+00:00 https://www.cythilya.tw/2022/05/24/architecting-on-aws-cloud-storage 雲端儲存服務 (Cloud Storage)。 2022-05-23T01:00:00+00:00 https://www.cythilya.tw/2022/05/23/architecting-on-aws-compute-service 運算資源 (Compute Service)。 2022-04-29T01:00:00+00:00 https://www.cythilya.tw/2022/04/29/architecting-on-aws-account-security Account Security。 2022-04-28T01:00:00+00:00 https://www.cythilya.tw/2022/04/28/architecting-on-aws-infrastructure AWS Modules 與基礎設施。 2022-04-05T01:00:00+00:00 https://www.cythilya.tw/2022/04/05/docker-containers-for-visual-testing-setup Cypress + Docker + Chromatic ❤️ 2022-03-04T01:00:00+00:00 https://www.cythilya.tw/2022/03/04/visual-testing-in-component-level-with-chromatic-and-storybook 利用 Chromatic + Storybook 來做 Component-Level 的 Visual Testing。 2022-02-26T01:00:00+00:00 https://www.cythilya.tw/2022/02/26/visual-testing-with-cypress-and-percy 視覺測試 (visual testing) 是指利用工具自動檢測 UI 變更的一種測試方式。過去我們檢視 UI 的變更，常用的方法大致是 (1) 人眼 (截圖) 比對，比較本次更新與上一版或 mockup 的差異；(2) 工具 diff 由 unit test 或各種測試所產生的快照 (snapshot test)。但這兩種方式都無法很直覺很明確的在第一時間告訴我們到底改了什麼？若能產生指定頁面或元件的圖檔，並且標註更新的部份，這樣在 review 的時候，就更省時更便利了。 2021-12-31T01:00:00+00:00 https://www.cythilya.tw/2021/12/31/annual-review 這是我在 2021 年最值得聊聊的幾件事 (*´∀`)~♥ 2021-12-27T01:00:00+00:00 https://www.cythilya.tw/2021/12/27/guide-reading-on-speed-up-your-app-with-web-vitals-agile-hsinchu 導讀《打造高速網站，從網站指標開始！全方位提升使用者體驗與流量的關鍵》逐字稿@新竹敏捷 2021-12-01T01:00:00+00:00 https://www.cythilya.tw/2021/12/01/about-the-book-speed-up-your-app-with-web-vitals 關於這本書「打造高速網站，從網站指標開始！全方位提升使用者體驗與流量的關鍵」的點點滴滴。 2021-10-24T01:00:00+00:00 https://www.cythilya.tw/2021/10/24/mopcon-speed-up-your-app-with-web-vitals MOPCON 逐字稿 2021-09-23T01:00:00+00:00 https://www.cythilya.tw/2021/09/23/pendo-guides-walkthrough-tooltip Pendo 是用來追蹤與蒐集使用者行為來做分析的工具，除了資料的蒐集與分析外，滿多團隊都會利用 Pendo Guides 來公告產品的新功能、引導使用者完成一系列的操作。而且 Pendo Guides 是利用自身的編輯器 Pendo Designer 來實作各種 guides，不需要寫任何一行程式碼或更動產品既有流程與功能，非常便利。 2021-07-27T01:00:00+00:00 https://www.cythilya.tw/2021/07/27/ten-snacks-for-better-health 記錄 10 個最近做的高蛋白/減醣/減糖甜點 😋，內含蛋糕 🍰、布丁 🍮、果凍 🥝 🍅、冰淇淋 🍧、鬆餅 🥞、餅乾 🍪、湯品 🥣 開始學做甜點以後，才發現愛吃的零食熱量高、營養價值低，不是什麼健康的東西 😂 還是自己做比較安心。 2021-06-24T01:00:00+00:00 https://www.cythilya.tw/2021/06/24/tippingpoint-front-end-case-study-and-practice-css Tipping Point Front-End Case Study and Practice: CSS 2021-06-10T01:00:00+00:00 https://www.cythilya.tw/2021/06/10/pact 契約測試、消費者驅動的契約測試、實作契約測試的框架。 2021-05-29T01:00:00+00:00 https://www.cythilya.tw/2021/05/29/integration-performance-load 本文為「可測試的 JavaScript (Testable JavaScript)」第 6 章「整合 (Integration)、效能 (Performance) 以及負載 (Load) 測試」的閱讀筆記。 2021-05-08T01:00:00+00:00 https://www.cythilya.tw/2021/05/08/testable-unit-tests 本文為「可測試的 JavaScript (Testable JavaScript)」第 4 章「單元測試 (Unit Tests)」的閱讀筆記。 2021-04-27T01:00:00+00:00 https://www.cythilya.tw/2021/04/27/testable-javascript-event-based-architectures 本文為「可測試的 JavaScript (Testable JavaScript)」第 3 章「事件導向架構 (Event-Based Architectures)」的閱讀筆記。 2021-03-29T01:00:00+00:00 https://www.cythilya.tw/2021/03/29/91-unit-test 參加 91 Unit Testing 單元測試實戰操練營的簡單筆記。 2021-03-27T01:00:00+00:00 https://www.cythilya.tw/2021/03/27/testable-javascript-complexity 本文為「可測試的 JavaScript (Testable JavaScript)」第 2 章「複雜度（Complexity）」的閱讀筆記。 2021-03-16T01:00:00+00:00 https://www.cythilya.tw/2021/03/16/conventional-commits 由於最近發現團隊內（到底從哪兒來的）的工程師會開始提交一些不知所云的提交描述，因此開始讓專案使用「約定式提交」（conventional commits）。 2021-02-28T01:00:00+00:00 https://www.cythilya.tw/2021/02/28/testable-javascript-ch1 本文為「可測試的 JavaScript (Testable JavaScript)」第 1 章「可測試的 JavaScript 程式（Testable JavaScript）」的閱讀筆記。 2021-01-30T01:00:00+00:00 https://www.cythilya.tw/2021/01/30/refactoring-react-class-components-with-hooks 使用 React Hooks 重構 React Class Component 的改造筆記。 2020-12-31T01:00:00+00:00 https://www.cythilya.tw/2020/12/31/yearly-review 這是我在 2020 年最值得聊聊的幾件事 (*´∀`)~♥ 2020-12-10T01:00:00+00:00 https://www.cythilya.tw/2020/12/10/google-how-to-get-through-code-review 每天我都要被 code review 很多次，而如何準備 code review 時需要的內容與心態呢？這篇文章是我閱讀 Google 的「The CL author’s guide to getting through code review」的筆記還有自己的小感想。 2020-11-01T01:00:00+00:00 https://www.cythilya.tw/2020/11/01/google-how-to-do-a-code-review 每天我都要做很多次 code review，但到底怎樣 code review 才是好的呢？這篇文章是我閱讀 Google 的「How to do a code review」的筆記還有自己的小感想。 2020-10-06T01:00:00+00:00 https://www.cythilya.tw/2020/10/06/animal-crossing-my-island 分享我的小動物們與景點。 2020-10-05T01:00:00+00:00 https://www.cythilya.tw/2020/10/05/the-7-habits-of-highly-effective-people 「與成功有約：高效能人士的七個習慣」的閱讀筆記。 2020-10-03T01:00:00+00:00 https://www.cythilya.tw/2020/10/03/animal-crossing-5-star-island 本文記錄從三星到五星島嶼的流水帳。 2020-10-01T01:00:00+00:00 https://www.cythilya.tw/2020/10/01/animal-crossing-3-star-island 本文記錄從一開始玩動森到達成三星島嶼、KK 來開演唱會的流水帳。 2020-09-22T02:00:00+00:00 https://www.cythilya.tw/2020/09/22/real-user-monitoring-with-firebase-performance 利用 Firebase Performance 來做 Real User Monitoring。 2020-09-22T01:00:00+00:00 https://www.cythilya.tw/2020/09/22/real-user-monitoring-with-perfumejs-and-google-analytics 利用 Perfume.js 與 Google Analytics 來做 Real User Monitoring。 2020-09-07T01:00:00+00:00 https://www.cythilya.tw/2020/09/07/lighthouse-metrics 本文說明 Lighthouse 以使用者為出發點來探討效能的指標。 2020-08-27T01:00:00+00:00 https://www.cythilya.tw/2020/08/27/integrating-automated-performance-testing-with-jenkins 本文會從基本的 Jenkins 安裝、設定開始，然後再說明如何整合 Jenkins 來自動做前端效能測試。 2020-08-26T01:00:00+00:00 https://www.cythilya.tw/2020/08/26/srp 本文為「Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇」第 7 章「單一職責原則」的閱讀筆記。 2020-08-21T01:00:00+00:00 https://www.cythilya.tw/2020/08/21/performance-testing-with-lighthouse-and-puppeteer 本文主要是記錄如何在專案中簡易下指令來自動執行 Lighthouse 與 Puppeteer 做全站網頁的效能檢測、產生報表與其目錄。 2020-08-04T01:00:00+00:00 https://www.cythilya.tw/2020/08/04/solid SOLID 是物件導向設計的五個原則，實踐 SOLID 原則的目的是希望能有效應對改變。SOLID 有 SRP、OCP、LSP、ISP、DIP。 2020-07-24T01:00:00+00:00 https://www.cythilya.tw/2020/07/24/encode-decode 常用的 UTF-8 之 encodeURI 與 decodeURI、encodeURIComponent 與 decodeURIComponent 和 Base64 之 btoa 與 atob。 2020-07-22T01:00:00+00:00 https://www.cythilya.tw/2020/07/22/cleaner-async-javascript-code-without-the-try-catch-mess Async 和 Await 提供一種語法糖來撰寫非同步程式碼而看起來很像是同步的樣子，而在這之前若想實作非同步都是使用 callback 或 promise 的方式，產生的問題不外乎是難以閱讀的 callback hell。但，用了 Async 和 Await 就真的能讓程式碼更精簡流暢嗎？ ( •́ _ •̀)？ 2020-07-06T01:00:00+00:00 https://www.cythilya.tw/2020/07/06/functional-programming 本文為「Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇」第 6 章「函數式程式設計」的閱讀筆記。 2020-06-22T01:00:00+00:00 https://www.cythilya.tw/2020/06/22/object-orient-programming 本文為「Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇」第 5 章「物件導向程式設計」的閱讀筆記。 2020-04-16T01:00:00+00:00 https://www.cythilya.tw/2020/04/16/redux-unit-test-reducer 使用 Jest 對 Redux 的 reducer 做單元測試的簡單記錄。 2020-04-02T01:00:00+00:00 https://www.cythilya.tw/2020/04/02/work-from-home 過年後公司開始讓各部門自行決定在家工作的模式（人員分組、天數等），而大約從確診人數破百的一兩天後，我所在的部門即決定開始全員WFH（work from home，在家工作）。實行至今約兩週，來記錄一些優缺點和想法。 2020-03-27T01:00:00+00:00 https://www.cythilya.tw/2020/03/27/redux-unit-test-action 使用 Jest 對 Redux 的 action 做單元測試的簡單記錄。 2020-02-25T01:00:00+00:00 https://www.cythilya.tw/2020/02/25/start-your-app-the-better-way-with-styled-system 本文主要由此投影片「Start your app the better way with Styled System」之講稿改寫。本文會從 CSS 歷史開始談起，接著會來看過去我們在使用元件庫上遇到的問題，以及怎麼使用 Styled System 來解決這些問題。 2020-02-12T01:00:00+00:00 https://www.cythilya.tw/2020/02/12/structured-programming 本文為「Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇」第 4 章「結構化程式設計」的閱讀筆記。 2020-02-02T01:00:00+00:00 https://www.cythilya.tw/2020/02/02/programming-paradigms 本文為「Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇」第 3 章「範式概論」的閱讀筆記。 2020-01-29T01:00:00+00:00 https://www.cythilya.tw/2020/01/29/generator 一般的 function 在呼叫後只會回傳一個值或不回傳任何東西，但產生器（generator）卻可以一個接著一個的回傳（yield）多個值；產生器和迭代器常用來一起處理資料流。 2020-01-27T01:00:00+00:00 https://www.cythilya.tw/2020/01/27/behavior-and-structure 本文為「Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇」第 2 章「兩種價值觀的故事」的閱讀筆記。 2020-01-24T01:00:00+00:00 https://www.cythilya.tw/2020/01/24/clean-code-1-what-is-design-and-architecture 本文為「Clean Architecture 無瑕的程式碼：整潔的軟體設計與架構篇」第 1 章「什麼是設計與架構」的閱讀筆記。 2020-01-22T01:00:00+00:00 https://www.cythilya.tw/2020/01/22/iterator Q：這個物件不能做迭代欸，怎麼辦？A：別驚慌，幫它定義迭代器就可以了。 2019-12-30T01:00:00+00:00 https://www.cythilya.tw/2019/12/30/yearly-review 這是我在 2019 年最值得聊聊的十件事 (*´∀`)~♥ 2019-12-27T01:00:00+00:00 https://www.cythilya.tw/2019/12/27/git-list-branch 列出 local 與 remote 分支、查看分支與其歷史提交紀錄。 2019-12-03T01:00:00+00:00 https://www.cythilya.tw/2019/12/03/git-detached-head-to-a-new-branch 本文說明如何從特定 commit 切新的分支、為新分支命名、將新分支合併回主線、退回尚未合併分支的狀態與刪除用不到的分支。 2019-11-30T01:00:00+00:00 https://www.cythilya.tw/2019/11/30/build-a-better-ui-component-library-with-styled-system 利用 Styled System 建立一個更好的 UI 元件庫！ 2019-11-09T01:00:00+00:00 https://www.cythilya.tw/2019/11/09/african-safari 到九州自然野生動物園餵動物！ 2019-11-08T01:00:00+00:00 https://www.cythilya.tw/2019/11/08/styeld-system Styled System 學習筆記。 2019-11-07T02:00:00+00:00 https://www.cythilya.tw/2019/11/07/robot-framework 前端工程師寫 Robot Framework，可以嗎？ 2019-10-31T02:00:00+00:00 https://www.cythilya.tw/2019/10/31/object-get-value 本文探討物件屬性取值可能會遇到的兩件事與其解法：（1）取不到值時的後續處理？（2）屬性的名稱用點分隔，要怎麼取值？ 2019-10-18T02:00:00+00:00 https://www.cythilya.tw/2019/10/18/devops-ch9-10 「The DevOps Handbook」Ch9、10 筆記：奠定部署管線的基礎、實現快速可靠的自動化測試。 2019-07-25T02:00:00+00:00 https://www.cythilya.tw/2019/07/25/react-scheduler Scheduler 這個 package 本來是 React Core 內部在使用的，但是現在開放出來可用於瀏覽器環境，解決 App 效能不佳的問題，我們也可藉此了解 Scheduler 到底是怎麼運作的。 2019-04-30T02:00:00+00:00 https://www.cythilya.tw/2019/04/30/react-form 本文會先從為何要做表單狀態管理說起，接著看目前市面上有哪些好的表單函式庫和條列挑選原則，並探討三個表單函式庫 Redux Form、React Final Form、Formik & Yup，最後做比較和總結。 2019-03-09T02:00:00+00:00 https://www.cythilya.tw/2019/03/09/winter-face-skin-care 過去的我是個一年四季都用同一罐（而且只有這麼一罐）保養品的懶女孩兒，但大約到了某個年紀後發現臉部肌膚一到冬季，便會開始脫皮、乾癢，該怎麼辦呢？在這裡想跟大家分享幾個好用的產品，遇到乾冷的冬季，試用看看吧。 2019-02-06T02:00:00+00:00 https://www.cythilya.tw/2019/02/06/currying-decorator-hoc 從 curry -> decorator -> HOC 的漫漫長路。 2019-01-09T02:00:00+00:00 https://www.cythilya.tw/2019/01/09/interview 2018 年底開始面試一些公司，皆為面試前端工程師，以下做一些記錄... 2018-12-31T02:00:00+00:00 https://www.cythilya.tw/2018/12/31/yearly-review 這是我在 2018 年最值得聊聊的十件事 (*´∀`)~♥ 2018-11-26T02:00:00+00:00 https://www.cythilya.tw/2018/11/26/what-happens-when-you-type-an-url-in-the-browser-and-press-enter 這道題目涵蓋前端技術範圍很廣，很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼，就讓我來檢視一下自己的狀態吧 d(`･∀･)b 2018-11-10T02:00:00+00:00 https://www.cythilya.tw/2018/11/10/inside-look-at-modern-web-browser 從內部來看瀏覽器到底在做什麼？ 2018-11-06T02:00:00+00:00 https://www.cythilya.tw/2018/11/06/thank-you 總結鐵人賽這 30 天的想法與感謝。 2018-11-05T02:00:00+00:00 https://www.cythilya.tw/2018/11/05/syntax 本文主要會談到 ES6 新增的熱門語法，包含以區塊為範疇的宣告、分散與其餘運算、預設參數值、解構、物件字面值擴充功能、範本字面值、箭號函式。。 2018-11-04T02:00:00+00:00 https://www.cythilya.tw/2018/11/04/es-now-and-future 本文主要會談到如何在 JavaScript 快速演進的狀況下，漸進的適應新功能？來嘗試 Transpiling 與 Shims/Polyfills 吧。 2018-11-03T02:00:00+00:00 https://www.cythilya.tw/2018/11/03/benchmarking-and-tuning 本文主要會談到如何使用工具來做基準化分析。 2018-11-02T02:00:00+00:00 https://www.cythilya.tw/2018/11/02/program-performance 本文主要會談到 web worker、SIMD 與 asm.js。到目前為止我們只談論了如何有效的運用非同步處理模式，現在就來探討為什麼非同步處理對 JavaScript 來說這麼重要，其中最明顯的理由就是效能，本文主要探討的是更整體的程式層級的效能。 2018-11-01T02:00:00+00:00 https://www.cythilya.tw/2018/11/01/generator 本文主要會談到 generator 的基本概念與範例；從 callback 演進到 ES6 promise 與 generator 再進化到 ES7 async 和 await。 2018-10-31T02:00:00+00:00 https://www.cythilya.tw/2018/10/31/promise 本文主要會談到 promise 是什麼？promise 的錯誤處理、模式與限制。 2018-10-30T02:00:00+00:00 https://www.cythilya.tw/2018/10/30/callback 本文主要會談到情境切換、callback vs callback hell、控制權轉移、解決 callback 的信任問題的解法-分別回呼與錯誤優先處理。 2018-10-29T02:00:00+00:00 https://www.cythilya.tw/2018/10/29/asynchrony-now-and-later 本文主要會談到事件迴圈與共時 2018-10-28T02:00:00+00:00 https://www.cythilya.tw/2018/10/28/es6-class 本文主要是探討 ES6 Class 的美好與陷阱。 2018-10-27T02:00:00+00:00 https://www.cythilya.tw/2018/10/27/behavior-delegation 本文主要會談到-什麼是行為委派？和類別有什麼差異？行為委派的優點是什麼？模型比較？什麼是 OLOO？如何使用委派機制達到去類別化？如何撰寫更簡潔易懂的程式碼？物件間要怎麼做內省？ 2018-10-26T02:00:00+00:00 https://www.cythilya.tw/2018/10/26/prototype 本文主要會談到-類別、建構子與實體；什麼是原型串鏈？原型串鏈的功用是？什麼是原型式繼承？疑難雜症大解惑-如何分辨屬性是位於該物件或原型串鏈上的？如何分辨誰是誰的實體？誰是誰的建構子？原型串鏈有終點嗎？如何建立兩物件的連結？物件屬性的設定與遮蔽規則有哪些？ 2018-10-25T02:00:00+00:00 https://www.cythilya.tw/2018/10/25/mixing-up-class-objects 本文主要會談到簡單的物件導向概念，作為後續「原型」（Prototypes）的暖身。 2018-10-24T02:00:00+00:00 https://www.cythilya.tw/2018/10/24/object 關於物件，本文會提到-語法：宣告式與建構形式；型別：再次複習 typeof、使用 instanceof 判定物件子型別；內容：屬性值的存取、物件的複製（淺拷貝與深拷貝）、屬性描述器、不可變的物件、取值器與設值器、檢視屬性是否存在、屬性列舉；迭代：一些迭代出陣列的值的方法。 2018-10-23T02:00:00+00:00 https://www.cythilya.tw/2018/10/23/this 本文主要會談到-this 是什麼？判斷 this 的值的四個規則與例外。語彙的 this，這裡會提到箭頭函數中的 this 的不同之處。 2018-10-22T02:00:00+00:00 https://www.cythilya.tw/2018/10/22/closure 本文主要會談到-閉包是什麼？有什麼功用？迴圈與閉包搭配使用時的謬誤與陷阱。模組模式是什麼？如何管理模組？探討模組依存性載入器/管理器與 ES6 模組。 2018-10-21T02:00:00+00:00 https://www.cythilya.tw/2018/10/21/dynamic-scope 本文主要是比較動態範疇與語彙範疇的差異。 2018-10-20T02:00:00+00:00 https://www.cythilya.tw/2018/10/20/hoisting 本文主要會談到-什麼是拉升（hoisting）？變數與函式的拉升有什麼不同？怎麼處理在 script 標籤內宣告的全域變數？是否也有拉升的狀況？拉升 vs 重複宣告的變數與函式，要怎麼處理？ 2018-10-19T02:00:00+00:00 https://www.cythilya.tw/2018/10/19/function-vs-block-scope 本文會提到範疇的劃分單位可分為兩種-函式範疇與區塊範疇，它們有什麼不同？各有什麼優點？函式範疇的重要觀念與相關應用-函式宣告與函式運算式、匿名與具名函式、即刻調用函式運算式。區塊範疇的重要觀念與相關應用-const 與 let、垃圾回收。 2018-10-18T02:00:00+00:00 https://www.cythilya.tw/2018/10/18/lexical-scope 本文會提到什麼是語彙範疇？這階段要做什麼事情？什麼會改變語彙範疇？有什麼影響？ 2018-10-17T02:00:00+00:00 https://www.cythilya.tw/2018/10/17/what-is-scope 本文會提到什麼是「範疇」？範疇的功用是？編譯器怎麼理解程式碼？什麼是巢狀範疇？從 LHS 與 RHS 來理解 JavaScript 查找變數的報錯機制。 2018-10-16T02:00:00+00:00 https://www.cythilya.tw/2018/10/16/grammar JavaScript 的文法是描述其語法（syntax），例如：運算子、關鍵字等，如何結合在一起，形成格式正確的有效程式的一種結構化方式。 2018-10-15T02:00:00+00:00 https://www.cythilya.tw/2018/10/15/coercion 強制轉型（coercion）到底是一個有用的功能，還是設計上的缺陷呢？ 2018-10-14T02:00:00+00:00 https://www.cythilya.tw/2018/10/14/natives 本文主要會談到...何謂 Natives（原生功能）？怎麼用？物件包裹器、陷阱、解封裝；各類建構子的原生功能、原生的原型。雖然優先使用字面值而非使用建構子建立物件，還是需要來看一些需要關心的議題和警惕用的錯誤用法。 2018-10-13T02:00:00+00:00 https://www.cythilya.tw/2018/10/13/special-values 本文主要內容為探討基本型別的特殊值並能適當地使用它們。 2018-10-12T02:00:00+00:00 https://www.cythilya.tw/2018/10/12/values-array-string-number 本文主要會談到關於陣列、字串、數字的錯誤操作方式與疑難雜症的解法。 2018-10-11T02:00:00+00:00 https://www.cythilya.tw/2018/10/11/types 本文主要會談到 (1) 何謂「型別」？內建型別有哪些？常見疑難雜症與解法；(2) 未定義（undefined）vs 未宣告（undeclared）。 2018-10-10T02:00:00+00:00 https://www.cythilya.tw/2018/10/10/intro-2 在上一篇暖身文章中大致聊過了一些基本知識，像是運算子、運算式、值與型別、變數、條件式、迴圈，本文還會再探討一些基礎概念，像是變數、函式範疇、拉升、巢狀範疇、嚴格模式、IIFE、閉包、模組、this、原型、Polyfill 與 Transpiler。本文也僅是概念而已，之後會有單篇章節細細討論的，所以就算是暖身 Part 2 摟。 2018-10-09T02:00:00+00:00 https://www.cythilya.tw/2018/10/09/intro-1 本文主要內容為程式設計簡介，在此可看到在初學階段所必須理解的各種專有名詞。 2018-10-08T02:00:00+00:00 https://www.cythilya.tw/2018/10/08/ironman-ready-go 這次鐵人賽的主題是「你懂 JavaScript 嗎？」，主要內容是「You Don't Know JS」系列書的讀書筆記。為什麼要讀這一系列的書呢？由於近幾年的年度願望中都有「讀完 You Don't Know JS 系列書」這一項（掩面），但苦於各種理由而導致進度嚴重落後（哭），那麼就讓我藉由這次鐵人賽一口氣讀完吧（握拳）！ 2018-09-13T02:00:00+00:00 https://www.cythilya.tw/2018/09/13/user-centric-performance-metrics 說明常用的效能測量指標。 2018-09-11T02:00:00+00:00 https://www.cythilya.tw/2018/09/11/wrap-up-and-demo 針對網站進行各種工具的測試並做優化。 2018-09-10T02:00:00+00:00 https://www.cythilya.tw/2018/09/10/cache 本文主要探討記憶體快取、Service Worker 快取、HTTP 快取和 Push 快取。 2018-09-08T02:00:00+00:00 https://www.cythilya.tw/2018/09/08/http-requests 網頁上所有的文字、圖片、樣式和腳本都需要經由發送 HTTP Requests 從伺服器下載來取得，網頁大部份的時間大都花在下載資源上，只有少少的時間是花在渲染上。本文主要探討如何減少 HTTP Requests 的數量。 2018-09-05T03:00:00+00:00 https://www.cythilya.tw/2018/09/05/measuring-performance 在檢測加載效能時，我們會使用一些工具做測量，而使用這些工具的目的是為了量化效能優劣狀況（來做比較），找出潛在問題並改善，例如：圖檔大小、HTTP Request 數量、程式碼是否最小化、壓縮、快取等。 2018-09-05T02:00:00+00:00 https://www.cythilya.tw/2018/09/05/text-content 文字資源（Text Content）的優化，以下列出加快從伺服器下載的有效方法。 2018-09-03T02:00:00+00:00 https://www.cythilya.tw/2018/09/03/debounce-input-handlers 處理輸入的函式可能會造成效能問題，例如：阻礙幀（Frame）的繪製，導致畫面無法順利繪製；還有可能造成額外的版面配置（Recaculate Layout / Reflow）工作。 2018-08-24T02:00:00+00:00 https://www.cythilya.tw/2018/08/24/responsive-images 在行動裝置上關於圖片常遇到圖檔體積過大或解析度不佳等問題，這些問題可經由選擇適當的圖片格式、壓縮、設定適合的尺寸、依照解析度提供適當的圖片來解決，本文要探討的是如何在 HTML 上使用 picture 與 img srcset sizes 來讓瀏覽器根據自身環境選擇適當的圖檔。 2018-08-22T02:00:00+00:00 https://www.cythilya.tw/2018/08/22/image-compression 記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。 2018-08-20T02:00:00+00:00 https://www.cythilya.tw/2018/08/20/svg-sprites 小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites，到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites，來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位；後半段說明各種 SVG Icon 的使用方式和優缺比較。 2018-08-14T02:00:00+00:00 https://www.cythilya.tw/2018/08/14/babel-plugin-react-css-modules 樣式管理一直是前端工程師的痛點（很煩 (╯‵□′)╯︵┴─┴），因此 CSS 的模組化方法從過去的 OOCSS、SMACSS，到近代的 BEM，還有最近的 CSS Modules 與 CSS in JS，企圖讓程式碼簡潔易懂、可重用，進而有效率地開發和維護。這裡記錄我的玩具「吃什麼，どっち」使用 CSS Modules 之 babel-plugin-react-css-modules 的實作過程。 2018-08-10T02:00:00+00:00 https://www.cythilya.tw/2018/08/10/postcss PostCSS 是一個使用 JavaScript 轉換 CSS 的工具，它可以做的事情很多，像是加入各家瀏覽器的前綴詞（prefix）、將先進的功能轉為目前主流瀏覽器所能支援的語法、語法檢查和報錯、支援 Grid System、使用類似 SASS 的功能等。 2018-07-31T02:00:00+00:00 https://www.cythilya.tw/2018/07/31/preload-vs-prefetch 比較 Preload 與 Prefetch 的異同。 2018-07-30T02:00:00+00:00 https://www.cythilya.tw/2018/07/30/image-optimization 實作「圖片最佳化（Image Optimization）」的第一個問題是「真的需要這個圖檔嗎？」，去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代，可以做哪些優化？」。 2018-07-27T02:00:00+00:00 https://www.cythilya.tw/2018/07/27/http-caching HTTP Caching。 2018-07-26T02:00:00+00:00 https://www.cythilya.tw/2018/07/26/base64-images 將圖片轉為編碼字串，讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼，以減少 HTTP Request。適合較少更新的小圖，例如 icon 等。 2018-07-23T02:00:00+00:00 https://www.cythilya.tw/2018/07/23/browser-rendering-performance 瀏覽器渲染效能（Browser Rendering Performance）總整理 (ゝ∀･) 2018-07-22T02:00:00+00:00 https://www.cythilya.tw/2018/07/22/improving-rendering-performance-example-newsticker 使用 Newsticker 作為改進渲染效能的範例，以下列出需要改進之處與解法，並附上測試結果。 2018-07-21T02:00:00+00:00 https://www.cythilya.tw/2018/07/21/improving-rendering-performance-example-hacker-news 使用 News Aggregator 作為改進渲染效能的範例，以下列出需要改進之處與解法，並附上測試結果。 2018-07-20T02:00:00+00:00 https://www.cythilya.tw/2018/07/20/compositing-and-painting 更詳細探討如何優化像素管道（Browser Rendering Pipeline）的繪製（Paint）和合成（Composite）這兩個階段。 2018-07-19T03:00:00+00:00 https://www.cythilya.tw/2018/07/19/styles-and-layout 更詳細探討如何優化像素管道（Browser Rendering Pipeline）的樣式計算（Recalculate Styles）和版面配置（Recaculate Layout / Reflow）這兩個階段。 2018-07-19T02:00:00+00:00 https://www.cythilya.tw/2018/07/19/improving-javascript-performance 避免 Micro-optimization、requestAnimationFrame、JavaScript Profiler、Web Workers、JS Memory Management。 2018-07-18T02:00:00+00:00 https://www.cythilya.tw/2018/07/18/web-workers JavaScript 通常在作業系統的 Main Thread 執行，但若把程式碼放在 Web Workers 就可另闢戰場-Worker Thread，兩條線互不影響，讓 JavaScript 在背景執行，並且兩線可由訊息溝通-使用 postMessage 發送訊息、onmessage 接收訊息。通常我們會將需要長時間運算且不含 Window 或 DOM Element 操作的程式碼放在 Web Workers，好處是不阻塞 Main Thread 而讓速度變快。 2018-07-17T02:00:00+00:00 https://www.cythilya.tw/2018/07/17/weapons-of-jank-destruction 如何在 iOS 裝置上使用 Chrome DevTools 和 Safari Web Inspector 遠端除錯？ 2018-07-16T02:00:00+00:00 https://www.cythilya.tw/2018/07/16/app-lifecycles 以更高階的角度來看如何優化效能-App 的生命週期，讓開發者在 App 生命週期的各階段對於優化工作能做更好的選擇。 2018-07-13T02:00:00+00:00 https://www.cythilya.tw/2018/07/13/critical-rendering-path 現今裝置更新畫面的頻率是每秒 60 幀（60Hz 或稱 60fps），意即每幀運行的時間最多是 16.67ms。但瀏覽器不僅要渲染畫面，還有很多事情要忙，因此每幀運行的時間只能約 10 ~ 12ms。若瀏覽器拖太久才更新畫面，就會產生顫動（Juddering）。想提高更新畫面的頻率、避免顫動，就要了解瀏覽器如何渲染畫面。 2018-06-26T02:00:00+00:00 https://www.cythilya.tw/2018/06/26/animation-optimization 動畫效能優化筆記。這裡提供三個方向：使用 requestAnimationFrame、從瀏覽器渲染機制著手和使用 will-change。 2018-06-21T02:00:00+00:00 https://www.cythilya.tw/2018/06/21/react-why-did-you-update 「Why did you update」是一個用來檢測 React 元件是否需要重新渲染的工具。若被判定不需要重新渲染，會 console 出這個元件先前與目前的 props 和 state 資訊和建議，作為開發者調整的依據。 2018-06-19T02:00:00+00:00 https://www.cythilya.tw/2018/06/19/git-merge-branch-into-master 四種將分支與主線同步的方法。 2018-06-17T02:00:00+00:00 https://www.cythilya.tw/2018/06/17/array-and-object-handling 使用 Array.map、Object.values 和 Object.keys 處理「物件中有物件」和「陣列中有物件」的情況。 2018-06-05T02:00:00+00:00 https://www.cythilya.tw/2018/06/05/css-methodologies OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範（或稱心法、解法）存在的目的都是為了讓程式碼易懂、可重用，進而有效率地開發和維護。 2018-06-04T02:00:00+00:00 https://www.cythilya.tw/2018/06/04/git-rebase-squash-vs-fixup 打指令 git rebase -i <sha-1> 後可進入互動介面，為提交紀錄換順序、編輯訊息或做合併。其中 Squash 和 Fixup 的差異是什麼呢？ 2018-05-30T02:00:00+00:00 https://www.cythilya.tw/2018/05/30/git-cherry-pick 在開發階段的尾聲，準備合併回主線時，老闆說「B、C 功能會在這次上線，A 功能再等等吧」這時候就不是每個 Commit 都需要合併至主線了，而是挑出需要的就好，又為了維護主線的乾淨整齊，合併後只能有一個提交記錄。這要怎麼做呢？ 2018-05-29T02:00:00+00:00 https://www.cythilya.tw/2018/05/29/git-merge-squash-vs-rebase-squash 比較 Merge Squash 與 Rebase Squash。 2018-05-27T02:00:00+00:00 https://www.cythilya.tw/2018/05/27/git-merge-and-solve-conflict 更新分支+解衝突。 2018-05-22T02:00:00+00:00 https://www.cythilya.tw/2018/05/22/bem BEM 是一種 CSS class 命名的設計模式，將介面切割成許多獨立的區塊，以區塊（Block）、元素（Element）和修飾子（Modifier）來命名，優點是以元件觀念進行開發，具有重用性。 它擁有 OOCSS 的架構清楚的美好，也沒有 SMACSS 複雜或令人混淆的部份，因此 BEM 是一個很優秀的 CSS 架構指南。 2018-05-20T02:00:00+00:00 https://www.cythilya.tw/2018/05/20/react-hoc Higher-Order Components（HOC）是一個函數，可代入元件（Component）作為參數，並回傳一個新的元件。使用 HOC 的目的是將通用的邏輯放在 HOC 中，變動的部分就由代入 Component 的 props 和 state 傳入即可。 2018-04-25T02:00:00+00:00 https://www.cythilya.tw/2018/04/25/react-component-package-for-npm 簡單記錄如何建立一個 React Component 並發佈到 NPM 上。 2018-04-17T02:00:00+00:00 https://www.cythilya.tw/2018/04/17/redux-promise redux-promise 是一個符合 Flux Standard Action（FSA）規範且專門給 Redux 所用的 middleware。redux-promise 接收 promise 作為輸入，並回傳 resolved 結果。 2018-04-14T02:00:00+00:00 https://www.cythilya.tw/2018/04/14/container-components-vs-presentational-components 比較 Container Components 與 Presentational Components。 2018-04-09T02:00:00+00:00 https://www.cythilya.tw/2018/04/09/react-functional-components-vs-class-based-components Functional Components、Class-based Components 與 Pure Components。 2018-04-05T02:00:00+00:00 https://www.cythilya.tw/2018/04/05/git 設定、指令、疑難雜症。 2018-04-02T02:00:00+00:00 https://www.cythilya.tw/2018/04/02/es6-top-features-you-must-know ES6 快速小筆記：let / const、物件縮寫 Object Shorthand、預設傳入參數 Default Paramaters、解構賦值 Destructuring Assignment、字串模板 String Template、擴展運算子 Spread Operator、其餘運算子 Rest Operator、箭頭函數 Arrow Function、Class、Mudule 等。 2018-03-26T02:00:00+00:00 https://www.cythilya.tw/2018/03/26/nightwatch101 本篇文章主要是將去年底今年初參加「2018 iT 邦幫忙鐵人賽」與後續在 VueJS 台灣 meetup 201803@五倍紅寶石所分享的文件做收納整理。 2018-02-17T02:00:00+00:00 https://www.cythilya.tw/2018/02/17/firebase-push-notification 使用 Firebase 實作瀏覽器推播通知。 2018-02-15T01:00:00+00:00 https://www.cythilya.tw/2018/02/15/2017-yearly-review 這是我在 2017 年最值得聊聊的十件事 (*´∀`)~♥ 2018-01-09T01:00:00+00:00 https://www.cythilya.tw/2018/01/09/nightwatch-summary 整理一下走到目前為止的想法。 2018-01-08T01:00:00+00:00 https://www.cythilya.tw/2018/01/08/selenium-ide Selenium IDE 可說是導入自動化測試的起手式。它很類似按鍵精靈，錄製好腳本後，執行腳本來自動完成文字輸入、點擊或跳頁等動作，確認執行動作皆如預期，若不符合預期狀況則停止並報錯，可協助確認 UI 功能是否正常執行，大大減低手動測試所花費的時間和精力。 2018-01-07T01:00:00+00:00 https://www.cythilya.tw/2018/01/07/nightwatch-standalone-chrome-driver 這篇要說明一個更輕巧簡便的測試方法－不經 Selenium Server 而獨立使用 Webdriver 來啟動測試的方法，以 ChromeDriver 為例。 2018-01-06T01:00:00+00:00 https://www.cythilya.tw/2018/01/06/nightwatch-example-2 綜合使用前面篇章所提到的內容－標籤、Page Objects 和客製化斷言，我們來做個範例... 2018-01-05T01:00:00+00:00 https://www.cythilya.tw/2018/01/05/nightwatch-custom-reporter 由於在 nightwatch.conf.js 的 output_folder 設定了測試報告的路徑，因此在專案目錄底下可看到 reports 的資料夾，裡面的 JUnit XML 測試報告檔案即是按 group 所放置，像是這樣... 2018-01-04T01:00:00+00:00 https://www.cythilya.tw/2018/01/04/nightwatch-custom-assertions Nightwatch 允許開發者定義自己的斷言指令，擴充 `.assert` 和 `.verify` 命名空間。 2018-01-03T01:00:00+00:00 https://www.cythilya.tw/2018/01/03/nightwatch-custom-commands Nightwatch 允許開發者定義自己的客製化指令（Custom Commands），這對將常用的功能抽出來成為模組，很有幫助。 2018-01-02T01:00:00+00:00 https://www.cythilya.tw/2018/01/02/nightwatch-page-objects-sections Page Objects 預先定義一個頁面裡面的元素（element）、區塊（section）和命令（command），意即將一個網頁切分成許多個片段，然後利用物件把這些片段包裝起來使用，例如：將一個頁面區分為 header、footer 等，然後在測試程式中就用這樣的 header 或 footer 為單位操作 DOM element。 2018-01-01T01:00:00+00:00 https://www.cythilya.tw/2018/01/01/nightwatch-page-objects Page Objects 預先定義一個頁面裡面的元素（Element）、區塊（Section）和命令（Command），意即將一個網頁切分成許多個片段，利用物件把這些片段包裝起來使用，例如：將一個頁面區分為 header、footer 等，然後在測試程式中就用這樣的 header 或 footer 為單位操作 DOM element。 2017-12-31T01:00:00+00:00 https://www.cythilya.tw/2017/12/31/nightwatch-parallel-running 本篇來看看 Nightwatch Test Runner 如何同時指定不同環境來跑測試、調整 Terminal Output 的顯示結果和經由 Test Workers 實現平行執行。 2017-12-30T01:00:00+00:00 https://www.cythilya.tw/2017/12/30/nightwatch-disabling-tests 本篇要來聊聊禁跑特定 Test Suite 和 Test Case 的方法。 2017-12-29T02:00:00+00:00 https://www.cythilya.tw/2017/12/29/nightwatch-test-tags Nightwatch 允許開發者使用標籤（tag）標記測試程式，在跑測試的時候可指定跑特定標籤的部份。使用標籤的好處是一個測試可有多個不同的標籤，不必受限於分類的唯一和垂直特性，相較有彈性。 2017-12-28T01:00:00+00:00 https://www.cythilya.tw/2017/12/28/nightwatch-test-groups Nightwatch 允許開發者將測試程式分組（group）測試，分組的方式就是將測試程式碼放進同一個資料夾，群組名稱即資料夾名稱。 2017-12-27T01:00:00+00:00 https://www.cythilya.tw/2017/12/27/nightwatch-test-runner Nightwatch 提供 Command Line Test Runner，便於設定、跑測試和產生測試報告。本篇先來探討安裝方式的差異和如何針對單檔、多檔、單檔+資料夾進行測試。 2017-12-26T01:00:00+00:00 https://www.cythilya.tw/2017/12/26/nightwatch-example-1 來個簡單範例－拿我們家新上線的功能－購物車和新版結帳頁來玩玩！ 2017-12-25T01:00:00+00:00 https://www.cythilya.tw/2017/12/25/nightwatch-external-globals 隨著測試環境和加入功能愈來愈多元複雜，設定檔 `nightwatch.conf.js` 漸漸的就變成了一個龐然大物。大怪物來了 (☉д⊙) 來幫設定檔減肥 + 美化吧！ (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ 2017-12-24T01:00:00+00:00 https://www.cythilya.tw/2017/12/24/nightwatch-asynchronous-test-hooks 所有的鉤子（Test Hooks）－before[Each] 與 after[Each] method 都可以執行非同步（asynchronous）的動作。如果要執行非同步的動作，就要傳入 callback 作為第二個參數，並在最後執行這個 callback。若不呼叫這個 callback 會導致逾時錯誤（timout error）。 2017-12-23T01:00:00+00:00 https://www.cythilya.tw/2017/12/23/nightwatch-test-hooks Nightwatch 提供 before/after 與 beforeEach/afterEach 鉤子。 2017-12-22T01:00:00+00:00 https://www.cythilya.tw/2017/12/22/nightwatch-bdd-verify 在上一篇 Assert 提到，.assert 和 .verify 的 library 基本上是做相同的事情，差別只在於斷言（assertion）失敗時的處理方式。 2017-12-21T01:00:00+00:00 https://www.cythilya.tw/2017/12/21/nightwatch-bdd-assert Nightwatch 斷言庫（Assertion Library）除了提供上一篇提到的 Expect 外，還有 Assert 和 Verify。在 Nightwatch 中，.assert 和 .verify 的 library 基本上是做相同的事情，差別只在於斷言失敗時的處理方式。 2017-12-20T01:00:00+00:00 https://www.cythilya.tw/2017/12/20/nightwatch-bdd-expect Nightwatch 的 BDD Expect 是源自於 Chai 的 Expect API，並且只能用於網頁元素的比對。expect 比 assert 更有彈性和口語化，缺點是不能串起來（chain）使用。 2017-12-19T01:00:00+00:00 https://www.cythilya.tw/2017/12/19/nightwatch-commands-part-3 指令分為兩種－Nightwatch 提供的指令與開發者撰寫的客製化指令，以下繼續 Part 3，來聊聊與執行流程相關的指令。 2017-12-18T01:00:00+00:00 https://www.cythilya.tw/2017/12/18/nightwatch-commands-part-2 指令分為兩種－Nightwatch 提供的指令與開發者撰寫的客製化指令，以下繼續 Part 2，來聊聊 Cookie、Window 和 Log 相關的指令。 2017-12-17T01:00:00+00:00 https://www.cythilya.tw/2017/12/17/nightwatch-commands-part-1 這篇 Part 1 先來看一些 UI 操作相關的指令，例如元素定位、設值、點擊和檢視是否存在或可見等。 2017-12-16T03:00:00+00:00 https://www.cythilya.tw/2017/12/16/nightwatch-xpath 做 End-to-End Testing 的第一步就是抓到網頁的元素，而定位網頁元素有兩種方法「CSS Selector」和「Xpath」，在本篇使用 Xpath。 2017-12-15T01:00:00+00:00 https://www.cythilya.tw/2017/12/15/nightwatch-css-selector 做 End-to-End Testing 的第一步就是抓到網頁的元素，而定位網頁元素有兩種方法「CSS Selector」和「Xpath」，以下使用 CSS Selector。 2017-12-14T01:00:00+00:00 https://www.cythilya.tw/2017/12/14/nightwatch-config Nightwatch 提供了 Command-line Test Runner，用來跑各種類型的測試，例如：指定測試環境、依群組或標籤或個別檔案、循序或平行執行等。其設定檔的預設名稱是 nightwatch.json 或 nightwatch.conf.js，如果兩者都出現，會優先選擇 nightwatch.conf.js，設定檔位置在這個專案的根目錄底下。 2017-12-13T01:00:00+00:00 https://www.cythilya.tw/2017/12/13/nightwatch-installation 環境建置。 2017-12-12T01:00:00+00:00 https://www.cythilya.tw/2017/12/12/nightwatch-and-selenium-webdriver 介紹 Nightwatch、Selenium Webdriver 與運作原理。 2017-12-11T01:00:00+00:00 https://www.cythilya.tw/2017/12/11/nightwatch-intro 這一系列 2018 鐵人賽「Nightwatch101：使用 Nightwatch 實現 End-to-End Testing」會有以下內容：Nightwatch 與 Selenium Webdriver、使用 CSS Selector和 Xpath 定位網頁元素、API（Commands、Expect、Assert、Verify）、Test Hooks、Nightwatch Test Runner、Page Objects、客製化指令與斷言、客製化測試報告、測試程式範例、Selenium IDE。希望大家不吝指教 :) 2017-11-02T02:00:00+00:00 https://www.cythilya.tw/2017/11/02/vue-axios axios 是以 Promise 為基礎、可供瀏覽器和 Node.js 環境來發出 HTTP client request。axios-mock-adapter 簡單說就是在發出 HTTP client request 後，提供假的回傳資料。 2017-10-28T02:00:00+00:00 https://www.cythilya.tw/2017/10/28/nightwatch Nightwatch 是專門給網頁使用的自動化測試框架，它使用 W3C WebDriver 所提供的 API（過去稱為 Selenium WebDriver）來自動操作瀏覽器。好處是可簡化設定 CI（Continuous Integration，持續整合）的過程，自動執行 End-to-End 測試與單元測試。 2017-10-22T02:00:00+00:00 https://www.cythilya.tw/2017/10/22/vue-component-dynamic-components 動態元件（Dynamic-Components）是指可根據傳入參數的不同，而去切換不同的元件。 2017-10-11T02:00:00+00:00 https://www.cythilya.tw/2017/10/11/vue-component-slot Slot 是一種用於內容分配（Content Distribution / Transclusion）的元件，適用於複雜或巢狀元件的實作上，可以想像成是空間預留的方法，在迭代過程中再把內容塞進去。 2017-09-24T02:00:00+00:00 https://www.cythilya.tw/2017/09/24/vue-mixins Mixins 是一種讓元件共用功能的方法，使用方式即是將共用功能以物件的方式傳入 mixins option。mixin object 可傳入元件的任何 option，例如：data、computed 或 methods。當元件選用 Mixins 時，使用的 mixin object 會和此元件的其他 option 混用。 2017-09-17T02:00:00+00:00 https://www.cythilya.tw/2017/09/17/unit-test-with-mocha-chai-and-sinon 單元測試：Mocha、Chai 和 Sinon。 2017-09-10T02:00:00+00:00 https://www.cythilya.tw/2017/09/10/jquery-attr-vs-prop Attribute 與 Property 的差異、jQuery 相關程式碼解析。 2017-09-04T02:00:00+00:00 https://www.cythilya.tw/2017/09/04/running-mocha-and-chai-in-the-browser 在瀏覽器中使用 Mocha 和 Chai 進行單元測試。 2017-08-27T02:00:00+00:00 https://www.cythilya.tw/2017/08/27/css-animation 使用 CSS3 Transition 和 Animation 製作動畫、效能優化。 2017-07-16T02:00:00+00:00 https://www.cythilya.tw/2017/07/16/service-worker Service Worker 的瀏覽器支援度檢查、註冊（Register）、下載（Download）、安裝（Install）、啟動（Active）、閒置（Idle）、發生錯誤（Error）、存取（Fetch）、收發訊息（Message）和結束（Terminated）。 2017-07-14T02:00:00+00:00 https://www.cythilya.tw/2017/07/14/selenium-ide Selenium IDE 可協助確認 UI 功能是否正常執行，是導入自動化測試的起手式。它很類似按鍵精靈，錄製好腳本後，執行腳本來自動完成文字輸入、點擊或跳頁等動作，確認執行動作皆如預期，若不符合預期狀況則停止並報錯，大大減低手動測試所花費的時間和精力。 2017-07-09T02:00:00+00:00 https://www.cythilya.tw/2017/07/09/notification 實作瀏覽器推播通知的過程以下面的流程圖表示，會經過幾個步驟：瀏覽器支援度檢查、請求授權、建立通知、發出通知、分門別類通知、事件處理和錯誤處理。 2017-06-24T02:00:00+00:00 https://www.cythilya.tw/2017/06/24/otaru-blue-cave 小樽必玩 &#9829; 到青の洞窟划獨木舟、看海、窗岩、海蝕門！ 2017-06-09T02:00:00+00:00 https://www.cythilya.tw/2017/06/09/vue-transition-effects Vue.js 的進階過渡效果，含載入時的漸變效果、過度模式、元件間的過渡、列表過渡、可重複使用的過渡效果。 2017-06-01T02:00:00+00:00 https://www.cythilya.tw/2017/06/01/vue-animations Vue.js 的基本動畫效果，含客製化樣式類別、鉤子和範例。 2017-05-28T02:00:00+00:00 https://www.cythilya.tw/2017/05/28/vue-transitions Vue.js 提供已封裝好的 Transitions 元件，讓開發者在特定情況下處理單一元素或元件時，能加入進入（Enter）和離開（Leave）漸變（Transitions）的效果。 Vue.js 會自動將定義好的 class 用在漸變效果中，也可同 JavaScript 鉤子一起使用。 2017-05-24T02:00:00+00:00 https://www.cythilya.tw/2017/05/24/jquery-deferred-object 使用 Deferred Object 處理非同步狀況。 2017-05-23T02:00:00+00:00 https://www.cythilya.tw/2017/05/23/vue-filter Filter 過濾器，並比較 Filter 和 Computed 的差異。 2017-05-21T02:00:00+00:00 https://www.cythilya.tw/2017/05/21/vue-study-note 開發環境建置、Vue Instance、模版語法（Directives）、元件（Components）和 Todo List 小範例。 2017-05-20T02:00:00+00:00 https://www.cythilya.tw/2017/05/20/vue-component-events-up 使用 v-on 綁定自定義事件、使用自定義事件的表單輸入元件。 2017-05-19T02:00:00+00:00 https://www.cythilya.tw/2017/05/19/javascript-is-date-exist 檢查日期是否存在，這裡分為兩個部份「該年是否為閏年」和「該日是否超過每個月份最大日期限制」。 2017-05-17T02:00:00+00:00 https://www.cythilya.tw/2017/05/17/javascript-date-add-days 將指定日期加上 X 天，得到一個延後的日期。 2017-05-16T02:00:00+00:00 https://www.cythilya.tw/2017/05/16/vue-component-prop 使用元件的目的是希望互相干擾的程度愈小愈好，因此非必要儘量不要溝通。若遇到需要由父層傳遞資料給子層的時候，使用 prop 即可。 2017-05-11T02:00:00+00:00 https://www.cythilya.tw/2017/05/11/vue-component-intro 每個 Vue.js 的應用程式都是從 Vue 建構式 (vue constructor) 建立根實體 (root vue instance) 開始，再由一個個元件 (Components) 搭建上去而來的，透過元件的方式能讓開發者將程式碼封裝而更好重用。 2017-05-08T02:00:00+00:00 https://www.cythilya.tw/2017/05/08/javascript-find-item-in-an-array 整理了一些在陣列中找東西的方法。 2017-05-05T02:00:00+00:00 https://www.cythilya.tw/2017/05/05/vue-custom-directive Vue.js 提供自定義指令 (Custom Directive) 讓開發者直接從底層操作 DOM 物件。 2017-05-02T02:00:00+00:00 https://www.cythilya.tw/2017/05/02/vue-v-cloak 使用 v-cloak 解決 Vue Instance 完成編譯前顯示變數的問題。 2017-04-27T02:00:00+00:00 https://www.cythilya.tw/2017/04/27/vue-list-rendering 使用 v-for 迭代陣列或物件中的元素。 2017-04-22T02:00:00+00:00 https://www.cythilya.tw/2017/04/22/vue-conditional-rendering 條件渲染 v-if、v-show，並比較兩者差異。 2017-04-21T02:00:00+00:00 https://www.cythilya.tw/2017/04/21/vue-v-bind-class-and-style v-bind 屬性綁定、Class 與 Style 綁定。 2017-04-17T02:00:00+00:00 https://www.cythilya.tw/2017/04/17/vue-methods-and-event-handling Methods 與事件處理 (Event Handling)。 2017-04-15T03:00:00+00:00 https://www.cythilya.tw/2017/04/15/vue-watch Watch 可讓我們監視某個值，當這個值變動的時候，就去做某些事情。 2017-04-15T02:00:00+00:00 https://www.cythilya.tw/2017/04/15/vue-computed 計算屬性 (Computed Properties)，並且和 Method、Watch 做比較。 2017-04-14T02:00:00+00:00 https://www.cythilya.tw/2017/04/14/vue-data-v-model 如何利用 data 與 v-model 實現雙向綁定？原理、語法與表單元件範例。 2017-04-11T02:00:00+00:00 https://www.cythilya.tw/2017/04/11/vue-instance Vue Instance、Instance Lifecycle、Instance Lifecycle Hook 與 Virtual DOM。 2017-04-07T02:00:00+00:00 https://www.cythilya.tw/2017/04/07/vue-env-setting Vue.js 的開發環境建置有以下幾種方法：使用 CDN 或下載後使用本機檔案、npm 安裝和使用 vue-cli。 2017-04-06T02:00:00+00:00 https://www.cythilya.tw/2017/04/06/flexbox-advance 圖解 Flexbox 進階屬性。 2017-04-04T02:00:00+00:00 https://www.cythilya.tw/2017/04/04/flexbox-basics 圖解 Flexbox 基本屬性。 2017-04-03T02:00:00+00:00 https://www.cythilya.tw/2017/04/03/vue-xpepermint-template 如果需要快速建立一個 Vue.js + Node.js 的專案，可以考慮這個樣版 xpepermint，它提供了 server-side rendering、router、vuex store、form validation、i18n 與 l10n 等。 2017-04-02T02:00:00+00:00 https://www.cythilya.tw/2017/04/02/vue-cli 快速建立 Vue.js 專案的工具，對於 Node.js 工具熟悉的開發者，推薦使用 vue-cli。 2017-04-01T02:00:00+00:00 https://www.cythilya.tw/2017/04/01/todo-list-react-and-redux-example 使用 React、Redux 和 React-Bootstrap 實作 Todo List。 2017-03-31T02:00:00+00:00 https://www.cythilya.tw/2017/03/31/virtual-dom Virtual DOM 是以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。用途是不直接操作 DOM，而改操作這些物件。待一個段落後，再將這些變更更新回真實的 DOM 上，以期提升效能。 2017-03-28T02:00:00+00:00 https://www.cythilya.tw/2017/03/28/rss-and-seo RSS 與 SEO 操作相關。網站在做 SEO 的時，做完基本的 HTML 優化後，接著就是要做 RSS 和標籤，這次來聊聊 RSS。 2017-03-25T02:00:00+00:00 https://www.cythilya.tw/2017/03/25/todo-list-with-vue-and-vuex 利用 Vue.js 與 Vuex 實作一個 Todo List，並且使用 Bootstrap Vue。 2017-03-12T02:00:00+00:00 https://www.cythilya.tw/2017/03/12/uuid 使用 JavaScript 產生 UUID / GUID 的方法。這篇文章整理了幾種使用 JavaScript 產生 UUID / GUID 的方法和優缺比較。 2017-03-07T15:00:00+00:00 https://www.cythilya.tw/2017/03/07/todolist-vue-example 利用 Vue.js 簡單實作一個 Todo List。功能含有新增 / 修改 / 刪除 todo、更新 todo 狀態、切換檢視模式、查看各檢視模式下的數量。 2017-02-27T05:00:00+00:00 https://www.cythilya.tw/2017/02/27/currying-in-javascript Currying（柯里化），又稱為 parital application 或 partial evaluation，是個「將一個接受 n 個參數的 function，轉變成 n 個只接受一個參數的 function」的過程。 2017-02-12T09:00:00+00:00 https://www.cythilya.tw/2017/02/12/immutability-immutablejs-seamless-immutable 這陣子為了使用 react.js 重構專案，看了不少相關資料，來整理一下 immutable.js 的部份吧。以下的內容包含 immutablility、immutable.js 和 seamless-immutable。 2017-02-04T07:00:00+00:00 https://www.cythilya.tw/2017/02/04/2016-yearly-review 每年過年期間我總會檢視過去一年的成果和訂定當年的年度計劃。2017 年的年假期間整理了 2016 年最有收穫的十件事，如果最近有約碰面，說不定可以分享一下彼此的近況和展望（與啟發？）。 2017-01-27T08:03:00+00:00 https://www.cythilya.tw/2017/01/27/todolist-redux-with-jquery-example Redux 是用來管理狀態（state）的框架，可以和 React、Angular、jQuery 甚至 Pure JavaScript 一起使用。 以下就簡單使用jQuery實作Todo List。 2017-01-22T08:15:00+00:00 https://www.cythilya.tw/2017/01/22/two-way-binding 雙向綁定就是 (一)可以經由改變model的值而自動更新DOM的內容，並且 (二)經由改變DOM的內容而自動更新model的值。以下分這兩部份來實作... 2017-01-03T15:04:00+00:00 https://www.cythilya.tw/2017/01/03/babel-register-ignore-styles babel-register 無法正確讀取 CSS 相關檔案的解法。 2016-11-24T02:00:00+00:00 https://www.cythilya.tw/2016/11/24/indexation-for-seo 過去在操作規模較小的網站時，重點往往是增加網站的網頁索引數，但操作大型網站除了增加索引數外，更重要的是引導搜尋引擎爬取正確的路線 / 頁面，意即有效控制索引範圍。一方面是不浪費索引的額度（Google 對每個網站都有一定的索引額度），另一方面也是不增加我們網站本身的流量負擔（CDN 等也是很貴的）。 2016-10-28T02:00:00+00:00 https://www.cythilya.tw/2016/10/28/es6-let-const-block-level-scope let, const, var, function declaration, block-level scope, hoisting 相關筆記。 2016-09-16T02:00:00+00:00 https://www.cythilya.tw/2016/09/16/seo-prerender-node 利用 Prerender Node 為 SPA 做 SEO 2016-09-11T02:00:00+00:00 https://www.cythilya.tw/2016/09/11/phantomjs-and-seo 隨著前端技術的不斷更新，使用前端框架（React、Vue 等）來建構網站是普遍現象。但目前搜尋引擎無法有效讀取使用 JavaScript render 出來的頁面，且使用 ajax Crawling 的解法只適用於 Google 又此法已被廢棄，因此另一解法就是使用 PhantomJS。 2016-08-27T02:00:00+00:00 https://www.cythilya.tw/2016/08/27/node-promise-q 假設我們要執行一項工作 task 3，但執行 task 3 之前要先依序完成工作 task 2 與 task 1。如果沒有使用 promise，而用 callback 的方式完成，程式碼大概會是這樣...要做（依賴）的事情愈多，深度就愈深，完全就是 callback hell 了。 2016-08-21T02:00:00+00:00 https://www.cythilya.tw/2016/08/21/amp 加速行動版網頁（AMP, Accelerated Mobile Pages）是 Google 推出的一套框架，用來使行動裝置網頁能快速載入。 在 Search Console 上會看到提示建議 Webmaster 使用與提交這樣的頁面。 2016-08-20T02:00:00+00:00 https://www.cythilya.tw/2016/08/20/gulp Gulp 是一套任務管理工具，讓前端的工作能自動化處理，例如：js 和 css 最小化、瀏覽器檢視、通知、檔名變更、加入版號等等。這裡做一些簡單筆記。 2016-08-15T02:00:00+00:00 https://www.cythilya.tw/2016/08/15/t3 T3 是一個 JavaScript UI Framework，主要的功能是讓程式碼更結構化。如果網站內的程式碼很雜亂的話，很適合用來整理散落在各處的程式碼（尤其是針對年紀大需要翻新的大型網站）。 2016-07-26T02:00:00+00:00 https://www.cythilya.tw/2016/07/26/robot-hubot-slack Hubot x Slack 串接紀錄。 2016-06-25T02:00:00+00:00 https://www.cythilya.tw/2016/06/25/dns-prefetching 預先做 DNS 解析（domain name resolution），將人類可理解的 domain name，轉為 IP address。瀏覽器載入頁面和資源時需做 DNS 解析，但若等到瀏覽該頁或要下載資源時才做 DNS 解析就太遲了（使用者需要等待一段時間），因此可預先執行。 2016-05-17T02:00:00+00:00 https://www.cythilya.tw/2016/05/17/rich-snippet-product-jsonld 假設想在搜尋結果頁上對單一商品呈現更為吸引人的 Rich Snippet 效果，例如出現星等、評論數（如下圖），就需要利用結構化資料（Structured Data）來達成。 2016-03-13T02:00:00+00:00 https://www.cythilya.tw/2016/03/13/jquery-map-grep 這陣子在整理系統內的程式碼，發現自己曾經使用一些過時的方法（例如：native javascript 操作陣列），而非使用 jQuery 提供的 API 來撰寫。以下整理並比較這兩種方法的差異。 2016-03-05T02:00:00+00:00 https://www.cythilya.tw/2016/03/05/css3-animations 一直以來我對 CSS3 動畫這件事情並沒有特別專注研究（如果需要也是用 JavaScript 完成 XD），直到最近因為工作需要才開始練習。以下紀錄一些我在這三天內看的資料和做的小練習（不是教學文）。 2016-02-11T02:00:00+00:00 https://www.cythilya.tw/2016/02/11/javascript-object-oriented-programming 關於 JavaScript Object Oriented Programming，會寫這一系列的文章是因為希望自己的 JavaScript 程式碼能更物件導向、更模組化。這一系列的文章有以下的內容... 2016-02-10T02:00:00+00:00 https://www.cythilya.tw/2016/02/10/early-and-late-binding JavaScript 在呼叫的時候設定 this 的值，而這個 this 的值有可能不是我們預期的結果。下面有幾個範例。 2016-02-09T02:00:00+00:00 https://www.cythilya.tw/2016/02/09/exceptions 「例外（Exceptions）」是一個特別且重要的處理錯誤的方法。 2016-02-08T02:00:00+00:00 https://www.cythilya.tw/2016/02/08/factory-constructor-pattern Factory Constructor Pattern 不使用 new 來宣告新物件，新物件用 function call 來建立。 2016-02-07T02:00:00+00:00 https://www.cythilya.tw/2016/02/07/all-in-one-constructor-pattern 所有的 method 和 property 都放在 consctructor 中，而不使用 prototype。 2016-02-06T02:00:00+00:00 https://www.cythilya.tw/2016/02/06/javascript-pseudo-classical-pattern 在 pseudo-classical pattern 中，物件是由「建構子」（constructor）這個函式所建立，並把 method 放到建構子的 prototype 中。 2016-02-05T02:00:00+00:00 https://www.cythilya.tw/2016/02/05/instanceof instanceof 允許檢查物件是否為給定的 constructor 所產生的。 2016-02-04T02:00:00+00:00 https://www.cythilya.tw/2016/02/04/constructor 物件有內建的屬性「constructor」，意即「參考建立此物件的 function」。 2016-02-03T02:00:00+00:00 https://www.cythilya.tw/2016/02/03/extending-natives Native JavaScript 物件將 method 存在 prototype 中。例如：當一個新的物件被建立，內容為空，但為何可以使用 toString 這個 method？ 2016-01-31T02:00:00+00:00 https://www.cythilya.tw/2016/01/31/prototypal-inheritance 對大多數的語言來說，它們擁有「Class」和「Object」，而 Class 繼承其它的Class。對於 JavaScript 來說，繼承是使用 prototype 來實作的，意即沒有 Class，而是由物件繼承其它的物件來達成繼承。 2015-12-27T02:00:00+00:00 https://www.cythilya.tw/2015/12/27/plugin 又重新看了 jQuery: Novice to Ninja，所以做了些關於 Plugin 的筆記。以下使用 jQuery Newsticker Plugin 作為說明範例。 2015-12-20T02:00:00+00:00 https://www.cythilya.tw/2015/12/20/google-search-algorithms 這幾天在準備 SEO Basics 的 slides，所以也順手整理了一下 Google 常見的搜尋演算法。 2015-12-06T02:00:00+00:00 https://www.cythilya.tw/2015/12/06/semantic-web 最近有個朋友做了網站優化，才調整 HTML5 Outline 就讓該網站被 Index 的頁面快速增加。一個好懂的網頁能讓搜尋引擎有效爬完讀懂，而且優化成本相對不大。如果要開始做 SEO，從頁面 HTML 結構開始做起，是較簡單、CP 值又高的好選擇。 2015-11-19T02:00:00+00:00 https://www.cythilya.tw/2015/11/19/angularjs-form-example 這個表單會展示常用表單元件、基本 Directive 和 Controller 的功能運作。由於網路上有很多大大的教學文章，因此在這裡只記錄一些我在學習與實作上遇到的重要觀念。 2015-09-09T02:00:00+00:00 https://www.cythilya.tw/2015/09/09/node-mongodb-rendering 經歷了前面關於 Node.js 基本安裝設定、模板引擎的熟悉，與一些基本的語法和操作，接著來到 MongoDB 的建置和使用，終於要把假資料換掉，使用真實世界的內容展現在畫面上啦。 2015-09-07T02:00:00+00:00 https://www.cythilya.tw/2015/09/07/mongovue-gui-tool-for-mongodb MongoVUE 是一個不錯的 MongoDB 的 GUI 工具，免費，該有的功能都有。因為實在無法不用 GUI 工具，所以看了幾個選擇後，選了 MongoVUE 來玩玩。 2015-09-04T02:00:00+00:00 https://www.cythilya.tw/2015/09/04/node-mongodb-mongolab 在連接 MongoDB 的時候遇到了一些小問題，將這些問題與解法記錄在這篇文章中。 2015-09-04T02:00:00+00:00 https://www.cythilya.tw/2015/09/04/eventpal-mobile-web 這陣子剛好在幫活動平台網站-活動咖 EventPal 設計 + 製作行動裝置版網頁，因此參考了不少前輩的作品 - Accupass、KKTIX、Pinkoi、friDay 等。在這裡記錄一些我對這些網站的想法，還有我們家產品所遇到的問題和設計的功能、解法。 2015-08-19T02:00:00+00:00 https://www.cythilya.tw/2015/08/19/node-nodemailer 使用 Nodemailer 來傳送 Email。 2015-08-18T02:00:00+00:00 https://www.cythilya.tw/2015/08/18/node-cookie-and-session Cookie and Session。 2015-08-16T02:00:00+00:00 https://www.cythilya.tw/2015/08/16/node-form-handling-and-file-uploads 表單處理與檔案上傳。 2015-08-12T02:00:00+00:00 https://www.cythilya.tw/2015/08/12/node-response-headers Response Headers 給駭客一個可以入侵網站的地方，具有資安意識的網站會隱藏或給予錯誤的資訊。 2015-08-10T02:00:00+00:00 https://www.cythilya.tw/2015/08/10/node-handlebars 使用 Handlebars 作為模版引擎。 2015-08-08T02:00:00+00:00 https://www.cythilya.tw/2015/08/08/node-express-partials 由於 Express EJS 版本 3 去除了部份的 middleware，不再支援 layout.ejs，因此若要製作 Partial View，可使用 express-partials。 2015-08-04T02:00:00+00:00 https://www.cythilya.tw/2015/08/04/hello-node 距離上次摸 Node.js - 使用 Node.js + Express 建構一個簡單的微博網站又是好長一段時間，這次從基本設定和簡單範例開始記錄。 2015-07-23T02:00:00+00:00 https://www.cythilya.tw/2015/07/23/angularjs-todolist 大約一年多前（還在前公司），RD 部門的工程師們組了讀書會，其中一個主題是研究當前火紅的 JavaScript 框架為之後平台改版做準備，當時還小不懂事的我看到 Ember.js 的可愛 Logo 便自告奮勇研讀。 2015-07-15T02:00:00+00:00 https://www.cythilya.tw/2015/07/15/javascript-design-pattern-strategy JavaScript Design Pattern「Strategy 策略模式」筆記。 2015-07-08T02:00:00+00:00 https://www.cythilya.tw/2015/07/08/javascript-event-delegation JavaScript Pattern「Event Delegation 事件委派」筆記。 2015-06-28T02:00:00+00:00 https://www.cythilya.tw/2015/06/28/javascript-design-pattern-iterator JavaScript Design Pattern「Iterator 迭代器模式」筆記。 2015-06-27T02:00:00+00:00 https://www.cythilya.tw/2015/06/27/javascript-design-pattern-factory JavaScript Design Pattern「Factory 工廠模式」筆記。 2015-06-26T02:00:00+00:00 https://www.cythilya.tw/2015/06/26/javascript-design-pattern-singleton JavaScript Design Pattern 「Singleton 單體模式」 筆記。 2015-06-25T02:00:00+00:00 https://www.cythilya.tw/2015/06/25/javascript-code-reuse-patterns JavaScript Pattern 之 Code Reuse Patterns 筆記。JavaScript 沒有 class 的概念，而物件也僅是名值對（key-value pair），表示可以即時建立和改變。但 JavaScript 卻有建構式，類似其他語言（例如：Java）使用 class 的語法。 2015-06-20T02:00:00+00:00 https://www.cythilya.tw/2015/06/20/structured-data-event-2 在上一個範例-結構化資料之「活動」範例（Part 1）中使用的規範是 Data-Vocabulary.org，這次改用 Microdata 與 JSON-LD，並記錄更多實作上的疑難雜症。 2015-06-18T02:00:00+00:00 https://www.cythilya.tw/2015/06/18/structured-data-event 搜尋引擎愈來愈人性化，提供愈來愈多實用的資料給使用者做決策。因此，前端工程師的切版不再只是依照設計稿呈現美麗的畫面和特效而已，還要能利用結構化資料，讓網站內容在搜尋結果上顯示更多資訊。拿活動來說，如下圖紅框所示，搜尋活動「資策會數據創新應用黑客松 IDEAS Tech Hackathon」，第三則結果出現了活動時間「7月25日 - 7月26日」和活動地點「TAF 空總創新基地 - 空軍總部舊址中正堂, 台灣」。使用者不但能在搜尋結果知道活動標題、短描述和網址外，還能馬上知道日期（區間）、地點。 2015-06-18T02:00:00+00:00 https://www.cythilya.tw/2015/06/18/javascript-module-pattern Module Pattern 利用函數的「閉包（Closure）」特性來避免汙染全域的問題，意即使用閉包來提供封裝的功能，將方法和變數限制在一個範圍內存取與使用。這樣的好處除了避免汙染全域外，也將實作隱藏起來，只提供公開的介面（Public API）供其他地方使用。 2015-05-31T02:00:00+00:00 https://www.cythilya.tw/2015/05/31/modern-web-2015 自從 SEO 成為顯學後，各大電子商務和活動網站都開始注意是否有做 SEO - 是否能讓搜尋引擎正確剖析內容、商品、活動或報導是否出現在 SERPs 上，進而注意是否能從搜尋中帶入正確的 TA 和流量。但 SEO 到底要做什麼？搜尋引擎對於一般人來說像是個黑盒子，網路上的文件所述影響搜尋引擎的因子又非常多，到底要從哪裡開始優化？很多人光想到這裡就非常頭痛... 2015-05-17T02:00:00+00:00 https://www.cythilya.tw/2015/05/17/javascript-decorator Decorator（裝飾者模式）的說明與範例。 2015-05-09T02:00:00+00:00 https://www.cythilya.tw/2015/05/09/javascript-json-parse-stringify 使用 JSON 做 Client 端與 Server 端資料傳遞的說明與範例。 2015-05-03T02:00:00+00:00 https://www.cythilya.tw/2015/05/03/javascript-call-and-apply call 與 apply 兩者皆是執行某個 function，並將這個 function 的 context（即物件）替換成第一個代入的參數。其差異在於 call 必須將參數一一代入，而 apply 除了第一個參數代入 context 外，其餘的參數只要包在一個陣列裡面即可。註：第二個參數不是必須的（optional）。 2015-05-01T02:00:00+00:00 https://www.cythilya.tw/2015/05/01/javascript-closure-hoisting 分散 var 來宣告變數並沒有太大的意義，因為就 JavaScript 程式語言的特性來說，函數（Function）中未宣告而先用到的變數會被提升至區塊的第一行做宣告。先來看基本觀念 Closure，再來看 Hoisting。 2015-04-22T02:00:00+00:00 https://www.cythilya.tw/2015/04/22/responsive-patterns-layout Responsive Patterns 是一個蒐集響應式設計與實作的元件庫，舉凡 Layout、Navigation、Forms、Carousel、Tabs、Accordion 和 Lightbox 等皆有，很適合當成學習教材。先來玩玩 Layout 吧 - 分成這幾類：Reflowing、Equal Width、Off Canvas、Source-Order Shift、Lists 和 Grid Block。 2015-04-07T02:00:00+00:00 https://www.cythilya.tw/2015/04/07/bootstrap-grid-system 利用 Bootstrap Grid System 來排版真是一個方便的方法－若頁面上有許多小方格會隨著解析度而有不同的排列方式，就很適合用 Grid System 來排版。 2015-03-18T02:00:00+00:00 https://www.cythilya.tw/2015/03/18/uxhk-2015 年初我和小奎突然決定要參加 UXHK 2015，對我來說，有自己想做的東西後，很自然的就想去看看其他產業、其他環境、其他人或職位怎麼做怎麼想、關心什麼議題。 2015-03-17T02:00:00+00:00 https://www.cythilya.tw/2015/03/17/stanley 如果準備搭飛機離港前剛好有一小段時間不知道要幹嘛的話，可以考慮到「赤柱（Stanley）」逛逛。赤柱像是沒有商業化又比較乾淨的淡水，跟西貢比起來更有異國風情味。 2015-03-15T02:00:00+00:00 https://www.cythilya.tw/2015/03/15/yha-mei-ho-house-youth-hostel 藉 UXHK 2015 之便，我們在香港多待了幾天。而來去香港好幾次，每次我爸都習慣訂 YMCA，但無奈改建成高級酒店，像我們這樣的小資女孩是無法負擔的。同行夥伴找到一間「YHA美荷樓青年旅舍（YHA Mei Ho House Youth Hostel）」，看起來交通方便（近港鐵深水埗站）、環境漂亮又安全、價格便宜，就訂了下來。 2015-02-27T02:00:00+00:00 https://www.cythilya.tw/2015/02/27/bootstrap-rwd-template 使用 Bootstrap 建立一個 RWD Template 的筆記。 2015-02-02T02:00:00+00:00 https://www.cythilya.tw/2015/02/02/dotchi 社交恐懼症的救星跨出了第一步 - 我們做了找吃東西地點的「吃什麼，どっち - 讓朋友幫你決定吃什麼」。使用者藉由輸入簡單的字詞，例如：「台北市中山區 火鍋」，按下「尋找餐廳」後就能從列表中找到符合項目的推薦餐廳，或按下「看看朋友吃什麼」，經由 Facebook 授權登入後，看看朋友去過哪些地方、評價。而我們也會爬回 Facebook 上的資訊做處理並排序，推薦適合的餐廳給使用者。 2015-01-24T02:00:00+00:00 https://www.cythilya.tw/2015/01/24/a-practice-to-seo-in-ec-website 大部份做 SEO 的網站不外乎是電子商務、活動網站、內容或服務平台（例如：新聞、旅遊）。而極端如 Campaign Site 這樣類型的網站由於存活時間短，便不需要做 SEO，只要放置簡單的 Meta Tag 或 Social Meta Tag 即可（供 SERPs 顯示標題和描述、社群平台分享時帶出適當的文字與圖片，快速產出網站以搭配行銷活動與流程能順暢操作才是重點）。以下我們會先就 B2B 電子商務的狀況作探討。 2014-12-22T02:00:00+00:00 https://www.cythilya.tw/2014/12/22/aso-guideline ASO 和 SEO 的概念是類似的，同樣是企圖在搜尋引擎（不管是 App Store 或 Web 搜尋引擎上）在使用者特定的查詢字串下，將排名往前，取得較佳的排名。而為了取得較佳的排名，我們是有些工作必須完成的，分述如下。 2014-11-26T02:00:00+00:00 https://www.cythilya.tw/2014/11/26/tag-relevant-terms 網站的流量來自於使用者的貢獻－使用者經由自然引擎（Organic Search）、推薦連結（Referral）、社群分享（Social）和直接連結（Direct）進入網站。其中，若使用者經由搜尋引擎找到網站內容，必定是使用特定的搜尋字串（精準或不精準的關鍵字）進入網站。而關鍵字的聚焦即為標籤，標籤集合頁匯集網站資源而能在 SERPs 上大放異彩。 2014-11-23T02:00:00+00:00 https://www.cythilya.tw/2014/11/23/nodejs-express-microblog 使用 Node.js + Express 建構一個簡單的微博網站。 2014-10-30T02:00:00+00:00 https://www.cythilya.tw/2014/10/30/d3-bar-chart 這幾天和隔壁同事相約實踐前輩食夢黑貘的「成為資料工程師最初的 28 堂課」計畫，看完系列文章後便著手規畫要看的書還有想要實作的東西。在資料視覺化呈現 (Data Visualization) 的這一塊，身為前端工程師的我除了閱讀理論外，當然要找一套工具來玩玩。由於之前專案用過 Highcharts、Fusioncharts、jqGrid，因此以上暫不考慮。東摸摸西看看之下就選了 D3.js 了。 2014-10-20T02:00:00+00:00 https://www.cythilya.tw/2014/10/20/fb-graph-api-user-photo 有不少活動都會引導使用者上傳圖片並設定為封面或是檔案頭像，例如「遮打革命 Umbrella Revolution」。 2014-10-19T02:00:00+00:00 https://www.cythilya.tw/2014/10/19/rwd 響應式網頁（Responsive Web Design）是一種設計概念，希望能讓網頁適用在不同的平台上。公司最近想對產品大改版，於是又來練練 RWD 摟！ 2014-10-09T02:00:00+00:00 https://www.cythilya.tw/2014/10/09/seo-ranking-factors 2013 年的 SEO Rankgin Factors 著重於頁面優化、如何呈現好的內容與社群平台的散播，而 2014 年最大的不同在於 CTR 變成排行中最重要的因子，並強調了使用者的動向 (User Signals)，除了 CTR 還有使用者停留時間 (Time on Site)、跳出率 (Bounce Rate)、更全面性的評估，例如相關詞彙 (Relevant Terms)、網站速度 (Site Speed)。再來便沒有太大變化 (即基本功)，依然是 SNS、Semantic Web、網站架構與技術等。 2014-09-24T02:00:00+00:00 https://www.cythilya.tw/2014/09/24/facebook-graph-api-taggable-friends 由於 IKEA 做了一個好玩的活動網站「來IKEA睡一晚」，其中含有邀請朋友並標記、分享到 Facebook 上，因此也做了一個範例來玩玩。 2014-08-16T02:00:00+00:00 https://www.cythilya.tw/2014/08/16/keywords-and-tags-management 許多網站都有設置關鍵字與標籤，但網站一定需要關鍵字、標籤嗎？關鍵字和標籤有什麼差別？能夠帶給網站什麼樣的成效？ 2014-06-07T02:00:00+00:00 https://www.cythilya.tw/2014/06/07/facebook-graph-api-demo-example 常用 Graph API 說明與 Example Demo。 2014-05-17T02:00:00+00:00 https://www.cythilya.tw/2014/05/17/seo-guideline 這篇文章將我到目前為止的 SEO 相關操作整理為搜尋引擎優化指南 (SEO Guideline)，它是一套針對搜尋引擎優化網站的執行準則，每個崗位執行特定的工作即可讓網站有一定的效果，並且這樣的優化過程是可以被評估、回饋與持續改進的；而系統化的實行也有助於將有限資源做最大利用，以得到最好的效果，例如：提高點閱率、排名等。 2014-04-21T02:00:00+00:00 https://www.cythilya.tw/2014/04/21/friendo-yipinchan-microdata 什麼是 Microdata？這些標記符號的用途在於讓搜尋引擎有效讀懂網頁的內容，進而達到搜尋時呈現我們所提供的資料的方法。畢竟直接告訴搜尋引擎重點在哪裡，是比較有效率和精準的，文中也會說明標記如何撰寫和測試。 2014-03-22T02:00:00+00:00 https://www.cythilya.tw/2014/03/22/author-rank Author Rank 是評估作者影響力的指標，過去尚未被證實是否會影響搜尋結果的排名，但 Matt Cutts 的一則 Tweet 似乎證實在某些地方確實會用到，例如專門領域文章的分析。 2014-03-09T02:00:00+00:00 https://www.cythilya.tw/2014/03/09/rss RSS（Really Simple Syndication，簡易資訊聚合）是一種消息來源格式規範，用以蒐集經常更新內容的網站的最新資訊，例如部落格、新聞、多媒體等。其目的是把內容「送」到使用者的面前。RSS 可藉由各種閱讀器來閱讀。 2014-02-01T02:00:00+00:00 https://www.cythilya.tw/2014/02/01/search-and-social 搜尋引擎提供使用者想要的資訊，而社群平台提供這些資訊更多露出的機會。我們希望將優質的內容提供給使用者，並利用社群的力量推廣出去。搜尋引擎不但想提供資訊給使用者而已，更想精準的回答使用者的問題。但如何讓搜尋引擎了解網頁內容呢？於是「Semantics」（語意學）便成為 SEO 很重要的議題。漸漸的，搜尋引擎可以了解網頁的內容，於是便能透過各種技術將適當的內容呈現給使用者來解決各種問題。 2014-01-22T02:00:00+00:00 https://www.cythilya.tw/2014/01/22/seo-duplicate-content 網路上存在著許多重複內容，搜尋引擎為了提供使用者最佳的搜尋結果，便會對這些內容作區別。而網頁內容重複是難免的，但造成了搜尋結果排序上的困擾。因此，我們可以對這些頁面做處理，修正搜尋引擎對它們的解讀。 2014-01-04T02:00:00+00:00 https://www.cythilya.tw/2014/01/04/ia-for-seo 在達到高的「有機搜尋引擎最佳化排行」（Organic Search Engine Optimization Ranking）中，IA（Information Architecture，資訊架構）是很重要的部份。 2013-10-08T02:00:00+00:00 https://www.cythilya.tw/2013/10/08/icon-fonts-tutorial 以往我們都是將小圖示（icon）用切圖的方式放入網頁，而我們也可以將這些 icon 用 CSS「畫」出來。 2013-10-04T02:00:00+00:00 https://www.cythilya.tw/2013/10/04/ckeditor-html-web-page-editor-asp-net-mvc3 CKEditor 是一款「所見即所得」（WYSIWYG）的 HTML 網頁編輯器，免費、功能強大且支援 ASP.NET。下載後經過簡單安裝便能作為前台或後台編輯工具。