臉書網站重構經驗分享|iPadOS 圓形游標背後的設計細節
Star Rocket 科技創業週報第 232 期
哈囉讀者:

隨著網頁技術的演進,以及 AWS 等雲端伺服器的日漸盛行,現代網頁的設計也變得越來越華麗,需要更強大的運作能力、消耗更多的能源以維持正常運作。編輯最近看到一個聚焦環境永續議題的內容網站《LOW←TECH MAGAZINE》,他們為了實踐其理念,自行架設出一個百分之百利用太陽能運作的伺服器。

也因為如此,網站很可能會因為伺服器的所在地西班牙巴賽隆納的氣候不佳而停擺,而網頁的右手邊也可以看到目前伺服器的電池還剩多少(像是編輯撰稿的當下是70%);為了減少讀取網頁的耗能,他們也針對照片顯示的方式與網頁架構做了最佳化,以確保每頁的大小都維持在 500KB 上下。這樣身體力行的精神頗值得欽佩的~

P.S. 我們將於下週起更換發報系統,還請各位讀者在下週三晚上或週四上午收信時,留意一下是否有正常收到下一期的《科技創業週報》喔~若有任何問題也還請來信給編輯:matt@starrocket.io

by Matt
你還記得自己是怎麼知道購買口罩的資訊嗎?這回《星箭廣播》再度邀請到特別來賓徐子涵(T.H. Schee)來跟大家聊聊他熟悉的政府與網路議題:當政府有話要對國民說的時候,怎麼做比較好?

「懶人包」意指經過簡要的整理、說明,讓網友(鄉民)得以快速了解事件始末,一開始是為了要解決 BBS 站上版面資訊混亂的問題。但今日假如你搜尋「懶人包」,會發現前幾頁的搜尋結果很多都是來自「gov.tw」。當政府部門越來越擅長經營社群網站,藉由簡要的資訊設計,搭配一些網友們熟悉的「哏」(或者說「梗」)所製作出來的圖片或懶人包,這些作法短期內或許有效,但實際上會有什麼問題?
如何設計出符合 Web Accesibility (無障礙網頁)的網站,一直是讓許多前端工程師與設計師很苦惱的問題,而開源網頁框架 Gatsby 的資深軟體工程師 Ben Robertson 也不例外。在本文中分享了他是如何從零開始,在歷經深入研究與實作後,所得出的四點開發基礎原則。

這四點原則中,其中兩點比較偏程式碼的實作,譬如其中一點提到,與其全部的區塊都使用 <div>,應該要挑選更符合內容的元素,譬如代表文章的 <article>、代表按鈕的 <button>。另外兩點則是網頁設計時應謹記的心法,像是網頁的設計在移除所有CSS 後,應該要能正常顯示、運作;或是他也認為網頁設計不應該是視覺設計,以及他認為製作出好的網頁設計必須完成的三項任務。
Tim Ferris、阿諾史瓦辛格都愛用的電子郵件行銷服務「ConvertKit」,曾經是不賺錢的業餘專案。背後的獨立開發者 Nathan Barry,在考慮放棄這項專案時,一位創業家前輩卻鼓勵他思考一個問題:「關門大吉或是再加把勁。」

他後來選擇加倍投入產品的開發,並在找尋到經營小眾市場的部落客這切入點之後,就直接鎖定這群人進行銷售。雖然創業前期沒有人脈,卻能透過口耳相傳讓營收穩定成長,如今成為月營收超過 180 萬美元的 SaaS 公司。
最近臉書的網頁版即將大翻新,不知道有沒有讀者已經在用新版的了呢?雖然編輯尚未有機會使用到新版的臉書,但最近讀到由臉書工程師 Ashley Watkins 與 Royi Hagigi 所撰寫的文章,讓大家可以一窺像臉書這樣大型的網路公司在重構網頁時,所使用的各種技術,以及他們在重新規畫系統邏輯時所運用的思維。

