2021 第 44 週網站技術好連結分享：Photoshop 放到網站上的背後技術故事、After Effects 輸出 SVG 動畫工具、Hocus Focus 無障礙鍵盤遊戲

Makzan

2021 年 11 月 1 日

IPFS

玩起來很困擾吧？對，這就是設計得差的網站結構時或亂來的 tab index 會發生的情形。相像一下這個不只是遊戲，而是殘障人士每日必須只使用鍵盤來瀏覽整個互聯網。

大家好，又到每週的開發及網站技術好文章好工具好連結分享時間。

風和日麗的澳門，剛剛過去的一週有 Next.js Conf 大會及 Adobe Max 大會。而今週緊接將有兩個比賽我舉辦，分別是 Python 解難大賽及手機網站技術技能比賽，下週再向大家報告一下這兩個決賽的執行情況。

→ Podcast / Coffee in the Clouds interview with Jason Fried

https://nydla.org/podcasts-jason-fried/

來自 Basecamp 的 Jason Fried，談論 Hey、Basecamp 4、當年的 Basecamp 第一代、 Highrise 等，及談論了他們近期的請人。

→ WebAssembly / Photoshop journey to the web

https://web.dev/ps-on-the-web/

Adobe 於上週所展示的 Photoshop 網頁版，將原本 Photoshop 內的部份底層功能，通過 Emscripten 工具，編譯成 WebAssembly 代碼，放到瀏覽器上執行。

→ SVG / Turning After Effects animation into SVG animation

https://github.com/airbnb/lottie-web

上週和 2017 年的世界賽網站金牌選手晚飯，席間他分享了這個 After Effects 輸出成網站上使用的 SVG 動畫的工具。其原理是通過 Bodymovin 插作，將 After Effects 動畫輸出成 JSON 資料格式，再利用這個 Lottie Web 工具將輸出的 JSON 檔利用 SVG 呈現。

→ Accessibility / Hocus :Focus

https://focus.hteumeuleu.com/

Hocus :focus is a keyboard accessibility game made by @HTeuMeuLeu.

This game shows the keyboard accessibility things that we should avoid.

這款無障礙遊戲，考驗大家是否能只用鍵盤而不使用滑鼠來破關。只可以按 Tab 及 Shift Tab。

玩起來很困擾吧？對，這就是設計得差的網站結構時或亂來的 tab index 會發生的情形。相像一下這個不只是遊戲，而是殘障人士每日必須只使用鍵盤來瀏覽整個互聯網，並且可能不是用健全的手，而是手震著的，或甚至是用頭戴裝置的，每一下按鍵都要費工夫。我們若把 Tab 做不好，他們可能要多按很多次才能做到我們平常一秒能完成的操作。

如 Mike 所說：

If focus is this annoying in a game, imagine how annoying it is for everything else

https://twitter.com/ripplemdk/status/1452659474431307780

→ Tool / Retrobatch

https://flyingmeat.com/retrobatch/

這個工具，每當我要批量處理圖片時，就會馬上想起它。例如，我批量掃描完我的手寫筆記後，需要整批裁切；或批量輸出截圖後，需要再按日期來分資料夾；甚至可以使用 MobileNet 的人工智能辨識，為一整批相片按物件分類。我出差或旅行後，便會利用不同的物件、尺寸等分類。或利用軟件的修改功能批量改圖、生成圓角、生成合拼圖等。