每天給你推薦一個(gè)新奇，好玩，高品質(zhì)的開(kāi)源庫(kù)，好文，觀點(diǎn)或言論等。

?

項(xiàng)目主頁(yè)維護(hù)當(dāng)前月份的內(nèi)容，想看往期內(nèi)容，可以翻到下方歷史匯總部分，然后選擇自己感興趣的月份點(diǎn)進(jìn)去即可。

?

2022-04

2022-04-28[工具]

import-local 是一個(gè) NodeJS 端的工具，用于檢測(cè)本地是否安裝了某個(gè)包。如果你在開(kāi)發(fā)一個(gè) node 的 cli 應(yīng)用，并且想要提高性能使用用戶本地安裝好的包，它就很適合你。

via: https://github.com/sindresorhus/import-local

2022-04-28[好文]

rest api 中的 POST 和 PUT 有什么區(qū)別？一個(gè)用于新建資源，一個(gè)用于更新資源？不是的！

via: https://stackoverflow.com/questions/630453/what-is-the-difference-between-post-and-put-in-http

2022-04-25[網(wǎng)站]

一個(gè)低代碼平臺(tái)，通過(guò)它可以拖拽生成自己的網(wǎng)站。

值得一提的是，一些框架已經(jīng)開(kāi)始集成它了。你可以通過(guò) builder.io 導(dǎo)出代碼，然后通過(guò)一些工具生成各個(gè)框架的中間代碼（比如 react，vue），也可以直接生成原生 JS 代碼。

via: https://www.builder.io/

2022-04-24[工具]

?

今天是中國(guó)五一假期的調(diào)休。調(diào)休真的是一個(gè)反人類的設(shè)計(jì)。

?

cypress 是一個(gè) e2e 測(cè)試工具，可以很容易地集成到各個(gè)測(cè)試框架中去，比如 jest。

via: https://github.com/cypress-io/cypress

2022-04-23[好文]

Navidrome 是一個(gè)音樂(lè)管理系統(tǒng)，你可以將其部署到本地，然后通過(guò)網(wǎng)頁(yè)播放器播放「本地音樂(lè)」。Navidrome 體驗(yàn) via: https://demo.navidrome.org/app/

很多其他的工具使用的都是網(wǎng)上現(xiàn)成的資源，比如 1listen 就是使用的蝦米，QQ 和網(wǎng)易云的音樂(lè)源。

via: https://www.navidrome.org/

2022-04-22[好文]

之前我寫過(guò) TypeScript 系列教程，其中有一篇是 上帝視角看 TypeScript

這個(gè)文章和我的那篇很像，都是從宏觀上帶大家理解 TypeScript 究竟做了什么。這篇文章比我的更細(xì)致一點(diǎn)，推薦大家結(jié)合起來(lái)閱讀。

via: https://www.huy.rocks/everyday/04-01-2022-typescript-how-the-compiler-compiles

2022-04-21[網(wǎng)站]

yandex 提供了簡(jiǎn)潔的在線翻譯功能。你可以直接輸入文字進(jìn)行翻譯，也可以上傳文件整體翻譯。

它還提供了 api 供開(kāi)發(fā)者使用，我的 leetcode 項(xiàng)目的部分內(nèi)容就是用它進(jìn)行翻譯的。不得不承認(rèn)，專有名詞的翻譯還是不行，比如動(dòng)態(tài)規(guī)劃會(huì)翻譯為 dynamic planning。

via: https://translate.yandex.com/

2022-04-20[好文]

只要 5 美元就可以破解指紋解鎖？Your Fingerprint Can Be Hacked For $5. Here’s How.

via: https://blog.kraken.com/post/11905/your-fingerprint-can-be-hacked-for-5-heres-how/

2022-04-19[好文]

如果檢測(cè)有沒(méi)有全局變量引起的內(nèi)存泄漏？這篇文章告訴你，作者提供了 js 代碼，大家可以直接拿來(lái)主義。

文中有一點(diǎn)沒(méi)有提到，其實(shí)很多全局變量是需要一定條件才會(huì)觸發(fā)的。因此要想真正將其集成到項(xiàng)目的 CI 中，還需要一些額外的條件，那就是在程序中手動(dòng)多次調(diào)用檢測(cè)方法，而不是調(diào)用一次就完事了。

via: https://mmazzarolo.com/blog/2022-02-14-find-what-javascript-variables-are-leaking-into-the-global-scope/

2022-04-18[工具]

上海疫情使得很多人買不到菜。熱愛(ài)折騰的網(wǎng)友開(kāi)源了搶菜軟件。

注：如非必要，不要使用這種極端方法，這會(huì)給其他沒(méi)有菜吃的人帶來(lái)很多麻煩。

via:

• ddshop
• dingdong-helper

2022-04-15[技巧]

Github 的 issue 有很多不好用的地方，比如不支持 comment 自定義排序，以至于有一些插件“鉆了空子”，提供了按照 reactions 進(jìn)行排序的功能。

Disscussion 彌補(bǔ)了這塊空白。Disscussion 內(nèi)置兩種排序規(guī)則，分別是時(shí)間順序和投票數(shù)。

你可以結(jié)合使用 issue 和 Disscussion 獲得更好的體驗(yàn)。

近期 Github 還給 Disscussion 提供了問(wèn)答社區(qū)才有的功能 - 「選為答案」。

只需要在新建 Disscussion 的時(shí)候類別選擇 Q&A 就可以體驗(yàn)這個(gè)功能了。

via: https://github.com/azl397985856/leetcode/discussions

2022-04-14[好文]

JS 的繼承和傳統(tǒng)的 class 繼承（比如 Java 的）有什么區(qū)別？（How does JavaScript's prototypal inheritance differ from classical inheritance?）

