2022年1月31日 星期一

e2e 測試工具 Cypress 安裝及介紹

›
e2e測試(End-to-End testing)是模擬使用者的行為，實際打開瀏覽器操作頁面的測試方式，因此不限於vue, react的專案，e2e的測試可以反映出頁面在不同瀏覽器的執行情形。 Cypress便是其中一個常見工具，Cypress在安裝上簡單，語法採用 mocha...
2022年1月25日 星期二

js 單元測試套件 Macha+Chai (es6 語法 Babel 設定)

›
安裝 首先安裝 mocha ( 官網 )和 chai ( 官網 ) npm install mocha chai --save-dev chai 是一種斷言庫( Assertion Library)，mocha 不像是jest已經內建，可以自行決定要使用哪一種套件，...
2022年1月23日 星期日

webpack 常用 plugin 介紹 - HtmlWebpackPlugin 自動產生 Html

›
根據「 [Vue.js] 如何建立 Vue3 + webpack5 專案範例 」的內容，封裝時已經先建立目錄 dist/ ，新增 index.html ，預先將 main.js 加到 script 中。 接著，以下要介紹 HtmlWebpackPlugin ，這個 we...
2021年12月15日 星期三

取代 window resize 事件? 如何使用 ResizeObserver 偵測元素變化

›
ResizeObserver 用來監控元素大小的變動，與 window 的 resize 事件(如下)的用途相似，通常用在監控瀏覽器視窗大小的變動。ResizeObserver 使用範圍更廣，可以綁在 HTMLElement 上。 window.addEventListene...
2021年10月1日 星期五

如何將 Github 專案部屬到 Heroku (Creating a 'Deploy to Heroku' Button)

›
先前「 [django] 將Django專案部署到Heroku 」提到如何一步一步建立 Django 專案，並部屬到 Heroku。若是Github現有的專案已經滿足 Heroku 基本所需的設定，可以透過網頁操作，將現有專案快速地複製到 Heroku 上。 操作說明使用 he...
2021年8月17日 星期二

Github Actions 自動 Jekyll 專案部屬 Github Pages

›
自從完成「 Travis CI 自動 Jekyll 專案部屬 Github Pages 完整範例 」很久沒有更新 Github Pages，近期上傳時卻發現CI執行失敗，並不是腳本有問題或編譯過程有錯誤，而是request被拒，所以即使換了Github Token依...
2021年8月15日 星期日

CloudCannon 支援 Jekyll 網站後台管理CMS系統

›
With CloudCannon as your Jekyll CMS, you will have all the tools you need to create amazing static websites. CloudCannon 是線上網站後台管理CMS...
2021年8月14日 星期六

Html 轉 Figma 的小工具 Figma Plugin匯入現有網站

›
Figma 如何匯入現有網站，可以使用  Figma to HTML, CSS, React & more! 快速解決！ 可以先安裝 google chrome 的擴充功能、Figma的擴充功能，再到網站使用 google chrome 的擴充功能匯出 Json，並到 ...
1 則留言:
2021年8月9日 星期一

[Vue.js] 如何建立 Vue3 + webpack5 專案範例

›
以下說明如何使用 webpack5 打包 Vue3 專案，若尚未安裝 webpack5，可以參考「 webpack5 安裝及基礎教學 」。 一、安裝 需要安裝的套件如下，特別需要注意的是，在 Vue3 裡支援副檔名 .vue 的 single-file componen...
2021年8月8日 星期日

webpack5 安裝及基礎教學

›
根據維基百科：「Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺乏的模組化開發方式，將各種靜態資源視為模組，並從它生成優化過的程式碼。」，使用前必須安裝 Node.js。 webpack 從版本4.0.0開始，可以不需要設定設定檔( webpack.co...