栗子前端技術(shù)周刊第 30 期 - 2023 HTML

栗子前端技術(shù)周刊第 30 期 - 2023 HTML 狀態(tài)調(diào)查報告、React Conf 2024 等

子前端技術(shù)周刊第 30 期 (2024.5.13 - 2024.5.19)：瀏覽前端一周最新消息，學(xué)習(xí)國內(nèi)外優(yōu)秀文章視頻，讓我們保持對前端的好奇心。

技術(shù)資訊

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

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

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

技術(shù)文章

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

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

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

開發(fā)工具

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

DOM Projects[12]：學(xué)習(xí)前端開發(fā)的項目集 - 主要面向初學(xué)者，使用 JS 和 DOM 構(gòu)建簡單應(yīng)用。選擇一個項目查看源代碼，并嘗試自己構(gòu)建相同的應(yīng)用程序。

Vue Fluid DnD[13]：適用于 Vue 的動畫拖放庫 - 專為列表而設(shè)計，官網(wǎng)提供了各種示例。

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

歡迎關(guān)注微信公眾號：栗子前端

參考資料

[1] 2023 HTML 狀態(tài)調(diào)查報告: 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) 發(fā)布: 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] 作為前端開發(fā)，感受下 nginx 帶來的魅力！: https://juejin.cn/post/7368433531926052874

[9] 別想調(diào)試我的前端頁面代碼: 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

步更新ES6教程
————致力于最簡單的前端教程，每天一篇文章，輕松進階前端

上篇說到組件通過ReactDOM.render方法渲染組件的。

假設(shè)我們要做這樣一個時間小DEMO：

demo

每秒的變化都要反應(yīng)在ui上，如果用ReactDOM.render方法，就需要每秒調(diào)用次此方法不停的重新渲染組件！這樣是不是過于繁瑣，react提供了一個更好的方式來更新組件。

為什么不直接操作dom?

這是因為使用React時盡量避免直接操作DOM，diff算法可以盡可能少的修改組件，提高渲染速度。而且React中操作DOM也不方便。

什么是state？

在類組件中，react使用state對象來存放組件的數(shù)據(jù)，state里的數(shù)據(jù)變化時，這個組件就會被重新渲染。

注：

state在于類創(chuàng)建的組件中能用，它是類的一個屬性，對函數(shù)創(chuàng)建的組件則無效
原理是state產(chǎn)生變化時自動去調(diào)用render方法重新渲染

使用state

初始化state

使用state前必須在構(gòu)造器中先初始化state。

初始化state

上面初始化了state，存了一個date，值是當(dāng)前時間。

這里注意：使用構(gòu)造器時，必須用super去獲取props

設(shè)置state

this.state是只讀的，不能直接修改state的值，需要通過this.setState()方法才能修改。

this.setSate(object)

注：參數(shù)是個對象，此對象會自動和state合并，從而修改state。

修改state

這里，我們加個定時器，每秒修改下state，那么組件就跟著會重新渲染了。

本篇文章到此結(jié)束，但是目前我們還不能完成這個DEMO，還需要把定時器放在合適的地方——>下篇組件的生命周期。

附完整代碼：

完整代碼

【前方霧大，關(guān)注一下不迷路=。=】

【html】【css】【html】【css】【前端開發(fā)】【javascript】【html】【javascript】【前端開發(fā)】【css】【javascript】【css】【前端開發(fā)】

其暗中觀察，不如默默關(guān)注我們

今日熱詞

class clown

班級耍寶人物

keep morale high

保持士氣高漲

Cambridge mulls typed exams

劍橋或終結(jié)用紙筆答卷

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.

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

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. ...

劍橋大學(xué)歷史系高級講師莎拉?皮爾索爾表示，15年或20年前，學(xué)生通常每天要寫上幾小時的字，但現(xiàn)在除了考試外他們幾乎不寫字?！?/p>

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.

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

重點詞匯

1、illegibility

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

n. 模糊；不清不楚

2、en masse

美 /??'mɑs/

（法）全體地；一同地

3、reliance on

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

4、routinely

美 /r?'tinli

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

5、virtually

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

adv. 事實上，幾乎；實質(zhì)上

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.

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

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.

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

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."

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

重點詞匯

1、class clown

班級耍寶人物（非正式）

clown

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

n. 小丑；鄉(xiāng)下人；粗魯笨拙的人

vi. 扮小丑；裝傻

2、be vital for

對……是至關(guān)重要的

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. 人類學(xué)

人類學(xué)家

5、analog

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

n. [自] 模擬；類似物

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

6、pull together

齊心協(xié)力；團結(jié)起來；擰成一股繩；萬眾一心

7、bridge gap

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

8、rigorous

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

adj. 嚴(yán)格的，嚴(yán)厲的；嚴(yán)密的；嚴(yán)酷的

9、regime

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

n. 政權(quán)，政體；社會制度；管理體制

UK mulls 'fast fashion' tax

英國政府?dāng)M征'快時尚'稅

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這樣的零售商征收"快時尚"稅，以幫助應(yīng)對快消服飾文化帶來的時尚垃圾。以后每件衣服或需繳納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.

政治家們還希望學(xué)校倡導(dǎo)二戰(zhàn)時期流傳下來的"修修補補再用用"精神，教會學(xué)生如何制作和修補衣服。在線零售商賣的衣服有時便宜到一件只需5英鎊，催生了快時尚文化，英國人每年購買的新衣服達110萬噸左右，相當(dāng)于每人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萬噸，大多數(shù)廢棄衣物進入了填埋場。但許多快消衣物的制作原料中含有塑料，導(dǎo)致大量污染顆粒進入到下水道、河流和海洋。

重點詞匯

1、mull

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

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

n. 混亂；軟薄布

vi. 深思熟慮

2、MP

abbr. 國會議員（Member of Parliament）

3、throwaway

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

n. 廢品；廣告?zhèn)鲉?；脫口而出的?/p>

adj. 拋棄型的；脫口而出的；漫不經(jīng)心的

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. 流出；擺脫；散發(fā)；傾吐

vi. 流出；脫落；散布

n. 小屋，棚；分水嶺

9、sewer

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

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

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

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.

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

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.

據(jù)稱，在該地區(qū)最大的人類定居點白鯨灣(人口約2500人)，當(dāng)?shù)厝艘涯繐舯睒O熊50多次。當(dāng)?shù)匦姓L官亞歷山大?米那耶夫說，北極熊襲擊了人群，還進入了建筑。

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.

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

重點詞匯

1、remote

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

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

n. 遠程

比較級 remoter最高級 remotest

2、archipelago

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

n. 群島，列島；多島的海區(qū)

復(fù)數(shù) archipelagoes或archipelagos

3、arctic

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

adj. 北極的；極寒的

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

4、come into contact with

v. 接觸到；聯(lián)系；開始做某事

5、patrol

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

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

vt. 巡邏；巡查

vi. 巡邏；巡查

6、fatal

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

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

文章

精選

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

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

立即加星標(biāo)

第一時間看好文

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

那按照下面的步驟設(shè)為“星標(biāo)”吧~

點亮下方的好看

讓更多同類人

感受到光與熱

在線咨詢

上一篇：韋恩圖怎么畫？這款軟件幫你輕松繪制
下一篇：響應(yīng)式網(wǎng)站和傳統(tǒng)的網(wǎng)站相比到底有什么優(yōu)勢？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

栗子前端技術(shù)周刊第 30 期 - 2023 HTML

技術(shù)資訊

技術(shù)文章

開發(fā)工具

參考資料

為什么不直接操作dom?

什么是state？

使用state

您的項目需求