## 前言 上篇已經建立好專案了，本篇會教你常用的**html**和**css**，畢竟前端的基本功就是切版。 ## 修改tsx和css <font color="red">p.s無論是刪除或者是修改，在改完後記得儲存 ctrl + s，這樣你的畫面才會跟著改變</font> 1. 首先把 `index.css` 和 `App.css` 裡的東西全部刪除。 2. 開啟 `index.css`，將以下css加入: ```css /*可以讓元素的 width 和 height 包含內邊距和邊框，方便設計*/ *, *::before, *::after { box-sizing: border-box; } ``` 3. 開啟 `App.tsx`，將綠框和紅框的部分刪除，如下圖:  4. 接著你會得到下圖，紅框的部分就是**React**框架中**html**的部分:  ## html 簡單來說html是呈現資料(文字)、圖片、影片等等的地方。 修改 `App.tsx`: ```tsx import { useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); return ( <> <div>Hello World!</div> <div>Hello World!</div> </> ); } export default App; ``` 開啟[localhost:5173/](http://localhost:5173)，你就會看到我們上面加入的`Hello World!`，如圖:  ## className 在html中的class，在react裡會寫做className，甚麼是className呢? 就是給你html裡的元素一個類別，讓你的css可以根據各個類別的名稱去做設定，我們來給程式碼設個className，如下: ```tsx import { useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); return ( <> <div className="item1">Hello World!</div> <div className="item2">Hello World!</div> </> ); } export default App; ``` ## css css就是用來設定html內元素的字體顏色、大小、背景顏色、邊框等等，下面會介紹一些常用的css並解釋其用途。 1. **color**: 文字的顏色。 2. **font-size**: 文字的大小。 3. **font-weight**: 文字的粗度。 4. **padding**: 元素內的間距。 5. **margin**: 元素外的間距。 6. **background-color**: 背景顏色。 7. **border**: 邊框。 8. **border-radius**: 圓角。 9. **width**: 元素的寬度。 10. **height**: 元素的高度。 11. **flex**: 排版。 接著讓我們嘗試一下，修改 `App.css`: ### color 和 font size 和 font weight ```css /*沒有. 就是針對元素去做設置*/ div { font-weight: 600; } /*有. 就是針對該className去做設置*/ .item1 { color: red; font-size: 24px; } .item2 { color: blue; font-size: 16px; } ``` 會得到下圖:  ### padding 和 margin 和 background color padding、margin這兩個有很多種寫法，這邊以padding來舉例: 1. `padding: 10px;`，這樣代表上下左右內間距都為10px。 2. `padding: 10px 0;`，第一個數表示上下，第二個數表示左右。 3. `padding: 10px 0 10px 0;`，這四個數分別代表上、右、下、左。 4. `padding-{方向}: 10px;`: 也可以單獨針對所需要的方向來做設置。 接著修改 `App.css` 試試看，下面兩種寫法: ```css .item1 { padding-bottom: 10px; } ``` ```css .item1 { margin-bottom: 10px; } ``` 會發現無論是哪種程式碼，乍看之下都會一樣，如下圖:  這時候我們將 `.item1` 加上background-color，這樣就可以很清楚的知道padding、margin的差別了，如下: ```css .item1 { padding-bottom: 10px; background-color: yellow; } ```  ```css .item1 { margin-bottom: 10px; background-color: yellow; } ```  ### border 和 border-radius 和 width 和 height 馬上嘗試一下，修改 `App.css`: ```css .item1 { width: 300px; height: 80px; border-radius: 8px; border: 1px solid red; } .item2 { width: 150px; height: 150px; border-radius: 50%; border: 1px solid blue; } ``` 這裡看一下 `.item2` 只要width、height相等並讓 `border-radius: 50%` 這樣就會得到一個圓了，如圖:  ### flex 這是用來布局版面的常用的有: 1. `display: flex;`: 賦予該元素flex屬性。 2. `flex-direction`: 排版方向可以設置為row(橫的)或是column(直的)。 3. `justify-content`: 以排版方向畫一條線當作主軸，並以主軸為基準來進行排版，如下圖:  4. `align-items`: 以主軸的90度來畫一條線當作交錯軸，並以交錯軸為基準來進行排版，如下圖:  讓我們實際試一下，修改 `App.css`: ```css .item1 { width: 300px; height: 80px; border-radius: 8px; border: 1px solid red; display: flex; flex-direction: column; align-items: end; justify-content: flex-end; } .item2 { width: 150px; height: 150px; border-radius: 50%; border: 1px solid blue; display: flex; flex-direction: row; align-items: center; justify-content: center; } ``` 就可以得到下圖:  ## 最後 今天的介紹就到這裡，html、css在這篇文章中只是稍微帶過而已，讀者可以上網搜尋專門在教html和css的文章，下次見。

