- 77·Last edited by 77 on May 13, 2021Linked with GitHubContributed by
There is no commentSelect some text and then click Comment, or simply add a comment to this page from below to start a discussion.解決使用 CSS transition 造成圖片模糊／跳動的問題
在做 campaign 案時常會遇到圖片（不論是 <img> 或 css background）使用 transition 做動態時會模糊，最後到定點後會跳動一下的問題，因為一直很惱人所以就忍不住找了解法
selector {
backface-visibility: hidden;
transform: translateZ(0) scale(1, 1);
}
加了上面的設定 Chrome 看起來問題就解決了，但不曉得為何 Safari（新生代 IE）感覺好像沒有太大的改善，於是我另外加了 will-change 屬性，Safari 看起來就好多了，以下附上我的設定：
selector {
backface-visibility: hidden;
transform: translateZ(0) scale(1, 1);
will-change: margin-top, opacity // 這邊的屬性值使用動態時會用到的就好，不建議設定太多
}
tags: css animation
Read more
Safari 出現 SyntaxError: Invalid regular expression: invalid group specifier name 錯誤
網站中如果有使用到正規表達式，Safari 瀏覽器會在某個正規規則下報出以下錯誤：SyntaxError: Invalid regular expression: invalid group specifier name，接著網站可能就會一片空白或是無法正常運作。 以下是我接手案子內的其中一段程式碼： transPoint(point) { // 下面這段 Safari 會報錯，必須用 RegExp 包 return point.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ','); }, 上面這段直接把正規規則包在 /.../g 裡在 Safari 上是會出錯的，需要使用 new RegExp('...', 'g') 包起來才可以，並且有使用到 \d 的部份要改用兩個反斜線來取代，例如 \d 需更改為 \\d
Oct 2, 2021npm 與 npx 之間的關係
前言 之前在看 react 的官方文件時，文中在建立一個新的 react 專案有使用到一條指令：npx create-react-app my-app，當時沒特別想說它是做什麼用的，就先照做吧～ 這幾天剛好有機會碰到了，在這邊做個筆記。 介紹 npx 是 npm v5.2.0 開始加入的一個指令，也是一個 CLI 工具 一個永久存在本機、一個臨時安裝，執行完後移除 這邊就拿 create-react-app 來舉例 以 npm 的方式來建立：
Sep 29, 2021Webpack Include 其他 HTML 檔案
在製作專案時，一定會有全站頁面共用的元件（像是 header, footer 等等），若今天碰到 header、footer 有調整需求，要一個個修改 html 檔光用想的就覺得辛苦，本次討論的是若專案並非使用前端框架來製作時該如何處理 安裝 html-loader $ npm install --save-dev html-loader 專案目錄結構 ├── README.md ├── package-lock.json ├── package.json ├── src
May 13, 2021一台電腦使用多個 Git 帳號 (SSH 金鑰)
前言 新公司專案感覺會時常使用 git，主要是想在若有緊急情況時，希望在家中也有辦法處理公司的事，剛好目前還在熟悉環境手邊暫時沒有排專案，就在公司電腦試了一下。 目標 在同一台電腦上，公司 github 帳號可以管理公司專案、私人 github 帳號可以管理私人專案 產生不同的金鑰 執行以下命令，Email 記得更換 $ ssh-keygen -t rsa -C "username@example.com"
May 13, 2021
HackMD