子前端技術周刊第 30 期 (2024.5.13 - 2024.5.19)：瀏覽前端一周最新消息，學習國內外優秀文章視頻，讓我們保持對前端的好奇心。

技術資訊

1. 2023 HTML 狀態調查報告[1]：去年年底 Sacha Greif 分享的第一份“HTML 狀態”調查，現在，2023 年問卷調查的結果出來了。這里有很多有趣的結果，包括對最新 HTML 功能、可訪問性、可擴展性等方面的看法，其中開發人員期待有更多的交互式 HTML 元素，如 <datalist>、Popover API 等等。

2. React Conf 2024[2]：React Conf 2024 于 5.16 - 5.17 開展，內容包括 React Compiler 開源、Remix 與 React Router 合并、React 19 發布首個 RC 等等。
3. Safari 17.5[3]：Safari 17.5 添加了大量新的 CSS 功能，如 text-wrap: balance、light-dark() 顏色函數、@import 支持 supports() 語法等等。

4. Node v20.13.0 (LTS) 發布[4]：Node 當前 LTS 版本的性能有了小幅提升。最值得注意的是，watch 模式變得穩定，base64 和 base64url 現在也快了很多，CustomEvent 變得穩定。20.13.1 在幾天后發布，修復了一個與 Windows 相關的錯誤。

技術文章

1. Now You Can Try the React Compiler[5]：現在你可以嘗試 React 編譯器了 -- 本周 React Conf 上的一個重要項目是 React 實驗性編譯器的開源，該編譯器可在構建時優化 React 代碼。他們還創建了一個 React 編譯器游樂場[6]（React Compiler Playground）供試用。

2. Build Your Own React.js in 400 Lines of Code[7]：用 400 行代碼構建自己的 React.js -- 本文將帶你構建一個只有約 400 行代碼的 React 版本，它支持異步更新并可被中斷，這是 React 的核心特性，許多更高級別的 API 都依賴于此。

3. 作為前端開發，感受下 nginx 帶來的魅力！[8]：文章匯總了作者在工作中八年遇到的各種 Nginx 使用場景，對 Nginx 知識進行了細致地整理和層次分明地講解，旨在提供簡潔而深入的內容。
4. 別想調試我的前端頁面代碼[9]：文中提到了無限 debugger、disable-devtool 等方法原理和實現。

開發工具

1. Code Screenshot[10]：用于創建代碼截圖的 VS Code 擴展，如果你不想安裝擴展，可以直接使用在線代碼截圖版本[11]，在這里你可以調整主題，并導出為 PNG 或 SVG。

2. DOM Projects[12]：學習前端開發的項目集 - 主要面向初學者，使用 JS 和 DOM 構建簡單應用。選擇一個項目查看源代碼，并嘗試自己構建相同的應用程序。

3. Vue Fluid DnD[13]：適用于 Vue 的動畫拖放庫 - 專為列表而設計，官網提供了各種示例。

以上資訊文章選自常見周刊，如 JavaScript Weekly 等，周刊內容也會不斷優化改進，希望你們能夠喜歡。

歡迎關注微信公眾號：栗子前端

參考資料

[1] 2023 HTML 狀態調查報告: https://2023.stateofhtml.com/en-US/

[2] React Conf 2024: https://conf.react.dev/

[3] Safari 17.5: https://webkit.org/blog/15383/webkit-features-in-safari-17-5

[4] Node v20.13.0 (LTS) 發布: https://nodejs.org/en/blog/release/v20.13.0

[5] Now You Can Try the React Compiler: https://react.dev/learn/react-compiler

[6] React 編譯器游樂場: https://playground.react.dev/

[7] Build Your Own React.js in 400 Lines of Code: https://webdeveloper.beehiiv.com/p/build-react-400-lines-code

[8] 作為前端開發，感受下 nginx 帶來的魅力！: https://juejin.cn/post/7368433531926052874

[9] 別想調試我的前端頁面代碼: https://juejin.cn/post/7368313344712179739

[10] Code Screenshot: https://marketplace.visualstudio.com/items?itemName=Vkrsi.code-screenshot#codescreenshot

[11] 在線代碼截圖版本: https://cs.vkrsi.com/

[12] DOM Projects: https://www.jisan.io/dom-projects/

[13] Vue Fluid DnD: https://github.com/carlosjorger/vue-fluid-dnd

this.setSate(object)

其暗中觀察，不如默默關注我們

今日熱詞

class clown

班級耍寶人物

keep morale high

保持士氣高漲

Cambridge mulls typed exams

劍橋或終結用紙筆答卷

The increasing illegibilityof students' handwriting has prompted Cambridge University to consider ending 800 years of tradition by allowing laptops to replace pen and paper for exams. Academics say that students are losing the ability to write by handen massebecause of theirreliance onlaptops in lectures and elsewhere.

學生的字跡越來越難以辨認，這促使劍橋大學考慮終結考試用紙筆答題這個延續了800年的傳統，允許使用筆記本電腦應試。學者稱，因為在課堂及其他地方依賴筆記本電腦，學生整體正失去手寫的能力。