## 前言 最近有一個朋友想加入前端的行列，但他完全沒有接觸過程式(HTML、CSS 都不懂的那種)。所以我想做一個麻瓜都能懂得React系列，此系列會盡量以最詳細的方式來做介紹，其中會包含HTML、CSS、Typescript等等。 ## 環境建置 首先我們需要下載兩樣東西: 1. [Nodejs](https://nodejs.org/en)，打開連結後點擊紅框區域下載，並安裝。  2. [VsCode](https://code.visualstudio.com/)，打開連結後點擊紅框區域下載，並安裝。  兩者在安裝過程中不用修改任何東西一直點 **Next**(**下一步**) 即可。 ## 確認Nodsjs是否安裝成功 安裝完成後，讓我們確定**Nodejs**已經安裝成功，打開命令提示字元(CMD)並輸入: 如何開啟命令提示字元(CMD): **Windows + Q** 並輸入**命令提示字元**或**CMD** ```console node -v ``` <font color="red">輸入完</font> `node -v` <font color="red">後請按Enter</font> 出現和下圖一樣表示你已經安裝成功(版本號不同沒有關係)。  ## 創建React專案 打開命令提示字元(CMD)並輸入: ```console npm create vite@latest my-react-app --template react ``` `my-react-app` 是你專案的名稱可以自行定義，我的專案名是 `react-demo`。 選擇React，如下圖:  接著選擇Typescript，如下圖:  ## 使用VsCode開啟專案 開啟剛剛下載的**VsCode**，依照下圖開啟專案資料夾，資料夾路徑通常為(C:\Users\電腦的使用者名稱\專案名稱):  看到下圖表示專案已開啟  ## 下載專案所需套件 接著我們需要下載該專案所需的套件，首先按照下圖新增一個**Terminal**:  接著輸入: ```console npm i ``` 然後等待一些時間，出現和紅框部分一樣後表示下載成功  ## 讓該專案在網頁上呈現 要讓專案出現在網頁上，請在**Terminal**輸入: ```console npm run dev ``` 等待一些時間，出現和紅框部分一樣後表示成功  打開網址: 預設網址通常為[localhost:5173/](http://localhost:5173)，如下圖  ## 專案目錄結構  這裡簡單介紹一下目錄結構，看不懂沒關係之後有使用再回來看即可: 1. **資料夾node_modules**: 上面透過`npm i`下載後的套件都會放在這裡。 2. **資料夾public**: 用來放靜態檔案的地方，像是網站的圖標(icon)等等。 3. **資料夾assets**: 用來存放圖片、語音、影片等等。 4. **.css**: 以此為結尾的檔案是用來寫**css**的地方。 5. **.tsx**: 以此為結尾的檔案是用來寫**Typescript**和**Html**的地方。 6. **package.json**: 管理該專案所需使用到的套件以及配置一些選項的地方。 7. **vite.config.ts**: 定義和調整**Vite**構建工具的地方。 ## 最後 這樣就可以準備開始你的前端之旅了，下篇會學到如何更改 `localhost:5173` 的頁面，下次見。

