[Weekly] 11/06-11/12 本周紀錄

用於記錄一些本周閱讀過的文章、看過的影片、待讀的清單以及其他內容。

Open Source

今天下午的時候我在專案中看見了一個第三方庫 core-js，雖然之前看到過幾次但從來都不知道這個庫是做什麼用的，查資料的過程中意外看到了這篇文章：So, what’s next?

core-js 作者全職開源維護 9 年，月均收入從 2500 美元銳減到 400 美元。因為疏於推廣宣傳所以鮮少有人知道 core-js，作者長期一個人高強度維護 core-js 帶來了巨大壓力，並且在因為全職開源沒有其他收入造成經濟壓力時又遇上了事故，無奈之下向開源社區求助換來的卻是惡言惡語，最終不得已寫下這篇文章。

文章是今年2月份的時候發佈的，經過九個月後的今天，core-js 在 open collective 上每個月有 $1705 的固定收入和斷斷續續的一些不固定贊助，雖然相比最初的 $2500 少了一些，但還是好上了不少。core-js – open collective

這讓人不得不思考「全職開源」如何保障自己的收入能解決基本生活問題？獨立開發者該如何通過「開源」項目來賺錢？一些滿有意思的文章：

• core-js 作者快被缺钱“拖垮”了：全职做开源维护 9 年，月均收入从 2500 美元锐减到 400 美元
• 坐拥百万用户的开源项目没钱了，尤雨溪发推力挺被质疑的全职维护者
• Babel has no money because someone took a $130K salary and didn’t work

AI

BiliBili AI視頻總結

大陸一個以ACG相關內容起家的彈幕影片分享網站 BiliBili 在 10 月上線了一個功能「AI視頻總結」，在這之前也有許多非官方的 AI 視頻總結功能（大部分是以 @BiliBili 用戶的形式去觸發 AI 總結影片中的內容）

下圖為之前舊的總結方式，在影片評論區 @AI視頻小助理，它就會幫你總結影片的內容：

下圖則為官方新出的視頻總結功能：

AI 視頻總結時間在 0~2 秒，基本上是立即生成，所以個人猜測是在影片上傳的時候就已經進行了總結，而不是點擊時才實時總結。總結的內容、分段、時間點還算準確，不會有意義不明的內容，對於科普類的影片來說這個功能非常實用。

這個 AI 總結功能是由 B 站自研的 bilibili index 大模型提供技術支持的，目前只能總結部分的影片內容，还在不斷學習和優化中，所以生成的結果可能會有誤差，僅供参考。

bilibili index 大模型是B站今年7月發布的一個多場景應用的AI模型，除了搜尋和影片總結外，還能用於內容推薦、內容生成、內容審核等方面。 此外，這個大模型也支援了內測中的”搜尋AI助手”功能，使用者可以透過這個功能快速且準確地找到自己想要的內容。（這個功能需要用戶申請內測，所以我目前還沒有體驗到）

個人認為這是一個不錯的 AI 應用方向，希望各個平台都能夠推出這項功能，有選擇總比沒有好。

Spotify Podcast AI 語音翻譯

Spotify’s AI Voice Translation Pilot Means Your Favorite Podcasters Might Be Heard in Your Native Language

Spotify 未來將上線 Podcast 語音翻譯功能，Podcast 內容會透過 OpenAI 的語音生成技術在維持音色的前提下翻譯成別種語言。不過目前還是試播，只有以下三個 Podcast 提供這項功能，並且只支持翻譯成西班牙文（法語和德語將在未來幾天和幾週內推出）：

1. Lex Fridman Podcast – “Interview with Yuval Noah Harari”
2. Armchair Expert – “Kristen Bell, by the grace of god, returns”
3. The Diary of a CEO with Steven Bartlett – “Interview with Dr. Mindy Pelz”

不過距離公布這項功能快兩個月了，目前還是只支持翻譯成西班牙文。

其他關於 AI 的文章或工具：

• 7000字深度测评！Adobe 四大王炸产品 AIGC 功能体验总结
• OpenAI Devday：GPT Store 即將開放！客製化人手一隻 GPT 的時代要來了
• IIElevenLabs AI 語音生成，支持近 30 種語言和多種音色。以中文來說，某些發音和聲調還是不準確，但也已經很不錯了。英文的語音生成會更像真人。
• Translate.Video 透過 AI 一鍵將影片翻譯成 75 種語言，對影片工作者來說應該會是不錯的輔助工具。
• Imagen Google 開發的圖像生成 AI。
• 即時AI 需要微信登入，每天免費提供 10 次生成次數，生成速度大約為 10~20 秒，點擊放大精繪還需要再 10 秒。生成後的 AI 圖可以再調整細節，細節部分可以用點擊選取或者直接用文字描述，使用上感覺還算挺不錯的。

News

