Makzan

我管理世界職業技能競賽之網站技術項目、舉辦本地設計與開發賽事、開課分享技術心得。一個用網頁來表達自己的作家。

2021 第 49 週網站開發好連結分享—容錯度高的 CSS 樣式技、輸入框的尺寸自動適應 JS 庫、人像隨機生成器

Lea Verou 大神的又一工具,輸入框的尺寸自動適應工具。她之前已推出不少實用工具,例如語法上色 (Syntax Highlighter) 的 Prism、無障礙顏色對比的 Contrast Ratio、及 CSS3 背景圖案庫等。

今個星期繼續產出四篇教學文。我發現真的把所學所得都分享出來,然後就可以幫助別人, 而且自己解釋一次也可以更了解有沒有未弄明白的地方,互相增長見聞,教學相長。一些就算我們很明顯之道的事情,說出來還是可以有人受惠。例如 .new 域名的使用,貼文後我同事馬上打電話給我說這招式非常實用,另外我把其中一個我在 Python 班的 API 範例分享,也能帶出不同的使用情景

看來我要再多分享一下我的 Python 班例子,例如搜尋澳門日報標題尋找關鍵字、列出今日 AAStocks 頭版新聞、找出距離下次公眾假多少日、使用 Pandas 讀取網站表格數據及處理維基百科表格數據等。又或者開個系列寫 iPhone 捷徑應用例子分享。

本週上班途中風景

→ CSS 樣式 / 容錯度高的 CSS 樣式技巧
https://ishadeed.com/article/defensive-css/

很實用的 20 個 CSS 技巧,幫助構建容錯度高的樣式,例如白色字配搭圖片背景,萬一圖片不能載入,預設白色背景底就會使文字也不可讀。



→ 工具 / 輸入框的尺寸自動適應
https://stretchy.verou.me/

Lea Verou 大神的又一工具,輸入框的尺寸自動適應工具。她之前已推出不少實用工具,例如語法上色 (Syntax Highlighter) 的 Prism、無障礙顏色對比的 Contrast Ratio、及 CSS3 背景圖案庫等。


→ 工具 / 人像隨機生成器
https://loremfaces.com/

就像 Lorem Ipsum 的 佔位文字生成器般,但這是生成一個虛構的人像。


→ 工具 / rclone — 專為雲端儲存服務而設的檔案複製 rsync
https://github.com/rclone/rclone

像 rsync 般使用的雲端儲存服務複製工具



→ 教學 / 製作界面動畫教學
https://tilda.education/en/web-animation-course

一個詳細的界面動畫教學。可惜不是 CSS 導向,而是設計軟件導向。但可以掌握有哪些動畫技巧,再自行應用於網站項目上。



→ 工作 / 七年遙距工作的感想
https://tylercipriani.com/blog/2021/12/01/lessons-from-seven-years-of-remote-work/

Writing is thinking, and you’ll find your thinking is sharper if you start with pen-and-paper first.

贊同。寫作就是思考。而且寫作從紙筆開始。



→ 表情符號 / Emoji 表情符號的現實大小
https://javier.xyz/emoji-to-scale/

很有趣的比較,將各種表情符號按現實高度排列,



→ 表情符號 / 大家最常用的表情符號統計
https://home.unicode.org/emoji/emoji-frequency/

2019: 😂 ❤️ 😍 🤣 😊 🙏 💕 😭 😘 👍
2021: 😂 ❤️ 🤣 👍 😭 🙏 😘 🥰 😍 😊


—2021 week 49, 麥誠。


我是麥誠軒(Makzan),除了正職外,平常我要麼辦本地賽與辦世界賽,要麼任教編程與網站開發的在職培訓。現正轉型將面授培訓內容寫成電子書、網上教材等,至今撰寫了 7 本書, 2 個視頻教學課程。

如果我的文章有價值,請訂閱贊助我持續創作分享。

訂閱贊助:https://liker.land/thomasmak/civic

喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明

扮工神器

使用 Pyto 將 LIKE 幣價放到 iOS 主畫面(及使用 Siri 語音觸發)

2021 第 47, 48週網站開發好連結分享—網站無障礙, 漸層背景生成器, 每日一篇編程謎題

2

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區