## 前言 前一陣子為了要讓Web像是App一樣可以接收推播，於是在網頁新增了PWA[(原文在此)](firebase-fcm)，在上篇文章中PWA的部分只是簡單的帶過，所以今天特地寫了一個主題來介紹PWA及cache機制。 ## Service worker 代碼 找到public下的 `sw.js` 並修改 ```javascript const CACHE_NAME = "v1"; self.addEventListener("install", (event) => { event.waitUntil( caches.open(CACHE_NAME).then((cache) => { return cache.addAll(["/", "/index.html", "/logo192.png"]); }) ); self.skipWaiting(); }); self.addEventListener("activate", (event) => { event.waitUntil( caches .keys() .then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheName !== CACHE_NAME) { return caches.delete(cacheName); } }) ); }) .then(() => { return self.clients.claim(); }) ); }); self.addEventListener("fetch", (event) => { event.respondWith( caches.match(event.request).then((response) => { if (response) { return response; } return fetch(event.request).then((networkResponse) => { return caches.open(CACHE_NAME).then((cache) => { if ( event.request.method === "GET" && event.request.url.includes("/static") ) { cache.put(event.request, networkResponse.clone()); } return networkResponse; }); }); }) ); }); ``` ## 代碼介紹 ### CACHE_NAME 版本名稱，用來判斷service worker版本是否更新。 ### install 在此會載入新的service worker並且將你設定的靜態檔給cache住，cache後就可以在離線的情況下運行，就是像真的App一樣。 ### skipWaiting 在service worker的機制中，會等到舊的service worker終止後才會執行新的service worker，但舊的service worker只有在網頁被關掉時侯後或是重新整理才會終止，所以這時候就可以透過 `skipWaiting()` 直接讓新的service worker開始運行。 ### activate 舊的service worker被卸載後，新的service worker就會觸發activate，所以我們可以透過 `CACHE_NAME` 這個變數來判斷版本是否有改變，若版本改變了就把舊有的cache給清除掉。 ### claim `claim()` 此方法是為了service worker立即生效而不用重新加載。 這邊讀者可能會有疑問，明明已經透過 `skipWaiting()` 讓新的service worker開始運行了為甚麼還需要 `claim()`。 這裡舉個例子: 假設你在第一個分頁開起網頁後service worker的版本是 `v1`，這時候網站更新了 `v2` 版本，接著你在第二個分頁開啟的網頁service worker版本會就會是 `v2`，這就會導致你開了同樣的頁面但功能卻有所不同，此時就可以使用 `claim()` 該方法，將第一個分頁的service worker變成 `v2` 版，而不用關閉該網頁或重新整理。 ### fetch 在此會做兩件事: 1. 判斷網頁要拿得資源是cache的還是線上的。 2. 是否要將新獲取的資源放入cache中。 這邊讀者可能會提問，為何不把需要cache的資源在install的時候就設定好。 <br>  <br> 看上圖可以知道我載入了名為 `main.5fd0f9d6.js` 的檔案，但 `5fd0f9d6` 是一個hash值，在每次build專案時都會不一樣，所以我們無法在install階段就將其寫入至cache。 接下來需要判斷要cache的資源是否為 `method=GET 且 url包含/static`，原因在於: 1. cache只能存放`GET`(如果硬要將POST的資料放入cache也是可以的，但這裡先不介紹)。 2. `/static` 是我們編譯完成的靜態檔案的路徑，如果不加此條件那麼所有的 `GET` 都會被加入cache之中 ，會導致cache存放一堆沒用的檔案，例如: 地圖套件的圖資就是 `GET` 的png檔案，這類型的檔案是不需要存在cache中的。 ## service worker運作流程 當每開啟一次網頁時就會按下面的流程執行: `開啟網頁` -> `註冊service worker` -> `install基本資源並啟動新的service worker` -> `判斷版本是否有更新，若有則清除舊的cache` -> `當有request時判斷是否從cache中獲取，若從網路獲取則判斷是否符合存至cache的條件`。 ## 最後 service worker的cache機制確實是可以達到減少網路流量及加快網頁的載入速度，但我認為如果你的網頁不需要離線操作那麼就不需要cache，原因是現今網路速度這麼快的情況下使用者的體感是感覺不出差異的，所以一般情境下單純的service worker就可以了。 若有問題可以留言給我，下次見。