• The Top Programming Languages 2023 2023 年程式語言排行榜，今年 Python 依然是第一名，不過工作需求排名第一的還是 SQL，但通常職缺不會只招純SQL工程師，而是希望會 SQL 的同時還會其他語言(比如 JAVA, C++)。
• 苹果M3系列首发评测：Max早该如此 針對基於M3的iMac和基於M3 Max的MacBook Pro 16，深入測試了SPEC、核間延遲、分支預測能力等等指標。蘋果這兩顆新晶片到底進步有多大？ 專業軟體效能有多強？ Mac上能打遊戲了嗎？
• 用上M3芯片的苹果电脑，值得入吗？2023新款Mac上手评测 針對 M3max 芯片的 iMac, Macbook pro 進行評測，主要評測影像處理和遊戲方面的表現。最後分享了是否應該升級 M3 芯片的 Macbook pro 的看法。
• The 200 Best Inventions of 2023 TIME 由時代雜誌評選的 2023 年度最佳發明。
• The 100-Year Plan – WordPress WordPress 推出了一個百年計畫，可以花 38,000 美元買下 100 年域名和託管。
• 机上WiFi：50元打发无聊，还是买走打工人最后的自由？
• NEOM | What is THE LINE? 滿有意思的一個影片。這是沙特正在開發的 170 公里長的垂直城市，核心概念是以「人」為中心而不是車，沒有道路、汽車或排放物，100%使用再生能源，預計容納900萬人，佔地面積僅為34平方公里，交通方式為高鐵或者步行，端到端的交通約20分鐘。像是 Minecraft 裡面會看到的世界，有未來城市既是感。沙國王室堅持 2030 年完工，但外部專家估計需要約 50 年的時間，拭目以待吧。

Tools

• 沈浸式翻譯 瀏覽器翻譯擴展，可以同時顯示原文與翻譯，就不需要來回切換了，非常好用。
• DevDocs 將各個程式語言、框架…等工具的 API 匯總在一個頁面中查詢。
• echoserver 簡單的 mock API
• Biome Web 工具鏈，提供 Analyzer, Formatter, Linter
• depcheck 一個用於分析專案中的依賴工具，可以檢查哪些依賴目前是沒有在使用的，或者 package.json 中缺少哪些依賴。（支援 JS, TS, React JSX, CoffeeScript, SASS, SCSS, Vue.js）

Front-end

• How layout position impacts three big web performance levers 文章中分享了 Web 中影像載入帶來的相關性能問題以及提高性能的方式。
• How to resize an image in HTML?
• HTML <picture> 響應式圖片 (Responsive Images) – 自動載入不同尺寸和檔案格式的圖片
• Mastering Responsive Web Design with Tailwind CSS: A Comprehensive Guide
• Building A Resizable Sidebar Component With Persisting Width Using React & TailwindCSS

JavaScript & TypeScript

• 14 Linting Rules To Help You Write Asynchronous Code in JavaScript
• Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes
• Why Object.keys doesn’t and shouldn’t return (keyof T)[]
• Why doesn’t TypeScript properly type Object.keys?
• Typescript的结构化类型系统

React & React Native

• useEffect监听了很多变量怎么办？ 文章中提供了幾個關於 useEffect 依賴過多狀態的解決方案
• React Is Holding Me Hostage 作者通過幾個對比例子說明為什麼他認為 React 隨著版本迭代逐漸變得”複雜”，還在使用 React 的最大原因是因為生態系統、找工作好找以及很難捨棄(遷移成本)
• Fixing Race Conditions in React with useEffect
• Is React Having An Angular.js Moment? 作者認為 Server Components 的出現會影響很多現有的寫法和第三方庫，並且官方強制新版本使用 Next.js (Next.js 13.4 後開始使用 Server components)是否還為時尚早？React 和 Next.js 團隊應該採用更平衡的方法，不應過多”推銷” Server components。
• Headless Component: a pattern for composing React UIs 詳細的介紹了 Headless Component Pattern
• React Server Components, without a framework?
• Say Goodbye to Debouncing: Use “useDeferredValue” Hook
• React useTransition: performance game changer or…?
• React Native: Achieving Responsiveness through Scalable Fonts, Dimensions, and Pixels 根據設備螢幕縱橫比調整應用元素的佈局和樣式，調整的方式可以參考一下，不過個人覺得還有優化空間
• Why You Want Need React Query 作者用了一個簡單的例子說明爲什麼需要 React Query，以及使用 React Query 的優點是什麼。
• 了解 SWR 的運作機制，How this async state manager works ?
• React Query Render Optimizations
• Data Fetching Made Effortless with RTK Query
• 我打破了 React Hook 必须按顺序、不能在条件语句中调用的枷锁
• React18 源码解析之 useState 的原理

Others

• Why Rust is the most admired language among developers
• Media Queries, Responsive Design? Help me! 關於 CSS Media Query 的詳細教程
• 如何破解滑动验证码？
• 闲鱼被骗经历 作者分享自己在網購平台下單被詐騙了幾百塊人民幣和維權的過程。