文章所討論的主題涵蓋:如何運用 Atomic CSS 的技術,搭配重構所使用的 JavaScirpt 框架 React 來大幅減少 CSS 的檔案大小,也同時提升可讀性;在 JavaScirpt 也談到他們如何導入「預算」的邏輯,以確保個別部門的開發者在產品上線前就能得知,目前的程式碼是否會「超過預算」並導致網頁運作不流暢。
你可能看過科技公司有成長行銷(Growth Marketing),或稱成長駭客(Growth Hacker)的職缺,但到底這個職缺具體工作內容是什麼?又跟其他行銷工作有什麼差別?本文作者陳威宇認為:「成長行銷最主要的工作是推動公司的關鍵指標成長。」

但不同階段、不同屬性的公司,又如何找到當下合適的關鍵指標?本文從模型設定、實驗執行的流程、以及如何使用相關工具等,都有很詳盡的說明與延伸閱讀。而有興趣加入成長團隊的讀者朋友,也可以看文末他對成長團隊的組成分析,以及提供給想將入科技公司擔任成長行銷的職涯建議
蘋果在 iPadOS 13.4 正式讓 iPad 支援觸控板與滑鼠,並且重新設計了游標系統。新設計有幾個引人矚目之處:游標採原型設計(可調整大小),而非 PC/Mac 上常見的箭頭外型;其次是當圓形游標被移近 app 的某個按鈕時,後者會像有「磁性」般將游標「吸入」,此時圓形的游標會消失,而成為一個按鈕的外框(而且會伴隨著一些動畫效果),表示現在游標「選取」了這個按鈕;此外,在進行文字編輯時,游標靠近原本那個長得像大寫「I」襯線字體的 I-beam 時,會自動變形成相對應的外型。大家可以看看這段蘋果提供給媒體的影片。

TechCrunch 總編輯 Matthew Panzarino 在本文中說明蘋果這項新設計的細節,並且採訪了蘋果軟體工程資深副總裁 Craig Federighi,他指出該設計是從 iPad 這樣的觸控裝置出發,所以(像 Mac 的游標那樣)精確有時候反而是沒效率的,蘋果運用數學演算法「預測」游標移動的路徑,設計了前面提到的「磁吸」效果。對這個議題感興趣的讀者也可以收聽 podcast 節目《AppStories》主持人 Federico Viticci 採訪 Craig Federighi 談 iPadOS 游標設計。
用個人的部分隱私以交換更便利的網路服務,好像已經成為數位生活的必要之惡。由開發網路瀏覽器 Firefox 的 Mozilla 基金會製作的 podcast 節目《IRL: Online Life is Real Life》的本集節目,就聚焦討論面臨「隱私 vs. 利益」這個網路世界的兩難,我們是否有更佳的解方?

節目不僅訪問到以保護用戶隱私為名的搜尋引擎 DuckDuckGo 的共同創辦人暨 CEO Gabriel Weinberg,分享他們是如何在不蒐集用戶資料的同時,從 2014 年就讓公司得以獲利?也訪問到一名曾嘗試自己所有的臉書資料打包並放到 eBay 拍賣的 Oli Frost,談談他為什麼會想到要主動販售「自己的資料」並從中獲利?

🎧《Star Rocket 科技創業週報》的 Podcast 推薦播放列表,可以透過常用 podcast 播放器直接訂閱!
不知道各位讀者朋友每回要 Git commit,在訊息(message)的那一欄會寫些什麼呢?軟體工程師 Wade Huang 在本文中就提出,他認為一則好的 Git commit 訊息,應該要同時兼備「做了什麼更動」,以及「為什麼要做此更動」;把 Git 視為歷史查閱的工具而非 FTP,才能幫助未來的自己,或者後續的維護人員更方便掌握每次程式異動的原因。

他也建議可以參考 AngularJS 的相關規範,將訊息分為三個區塊:Header、Body 與 Footer,且每一區塊都有各自要傳達的內容;並附上完整的範例,提供給想讓自己的 Git commit 訊息更容易被理解的讀者朋友。
Star Rocket 三創育成
聚焦人才與科技素養的培育,成為開放文化的推手