## 前言 最近想要紀錄一下自己的開銷但又懶得打字，就想到透過iphone內建的**備忘錄**和**捷徑**功能應該可以達到我要的效果。 完成後發現在iphone上運行正常，但在apple watch上卻無法將文字寫入備忘錄也沒有任何的提示，不過身為一個工程師怎麼能被區區捷徑給難倒，於是就有了這篇文章的誕生。 ## 新增備忘錄 首先打開iphone `開啟備忘錄 -> 新增備忘錄並輸入"記帳"`。 <img src="/image/general-post-img/apple-watch-1.png" width="400"> <br> ## 製作捷徑 打開iphone `開啟捷徑 -> 新增捷徑，然後取名為"記帳"`，並依照下圖新增動作 <img src="/image/general-post-img/apple-watch-2.png" alt="Apple Watch聽寫備忘錄捷徑製作" width="400"> <br> 此處解釋一下各個動作: 1. **聽寫文字**: 選擇你的語言和暫停之後。 2. **文字**: 將第一步的 `聽寫文字` 放入這裡，且可以依需求加上其他資訊，這裡我是加上**換行**和**當前時間**。 3. **加入到變數**: 若不知道在哪，可以根據以下動作來找到 `搜尋動作 -> 工序指令 -> 加入到變數`，將第二步的 `文字` 放入並給它取一個名稱為 `text`。 4. **附加到備忘錄**: 將剛剛取的 `text` 附加到我們一開始創建的 `記帳 備忘錄` 裡。 ## iphone上執行 完成步驟1和步驟2後，接著要來執行看看效果，在iphone上有兩種方法可以執行捷徑: 1. 直接執行捷徑，然後說出你要寫入至備忘錄的文字即可。 2. 對iphone說出 `嘿 siri 記帳`，iphone就會自動幫你執行捷徑了，然後說出你要寫入至備忘錄的文字即可。 ## 在apple watch上執行 若想要apple wacth上執行，請先做完以下兩個步驟: 1. 打開 `設定 -> 搜尋捷徑 -> 開啟"iCloud同步"`。 2. 打開 `捷徑 -> 長案剛創建的記帳捷徑 -> 點選詳細資訊 -> 開啟"顯示在Apple Watch上"`，如下圖 <img src="/image/general-post-img/apple-watch-3.png" alt="Apple Watch加入捷徑" width="400"> <br> <img src="/image/general-post-img/apple-watch-6.png" alt="Apple Watch加入捷徑" width="400"> <br> 等個1 ~ 2分鐘就可以在apple watch上看到該捷徑了，一樣有兩總種方法可以執行: 1. 將捷徑加入到**桌面的複雜功能**手動執行 2. 也可以像是iphone一樣透過 `嘿 siri 記帳` 來執行。 ## 成果 可以看到效果非常不錯~ <img src="/image/general-post-img/apple-watch-4.png" alt="Apple Watch聽寫備忘錄展示" width="400"> <br> <img src="/image/general-post-img/apple-watch-5.png" alt="Apple Watch聽寫備忘錄展示" width="400"> <br> ## 最後 以上就是讓apple watch透過捷徑執行聽寫備忘錄的方法，若有問題可以在網頁右下角 `+` 內的留言板和我聯絡，文章歡迎引用請標明出處即可，下次見~