Sarah Pearsall, a senior lecturer at Cambridge's history faculty, said: "Fifteen or 20 years ago, students routinelywrote by hand several hours a day, but now they writevirtuallynothing by hand except exams. ...

劍橋大學歷史系高級講師莎拉?皮爾索爾表示，15年或20年前，學生通常每天要寫上幾小時的字，但現在除了考試外他們幾乎不寫字。……

It is difficult for both the students and the examiners as it is harder and harder to read these scripts." The university has launched a consultation as part of its digital education strategy after piloting an exam typing method in the history and classics departments.

字跡越來越難辨認，這對考官和學生來說都是問題。在歷史和古典文學系開展打字答考題試點后，劍橋大學已開始就此征求意見，作為數字教育戰略的一部分。

重點詞匯

1、illegibility

/?,l?d??'b?l?ti/

n. 模糊；不清不楚

2、en masse

美 /??'mɑs/

（法）全體地；一同地

3、reliance on

信賴；依賴；對……的依賴

4、routinely

美 /r?'tinli

adv. 例行公事地；老一套地；常規地；程式化的；通常地

5、virtually

英 /?v??t???li/ 美 /?v?rt?u?li/

adv. 事實上，幾乎；實質上

NASA looks for 'joker'

NASA欲招募'搞笑'宇航員

Astronauts have traditionally been serious, sensible types with the "right stuff" who can be trusted to fly equipment worth billions of pounds. But any mission to Mars will need a "joker" or "class clown" figure to be successful, according to NASA research.

傳統的宇航員是嚴肅理智的，具備"應有素質"，可以信賴他們駕駛價值數十億英鎊的設備飛行。但根據美國航天局(NASA)的研究，任何去往火星的任務都將需要一名"搞笑分子"或"班級小丑"式的人物才能獲得成功。

A sense of humor will be vital forany team tokeep morale highon a two-year trip to Mars. Jeffrey Johnson, professor ofanthropologyat the University of Florida, is advising NASA's Human Exploration ResearchAnalog. He said: "Groups work best when they have somebody who takes on the role of class clown.

去往火星需要耗時兩年，幽默感對任何去往火星的團隊維持士氣都至關重要。佛羅里達大學人類學教授杰弗里?約翰遜為NASA人類探索研究模擬項目提供建議，他表示："當團隊中有人扮演班級小丑的角色時，團隊的工作表現最好。

These are people that have the ability to pull everyone together,bridge gapswhen tensions appear and really boost morale." But he added: "Being funny won't be enough to land somebody the job. They also need to be an excellent scientist and engineer and be able to pass arigoroustrainingregime."

這些人有能力團結所有人，當緊張局面出現時能彌合分歧并真正鼓舞士氣。"但他也補充說："光是輕松搞笑并不足以勝任這份工作。他們還必須是出色的科學家和工程師，能夠通過嚴格的訓練項目。"

重點詞匯

1、class clown

班級耍寶人物（非正式）

clown

英 /kla?n/ 美 /kla?n/

n. 小丑；鄉下人；粗魯笨拙的人

vi. 扮小丑；裝傻

2、be vital for

對……是至關重要的

3、morale

英 /m?'rɑ?l/ 美 /m?'r?l/

n. 士氣，斗志

keep morale high

保持士氣高漲

4、anthropology

英 /,?nθr?'p?l?d??/ 美 /'?nθr?'pɑl?d?i/

n. 人類學

人類學家

5、analog

英 /'?n?l?ɡ/ 美 /'?n?l?g/

n. [自] 模擬；類似物

adj. [自] 模擬的；有長短針的

6、pull together

齊心協力；團結起來；擰成一股繩；萬眾一心

7、bridge gap

成為……的橋梁；溝通；幫助緩解鴻溝

8、rigorous

英 /'r?g(?)r?s/ 美 /'r?ɡ?r?s/

adj. 嚴格的，嚴厲的；嚴密的；嚴酷的

9、regime

英 /re?'?i?m/ 美 /re'?im/

n. 政權，政體；社會制度；管理體制

UK mulls 'fast fashion' tax

英國政府擬征'快時尚'稅

British MPsare demanding a "fast fashion" tax on retailers such as Boohoo and ASOS to help deal with waste generated by the industry thanks to athrowawayclothes culture. The charge would amount to ￡1 per item and would fund the collection and recycling of the ￡140 million worth of clothesdiscardedbyBritonsevery year.

英國議員呼吁對Boohoo和ASOS這樣的零售商征收"快時尚"稅，以幫助應對快消服飾文化帶來的時尚垃圾。以后每件衣服或需繳納1英鎊的稅，英國人每年丟棄價值1.4億英鎊的的舊衣，這筆錢可以用來收集和回收這些舊衣。

Politicians also want schools to teach children how to make and repair garments in a return to the "make do and mend" approachfrom the Second World War. Britons buy around 1.1 million tons of new clothing each year – equating to 26.7 kg per person – in a fast fashion culture fuelled by online retailers which sell dresses for as little as ￡5.

