30 秒！Chrome 插件帶你速成編程學習

去年，GitHub 上火了一個叫做 30 Seconds of Code （30 秒學會編程）的項目，精選了 JavaScript 代碼段集合，這些代碼段都是開發者可以在 30 秒乃至更短時間內理解的。根據GitHub此前發布的《Octoverse 觀察報告》顯示，該項目更是入選 2018 年度十大開源項目。

GitHub 上類似的 30 秒系列倉庫還包括 30 Seconds of CSS（CSS 代碼集）、30 Seconds of Interviews（面試問題集錦）、30 Seconds of React（React 代碼集） 等。

受到 30 秒學編程的靈感啟發，從事 Web 開發的 Stefan Petrovic 在這些開源項目的基礎上，創建了 30 Seconds of Knowledge——該項目是一個 Google Chrome 擴展程序，能夠令開發者在每次打開新標籤頁時，都獲得新的開發人員技能。

是什麼？

按照該插件在說明文檔中的描述，你可以在擴展選項中選擇你想要提升的編程語言，並在每次打開新標籤時更加智能。而你只需 30 秒即可閱讀和理解其所提供的代碼片段來提高自己的知識水平。如果碰巧看到對自己有用的東西，只需將其複製/粘貼到你的代碼中就可以了！

該插件用 React 構建，其他開源項目則提供了代碼段：

30 Seconds of Code：https://github.com/30-seconds/30-seconds-of-code

30 Seconds of CSS：https://github.com/30-seconds/30-seconds-of-css

30 Seconds of Interviews：https://github.com/30-seconds/30-seconds-of-interviews

30 Seconds of React：https://github.com/30-seconds/30-seconds-of-react

30 Seconds of PHP：https://github.com/appzcoder/30-seconds-of-php-code

30 Seconds of Python：https://github.com/kriadmin/30-seconds-of-python-code

棧（Stack）

React

Google Chrome Extension API

可用的代碼段庫：

JavaScript

CSS

面試問題

React

PHP

Python

目前，六種類別選擇共包含超 500 個代碼段，後續還將繼續添加。

當前該擴展程序主要支持：

MVP 模式（僅限 Chrome）

Landing Page

已發布至 Product Hunt

黑色/亮色主題

新增「捐助打賞」選項

新增保存/收藏特性

發布 v1.0.0 版本

未來還將添加 Firefox 及 Safari 埠。

怎麼用（教程詳解）？

安裝

目前，該插件的版本為 1.0.0，可以直接在 Chrome 網上應用店官方網站進行下載安裝及刪除，已積累用戶 10129 位。

設置

在 Chrome 中啟用該插件，點擊左上按鈕進入設置界面：

在這裡可以勾選你需要學習或提升的內容（已精通或不感興趣的內容即可取消勾選狀態），同時還可以選擇黑色/亮色主題，選擇完畢後點擊【Save】保存，即可開啟你的 30 秒打卡速學之旅。

代碼學習

每一次刷新/打開新標籤，都會為你顯示新的內容，這些代碼段都方便你在短時間內進行理解和學習。

複製及保存

對於想要「留為己用」的代碼段，可以通過點擊代碼右下角的按鈕進行代碼複製，並粘貼到自己的代碼庫中，即取即用。若是 CSS 代碼段，你還可以在 CodePen 上實時預覽。

或是直接點擊【Save】保存代碼，也便於二次學習/稍後再看。

同時，你也可以通過點擊頁面左下角的按鈕，跳轉內容管理界面，管理你此前保存過的代碼段（刪除操作）。

「Chrome 因插件而美麗」，這款開發者工具能否滿足你的需求呢？

插件源碼：

https://github.com/petrovicstefanrs/30_seconds_of_knowledge

下載安裝：

https://chrome.google.com/webstore/detail/30-seconds-of-knowledge/mmgplondnjekobonklacmemikcnhklla

【完】

熱 文推 薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！