# 合作需求

## 技術基礎

可參考簡訊設計 https://simpleinfo.cc/hiring/front-end-freelancer-202312

- 靜態網站與小型專案，可使用 `Vue3` (使用 `Composition API` ) 作為解決方案，容易找到新手合作。 `Vue2`已停止支援，避免使用。
- 中型專案以及管理較為複雜的專案，前端框架可使用 `Vue3`、Vue 框架的框架 `Nuxt` 以及 `React` 與 React 框架的框架 `Next`。React 建議 React 18 之後，`functional components` 並支援 `hook`
- 當代主流 RWD 設計以 `Tailwind CSS` 框架最為方便，但又可適應設計的高度客製化環境
- 如有高度客製化之設計、特效需求，為以上所未竟，可使用 `CSS in JS` 解決方案，常使用的為之前泛用的 `Styled Components (React)`
- 如果人才庫主要為前端為主，建議後端也可以使用 `Node.js` (同為 JavaScript)，資料庫可多使用 NoSQL 如 `mongoDB` 支援 JavaScript 的 `JSON` 格式。
## 當代框架的基礎

- 元件化(Components)，除了視覺層面，功能層面也是
- RESTful API，前後端合作時，後端需提供清楚的 API 文件，使用 Swagger 等工具製作 API 文件網站，或在 Github 清楚標明，使前端工程師能使用 Postman 與終端機(Terminal) 輕鬆串接/介接。

## 終極觀念

靜態網站與動態網站：差別不在是否有「動態」特效設計，而是指網站會因為登入等行為，串接後端跟資料庫，不同人看有不同結果，則稱之為動態網站。動態網站跟多數靜態網站的使用工具有迥異差別。世界上有非常多方便的靜態網站工具：

**wordpress**：即使是大公司，部落格也常常使用。後台可以設定串接非常完整的 SEO 與 GA4 等，有完整的後台介面。後端使用 php，可簡單租借機台架設。
**github pages**：使用免費的 github pages，串接你的域名商 (如 gaudi, goDaddy, cloudflare 乃至中華電信) 搭配 DNS (cloudflare) 即可變成自己的網址。
DNS 類似將『汐止金城武.com』轉譯成你真正的 IP，也就是 25.123.13.45 這樣的一串數字。
**webflow**: 不會寫程式搭建 Landign Page 也非常方便，但可以搭配工程師自行撰寫的 coding block。

以上的網站價格通常都非常便宜，主要收費邏輯在於切版調整(不含視覺設計，通常較為便宜)、行銷串接 (不含內容SEO，GA4、SEO 與 metadata)以及架站維護（買域名、串接 DNS、雲端機器如亞馬遜 aws, Google gcp, 微軟 Azure 等）。

**風險**：wordpress 團隊中如果沒有人會寫 php，接手之後想要更改，就要小心插件本身出問題，否則會很麻煩。不是所有改動都很方便。

動態網站則昂貴許多，常見的最基本有自架設的部落格（自己搭建後台，可管理文章）、購物車系統串接金流、社群平台、傳統論壇乃至串流平台/線上課程平台。

目前主流若想搭建購物平台，也可以使用月/年約的方式，租借動態網站解決方案，即為前者整合後者的做法，坊間有服務業者自己架設類似 wordpress +woocommerce 購物車插件的平台，以及ㄧ頁式電商的解決方案，串接金流等。
線上課程也有類似的平台（如 teachable)。

## 常用的工具跟套件
- `vscode`：支援 ChatGPT 的 Github 工具 `github copilot` 以及大量主流工具插件的微軟平台 IDE 整合開發環境
- `vite`，創建 react 或 vue 專案時，目前的主流工具，內建 babel 轉譯，可處理 ES6(ECMA2015) 之後的現代 JavaScript 語法，避免各種錯誤
- `prettier`，程式碼格式化潔癖的工具，增加除錯效率
- `lazy-loading` 有效提升瀏覽體驗，在大張圖片跟影片還沒載入時以模糊漸進呈現。
- [可選]`sass`，將 css 弄的更像程式語言，可抓出變數等共同元素，非常好寫，方便管理共同元素、顏色與字體設定、間隔等，也增加除錯效率。
- [可選]`i18n`，當要使用多國語系時，一開始就要討論使用。
- 可串接其他工具，將翻譯文本轉交給專業人士處理。
- [可選]`drag-n-drop`，有圖片跟拖拉功能非常合適。可以直接拖拉本機檔案到特定位置上傳等，或是將網站中 A 地區的東西拖拉到 B 區。

## UI 設計交付

- 漢堡選單那類 Icon ，如果有特殊設計，也要切成元件。
- 元件切圖一定要貼邊
- RWD 設計，以該設計縮小後字級太小，將字級調大、增加可讀性為主要設計邏輯
- 否則沒有必要因應 RWD 製作特殊設計，圖片多易使專案肥大、降低開發效率與瀏覽時的效能，且在視覺體體驗上不一定更好