政治家們還希望學校倡導二戰時期流傳下來的"修修補補再用用"精神，教會學生如何制作和修補衣服。在線零售商賣的衣服有時便宜到一件只需5英鎊，催生了快時尚文化，英國人每年購買的新衣服達110萬噸左右，相當于每人26.7公斤。

Around 430,000 tons are thrown in household bins, most of which goes to landfill, while many fast fashion items are made from plastic andshedbillions of polluting particles intosewers, rivers and seas.

而英國每年扔掉的衣物約有43萬噸，大多數廢棄衣物進入了填埋場。但許多快消衣物的制作原料中含有塑料，導致大量污染顆粒進入到下水道、河流和海洋。

重點詞匯

1、mull

英 /m?l/ 美 /m?l/

vt. 研磨；思索或思考某事物；使醉

n. 混亂；軟薄布

vi. 深思熟慮

2、MP

abbr. 國會議員（Member of Parliament）

3、throwaway

英 /'θr???we?/ 美 /'θro?we/

n. 廢品；廣告傳單；脫口而出的話

adj. 拋棄型的；脫口而出的；漫不經心的

4、discard

英 /d?'skɑ?d/ 美 /d?s?kɑ?rd/

vt. 拋棄；放棄；丟棄

vi. 放棄

n. 拋棄；被丟棄的東西或人

5、Briton

美 /?br?t?n/

n. 英國人；大不列顛人

6、the "make do and mend" approach

“湊合著修補”的方法，類似于中國老一輩人縫縫補補又一年的說法

7、landfill

英 /'l?n(d)f?l/ 美 /'l?nd'f?l/

n. 垃圾填埋地；垃圾堆

8、shed

英 /?ed/ 美 /??d/

vt. 流出；擺脫；散發；傾吐

vi. 流出；脫落；散布

n. 小屋，棚；分水嶺

9、sewer

英 /'su??; 'sju??/ 美 /'su?/

n. 下水道；陰溝；裁縫師

vt. 為…鋪設污水管道；用下水道排除…的污水

vi. 清洗污水管

Polar bears invade town

海冰融化致北極熊擾民

Parents in a remoteRussianarchipelagoare scared to send their children to school after a "mass invasion" of polar bears into residential areas, state news agency TASS reported. Novaya Zemlya, located off Russia's northeasternarcticcoast, has been swarmed by dozens of polar bears since December.

據俄羅斯國家通訊社塔斯社報道，由于北極熊"大舉入侵"偏遠的俄羅斯群島，島上居民嚇得都不敢送孩子去上學。自去年12月以來，已有數十只北極熊登上俄羅斯東北部北冰洋海岸附近的新地島。

The region's largest settlement, Belushya Guba, with a population of about 2,500 people, has reported more than 50 sightings. Local administrator Alexander Minayev said bears had attacked people and entered buildings.

據稱，在該地區最大的人類定居點白鯨灣(人口約2500人)，當地人已目擊北極熊50多次。當地行政長官亞歷山大?米那耶夫說，北極熊襲擊了人群，還進入了建筑。

Polar bears are increasingly coming into contact withhumans as climate change reduces their sea-ice habitats, forcing them on land for longer periods of time. The World Wildlife Fund has helped set uppatrolsin some arctic communities to prevent potentiallyfatalencounters.

氣候變化導致北極熊賴以居住的海冰減少，迫使北極熊更長久地停留在陸地上，因此北極熊和人類的接觸越來越多。為防止與北極熊發生"致命邂逅"，世界自然基金會已幫助人們在北極圈的一些社區組建了巡邏隊。

重點詞匯

1、remote

英 /r?'m??t/ 美 /r?'mot/

adj. 遙遠的；偏僻的；疏遠的

n. 遠程

比較級 remoter最高級 remotest

2、archipelago

英 /,ɑ?k?'pel?g??/ 美 /'ɑrk?'p?l?'go/

n. 群島，列島；多島的海區

復數 archipelagoes或archipelagos

3、arctic

英 /'ɑ?kt?k/ 美 /'ɑrkt?k/

adj. 北極的；極寒的

n. 北極圈；御寒防水套鞋

4、come into contact with

v. 接觸到；聯系；開始做某事

5、patrol

英 /p?'tr??l/ 美 /p?'trol/

n. 巡邏；巡邏隊；偵察隊

vt. 巡邏；巡查

vi. 巡邏；巡查

6、fatal

英 /'fe?t(?)l/ 美 /'fetl/

adj. 致命的；重大的；毀滅性的；命中注定的

文章

精選

●2018全球英文演講大賽亞軍 中國選手Sherrie Su演講：轉身

●準備英文簡歷前一定要看的8個最常見的拼寫錯誤

立即加星標

第一時間看好文

最近微信又雙叒叕改版了，每天想第一時間找到播報員嘛？

那按照下面的步驟設為“星標”吧~

點亮下方的好看

讓更多同類人

感受到光與熱