2022 MOPCON 心得分享

這是我第一次參加網站開發相關的研討會，一切都蠻新奇的。
也見到許多大神本人，之前都是螢幕前看著文章，沒想到可以親眼看見本人。
以下針對我有實際參加演講的部分進行分享：

前端好朋友 - tailwindcss - 奶綠茶

經典語句:

Tailwind是近年來討論度最高的CSS框架，與Bootstrap5的優缺比較文章更是數不清
網路上也是各有支持者，以下是初步列出優缺點:

兩者都有的優點: 格線系統、變數參數系統

Bootstrap5 優點: 模組元件化可以直接拿來用
Bootstrap5 缺點: 模組記憶體大(約100MB)，要改主題及變數不容易 (用!important就好啦XD)

Tailwind 優點: 有使用到才會下載，更改主題及方便，直接有config檔可以設定
Tailwind 缺點: 所有元件都必須設定(padding, border-radius等等), IE不能動…

此外，Tailwind更支援自訂 Variant 狀態，像上述經典語句2，
就可以利用監聽語系切換按鈕，來更改字型大小達到PM所需功能，其可讀性也是極高。

最後乃綠茶也用這段話來勉勵－

1
2
3

學習不需要為公司、長官或同事，
不需要為別人，只為你自己
——五倍紅寶石 高見龍

後記：
實際使用tailwindCSS寫了個BMI計算機，感想為真是香阿，
整個版面都是我的html-class，但不用想CSS命名就是讚!!
BMI計算機-github BMI計算機-page

身為六角學院學生，一定要挺我們校長洧杰～～

經典語句:

整場演講就像來分享這十年教學經驗，六角學院的核心價值

透過四點　任務ｘ社群ｘ引導ｘ學習
讓不懂程式的學員能夠一步一步往前
我自己也是這樣學的，聽到這場演講心有戚戚焉

最後也提到為什麼自我學習這麼重要？
因為前端變化非常快，找到工作只是開始，後續三年如何成長才更是關鍵

如果使用者進入網站發現loading超過三秒，跳出關閉的機率大於5成
因此檢視入口網站或關鍵服務網站渲染時間就很重要

lighthouse就是可以判定其渲染效能給定分數的套件

可以透過套件得到相關資訊，如下圖：

可以透過每次的commit得到不同分數，藉此了解每次修改是否影響效能

後續提到新套件要導入團隊會遇到情況，line團隊是採用種子制度
可以讓分布不同團隊的人一同推動達到同步執行新制度

也透過自建資料庫將每次得到的分數記錄，作為後續專案討論及改善方向

原則: 什麼是無障礙設計？讓所有人都可以使用的設計

其實實作無障礙功能，不會使流量增加，但會使產品使用者體驗更有溫度

大部分知名網站公司當有在做此服務：youtube、google等..

實作上不要本末倒置，還是要先以功能為主
可以透過隱藏附註方式，讓使用者體驗維持

後記:
這一場演講是我聽完最有感觸的，雖然現在能力可能為不太足，但能在開發網站中，同時思考如何讓非一般使用者體驗提升，這件事真的讓我感到滿滿的溫暖，也默默許下希望未來自己能在這領域出一份力。

參考資料: