Pi's Blog

前言

3~6 月國軍 online，一般來說還有周休二日可以碰碰電腦，練練程式
但沒想到居然如願以償去馬祖當兵
身為外島兵，整個下部隊期間只有放一個大約十天的返台假有機會用到電腦
所以我也只能利用平常的空閒時間看看工程師YouTuber的影片
以及看一些書面資料，盡量讓自己不要退步太多
現在終於退伍了
趕緊做點小東西讓自己回歸手感

契機是發現越來越多人會在IG的個人首頁放上連結頁
因為只能放一個連結
如果有很多連結想放的話
可以用像是 linktree 或 Lnk.Bio 這類的服務
快速生成連結網站

用這種簡單的網站作為暖身
應該還行哈哈
同時也能為自己的履歷做準備

設計

首先我先列出一個連結頁要有的內容:

1. 頭像
2. 姓名、用戶名
3. 連結

然後一一思考我想要這些元素怎麼呈現
並把需要的素材找齊
然後就可以來拉畫面了

首先最左邊是 icon、按鈕元件
再來向右邊走分別是第一版的畫面、
第二版的畫面、
為了達到頁面滾動時背景固定而做的元件，
以及作品區塊元件 ( hover 前後的兩個 state )

第一版就是依照大部分聯結頁的排版來做
實際上我也是先做好這個
才覺得想要再做得更特別一些

第二次設計時
最先冒出的想法是想把每個按鈕都變成區塊狀的
並且可以直接看到內容縮圖
有點像作品集的感覺
但後來決定只將最後兩項採用這個做法
原因是前三個連結其實都不太需要畫面呈現
就算硬要擠出一張圖也只是點進去之後的截圖而已
意義不大 又搞得整個畫面太豐富
因此只把真的是作品的做成區塊
Github之類的連結就保持簡潔即可
最終成了第二版

實作的過程

其實沒遇到什麼困難，但有一點很困擾
那就是 CSS 變得好不熟 XD
果然就算之前已經用的蠻順手的了，空窗個四個月還是會忘掉一大堆
真是幸好有做這個小網站
才讓我的記憶慢慢回歸

在這個網站中用到兩個動畫 library
Vanta.js 用來在背景中加入雪花動畫
tilt.js 在頭像加上隨著游標晃動的特效
對一個工程師來說
懂得如何快速運用現成的library
貼過來的程式碼出錯需盡快修正
也是很重要的技能

另外這個網站沒有複雜的 RWD
基本上我只要確保在大小裝置都不要破版就好了
不需要調整到排版
所以我採用 mobile-first 的開發模式
先以小裝置螢幕來設定 CSS
便能避免視窗更動時發生嚴重破版
最後再根據大螢幕做些許調整

Mobile-first 的心得

曾經在 CSS 教學影片中看到兩個觀念
「網頁在還沒加上任何 CSS 前，就是 RWD」
mobile-first 的用意就是先做出CSS規則較少的手機版網頁
再用 media query 為相對較複雜的電腦版多加幾個規則
如果順序調過來的話
等同於先為了做網頁版添加很多規則
再為了手機板用好幾行新規則蓋過去
豈不是多此一舉

所以現在如果是我自己要從頭開發新專案
都會盡量先從手機版開始設計&開發
目的便是減少開發時程與複雜度

成品

完成的網頁在 這裡
雖然說不上多厲害
但用自己做出來的東西
果然還是比較開心

前言

前幾天跟高中同學去日月潭玩
沒錯是同學會!
沒想到高一到現在已經九年半了
居然還能一起出門過夜
實在是非常難得的友誼

其中有些同學有在關注我的限動
所以對我的app滿好奇的
我就趁機請他們上 google play 下載來測試看看
也因此發現了一個嚴重的破版問題
如圖

可以看到是因為字體太大而導致的破版

原因: 無障礙設定

自從開始用別人的手機測試後
才知道原來還需要考慮無障礙設定

無障礙設定是為了照顧到一些身體機能不足的用戶
在手機上不外乎就是改變字體、對比、或是朗讀模式等等
而這次的case
就是因為我同學的手機把系統字體調大了才會這樣

雖然是個貼心的設定
但對app開發者來說是一大麻煩
因為字體改變意味著版型要跟著調整
也幾乎沒有辦法確保有一個各種字體都好看的排版方式
最終的解法可能有兩種

1. 極為簡單的排版，字再大都還算可接受
2. 禁止部分或全部的字體縮放

禁止app字體縮放

我們決定採用第二種方法
雖然這意味著可能會減少眼睛不好的用戶(如長輩)
但我們原先鎖定的客群就是比較偏向年輕用戶
所以並沒有偏離初衷

react native 的 Text 和 TextInput 元件都有提供一個屬性叫做 allowFontScaling
只要設為false就能阻止字體被改

不過如果還要修改app裡的所有元件
真的有點麻煩
其實只要在APP的最上層(如App.js)
直接設定元件的defaultProps
就可以一次更改所有元件囉
如下:

1
2
3
4
5
6
7

Text.defaultProps = {
  allowFontScaling: false
}
TextInput.defaultProps = {
  allowFontScaling: false,
  underlineColorAndroid: "transparent"
}

補充一點
當我把TextInput設為allowFontScaling時
不知道為什麼突然冒出底線
所以必須多加一個underlineColorAndroid: "transparent"的設定

調整完後，正常的版面

結論

無障礙設定給人方便
也帶來一點不方便
往後在思考排版的時候
也要記得考慮到無障礙設定才行

前言

整個過年期間後有點小荒廢
於是決定做一些 react 的小 project 練習一下
結果在初始化專案就卡住…

第一行說需要安裝create-react-app
我就覺得怪怪的
之前明明就用過啊
指令也下得一樣
怎麼突然要下載

當時也沒繼續多想就直接按下 y 繼續
結果還是沒執行
這裡有一句非常關鍵:

We no longer support global installation of Create React App.

根據官方文件，現在不支援用全域安裝的方式來執行了
原因是要讓大家盡可能使用最新版本
所以之後每次執行npx create-react-app時
都會當下下載最新版來用

還沒結束

所以我照他的只是把電腦上全域安裝的 create-react-app 移除
但結果完全一樣
我已經檢查過電腦上已經沒有裝了
只好再次求救 google

後來發現是因為 npx 的 cache 要清除
只要執行 npx clear-npx-cache 就可以了

結論

官方呼籲大家盡早把自己電腦上的全域套件移除
以後要建立新的 react 專案
不能再用全域套件來創了
但初始化指令不變
一樣是 npx create-react-app <your-app-name> ㄛ