via: https://dev.to/chalarangelo/how-does-javascripts-prototypal-inheritance-differ-from-classical-inheritance-oii

2022-04-13[網(wǎng)站]

和昨天的推薦類似，這個(gè)網(wǎng)站也是移除不想要的部分的神奇網(wǎng)站。

只不過(guò)它不是移除圖片中不想要的部分，而是分離音頻中的人聲和非人聲。這樣就可以達(dá)到「移除人聲或者移除噪音的效果」。

via: https://vocalremover.org/

2022-04-12[網(wǎng)站]

一個(gè)無(wú)需注冊(cè)的在線網(wǎng)站，你可以用它來(lái)移除圖片中的部分內(nèi)容。

via: https://www.magiceraser.io/

2022-04-11[網(wǎng)站]

一個(gè)俄羅斯的網(wǎng)站，據(jù)說(shuō)是全世界最大的「名畫(huà)博物館」。

并且提供免費(fèi)的高清下載，比如蒙娜麗莎這里可以直接下載，分辨率是 3931 * 5178，4 M 左右的大小。

via: https://gallerix.asia/

2022-04-08[網(wǎng)站]

Games104 網(wǎng)站提供了從零學(xué)習(xí)游戲引擎的教程，有成型的完整代碼托管在開(kāi)源的 Github 倉(cāng)庫(kù)。

有做游戲的，或者想了解游戲引擎的可以看一下。

via: https://games104.boomingtech.com/sc/course-list/

2022-04-07[好文]

chrome 103 目前支持了 fs api。

用戶可以通過(guò) fs api 來(lái)讀取文件，寫入文件，刪除文件，創(chuàng)建文件等。

比如讀取文件的代碼：

let fileHandle;

document.querySelector(".pick-file").onclick = async () => {
  [fileHandle] = await window.showOpenFilePicker();

  const file = await fileHandle.getFile();
  const content = await file.text();

  return content;
};

除了 chrome 103 ，其他部分瀏覽器的新版本也提供了支持，具體支持情況如下圖。

via: https://css-tricks.com/getting-started-with-the-file-system-access-api/

2022-04-06[雜談]

想去貴州看櫻花~

via: https://fashion.sina.cn/l/ds/2022-03-07/detail-imcwipih5777616.d.html

2022-04-05[工具]

bitbucket 是一個(gè)開(kāi)源的代碼倉(cāng)庫(kù)，可以用來(lái)存放開(kāi)源項(xiàng)目的代碼。

和 Github，Gitlab 不同，bitbucket 內(nèi)置了 jira 用于管理需求 ，snyk 用于管理 包安全。個(gè)人感覺(jué) Github 和 Gitlab 在這幾方面體驗(yàn)還沒(méi)那么好。

via: https://bitbucket.org

2022-04-03[技巧]

vscode 中會(huì)自動(dòng)為 typescript 項(xiàng)目選擇 workspace 的 node_modules 的 typescript，但是我們可以手動(dòng)選擇 workspace。

方法很簡(jiǎn)單， 你只需要打開(kāi)一個(gè) workespace 下的 TypeScript 文件，然后點(diǎn)擊右下角的 TypeScript 旁邊的版本號(hào)。

然后會(huì)讓你選擇版本。

如果有多個(gè) TypeScript ，錯(cuò)誤使用其他版本的 TypeScript 會(huì)導(dǎo)致編譯失敗。項(xiàng)目中可以通過(guò)配置 vscode 的方式解決這問(wèn)題。

具體地，大家可以在項(xiàng)目根目錄的 .vscode 文件夾下新建一個(gè) setting.json 然后進(jìn)行如下配置。

{
  "typescript.tsdk": "node_modules/typescript/lib/typescript.js"
}

更多用法參考官方文檔：https://code.visualstudio.com/docs/typescript/typescript-compiling

2022-04-02[好文]

Github 面試還會(huì)布置家庭作業(yè)？

家庭作業(yè)也通過(guò) Github 進(jìn)行。大概是給你一個(gè)倉(cāng)庫(kù)，然后你 fork 過(guò)去后進(jìn)行編輯，完成后 pr 到原倉(cāng)庫(kù)進(jìn)行 review。

via: https://github.blog/2022-03-31-how-github-does-take-home-technical-interviews/

2022-04-01[網(wǎng)站]

CS61A（Structure and Interpretation of Computer Programs）是伯克利所有計(jì)算機(jī)系學(xué)生必須要上的第一門編程課，前半部分以 Python 為主，后半部分以 Schema 為主。網(wǎng)站資源很豐富，作為一個(gè)普通游客最主要的就是課件，其提供了 html 和 pdf 兩種格式。課件圖文豐富，這和其他同級(jí)別課程差異很大，對(duì)新手比較友好。

via: https://cs61a.org/

關(guān)注我

我重新整理了下自己的公眾號(hào)，并且我還給它換了一個(gè)名字腦洞前端，它是一個(gè)幫助你打開(kāi)大前端新世界大門的鑰匙 ??，在這里你可以聽(tīng)到新奇的觀點(diǎn)，看到一些技術(shù)嘗新，還會(huì)收到系統(tǒng)性總結(jié)和思考。

在這里我會(huì)盡量通過(guò)圖的形式來(lái)闡述一些概念和邏輯，幫助大家快速理解，圖解是我的目標(biāo)。

之后我的文章會(huì)同步到微信公眾號(hào) 腦洞前端 ，你可以關(guān)注獲取最新的文章，并和我進(jìn)行交流。

另外你可以回復(fù)大前端進(jìn)大前端微信交流群， 回復(fù) leetcode 拉你進(jìn) leetcode 微信群，如果想加入 qq 群，請(qǐng)回復(fù) qq。