Makzan
Makzan

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

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

玩起來很困擾吧?對,這就是設計得差的網站結構時或亂來的 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 的人工智能辨識,為一整批相片按物件分類。我出差或旅行後,便會利用不同的物件、尺寸等分類。或利用軟件的修改功能批量改圖、生成圓角、生成合拼圖等。


→ Newsletter / Hotwire dev newsletter

https://masilotti.com/hotwire/edition-5/

這個 Newsletter 有頗多 Hotwire 的開發文章可以學習學習。Hotwire 的思維和平常寫的 JS 有點不一樣,是基於伺服器端生成 HTML 後,再在客戶端動態替換,而替換分為整頁、某部份、甚至連著 Socket 的流。


→ Learning / Self Studying the MIT Applied Math Curriculum

https://www.smallstepcap.com

在這個網絡太多資源自學的年代,整理資源很重要,這個網頁有 MIT 的各個數學公開課。當中的微積分及線性代數是學習人工智能原理所必須理解的。我也要繼續溫故知新,學習去了。

—2021 week 44, 麥誠。


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

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

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



CC BY-NC-ND 2.0 版权声明

喜欢我的文章吗?
别忘了给点支持与赞赏,让我知道创作的路上有你陪伴。

加载中…
加载中…

发布评论