Summer。桑莫。夏天
2024-03-29T03:46:25+00:00
https://www.cythilya.tw
單元測試的基本概念 | 單元測試的藝術 第 3 版 | 閱讀筆記
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) 閱讀筆記。
JavaScript MV* Patterns
2024-03-05T01:00:00+00:00
https://www.cythilya.tw/2024/03/05/js-mv-patterns
JavaScript Patterns 讀書會 - MV* Patterns 逐字稿。
Tailwind CSS 到底是良藥還是毒藥?
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 作為三者連接的橋樑。
善用 GitHub Copilot 和 ChatGPT 提高產能與加速學習
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 年度回顧
2023-12-28T01:00:00+00:00
https://www.cythilya.tw/2023/12/28/annual-review
這是我在 2023 年最想聊的一些事。
Pre-push Mechanism
2023-12-12T01:00:00+00:00
https://www.cythilya.tw/2023/12/12/pre-push-mechanism
我在推 code 之前會先跑 lint 和 unit test,確保推 code 到 remote 上的每個 commit 都是符合團隊規範並且是正確的。不過這樣的流程若靠人為確認是很麻煩也困難的,最好的方法就是能成為一種機制,來自動化幫我們處理。
優雅整合 Linter、Husky、Lint-Staged:寫扣看扣皆大歡喜的密技
2023-08-29T01:00:00+00:00
https://www.cythilya.tw/2023/08/29/linter-husky-lint-staged-and-teamwork
大部份的工程師都是謹慎的,除了桌上的物品要放整齊外,寫 code 更是井井有條,例如:開頭要幾個空白還是 tab、要在哪裡斷行、一行限制多少字等,說是細節卻也是基本禮貌。
從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿
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 逐字稿
利用 Cypress 和 Sentry 測試前端效能
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 這個解法做說明,並比較兩種解法。
利用 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 來協助團隊進行效能與錯誤的監控。
利用 Firebase 部署微前端專案 (Deploy and Host Micro Frontends Using Firebase)
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) 總結。
利用 React Context API + useReducer 實作 Redux
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
島波海道。單車跳島之旅
微前端的溝通 - 發布/訂閱 vs 傳遞自訂事件 (Cross Micro Frontends Communication: Pub/Sub vs Custom Events)
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 輪霸西濱 100K
2023-03-14T01:00:00+00:00
https://www.cythilya.tw/2023/03/14/lunba-xibin-100k
單車菜鳥初登場!輪霸西濱對新手友善,評估目前的體能和訓練狀況後,選 100K 似乎是比較適當,於是揪了三五好友一起參加。
該用 Monorepo 嗎?比較 Monolith vs Multi-Repo vs Monorepo
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 年度回顧
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) 如何加薪。
利用 Serverless Framework 建置和部署專案
2022-12-02T01:00:00+00:00
https://www.cythilya.tw/2022/12/02/dynamodb-with-serverless-framework
本文說明如何利用 Serverless Framework 建立一個經由 RESTful API 讀取 DynamoDB 資料庫的專案。
DynamoDB Pagination:利用 LastEvaluatedKey 與 ExclusiveStartKey 實作分頁
2022-11-11T01:00:00+00:00
https://www.cythilya.tw/2022/11/11/dynamodb-pagination
如何為 DynamoDB 做分頁呢?本文主要分三個部份:(1) 為什麼要做分頁?;(2) 利用 LastEvaluatedKey 與 ExclusiveStartKey 實作分頁;(3) 範例。
利用 IAM User 共享資源
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 來管理對資源存取的權限,就能讓團隊成員一同共享資源。
利用 API Gateway + Lambda Function 從 DynamoDB 讀資料
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。
JavaScript Date:計算不同時區的時間
2022-10-19T01:00:00+00:00
https://www.cythilya.tw/2022/10/19/javascript-date-timezone
利用 JavaScript 的 Date object 計算不同時區的時間。
Visual Testing | MOPCON 2022 逐字稿
2022-10-15T02:00:00+00:00
https://www.cythilya.tw/2022/10/15/mopcon-visual-testing
「Visual Testing」MOPCON 2022 逐字稿,歡迎搭配投影片與範例一同服用。
Hello Lambda Function
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。
精通 Go 程式設計 - 程式結構 | 閱讀筆記
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) 的閱讀筆記。
Visual Testing:忽略特定元件
2022-08-17T01:00:00+00:00
https://www.cythilya.tw/2022/08/17/visual-testing-ignore-elements
在動態內容的快照處理上有兩種方法,第一是事先塞入假資料,讓內容維持一致;第二是忽略這個會變動的元素區塊,本文要探討的是如何忽略特定元件。
Visual Testing:互動後的快照比對
2022-08-04T01:00:00+00:00
https://www.cythilya.tw/2022/08/04/visual-testing-interactions
若希望經過特定操作流程後,再做快照,可以嗎?
Visual Testing 工具比較:選誰好?
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) 每一位艦長都是尼爾森。
Architecting on AWS 筆記:Networking
2022-06-02T01:00:00+00:00
https://www.cythilya.tw/2022/06/02/architecting-on-aws-networking
Networking。
Architecting on AWS 筆記:Backup and Restore
2022-06-01T01:00:00+00:00
https://www.cythilya.tw/2022/06/01/architecting-on-aws-backup-and-restore
Backup and Restore。
Architecting on AWS 筆記:Edge Services
2022-05-31T01:00:00+00:00
https://www.cythilya.tw/2022/05/31/architecting-on-aws-edge-services
Edge Services。
Architecting on AWS 筆記:Serverless
2022-05-30T01:00:00+00:00
https://www.cythilya.tw/2022/05/30/architecting-on-aws-serverless
Serverless。
Architecting on AWS 筆記:Container
2022-05-28T01:00:00+00:00
https://www.cythilya.tw/2022/05/28/architecting-on-aws-container
Container。
Architecting on AWS 筆記:自動化服務 (Automation)
2022-05-27T01:00:00+00:00
https://www.cythilya.tw/2022/05/27/architecting-on-aws-automation
自動化服務 (Automation)。
Architecting on AWS 筆記:Monitoring and Scaling
2022-05-26T01:00:00+00:00
https://www.cythilya.tw/2022/05/26/architecting-on-aws-monitoring-and-scaling
Monitoring and Scaling。
Architecting on AWS 筆記:資料庫服務 (Database Services)
2022-05-25T01:00:00+00:00
https://www.cythilya.tw/2022/05/25/architecting-on-aws-database-services
資料庫服務 (Database Services)。
Architecting on AWS 筆記:雲端儲存服務 (Cloud Storage)
2022-05-24T01:00:00+00:00
https://www.cythilya.tw/2022/05/24/architecting-on-aws-cloud-storage
雲端儲存服務 (Cloud Storage)。
Architecting on AWS 筆記:運算資源 (Compute Service)
2022-05-23T01:00:00+00:00
https://www.cythilya.tw/2022/05/23/architecting-on-aws-compute-service
運算資源 (Compute Service)。
Architecting on AWS 筆記:Account Security
2022-04-29T01:00:00+00:00
https://www.cythilya.tw/2022/04/29/architecting-on-aws-account-security
Account Security。
Architecting on AWS 筆記:基礎設施
2022-04-28T01:00:00+00:00
https://www.cythilya.tw/2022/04/28/architecting-on-aws-infrastructure
AWS Modules 與基礎設施。
在 Docker Container 跑 Visual Testing 之基本設定
2022-04-05T01:00:00+00:00
https://www.cythilya.tw/2022/04/05/docker-containers-for-visual-testing-setup
Cypress + Docker + Chromatic ❤️
利用 Chromatic + Storybook 來做 Component-Level 的 Visual Testing
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。
利用 Cypress 與 Percy 來做 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 年度回顧
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
關於這本書「打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵」的點點滴滴。
打造高速網站,從網站指標開始!(Speed Up Your App with Web Vitals) MOPCON 2021 逐字稿
2021-10-24T01:00:00+00:00
https://www.cythilya.tw/2021/10/24/mopcon-speed-up-your-app-with-web-vitals
MOPCON 逐字稿
Pendo Guides 小筆記
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,不需要寫任何一行程式碼或更動產品既有流程與功能,非常便利。
10 個高蛋白/減醣/減糖甜點
2021-07-27T01:00:00+00:00
https://www.cythilya.tw/2021/07/27/ten-snacks-for-better-health
記錄 10 個最近做的高蛋白/減醣/減糖甜點 😋,內含蛋糕 🍰、布丁 🍮、果凍 🥝 🍅、冰淇淋 🍧、鬆餅 🥞、餅乾 🍪、湯品 🥣 開始學做甜點以後,才發現愛吃的零食熱量高、營養價值低,不是什麼健康的東西 😂 還是自己做比較安心。
Tipping Point Front-End Case Study and Practice: CSS
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
Pact:契約測試 (Contract Testing)
2021-06-10T01:00:00+00:00
https://www.cythilya.tw/2021/06/10/pact
契約測試、消費者驅動的契約測試、實作契約測試的框架。
Ch6 整合 (Integration)、效能 (Performance) 以及負載 (Load) 測試 | 可測試的 JavaScript (Testable JavaScript)
2021-05-29T01:00:00+00:00
https://www.cythilya.tw/2021/05/29/integration-performance-load
本文為「可測試的 JavaScript (Testable JavaScript)」第 6 章「整合 (Integration)、效能 (Performance) 以及負載 (Load) 測試」的閱讀筆記。
Ch4 單元測試 (Unit Tests) | 可測試的 JavaScript (Testable JavaScript)
2021-05-08T01:00:00+00:00
https://www.cythilya.tw/2021/05/08/testable-unit-tests
本文為「可測試的 JavaScript (Testable JavaScript)」第 4 章「單元測試 (Unit Tests)」的閱讀筆記。
Ch3 事件導向架構 (Event-Based Architectures) | 可測試的 JavaScript (Testable JavaScript)
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)」的閱讀筆記。
91 Unit Testing 單元測試實戰操練營 筆記 - 寫測試的正確姿勢
2021-03-29T01:00:00+00:00
https://www.cythilya.tw/2021/03/29/91-unit-test
參加 91 Unit Testing 單元測試實戰操練營的簡單筆記。
Ch2 複雜度(Complexity)| 可測試的 JavaScript (Testable JavaScript) 閱讀筆記
2021-03-27T01:00:00+00:00
https://www.cythilya.tw/2021/03/27/testable-javascript-complexity
本文為「可測試的 JavaScript (Testable JavaScript)」第 2 章「複雜度(Complexity)」的閱讀筆記。
約定式提交 Conventional Commits
2021-03-16T01:00:00+00:00
https://www.cythilya.tw/2021/03/16/conventional-commits
由於最近發現團隊內(到底從哪兒來的)的工程師會開始提交一些不知所云的提交描述,因此開始讓專案使用「約定式提交」(conventional commits)。
Ch1 可測試的 JavaScript 程式(Testable JavaScript)| 可測試的 JavaScript (Testable JavaScript) 閱讀筆記
2021-02-28T01:00:00+00:00
https://www.cythilya.tw/2021/02/28/testable-javascript-ch1
本文為「可測試的 JavaScript (Testable JavaScript)」第 1 章「可測試的 JavaScript 程式(Testable JavaScript)」的閱讀筆記。
使用 React Hooks 重構 React Class Component 的改造筆記
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 年度回顧
2020-12-31T01:00:00+00:00
https://www.cythilya.tw/2020/12/31/yearly-review
這是我在 2020 年最值得聊聊的幾件事 (*´∀`)~♥
Google 教我如何面對 Code Review
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」的筆記還有自己的小感想。
Google 教我如何進行 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 來開演唱會的流水帳。
利用 Firebase Performance 來做 Real User Monitoring
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。
利用 Perfume.js 與 Google Analytics 來做 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。
Lighthouse Metrics:以使用者為出發點來探討效能的指標
2020-09-07T01:00:00+00:00
https://www.cythilya.tw/2020/09/07/lighthouse-metrics
本文說明 Lighthouse 以使用者為出發點來探討效能的指標。
整合 Jenkins 來自動做前端效能測試
2020-08-27T01:00:00+00:00
https://www.cythilya.tw/2020/08/27/integrating-automated-performance-testing-with-jenkins
本文會從基本的 Jenkins 安裝、設定開始,然後再說明如何整合 Jenkins 來自動做前端效能測試。
單一職責原則(Single Responsibility Principle) | Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇 閱讀筆記
2020-08-26T01:00:00+00:00
https://www.cythilya.tw/2020/08/26/srp
本文為「Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇」第 7 章「單一職責原則」的閱讀筆記。
利用 Lighthouse 與 Puppeteer 對全站網頁做效能檢測並產生報表
2020-08-21T01:00:00+00:00
https://www.cythilya.tw/2020/08/21/performance-testing-with-lighthouse-and-puppeteer
本文主要是記錄如何在專案中簡易下指令來自動執行 Lighthouse 與 Puppeteer 做全站網頁的效能檢測、產生報表與其目錄。
SOLID | Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇 閱讀筆記
2020-08-04T01:00:00+00:00
https://www.cythilya.tw/2020/08/04/solid
SOLID 是物件導向設計的五個原則,實踐 SOLID 原則的目的是希望能有效應對改變。SOLID 有 SRP、OCP、LSP、ISP、DIP。
JavaScript 常用編碼、解碼
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。
去除 try/catch,實作簡潔的 Async 和 Await!
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 就真的能讓程式碼更精簡流暢嗎? ( •́ _ •̀)?
函數式程式設計 | Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇 閱讀筆記
2020-07-06T01:00:00+00:00
https://www.cythilya.tw/2020/07/06/functional-programming
本文為「Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇」第 6 章「函數式程式設計」的閱讀筆記。
物件導向程式設計 | Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇 閱讀筆記
2020-06-22T01:00:00+00:00
https://www.cythilya.tw/2020/06/22/object-orient-programming
本文為「Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇」第 5 章「物件導向程式設計」的閱讀筆記。
使用 Jest 對 Redux 做單元測試 - Reducer 篇
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,在家工作)。實行至今約兩週,來記錄一些優缺點和想法。
使用 Jest 對 Redux 做單元測試 - Action 篇
2020-03-27T01:00:00+00:00
https://www.cythilya.tw/2020/03/27/redux-unit-test-action
使用 Jest 對 Redux 的 action 做單元測試的簡單記錄。
Start your app the better way with Styled System
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 來解決這些問題。
結構化程式設計 | Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇 閱讀筆記
2020-02-12T01:00:00+00:00
https://www.cythilya.tw/2020/02/12/structured-programming
本文為「Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇」第 4 章「結構化程式設計」的閱讀筆記。
範式概論 | Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇 閱讀筆記
2020-02-02T01:00:00+00:00
https://www.cythilya.tw/2020/02/02/programming-paradigms
本文為「Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇」第 3 章「範式概論」的閱讀筆記。
產生器(Generator)
2020-01-29T01:00:00+00:00
https://www.cythilya.tw/2020/01/29/generator
一般的 function 在呼叫後只會回傳一個值或不回傳任何東西,但產生器(generator)卻可以一個接著一個的回傳(yield)多個值;產生器和迭代器常用來一起處理資料流。
行為與架構 | Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇 閱讀筆記
2020-01-27T01:00:00+00:00
https://www.cythilya.tw/2020/01/27/behavior-and-structure
本文為「Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇」第 2 章「兩種價值觀的故事」的閱讀筆記。
設計與架構 | Clean Architecture 無瑕的程式碼:整潔的軟體設計與架構篇 閱讀筆記
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 章「什麼是設計與架構」的閱讀筆記。
迭代器(Iterator)
2020-01-22T01:00:00+00:00
https://www.cythilya.tw/2020/01/22/iterator
Q:這個物件不能做迭代欸,怎麼辦?A:別驚慌,幫它定義迭代器就可以了。
2019 年度回顧
2019-12-30T01:00:00+00:00
https://www.cythilya.tw/2019/12/30/yearly-review
這是我在 2019 年最值得聊聊的十件事 (*´∀`)~♥
Git: 列出分支、查看歷史提交紀錄
2019-12-27T01:00:00+00:00
https://www.cythilya.tw/2019/12/27/git-list-branch
列出 local 與 remote 分支、查看分支與其歷史提交紀錄。
Git: 如何從特定 commit 切新的分支?
2019-12-03T01:00:00+00:00
https://www.cythilya.tw/2019/12/03/git-detached-head-to-a-new-branch
本文說明如何從特定 commit 切新的分支、為新分支命名、將新分支合併回主線、退回尚未合併分支的狀態與刪除用不到的分支。
利用 Styled System 建立一個更好的 UI 元件庫!
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
到九州自然野生動物園餵動物!
Styled System 初探 (๑╹◡╹๑)
2019-11-08T01:00:00+00:00
https://www.cythilya.tw/2019/11/08/styeld-system
Styled System 學習筆記。
前端工程師寫 Robot Framework,可以嗎?
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)屬性的名稱用點分隔,要怎麼取值?
The DevOps Handbook:奠定部署管線的基礎、實現快速可靠的自動化測試
2019-10-18T02:00:00+00:00
https://www.cythilya.tw/2019/10/18/devops-ch9-10
「The DevOps Handbook」Ch9、10 筆記:奠定部署管線的基礎、實現快速可靠的自動化測試。
Scheduler
2019-07-25T02:00:00+00:00
https://www.cythilya.tw/2019/07/25/react-scheduler
Scheduler 這個 package 本來是 React Core 內部在使用的,但是現在開放出來可用於瀏覽器環境,解決 App 效能不佳的問題,我們也可藉此了解 Scheduler 到底是怎麼運作的。
React Form: Redux Form vs React Final Form vs Formik and Yup
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
過去的我是個一年四季都用同一罐(而且只有這麼一罐)保養品的懶女孩兒,但大約到了某個年紀後發現臉部肌膚一到冬季,便會開始脫皮、乾癢,該怎麼辦呢?在這裡想跟大家分享幾個好用的產品,遇到乾冷的冬季,試用看看吧。
Curry,Decorator 與 HOC
2019-02-06T02:00:00+00:00
https://www.cythilya.tw/2019/02/06/currying-decorator-hoc
從 curry -> decorator -> HOC 的漫漫長路。
2018 面試小記
2019-01-09T02:00:00+00:00
https://www.cythilya.tw/2019/01/09/interview
2018 年底開始面試一些公司,皆為面試前端工程師,以下做一些記錄...
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
從內部來看瀏覽器到底在做什麼?(Inside look at modern web browser)
2018-11-10T02:00:00+00:00
https://www.cythilya.tw/2018/11/10/inside-look-at-modern-web-browser
從內部來看瀏覽器到底在做什麼?
你懂 JavaScript 嗎?#30 總結
2018-11-06T02:00:00+00:00
https://www.cythilya.tw/2018/11/06/thank-you
總結鐵人賽這 30 天的想法與感謝。
你懂 JavaScript 嗎?#29 語法(Syntax)
2018-11-05T02:00:00+00:00
https://www.cythilya.tw/2018/11/05/syntax
本文主要會談到 ES6 新增的熱門語法,包含以區塊為範疇的宣告、分散與其餘運算、預設參數值、解構、物件字面值擴充功能、範本字面值、箭號函式。。
你懂 JavaScript 嗎?#28 ES? 現在 vs 未來
2018-11-04T02:00:00+00:00
https://www.cythilya.tw/2018/11/04/es-now-and-future
本文主要會談到如何在 JavaScript 快速演進的狀況下,漸進的適應新功能?來嘗試 Transpiling 與 Shims/Polyfills 吧。
你懂 JavaScript 嗎?#27 基準化分析與微調(Benchmarking and Tuning)- 使用 Benchmark.js 和 jsPerf 分析程式碼效能
2018-11-03T02:00:00+00:00
https://www.cythilya.tw/2018/11/03/benchmarking-and-tuning
本文主要會談到如何使用工具來做基準化分析。
你懂 JavaScript 嗎?#26 程式效能(Program Performance)
2018-11-02T02:00:00+00:00
https://www.cythilya.tw/2018/11/02/program-performance
本文主要會談到 web worker、SIMD 與 asm.js。到目前為止我們只談論了如何有效的運用非同步處理模式,現在就來探討為什麼非同步處理對 JavaScript 來說這麼重要,其中最明顯的理由就是效能,本文主要探討的是更整體的程式層級的效能。
你懂 JavaScript 嗎?#25 產生器(Generator)
2018-11-01T02:00:00+00:00
https://www.cythilya.tw/2018/11/01/generator
本文主要會談到 generator 的基本概念與範例;從 callback 演進到 ES6 promise 與 generator 再進化到 ES7 async 和 await。
你懂 JavaScript 嗎?#24 Promise
2018-10-31T02:00:00+00:00
https://www.cythilya.tw/2018/10/31/promise
本文主要會談到 promise 是什麼?promise 的錯誤處理、模式與限制。
你懂 JavaScript 嗎?#23 Callback
2018-10-30T02:00:00+00:00
https://www.cythilya.tw/2018/10/30/callback
本文主要會談到情境切換、callback vs callback hell、控制權轉移、解決 callback 的信任問題的解法-分別回呼與錯誤優先處理。
你懂 JavaScript 嗎?#22 非同步:現在和以後
2018-10-29T02:00:00+00:00
https://www.cythilya.tw/2018/10/29/asynchrony-now-and-later
本文主要會談到事件迴圈與共時
你懂 JavaScript 嗎?#21 ES6 Class
2018-10-28T02:00:00+00:00
https://www.cythilya.tw/2018/10/28/es6-class
本文主要是探討 ES6 Class 的美好與陷阱。
你懂 JavaScript 嗎?#20 行為委派(Behavior Delegation)
2018-10-27T02:00:00+00:00
https://www.cythilya.tw/2018/10/27/behavior-delegation
本文主要會談到-什麼是行為委派?和類別有什麼差異?行為委派的優點是什麼?模型比較?什麼是 OLOO?如何使用委派機制達到去類別化?如何撰寫更簡潔易懂的程式碼?物件間要怎麼做內省?
你懂 JavaScript 嗎?#19 原型(Prototype)
2018-10-26T02:00:00+00:00
https://www.cythilya.tw/2018/10/26/prototype
本文主要會談到-類別、建構子與實體;什麼是原型串鏈?原型串鏈的功用是?什麼是原型式繼承?疑難雜症大解惑-如何分辨屬性是位於該物件或原型串鏈上的?如何分辨誰是誰的實體?誰是誰的建構子?原型串鏈有終點嗎?如何建立兩物件的連結?物件屬性的設定與遮蔽規則有哪些?
你懂 JavaScript 嗎?#18 (簡易版)物件導向概念
2018-10-25T02:00:00+00:00
https://www.cythilya.tw/2018/10/25/mixing-up-class-objects
本文主要會談到簡單的物件導向概念,作為後續「原型」(Prototypes)的暖身。
你懂 JavaScript 嗎?#17 物件(Object)
2018-10-24T02:00:00+00:00
https://www.cythilya.tw/2018/10/24/object
關於物件,本文會提到-語法:宣告式與建構形式;型別:再次複習 typeof、使用 instanceof 判定物件子型別;內容:屬性值的存取、物件的複製(淺拷貝與深拷貝)、屬性描述器、不可變的物件、取值器與設值器、檢視屬性是否存在、屬性列舉;迭代:一些迭代出陣列的值的方法。
你懂 JavaScript 嗎?#16 this
2018-10-23T02:00:00+00:00
https://www.cythilya.tw/2018/10/23/this
本文主要會談到-this 是什麼?判斷 this 的值的四個規則與例外。語彙的 this,這裡會提到箭頭函數中的 this 的不同之處。
你懂 JavaScript 嗎?#15 閉包(Closure)
2018-10-22T02:00:00+00:00
https://www.cythilya.tw/2018/10/22/closure
本文主要會談到-閉包是什麼?有什麼功用?迴圈與閉包搭配使用時的謬誤與陷阱。模組模式是什麼?如何管理模組?探討模組依存性載入器/管理器與 ES6 模組。
你懂 JavaScript 嗎?#14 動態範疇(Dynamic Scope)
2018-10-21T02:00:00+00:00
https://www.cythilya.tw/2018/10/21/dynamic-scope
本文主要是比較動態範疇與語彙範疇的差異。
你懂 JavaScript 嗎?#13 拉升(Hoisting)
2018-10-20T02:00:00+00:00
https://www.cythilya.tw/2018/10/20/hoisting
本文主要會談到-什麼是拉升(hoisting)?變數與函式的拉升有什麼不同?怎麼處理在 script 標籤內宣告的全域變數?是否也有拉升的狀況?拉升 vs 重複宣告的變數與函式,要怎麼處理?
你懂 JavaScript 嗎?#12 函式範疇與區塊範疇(Function vs Block Scope)
2018-10-19T02:00:00+00:00
https://www.cythilya.tw/2018/10/19/function-vs-block-scope
本文會提到範疇的劃分單位可分為兩種-函式範疇與區塊範疇,它們有什麼不同?各有什麼優點?函式範疇的重要觀念與相關應用-函式宣告與函式運算式、匿名與具名函式、即刻調用函式運算式。區塊範疇的重要觀念與相關應用-const 與 let、垃圾回收。
你懂 JavaScript 嗎?#11 語彙範疇(Lexical Scope)
2018-10-18T02:00:00+00:00
https://www.cythilya.tw/2018/10/18/lexical-scope
本文會提到什麼是語彙範疇?這階段要做什麼事情?什麼會改變語彙範疇?有什麼影響?
你懂 JavaScript 嗎?#10 範疇(Scope)
2018-10-17T02:00:00+00:00
https://www.cythilya.tw/2018/10/17/what-is-scope
本文會提到什麼是「範疇」?範疇的功用是?編譯器怎麼理解程式碼?什麼是巢狀範疇?從 LHS 與 RHS 來理解 JavaScript 查找變數的報錯機制。
你懂 JavaScript 嗎?#9 文法(Grammar)
2018-10-16T02:00:00+00:00
https://www.cythilya.tw/2018/10/16/grammar
JavaScript 的文法是描述其語法(syntax),例如:運算子、關鍵字等,如何結合在一起,形成格式正確的有效程式的一種結構化方式。
你懂 JavaScript 嗎?#8 強制轉型(Coercion)
2018-10-15T02:00:00+00:00
https://www.cythilya.tw/2018/10/15/coercion
強制轉型(coercion)到底是一個有用的功能,還是設計上的缺陷呢?
你懂 JavaScript 嗎?#7 原生功能(Natives)
2018-10-14T02:00:00+00:00
https://www.cythilya.tw/2018/10/14/natives
本文主要會談到...何謂 Natives(原生功能)?怎麼用?物件包裹器、陷阱、解封裝;各類建構子的原生功能、原生的原型。雖然優先使用字面值而非使用建構子建立物件,還是需要來看一些需要關心的議題和警惕用的錯誤用法。
你懂 JavaScript 嗎?#6 值(Values)Part 2 - 特殊值
2018-10-13T02:00:00+00:00
https://www.cythilya.tw/2018/10/13/special-values
本文主要內容為探討基本型別的特殊值並能適當地使用它們。
你懂 JavaScript 嗎?#5 值(Values)Part 1 - 陣列、字串、數字
2018-10-12T02:00:00+00:00
https://www.cythilya.tw/2018/10/12/values-array-string-number
本文主要會談到關於陣列、字串、數字的錯誤操作方式與疑難雜症的解法。
你懂 JavaScript 嗎?#4 型別(Types)
2018-10-11T02:00:00+00:00
https://www.cythilya.tw/2018/10/11/types
本文主要會談到 (1) 何謂「型別」?內建型別有哪些?常見疑難雜症與解法;(2) 未定義(undefined)vs 未宣告(undeclared)。
你懂 JavaScript 嗎?#3 暖身 (๑•̀ㅂ•́)و✧ Part 2 - 變數、嚴格模式、IIFEs、閉包、模組、this、原型、Polyfill 與 Transpiler
2018-10-10T02:00:00+00:00
https://www.cythilya.tw/2018/10/10/intro-2
在上一篇暖身文章中大致聊過了一些基本知識,像是運算子、運算式、值與型別、變數、條件式、迴圈,本文還會再探討一些基礎概念,像是變數、函式範疇、拉升、巢狀範疇、嚴格模式、IIFE、閉包、模組、this、原型、Polyfill 與 Transpiler。本文也僅是概念而已,之後會有單篇章節細細討論的,所以就算是暖身 Part 2 摟。
你懂 JavaScript 嗎?#2 暖身 (๑•̀ㅂ•́)و✧ Part 1 - 運算子、運算式、值與型別、變數、條件式、迴圈
2018-10-09T02:00:00+00:00
https://www.cythilya.tw/2018/10/09/intro-1
本文主要內容為程式設計簡介,在此可看到在初學階段所必須理解的各種專有名詞。
你懂 JavaScript 嗎?#1 預備...GO!
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
說明常用的效能測量指標。
加載效能檢測工具-試用 Google PageSpeed Insights、WebPageTest、Pingdom 和 Lighthouse 的測試範例
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 快取。
如何減少 HTTP Requests 的數量?
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)的優化,以下列出加快從伺服器下載的有效方法。
Debounce Input Handlers
2018-09-03T02:00:00+00:00
https://www.cythilya.tw/2018/09/03/debounce-input-handlers
處理輸入的函式可能會造成效能問題,例如:阻礙幀(Frame)的繪製,導致畫面無法順利繪製;還有可能造成額外的版面配置(Recaculate Layout / Reflow)工作。
響應式圖片(Responsive Images)
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
記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。
SVG Sprites
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 的使用方式和優缺比較。
CSS Modules:babel-plugin-react-css-modules 小記
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 的實作過程。
PostCSS
2018-08-10T02:00:00+00:00
https://www.cythilya.tw/2018/08/10/postcss
PostCSS 是一個使用 JavaScript 轉換 CSS 的工具,它可以做的事情很多,像是加入各家瀏覽器的前綴詞(prefix)、將先進的功能轉為目前主流瀏覽器所能支援的語法、語法檢查和報錯、支援 Grid System、使用類似 SASS 的功能等。
Preload vs Prefetch
2018-07-31T02:00:00+00:00
https://www.cythilya.tw/2018/07/31/preload-vs-prefetch
比較 Preload 與 Prefetch 的異同。
圖片最佳化(Image Optimization)
2018-07-30T02:00:00+00:00
https://www.cythilya.tw/2018/07/30/image-optimization
實作「圖片最佳化(Image Optimization)」的第一個問題是「真的需要這個圖檔嗎?」,去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代,可以做哪些優化?」。
HTTP Caching
2018-07-27T02:00:00+00:00
https://www.cythilya.tw/2018/07/27/http-caching
HTTP Caching。
Base64 Images
2018-07-26T02:00:00+00:00
https://www.cythilya.tw/2018/07/26/base64-images
將圖片轉為編碼字串,讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼,以減少 HTTP Request。適合較少更新的小圖,例如 icon 等。
瀏覽器渲染效能(Browser Rendering Performance)總整理 (ゝ∀・)
2018-07-23T02:00:00+00:00
https://www.cythilya.tw/2018/07/23/browser-rendering-performance
瀏覽器渲染效能(Browser Rendering Performance)總整理 (ゝ∀・)
改進渲染效能範例 2 - Newsticker
2018-07-22T02:00:00+00:00
https://www.cythilya.tw/2018/07/22/improving-rendering-performance-example-newsticker
使用 Newsticker 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。
改進渲染效能範例 1 - News Aggregator
2018-07-21T02:00:00+00:00
https://www.cythilya.tw/2018/07/21/improving-rendering-performance-example-hacker-news
使用 News Aggregator 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。
如何優化像素管道的 Paint 和 Composite?
2018-07-20T02:00:00+00:00
https://www.cythilya.tw/2018/07/20/compositing-and-painting
更詳細探討如何優化像素管道(Browser Rendering Pipeline)的繪製(Paint)和合成(Composite)這兩個階段。
如何優化像素管道的 Styles 和 Layout?
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)這兩個階段。
從 JavaScript 著手優化渲染效能
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。
Web Workers
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 而讓速度變快。
如何在 iOS 裝置上使用 Chrome DevTools 和 Safari Web Inspector 遠端除錯?
2018-07-17T02:00:00+00:00
https://www.cythilya.tw/2018/07/17/weapons-of-jank-destruction
如何在 iOS 裝置上使用 Chrome DevTools 和 Safari Web Inspector 遠端除錯?
從 App 的生命週期來看瀏覽器渲染效能優化
2018-07-16T02:00:00+00:00
https://www.cythilya.tw/2018/07/16/app-lifecycles
以更高階的角度來看如何優化效能-App 的生命週期,讓開發者在 App 生命週期的各階段對於優化工作能做更好的選擇。
關鍵轉譯路徑 Critical Rendering Path
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。
Why did you update: 檢測 React 元件是否需要重新渲染的工具
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 資訊和建議,作為開發者調整的依據。
Git: 四種將分支與主線同步的方法
2018-06-19T02:00:00+00:00
https://www.cythilya.tw/2018/06/19/git-merge-branch-into-master
四種將分支與主線同步的方法。
JavaScript:使用 Array.map、Object.values 和 Object.keys 處理一連串的資料
2018-06-17T02:00:00+00:00
https://www.cythilya.tw/2018/06/17/array-and-object-handling
使用 Array.map、Object.values 和 Object.keys 處理「物件中有物件」和「陣列中有物件」的情況。
CSS 的模組化方法:OOCSS、SMACSS、BEM、CSS Modules、CSS in JS
2018-06-05T02:00:00+00:00
https://www.cythilya.tw/2018/06/05/css-methodologies
OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範(或稱心法、解法)存在的目的都是為了讓程式碼易懂、可重用,進而有效率地開發和維護。
Git: Rebase Squash vs Fixup
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 的差異是什麼呢?
Git: Cherry-pick - 選擇某個分支的某些提交記錄
2018-05-30T02:00:00+00:00
https://www.cythilya.tw/2018/05/30/git-cherry-pick
在開發階段的尾聲,準備合併回主線時,老闆說「B、C 功能會在這次上線,A 功能再等等吧」這時候就不是每個 Commit 都需要合併至主線了,而是挑出需要的就好,又為了維護主線的乾淨整齊,合併後只能有一個提交記錄。這要怎麼做呢?
Git: 比較 Merge Squash 與 Rebase Squash
2018-05-29T02:00:00+00:00
https://www.cythilya.tw/2018/05/29/git-merge-squash-vs-rebase-squash
比較 Merge Squash 與 Rebase Squash。
Git: 更新分支+解衝突
2018-05-27T02:00:00+00:00
https://www.cythilya.tw/2018/05/27/git-merge-and-solve-conflict
更新分支+解衝突。
BEM
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 架構指南。
React.js: Higher-Order Components (HOC)
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 傳入即可。
建立一個 React Component 並發佈到 NPM 上
2018-04-25T02:00:00+00:00
https://www.cythilya.tw/2018/04/25/react-component-package-for-npm
簡單記錄如何建立一個 React Component 並發佈到 NPM 上。
redux-promise
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 結果。
React.js: Container vs Presentational Components
2018-04-14T02:00:00+00:00
https://www.cythilya.tw/2018/04/14/container-components-vs-presentational-components
比較 Container Components 與 Presentational Components。
React.js: Functional Components vs Class-based 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。
Git 筆記
2018-04-05T02:00:00+00:00
https://www.cythilya.tw/2018/04/05/git
設定、指令、疑難雜症。
ES6 Top Features You Must Know
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 等。
Nightwatch101:手牽手一起來學 Nightwatch!
2018-03-26T02:00:00+00:00
https://www.cythilya.tw/2018/03/26/nightwatch101
本篇文章主要是將去年底今年初參加「2018 iT 邦幫忙鐵人賽」與後續在 VueJS 台灣 meetup 201803@五倍紅寶石所分享的文件做收納整理。
推播通知 Push Notification
2018-02-17T02:00:00+00:00
https://www.cythilya.tw/2018/02/17/firebase-push-notification
使用 Firebase 實作瀏覽器推播通知。
2017 總回顧
2018-02-15T01:00:00+00:00
https://www.cythilya.tw/2018/02/15/2017-yearly-review
這是我在 2017 年最值得聊聊的十件事 (*´∀`)~♥
Nightwatch101 #30:總結
2018-01-09T01:00:00+00:00
https://www.cythilya.tw/2018/01/09/nightwatch-summary
整理一下走到目前為止的想法。
Nightwatch101 #29:Selenium IDE
2018-01-08T01:00:00+00:00
https://www.cythilya.tw/2018/01/08/selenium-ide
Selenium IDE 可說是導入自動化測試的起手式。它很類似按鍵精靈,錄製好腳本後,執行腳本來自動完成文字輸入、點擊或跳頁等動作,確認執行動作皆如預期,若不符合預期狀況則停止並報錯,可協助確認 UI 功能是否正常執行,大大減低手動測試所花費的時間和精力。
Nightwatch101 #28:獨立使用 ChromeDriver 跑測試
2018-01-07T01:00:00+00:00
https://www.cythilya.tw/2018/01/07/nightwatch-standalone-chrome-driver
這篇要說明一個更輕巧簡便的測試方法-不經 Selenium Server 而獨立使用 Webdriver 來啟動測試的方法,以 ChromeDriver 為例。
Nightwatch101 #27:進階測試範例
2018-01-06T01:00:00+00:00
https://www.cythilya.tw/2018/01/06/nightwatch-example-2
綜合使用前面篇章所提到的內容-標籤、Page Objects 和客製化斷言,我們來做個範例...
Nightwatch101 #26:客製化測試報告
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 所放置,像是這樣...
Nightwatch101 #25:客製化斷言(Custom Assertions)
2018-01-04T01:00:00+00:00
https://www.cythilya.tw/2018/01/04/nightwatch-custom-assertions
Nightwatch 允許開發者定義自己的斷言指令,擴充 `.assert` 和 `.verify` 命名空間。
Nightwatch101 #24:客製化指令(Custom Commands)
2018-01-03T01:00:00+00:00
https://www.cythilya.tw/2018/01/03/nightwatch-custom-commands
Nightwatch 允許開發者定義自己的客製化指令(Custom Commands),這對將常用的功能抽出來成為模組,很有幫助。
Nightwatch101 #23:使用 Sections 優化 Page Objects
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。
Nightwatch101 #22:Page Objects
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。
Nightwatch101 #21:平行執行測試程式
2017-12-31T01:00:00+00:00
https://www.cythilya.tw/2017/12/31/nightwatch-parallel-running
本篇來看看 Nightwatch Test Runner 如何同時指定不同環境來跑測試、調整 Terminal Output 的顯示結果和經由 Test Workers 實現平行執行。
Nightwatch101 #20:禁跑特定測試(Disable Tests)
2017-12-30T01:00:00+00:00
https://www.cythilya.tw/2017/12/30/nightwatch-disabling-tests
本篇要來聊聊禁跑特定 Test Suite 和 Test Case 的方法。
Nightwatch101 #19:依照標籤做測試(Test Tags)
2017-12-29T02:00:00+00:00
https://www.cythilya.tw/2017/12/29/nightwatch-test-tags
Nightwatch 允許開發者使用標籤(tag)標記測試程式,在跑測試的時候可指定跑特定標籤的部份。使用標籤的好處是一個測試可有多個不同的標籤,不必受限於分類的唯一和垂直特性,相較有彈性。
Nightwatch101 #18:依照分組做測試(Test Groups)
2017-12-28T01:00:00+00:00
https://www.cythilya.tw/2017/12/28/nightwatch-test-groups
Nightwatch 允許開發者將測試程式分組(group)測試,分組的方式就是將測試程式碼放進同一個資料夾,群組名稱即資料夾名稱。
Nightwatch101 #17:Nightwatch Test Runner
2017-12-27T01:00:00+00:00
https://www.cythilya.tw/2017/12/27/nightwatch-test-runner
Nightwatch 提供 Command Line Test Runner,便於設定、跑測試和產生測試報告。本篇先來探討安裝方式的差異和如何針對單檔、多檔、單檔+資料夾進行測試。
Nightwatch101 #16:簡單測試範例
2017-12-26T01:00:00+00:00
https://www.cythilya.tw/2017/12/26/nightwatch-example-1
來個簡單範例-拿我們家新上線的功能-購物車和新版結帳頁來玩玩!
Nightwatch101 #15:External Globals
2017-12-25T01:00:00+00:00
https://www.cythilya.tw/2017/12/25/nightwatch-external-globals
隨著測試環境和加入功能愈來愈多元複雜,設定檔 `nightwatch.conf.js` 漸漸的就變成了一個龐然大物。大怪物來了 (☉д⊙) 來幫設定檔減肥 + 美化吧! (ノ◕ヮ◕)ノ*:・゚✧
Nightwatch101 #14:Asynchronous Test Hooks
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)。
Nightwatch101 #13:Test Hooks
2017-12-23T01:00:00+00:00
https://www.cythilya.tw/2017/12/23/nightwatch-test-hooks
Nightwatch 提供 before/after 與 beforeEach/afterEach 鉤子。
Nightwatch101 #12:BDD Verify
2017-12-22T01:00:00+00:00
https://www.cythilya.tw/2017/12/22/nightwatch-bdd-verify
在上一篇 Assert 提到,.assert 和 .verify 的 library 基本上是做相同的事情,差別只在於斷言(assertion)失敗時的處理方式。
Nightwatch101 #11:BDD Assert
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 基本上是做相同的事情,差別只在於斷言失敗時的處理方式。
Nightwatch101 #10:BDD Expect
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)使用。
Nightwatch101 #9:指令 Part 3
2017-12-19T01:00:00+00:00
https://www.cythilya.tw/2017/12/19/nightwatch-commands-part-3
指令分為兩種-Nightwatch 提供的指令與開發者撰寫的客製化指令,以下繼續 Part 3,來聊聊與執行流程相關的指令。
Nightwatch101 #8:指令 Part 2
2017-12-18T01:00:00+00:00
https://www.cythilya.tw/2017/12/18/nightwatch-commands-part-2
指令分為兩種-Nightwatch 提供的指令與開發者撰寫的客製化指令,以下繼續 Part 2,來聊聊 Cookie、Window 和 Log 相關的指令。
Nightwatch101 #7:指令 Part 1
2017-12-17T01:00:00+00:00
https://www.cythilya.tw/2017/12/17/nightwatch-commands-part-1
這篇 Part 1 先來看一些 UI 操作相關的指令,例如元素定位、設值、點擊和檢視是否存在或可見等。
Nightwatch101 #6:使用 Xpath 定位網頁元素
2017-12-16T03:00:00+00:00
https://www.cythilya.tw/2017/12/16/nightwatch-xpath
做 End-to-End Testing 的第一步就是抓到網頁的元素,而定位網頁元素有兩種方法「CSS Selector」和「Xpath」,在本篇使用 Xpath。
Nightwatch101 #5:使用 CSS Selector 定位網頁元素
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。
Nightwatch101 #4:設定檔
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,設定檔位置在這個專案的根目錄底下。
Nightwatch101 #3:環境建置
2017-12-13T01:00:00+00:00
https://www.cythilya.tw/2017/12/13/nightwatch-installation
環境建置。
Nightwatch101 #2:Nightwatch 與 Selenium Webdriver
2017-12-12T01:00:00+00:00
https://www.cythilya.tw/2017/12/12/nightwatch-and-selenium-webdriver
介紹 Nightwatch、Selenium Webdriver 與運作原理。
Nightwatch101 #1:使用 Nightwatch 實現 End-to-End Testing
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。希望大家不吝指教 :)
Vue.js: axios 與 axios-mock-adapter
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 後,提供假的回傳資料。
Nightwatch.js
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 測試與單元測試。
Vue.js: 動態元件 Dynamic Components
2017-10-22T02:00:00+00:00
https://www.cythilya.tw/2017/10/22/vue-component-dynamic-components
動態元件(Dynamic-Components)是指可根據傳入參數的不同,而去切換不同的元件。
Vue.js: Slot
2017-10-11T02:00:00+00:00
https://www.cythilya.tw/2017/10/11/vue-component-slot
Slot 是一種用於內容分配(Content Distribution / Transclusion)的元件,適用於複雜或巢狀元件的實作上,可以想像成是空間預留的方法,在迭代過程中再把內容塞進去。
Vue.js: Mixins
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 混用。
單元測試:Mocha、Chai 和 Sinon
2017-09-17T02:00:00+00:00
https://www.cythilya.tw/2017/09/17/unit-test-with-mocha-chai-and-sinon
單元測試:Mocha、Chai 和 Sinon。
jQuery .attr() vs .prop()
2017-09-10T02:00:00+00:00
https://www.cythilya.tw/2017/09/10/jquery-attr-vs-prop
Attribute 與 Property 的差異、jQuery 相關程式碼解析。
在瀏覽器中使用 Mocha 和 Chai 進行單元測試
2017-09-04T02:00:00+00:00
https://www.cythilya.tw/2017/09/04/running-mocha-and-chai-in-the-browser
在瀏覽器中使用 Mocha 和 Chai 進行單元測試。
CSS3 Animation
2017-08-27T02:00:00+00:00
https://www.cythilya.tw/2017/08/27/css-animation
使用 CSS3 Transition 和 Animation 製作動畫、效能優化。
Service Worker
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)。
Selenium IDE
2017-07-14T02:00:00+00:00
https://www.cythilya.tw/2017/07/14/selenium-ide
Selenium IDE 可協助確認 UI 功能是否正常執行,是導入自動化測試的起手式。它很類似按鍵精靈,錄製好腳本後,執行腳本來自動完成文字輸入、點擊或跳頁等動作,確認執行動作皆如預期,若不符合預期狀況則停止並報錯,大大減低手動測試所花費的時間和精力。
Notification(通知):利用 JavaScript 實作瀏覽器推播通知
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
小樽必玩 ♥ 到青の洞窟划獨木舟、看海、窗岩、海蝕門!
Vue.js: 進階過渡效果
2017-06-09T02:00:00+00:00
https://www.cythilya.tw/2017/06/09/vue-transition-effects
Vue.js 的進階過渡效果,含載入時的漸變效果、過度模式、元件間的過渡、列表過渡、可重複使用的過渡效果。
Vue.js: 動畫 Animations
2017-06-01T02:00:00+00:00
https://www.cythilya.tw/2017/06/01/vue-animations
Vue.js 的基本動畫效果,含客製化樣式類別、鉤子和範例。
Vue.js: 樣式與漸變 Transitions
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 鉤子一起使用。
jQuery: Deferred Object
2017-05-24T02:00:00+00:00
https://www.cythilya.tw/2017/05/24/jquery-deferred-object
使用 Deferred Object 處理非同步狀況。
Vue.js: Filter 過濾器
2017-05-23T02:00:00+00:00
https://www.cythilya.tw/2017/05/23/vue-filter
Filter 過濾器,並比較 Filter 和 Computed 的差異。
Vue.js 學習筆記總整理
2017-05-21T02:00:00+00:00
https://www.cythilya.tw/2017/05/21/vue-study-note
開發環境建置、Vue Instance、模版語法(Directives)、元件(Components)和 Todo List 小範例。
Vue.js: 元件 Components - Events Up 自定義事件
2017-05-20T02:00:00+00:00
https://www.cythilya.tw/2017/05/20/vue-component-events-up
使用 v-on 綁定自定義事件、使用自定義事件的表單輸入元件。
JavaScript:檢查日期是否存在
2017-05-19T02:00:00+00:00
https://www.cythilya.tw/2017/05/19/javascript-is-date-exist
檢查日期是否存在,這裡分為兩個部份「該年是否為閏年」和「該日是否超過每個月份最大日期限制」。
JavaScript:將指定日期加上 X 天
2017-05-17T02:00:00+00:00
https://www.cythilya.tw/2017/05/17/javascript-date-add-days
將指定日期加上 X 天,得到一個延後的日期。
Vue.js: 元件 Components - Prop
2017-05-16T02:00:00+00:00
https://www.cythilya.tw/2017/05/16/vue-component-prop
使用元件的目的是希望互相干擾的程度愈小愈好,因此非必要儘量不要溝通。若遇到需要由父層傳遞資料給子層的時候,使用 prop 即可。
Vue.js: 元件 Components 簡介 - 註冊與使用
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) 搭建上去而來的,透過元件的方式能讓開發者將程式碼封裝而更好重用。
JavaScript 陣列處理:找東西 - indexOf、$.inArray 與 filter
2017-05-08T02:00:00+00:00
https://www.cythilya.tw/2017/05/08/javascript-find-item-in-an-array
整理了一些在陣列中找東西的方法。
Vue.js: 自定義指令 Custom Directive
2017-05-05T02:00:00+00:00
https://www.cythilya.tw/2017/05/05/vue-custom-directive
Vue.js 提供自定義指令 (Custom Directive) 讓開發者直接從底層操作 DOM 物件。
Vue.js: v-cloak
2017-05-02T02:00:00+00:00
https://www.cythilya.tw/2017/05/02/vue-v-cloak
使用 v-cloak 解決 Vue Instance 完成編譯前顯示變數的問題。
Vue.js: 列表渲染 v-for
2017-04-27T02:00:00+00:00
https://www.cythilya.tw/2017/04/27/vue-list-rendering
使用 v-for 迭代陣列或物件中的元素。
Vue.js: 條件渲染 v-if、v-show
2017-04-22T02:00:00+00:00
https://www.cythilya.tw/2017/04/22/vue-conditional-rendering
條件渲染 v-if、v-show,並比較兩者差異。
Vue.js: 屬性綁定 v-bind、Class 與 Style 綁定
2017-04-21T02:00:00+00:00
https://www.cythilya.tw/2017/04/21/vue-v-bind-class-and-style
v-bind 屬性綁定、Class 與 Style 綁定。
Vue.js: Methods 與事件處理 (Event Handling)
2017-04-17T02:00:00+00:00
https://www.cythilya.tw/2017/04/17/vue-methods-and-event-handling
Methods 與事件處理 (Event Handling)。
Vue.js: Watch
2017-04-15T03:00:00+00:00
https://www.cythilya.tw/2017/04/15/vue-watch
Watch 可讓我們監視某個值,當這個值變動的時候,就去做某些事情。
Vue.js: 計算屬性 Computed
2017-04-15T02:00:00+00:00
https://www.cythilya.tw/2017/04/15/vue-computed
計算屬性 (Computed Properties),並且和 Method、Watch 做比較。
Vue.js: data、v-model 與雙向綁定
2017-04-14T02:00:00+00:00
https://www.cythilya.tw/2017/04/14/vue-data-v-model
如何利用 data 與 v-model 實現雙向綁定?原理、語法與表單元件範例。
Vue Instance
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。
Vue.js 開發環境建置
2017-04-07T02:00:00+00:00
https://www.cythilya.tw/2017/04/07/vue-env-setting
Vue.js 的開發環境建置有以下幾種方法:使用 CDN 或下載後使用本機檔案、npm 安裝和使用 vue-cli。
圖解 Flexbox 進階屬性
2017-04-06T02:00:00+00:00
https://www.cythilya.tw/2017/04/06/flexbox-advance
圖解 Flexbox 進階屬性。
圖解 Flexbox 基本屬性
2017-04-04T02:00:00+00:00
https://www.cythilya.tw/2017/04/04/flexbox-basics
圖解 Flexbox 基本屬性。
使用 xpepermint 建立 Vue.js 專案
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 等。
vue-cli
2017-04-02T02:00:00+00:00
https://www.cythilya.tw/2017/04/02/vue-cli
快速建立 Vue.js 專案的工具,對於 Node.js 工具熟悉的開發者,推薦使用 vue-cli。
Todo List: React and Redux Example
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。
Virtual DOM 概述
2017-03-31T02:00:00+00:00
https://www.cythilya.tw/2017/03/31/virtual-dom
Virtual DOM 是以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。用途是不直接操作 DOM,而改操作這些物件。待一個段落後,再將這些變更更新回真實的 DOM 上,以期提升效能。
RSS 與 SEO
2017-03-28T02:00:00+00:00
https://www.cythilya.tw/2017/03/28/rss-and-seo
RSS 與 SEO 操作相關。網站在做 SEO 的時,做完基本的 HTML 優化後,接著就是要做 RSS 和標籤,這次來聊聊 RSS。
Todo List with Vue.js and Vuex
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。
如何用 JavaScript 產生 UUID / GUID?
2017-03-12T02:00:00+00:00
https://www.cythilya.tw/2017/03/12/uuid
使用 JavaScript 產生 UUID / GUID 的方法。這篇文章整理了幾種使用 JavaScript 產生 UUID / GUID 的方法和優缺比較。
Todo List: Vue.js Example
2017-03-07T15:00:00+00:00
https://www.cythilya.tw/2017/03/07/todolist-vue-example
利用 Vue.js 簡單實作一個 Todo List。功能含有新增 / 修改 / 刪除 todo、更新 todo 狀態、切換檢視模式、查看各檢視模式下的數量。
Currying in JavaScript(柯里化)
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」的過程。
Immutability 為何重要?淺談 immutable.js 和 seamless-immutable
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。
2016 總回顧
2017-02-04T07:00:00+00:00
https://www.cythilya.tw/2017/02/04/2016-yearly-review
每年過年期間我總會檢視過去一年的成果和訂定當年的年度計劃。2017 年的年假期間整理了 2016 年最有收穫的十件事,如果最近有約碰面,說不定可以分享一下彼此的近況和展望(與啟發?)。
Todo List: Redux with jQuery Example
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。
利用 Object.defineProperty 和 MutationObserver 實作雙向綁定
2017-01-22T08:15:00+00:00
https://www.cythilya.tw/2017/01/22/two-way-binding
雙向綁定就是 (一)可以經由改變model的值而自動更新DOM的內容,並且 (二)經由改變DOM的內容而自動更新model的值。以下分這兩部份來實作...
babel-register 無法正確讀取 CSS 相關檔案
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 等也是很貴的)。
ES6: let, const, Block-Level Scope
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 相關筆記。
利用 Prerender Node 為 SPA 做 SEO
2016-09-16T02:00:00+00:00
https://www.cythilya.tw/2016/09/16/seo-prerender-node
利用 Prerender Node 為 SPA 做 SEO
利用 PhantomJS 為 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。
Node.js 中使用 Promise Q
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 了。
加速行動版網頁(AMP, Accelerated Mobile Pages)
2016-08-21T02:00:00+00:00
https://www.cythilya.tw/2016/08/21/amp
加速行動版網頁(AMP, Accelerated Mobile Pages)是 Google 推出的一套框架,用來使行動裝置網頁能快速載入。 在 Search Console 上會看到提示建議 Webmaster 使用與提交這樣的頁面。
Gulp 筆記:安裝、撰寫 Task、監看、例外錯誤處理和套件使用
2016-08-20T02:00:00+00:00
https://www.cythilya.tw/2016/08/20/gulp
Gulp 是一套任務管理工具,讓前端的工作能自動化處理,例如:js 和 css 最小化、瀏覽器檢視、通知、檔名變更、加入版號等等。這裡做一些簡單筆記。
T3: 構建大型網站的 JavaScript 框架
2016-08-15T02:00:00+00:00
https://www.cythilya.tw/2016/08/15/t3
T3 是一個 JavaScript UI Framework,主要的功能是讓程式碼更結構化。如果網站內的程式碼很雜亂的話,很適合用來整理散落在各處的程式碼(尤其是針對年紀大需要翻新的大型網站)。
Hubot x Slack,製作自動回話與工作的機器人
2016-07-26T02:00:00+00:00
https://www.cythilya.tw/2016/07/26/robot-hubot-slack
Hubot x Slack 串接紀錄。
DNS Prefetching:預先做 DNS 解析,幫助網頁載入速度更快
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 解析就太遲了(使用者需要等待一段時間),因此可預先執行。
結構化資料之「商品」範例 - 使用 JSON-LD
2016-05-17T02:00:00+00:00
https://www.cythilya.tw/2016/05/17/rich-snippet-product-jsonld
假設想在搜尋結果頁上對單一商品呈現更為吸引人的 Rich Snippet 效果,例如出現星等、評論數(如下圖),就需要利用結構化資料(Structured Data)來達成。
jQuery 的陣列操作:$.map() 與 $.grep()
2016-03-13T02:00:00+00:00
https://www.cythilya.tw/2016/03/13/jquery-map-grep
這陣子在整理系統內的程式碼,發現自己曾經使用一些過時的方法(例如:native javascript 操作陣列),而非使用 jQuery 提供的 API 來撰寫。以下整理並比較這兩種方法的差異。
三天內學會 CSS3 動畫
2016-03-05T02:00:00+00:00
https://www.cythilya.tw/2016/03/05/css3-animations
一直以來我對 CSS3 動畫這件事情並沒有特別專注研究(如果需要也是用 JavaScript 完成 XD),直到最近因為工作需要才開始練習。以下紀錄一些我在這三天內看的資料和做的小練習(不是教學文)。
JavaScript Object Oriented Programming
2016-02-11T02:00:00+00:00
https://www.cythilya.tw/2016/02/11/javascript-object-oriented-programming
關於 JavaScript Object Oriented Programming,會寫這一系列的文章是因為希望自己的 JavaScript 程式碼能更物件導向、更模組化。這一系列的文章有以下的內容...
JavaScript Object Oriented Programming: Early and Late Binding
2016-02-10T02:00:00+00:00
https://www.cythilya.tw/2016/02/10/early-and-late-binding
JavaScript 在呼叫的時候設定 this 的值,而這個 this 的值有可能不是我們預期的結果。下面有幾個範例。
JavaScript Object Oriented Programming: Exceptions
2016-02-09T02:00:00+00:00
https://www.cythilya.tw/2016/02/09/exceptions
「例外(Exceptions)」是一個特別且重要的處理錯誤的方法。
JavaScript Object Oriented Programming: Factory Constructor Pattern
2016-02-08T02:00:00+00:00
https://www.cythilya.tw/2016/02/08/factory-constructor-pattern
Factory Constructor Pattern 不使用 new 來宣告新物件,新物件用 function call 來建立。
JavaScript Object Oriented Programming: All-in-one Constructor Pattern
2016-02-07T02:00:00+00:00
https://www.cythilya.tw/2016/02/07/all-in-one-constructor-pattern
所有的 method 和 property 都放在 consctructor 中,而不使用 prototype。
JavaScript Object Oriented Programming: Pseudo-Classical Pattern
2016-02-06T02:00:00+00:00
https://www.cythilya.tw/2016/02/06/javascript-pseudo-classical-pattern
在 pseudo-classical pattern 中,物件是由「建構子」(constructor)這個函式所建立,並把 method 放到建構子的 prototype 中。
JavaScript Object Oriented Programming: The instanceof operator
2016-02-05T02:00:00+00:00
https://www.cythilya.tw/2016/02/05/instanceof
instanceof 允許檢查物件是否為給定的 constructor 所產生的。
JavaScript Object Oriented Programming: The constructor property
2016-02-04T02:00:00+00:00
https://www.cythilya.tw/2016/02/04/constructor
物件有內建的屬性「constructor」,意即「參考建立此物件的 function」。
JavaScript Object Oriented Programming: Extending Natives
2016-02-03T02:00:00+00:00
https://www.cythilya.tw/2016/02/03/extending-natives
Native JavaScript 物件將 method 存在 prototype 中。例如:當一個新的物件被建立,內容為空,但為何可以使用 toString 這個 method?
JavaScript Object Oriented Programming: Prototypal Inheritance
2016-01-31T02:00:00+00:00
https://www.cythilya.tw/2016/01/31/prototypal-inheritance
對大多數的語言來說,它們擁有「Class」和「Object」,而 Class 繼承其它的Class。對於 JavaScript 來說,繼承是使用 prototype 來實作的,意即沒有 Class,而是由物件繼承其它的物件來達成繼承。
Plugin 的撰寫
2015-12-27T02:00:00+00:00
https://www.cythilya.tw/2015/12/27/plugin
又重新看了 jQuery: Novice to Ninja,所以做了些關於 Plugin 的筆記。以下使用 jQuery Newsticker Plugin 作為說明範例。
常見的 Google 搜尋演算法(Search Algorithms)
2015-12-20T02:00:00+00:00
https://www.cythilya.tw/2015/12/20/google-search-algorithms
這幾天在準備 SEO Basics 的 slides,所以也順手整理了一下 Google 常見的搜尋演算法。
語意網 - HTML5文件的段落和綱要(Semantic Web - Sections and Outlines of an HTML5 Document)
2015-12-06T02:00:00+00:00
https://www.cythilya.tw/2015/12/06/semantic-web
最近有個朋友做了網站優化,才調整 HTML5 Outline 就讓該網站被 Index 的頁面快速增加。一個好懂的網頁能讓搜尋引擎有效爬完讀懂,而且優化成本相對不大。如果要開始做 SEO,從頁面 HTML 結構開始做起,是較簡單、CP 值又高的好選擇。
Angular.js Form Example 表單練習
2015-11-19T02:00:00+00:00
https://www.cythilya.tw/2015/11/19/angularjs-form-example
這個表單會展示常用表單元件、基本 Directive 和 Controller 的功能運作。由於網路上有很多大大的教學文章,因此在這裡只記錄一些我在學習與實作上遇到的重要觀念。
Node.js: 從 MongoDB 取得資料到套版
2015-09-09T02:00:00+00:00
https://www.cythilya.tw/2015/09/09/node-mongodb-rendering
經歷了前面關於 Node.js 基本安裝設定、模板引擎的熟悉,與一些基本的語法和操作,接著來到 MongoDB 的建置和使用,終於要把假資料換掉,使用真實世界的內容展現在畫面上啦。
使用 MongoVUE - GUI Tool for 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 來玩玩。
使用平台 MongoLab 連接 MongoDB
2015-09-04T02:00:00+00:00
https://www.cythilya.tw/2015/09/04/node-mongodb-mongolab
在連接 MongoDB 的時候遇到了一些小問題,將這些問題與解法記錄在這篇文章中。
活動咖手機版網站上線了 - 活動平台行動裝置網站或 App 設計的現狀探討與改進
2015-09-04T02:00:00+00:00
https://www.cythilya.tw/2015/09/04/eventpal-mobile-web
這陣子剛好在幫活動平台網站-活動咖 EventPal 設計 + 製作行動裝置版網頁,因此參考了不少前輩的作品 - Accupass、KKTIX、Pinkoi、friDay 等。在這裡記錄一些我對這些網站的想法,還有我們家產品所遇到的問題和設計的功能、解法。
Node.js: 使用 Nodemailer 傳送 Email
2015-08-19T02:00:00+00:00
https://www.cythilya.tw/2015/08/19/node-nodemailer
使用 Nodemailer 來傳送 Email。
Node.js: Cookie and Session
2015-08-18T02:00:00+00:00
https://www.cythilya.tw/2015/08/18/node-cookie-and-session
Cookie and Session。
Node.js:表單處理與檔案上傳(Form Handling and File Uploads)
2015-08-16T02:00:00+00:00
https://www.cythilya.tw/2015/08/16/node-form-handling-and-file-uploads
表單處理與檔案上傳。
Node.js: 隱藏 Response Headers 資訊
2015-08-12T02:00:00+00:00
https://www.cythilya.tw/2015/08/12/node-response-headers
Response Headers 給駭客一個可以入侵網站的地方,具有資安意識的網站會隱藏或給予錯誤的資訊。
Node.js: 使用模版引擎 Handlebars
2015-08-10T02:00:00+00:00
https://www.cythilya.tw/2015/08/10/node-handlebars
使用 Handlebars 作為模版引擎。
Node.js: 使用 express-partials 製作 Partial View
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。
Hello Node - 基本設定和簡單範例
2015-08-04T02:00:00+00:00
https://www.cythilya.tw/2015/08/04/hello-node
距離上次摸 Node.js - 使用 Node.js + Express 建構一個簡單的微博網站又是好長一段時間,這次從基本設定和簡單範例開始記錄。
AngularJS: TodoList
2015-07-23T02:00:00+00:00
https://www.cythilya.tw/2015/07/23/angularjs-todolist
大約一年多前(還在前公司),RD 部門的工程師們組了讀書會,其中一個主題是研究當前火紅的 JavaScript 框架為之後平台改版做準備,當時還小不懂事的我看到 Ember.js 的可愛 Logo 便自告奮勇研讀。
Strategy 策略模式
2015-07-15T02:00:00+00:00
https://www.cythilya.tw/2015/07/15/javascript-design-pattern-strategy
JavaScript Design Pattern「Strategy 策略模式」筆記。
Event Delegation 事件委派
2015-07-08T02:00:00+00:00
https://www.cythilya.tw/2015/07/08/javascript-event-delegation
JavaScript Pattern「Event Delegation 事件委派」筆記。
Iterator 迭代器模式
2015-06-28T02:00:00+00:00
https://www.cythilya.tw/2015/06/28/javascript-design-pattern-iterator
JavaScript Design Pattern「Iterator 迭代器模式」筆記。
Factory 工廠模式
2015-06-27T02:00:00+00:00
https://www.cythilya.tw/2015/06/27/javascript-design-pattern-factory
JavaScript Design Pattern「Factory 工廠模式」筆記。
Singleton 單體模式
2015-06-26T02:00:00+00:00
https://www.cythilya.tw/2015/06/26/javascript-design-pattern-singleton
JavaScript Design Pattern 「Singleton 單體模式」 筆記。
Code Reuse Patterns
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 的語法。
結構化資料之「活動」範例(Part 2)- 使用 Microdata 與 JSON-LD
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,並記錄更多實作上的疑難雜症。
結構化資料之「活動」範例(Part 1)
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 空總創新基地 - 空軍總部舊址中正堂, 台灣」。使用者不但能在搜尋結果知道活動標題、短描述和網址外,還能馬上知道日期(區間)、地點。
Module Pattern
2015-06-18T02:00:00+00:00
https://www.cythilya.tw/2015/06/18/javascript-module-pattern
Module Pattern 利用函數的「閉包(Closure)」特性來避免汙染全域的問題,意即使用閉包來提供封裝的功能,將方法和變數限制在一個範圍內存取與使用。這樣的好處除了避免汙染全域外,也將實作隱藏起來,只提供公開的介面(Public API)供其他地方使用。
Modern Web 2015:電子商務與活動平台的 SEO 到底要做哪些事?
2015-05-31T02:00:00+00:00
https://www.cythilya.tw/2015/05/31/modern-web-2015
自從 SEO 成為顯學後,各大電子商務和活動網站都開始注意是否有做 SEO - 是否能讓搜尋引擎正確剖析內容、商品、活動或報導是否出現在 SERPs 上,進而注意是否能從搜尋中帶入正確的 TA 和流量。但 SEO 到底要做什麼?搜尋引擎對於一般人來說像是個黑盒子,網路上的文件所述影響搜尋引擎的因子又非常多,到底要從哪裡開始優化?很多人光想到這裡就非常頭痛...
Decorator 裝飾者模式
2015-05-17T02:00:00+00:00
https://www.cythilya.tw/2015/05/17/javascript-decorator
Decorator(裝飾者模式)的說明與範例。
JavaScript: JSON.parse and JSON.stringify
2015-05-09T02:00:00+00:00
https://www.cythilya.tw/2015/05/09/javascript-json-parse-stringify
使用 JSON 做 Client 端與 Server 端資料傳遞的說明與範例。
JavaScript: Call and Apply
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)。
JavaScript: Closure 與 Hoisting
2015-05-01T02:00:00+00:00
https://www.cythilya.tw/2015/05/01/javascript-closure-hoisting
分散 var 來宣告變數並沒有太大的意義,因為就 JavaScript 程式語言的特性來說,函數(Function)中未宣告而先用到的變數會被提升至區塊的第一行做宣告。先來看基本觀念 Closure,再來看 Hoisting。
Responsive Patterns: Layout
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。
利用 Bootstrap Grid System 排版的學習筆記
2015-04-07T02:00:00+00:00
https://www.cythilya.tw/2015/04/07/bootstrap-grid-system
利用 Bootstrap Grid System 來排版真是一個方便的方法-若頁面上有許多小方格會隨著解析度而有不同的排列方式,就很適合用 Grid System 來排版。
UXHK 2015
2015-03-18T02:00:00+00:00
https://www.cythilya.tw/2015/03/18/uxhk-2015
年初我和小奎突然決定要參加 UXHK 2015,對我來說,有自己想做的東西後,很自然的就想去看看其他產業、其他環境、其他人或職位怎麼做怎麼想、關心什麼議題。
赤柱(Stanley)- 悠閒愜意的異國風情小鎮
2015-03-17T02:00:00+00:00
https://www.cythilya.tw/2015/03/17/stanley
如果準備搭飛機離港前剛好有一小段時間不知道要幹嘛的話,可以考慮到「赤柱(Stanley)」逛逛。赤柱像是沒有商業化又比較乾淨的淡水,跟西貢比起來更有異國風情味。
YHA 美荷樓青年旅舍(YHA Mei Ho House Youth Hostel)
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)」,看起來交通方便(近港鐵深水埗站)、環境漂亮又安全、價格便宜,就訂了下來。
使用 Bootstrap 建立一個 RWD Template(Twitter Bootstrap in Responsive Web Design)
2015-02-27T02:00:00+00:00
https://www.cythilya.tw/2015/02/27/bootstrap-rwd-template
使用 Bootstrap 建立一個 RWD Template 的筆記。
吃什麼,どっち - 讓朋友幫你決定吃什麼(ALPHA Hackathon 2015)
2015-02-02T02:00:00+00:00
https://www.cythilya.tw/2015/02/02/dotchi
社交恐懼症的救星跨出了第一步 - 我們做了找吃東西地點的「吃什麼,どっち - 讓朋友幫你決定吃什麼」。使用者藉由輸入簡單的字詞,例如:「台北市中山區 火鍋」,按下「尋找餐廳」後就能從列表中找到符合項目的推薦餐廳,或按下「看看朋友吃什麼」,經由 Facebook 授權登入後,看看朋友去過哪些地方、評價。而我們也會爬回 Facebook 上的資訊做處理並排序,推薦適合的餐廳給使用者。
電子商務網站 SEO 實例探討
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 電子商務的狀況作探討。
App Store Optimization (ASO) Guideline
2014-12-22T02:00:00+00:00
https://www.cythilya.tw/2014/12/22/aso-guideline
ASO 和 SEO 的概念是類似的,同樣是企圖在搜尋引擎(不管是 App Store 或 Web 搜尋引擎上)在使用者特定的查詢字串下,將排名往前,取得較佳的排名。而為了取得較佳的排名,我們是有些工作必須完成的,分述如下。
談如何利用標籤(Tag)加強網站的近似辭彙(Relevant Terms)
2014-11-26T02:00:00+00:00
https://www.cythilya.tw/2014/11/26/tag-relevant-terms
網站的流量來自於使用者的貢獻-使用者經由自然引擎(Organic Search)、推薦連結(Referral)、社群分享(Social)和直接連結(Direct)進入網站。其中,若使用者經由搜尋引擎找到網站內容,必定是使用特定的搜尋字串(精準或不精準的關鍵字)進入網站。而關鍵字的聚焦即為標籤,標籤集合頁匯集網站資源而能在 SERPs 上大放異彩。
使用 Node.js + Express 建構一個簡單的微博網站
2014-11-23T02:00:00+00:00
https://www.cythilya.tw/2014/11/23/nodejs-express-microblog
使用 Node.js + Express 建構一個簡單的微博網站。
D3.js:Bar Chart 長條圖簡單範例
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 了。
使用 Graph API 上傳圖片到 Facebook 相簿、並設定為使用者大頭照
2014-10-20T02:00:00+00:00
https://www.cythilya.tw/2014/10/20/fb-graph-api-user-photo
有不少活動都會引導使用者上傳圖片並設定為封面或是檔案頭像,例如「遮打革命 Umbrella Revolution」。
響應式網頁(Responsive Web Design)實作筆記
2014-10-19T02:00:00+00:00
https://www.cythilya.tw/2014/10/19/rwd
響應式網頁(Responsive Web Design)是一種設計概念,希望能讓網頁適用在不同的平台上。公司最近想對產品大改版,於是又來練練 RWD 摟!
2014 SEO Ranking Factors - 點閱率是最重要的因子、利用標籤競爭排名
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、網站架構與技術等。
Facebook Graph API - Taggable Friends
2014-09-24T02:00:00+00:00
https://www.cythilya.tw/2014/09/24/facebook-graph-api-taggable-friends
由於 IKEA 做了一個好玩的活動網站「來IKEA睡一晚」,其中含有邀請朋友並標記、分享到 Facebook 上,因此也做了一個範例來玩玩。
關鍵字 (Keyword) 與標籤 (Tag)-談選擇、聚焦與經營
2014-08-16T02:00:00+00:00
https://www.cythilya.tw/2014/08/16/keywords-and-tags-management
許多網站都有設置關鍵字與標籤,但網站一定需要關鍵字、標籤嗎?關鍵字和標籤有什麼差別?能夠帶給網站什麼樣的成效?
Facebook Graph API 與 Demo Example
2014-06-07T02:00:00+00:00
https://www.cythilya.tw/2014/06/07/facebook-graph-api-demo-example
常用 Graph API 說明與 Example Demo。
搜尋引擎優化指南 (SEO Guideline) - 如何有系統的優化網站、評估與持續改進?
2014-05-17T02:00:00+00:00
https://www.cythilya.tw/2014/05/17/seo-guideline
這篇文章將我到目前為止的 SEO 相關操作整理為搜尋引擎優化指南 (SEO Guideline),它是一套針對搜尋引擎優化網站的執行準則,每個崗位執行特定的工作即可讓網站有一定的效果,並且這樣的優化過程是可以被評估、回饋與持續改進的;而系統化的實行也有助於將有限資源做最大利用,以得到最好的效果,例如:提高點閱率、排名等。
粉多任務 x 一品禪 - 使用 Microdata 標記的網頁實例
2014-04-21T02:00:00+00:00
https://www.cythilya.tw/2014/04/21/friendo-yipinchan-microdata
什麼是 Microdata?這些標記符號的用途在於讓搜尋引擎有效讀懂網頁的內容,進而達到搜尋時呈現我們所提供的資料的方法。畢竟直接告訴搜尋引擎重點在哪裡,是比較有效率和精準的,文中也會說明標記如何撰寫和測試。
Author Rank
2014-03-22T02:00:00+00:00
https://www.cythilya.tw/2014/03/22/author-rank
Author Rank 是評估作者影響力的指標,過去尚未被證實是否會影響搜尋結果的排名,但 Matt Cutts 的一則 Tweet 似乎證實在某些地方確實會用到,例如專門領域文章的分析。
RSS:概念與實作
2014-03-09T02:00:00+00:00
https://www.cythilya.tw/2014/03/09/rss
RSS(Really Simple Syndication,簡易資訊聚合)是一種消息來源格式規範,用以蒐集經常更新內容的網站的最新資訊,例如部落格、新聞、多媒體等。其目的是把內容「送」到使用者的面前。RSS 可藉由各種閱讀器來閱讀。
從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags
2014-02-01T02:00:00+00:00
https://www.cythilya.tw/2014/02/01/search-and-social
搜尋引擎提供使用者想要的資訊,而社群平台提供這些資訊更多露出的機會。我們希望將優質的內容提供給使用者,並利用社群的力量推廣出去。搜尋引擎不但想提供資訊給使用者而已,更想精準的回答使用者的問題。但如何讓搜尋引擎了解網頁內容呢?於是「Semantics」(語意學)便成為 SEO 很重要的議題。漸漸的,搜尋引擎可以了解網頁的內容,於是便能透過各種技術將適當的內容呈現給使用者來解決各種問題。
SEO:重複內容(Duplicate Content)
2014-01-22T02:00:00+00:00
https://www.cythilya.tw/2014/01/22/seo-duplicate-content
網路上存在著許多重複內容,搜尋引擎為了提供使用者最佳的搜尋結果,便會對這些內容作區別。而網頁內容重複是難免的,但造成了搜尋結果排序上的困擾。因此,我們可以對這些頁面做處理,修正搜尋引擎對它們的解讀。
IA for SEO:使用 IA 增進自然搜尋流量
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,資訊架構)是很重要的部份。
Icon Fonts 教學
2013-10-08T02:00:00+00:00
https://www.cythilya.tw/2013/10/08/icon-fonts-tutorial
以往我們都是將小圖示(icon)用切圖的方式放入網頁,而我們也可以將這些 icon 用 CSS「畫」出來。
CKEditor HTML 網頁編輯器 + ASP.NET MVC3 範例
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。下載後經過簡單安裝便能作為前台或後台編輯工具。