時光飛逝，雖然國慶長假已經結束，但七天的假期根本表達不完我們對祖國的熱愛。新時代的首次閱兵、首次亮相的新型武器、受閱軍人的著裝與精神風貌，除了久久不能忘懷，更感受到了偉大祖國的繁榮富強。有國才有家，只有國家強大，我們才能擁有更多的獲得感與幸福感。不忘初心，砥礪前行，繼續努力吧，IT 人！

熱血過後，還要回到現實，一起來看看《開源精粹》第六期的內容。在本期中，你將會發現一些實用的庫、工具和框架，例如百度開源的 NoahV，HTML 模板庫------ lit-html，或是 Google 開源的 Jib，都會給你帶來不少的幫助。話不多說，先睹為快吧！

前端

1.Maizzle

Maizzle 是一個 HTML 電子郵件框架，能夠幫助你快速製作 HTML 電子郵件原型。你不需要學習特定的語法，只需要正常編寫 HTML 即可。由於框架核心不存在硬編碼組件，所以它可以實現更大的靈活，代碼也具備可移植性。

項目地址：

https://github.com/maizzle/maizzle

2.Choices.js

Choices.js 是一個可定製的 JS 選擇框/文本輸入插件，與 Select2 和 Selectize 類似，但不依賴 jQuery.

項目地址：

https://github.com/jshjohnson/Choices

3.Balloon.css

Balloon.css 是一個純 CSS 實現的簡易工具提示框。僅通過數行 CSS 代碼，就可以實現不同位置的提示效果。 ​

項目地址：

https://github.com/kazzkiq/balloon.css

4.v-region

v-region 是一款基於 Vue 2.0 的中國行政區劃選擇器。它提供了 4 級行政區域可供選擇，即可選擇 "省/直轄市"、"市"、"區/縣"、"鄉/鎮/街道" 。同時，它具備多種顯示模式（純文本、表單元素、下拉選擇器）。 ​

項目地址：

https://github.com/TerryZ/v-region

5.NoahV

這是一個由百度開源的基於 Vue 的前端應用框架。它除了具備豐富的常用組件外，還提供了一系列實用的研發輔助功能（API 數據模擬、數據儀表盤、腳手架），適用於監控運維、數據分析等場景，以及常見的後臺管理系統。 ​

項目地址：

https://github.com/baidu/NoahV

6.lit-html

lit-html 是一款簡單、高效、可擴展的 HTML 頁面模板庫。它幫助你實現在 JS 中編寫 HTML 模版，同時完全支持 JS 與函數式編程。

項目地址：

https://github.com/polymer/lit-html

後端

1.Jib

這是 Google 開源的容器鏡像構建工具，幫助你將應用打包到容器鏡像過程中的所有步驟，它直接與 Maven 和 Gradle Java 開發環境集成，不需要你編寫 Dockerfile 或安裝 Docker ，只需將其作為插件添加到你的構建中，就可以將 Java 應用容器化。

項目地址：

https://github.com/GoogleContainerTools/jib

2.Bokeh

Bokeh 是一個交互式、可視化的 Python 庫，它能夠幫助你在 WEB 瀏覽器上快速地展示、創建互動式的圖表、控制面板、數據應用以及產品原型。

項目地址：

https://github.com/bokeh/bokeh

3.Crawlab

Crawlab 是一個基於 Golang 的分佈式爬蟲管理平臺，支持 Python、NodeJS、Go、Java、PHP 等多種編程語言以及多種爬蟲框架。

項目地址：

https://github.com/crawlab-team/crawlab

4.30-seconds-of-python

30-seconds-of-python 是一個優質的 Python 學習資源，旨在幫助大家通過 30 秒 Get 到實用的 Python 編程技巧，內容分為了 List、Math、Object、String、Utility 等五大板塊，相信對你的提高會有所幫助。

項目地址：

https://github.com/30-seconds/30-seconds-of-python

移動端

1.Makeup

這是一個用 Canvas 給人臉化妝的 App 演示項目，支持美白、磨皮、唇彩、美瞳、瘦臉、豐胸、大長腿等功能。

項目地址：

https://github.com/DingProg/Makeup

2.Flutter-Go

Flutter Go 是阿里巴巴開源的一款 Flutter 開發者幫助 App. 它包含了 Flutter 常用 140+ 組件的演示與中文文檔，幫助開發者搞定所有常用 widget 的用法。目前 Android 和 iOS 正式版都已上架。 ​

項目地址：

https://github.com/alibaba/flutter-go

3.Beeshell

Beeshell 是一個由美團開源的 React Native 基礎組件庫，它提供了一整套開箱即用的高質量組件，包含 JS 組件和複合組件，涉及 FE、iOS、Android 三端技術，支持自定義主題，用於開發和服務企業級移動應用。

項目地址：

https://github.com/Meituan-Dianping/beeshell

4.Best-Flutter-UI-Templates

一套非常精緻的 Flutter UI 模版，供你免費使用。

項目地址：

https://github.com/mitesh77/Best-Flutter-UI-Templates

工具/資源

1.Gita

Gita 是一個管理多個 git 倉庫的命令行工具，可以在任意目錄下查看倉庫狀態，或者執行 git 命令。

工具地址：

https://github.com/nosarthur/gita

2.learn-regex

這是一個實用的正則表達式學習資源，從基礎概念到用法練習，幫助你快速掌握正則表達式。

工具地址：

https://github.com/ziishaned/learn-regex

3.Research

Research 是一個快捷的搜索工具。它整合了百度、微博、知乎、微信、語雀、京東等眾多常用的搜索引擎，你只需要輸入一次關鍵詞，就可以在不同的搜索引擎中查看搜索結果，非常方便。 ​​​​

工具地址：

https://github.com/ifrontend-xyz/research

4.VS Code LeetCode

在 VS Code 中練習 LeetCode 的插件。刷題必備，速速安裝吧！ ​

工具地址：

https://github.com/jdneo/vscode-leetcode

5.Awesome UIKit

Awesome UIKit 是一個開源項目，旨在收集 JS 框架、Web 組件庫和管理模板。看看，有木有你需要的模版。

項目地址：

https://github.com/jaywcjlove/awesome-uikit

6.Codelf

Phil Karlton 曾說"在 CS 領域中，有兩件事是非常難的，一個是緩存失效，一個是命名。"可見給變量或函數命名，對於程序員來說多麼痛苦，而 Codelf 就是應運而生變量命名神器。它支持主流編程語言，以及中文混合搜索，助你擺脫變量命名的困擾。

項目地址：

https://unbug.github.io/codelf/

設計

1.西田圖像

眼界與靈感指引著設計師的行為，而尋找靈感，提升眼界最簡單的辦法就是多看、多思考。今天分享的西田圖像網站，就是一個基於 CC0 協議的高質量免版權的圖片素材網站。它提供了 6 大分類，6 種圖片尺寸供你免費使用。

網站地址：

https://www.sitapix.com

2.imglarger

這是一個基於機器學習與人工智能技術實現圖片無損放大的在線工具。它操作簡單，只需上傳原始圖片，選擇提交的形式以及放大倍數即可。通過預覽放大的圖片，直接就可以免費保存了。 ​​​​

網站地址：

https://imglarger.com/Tw/

3.Image Finder

Image Finder最初是一個基於 Flickr 的圖片搜索引擎。經過多年的發展，成為了一個遵循 CC0 協議的共享圖像下載網站，所以個人、商業均可免費使用。與其他圖庫不同的是，網站中的所有圖像均屬於原始攝影師，它會引導使用者到原圖片網站上進行下載，但下載過程並不繁瑣。

目前，網站上展示了 23 萬+ 高品質的圖像素材，你可以通過顏色、標籤、熱門程度進行快速查找，非常方便。

網站地址：

https://imagefinder.co

4.Mixkit Art

在《開源精粹》第五期中，我給大家推薦了一個高質量的免費視頻素材網站------ Mixkit，今天分享的 Mixkit Art，就是 Mixkit 下的一個分類，但兩個網站的類型卻截然不同。

Mixkit Art 專注於收錄精美的插畫和藝術圖案，內容涉及城市、慶典、動物、飲食、自然等眾多分類。雖然，網站上的圖片數量不是特別多，但如果尋找靈感的話，同樣也可以來看看，並且所有的圖片也支持商業或非商業使用。

網站地址：

https://mixkit.co/art/

編程靈感

1.Order confirm animation

酷炫的訂單確定動畫效果。

查看源碼：

https://codepen.io/aaroniker/pen/eYOVrNa

2.Animated chat bar interaction

Chat Bar 交互動畫示例。

查看源碼：

https://codepen.io/kylewetton/pen/zYOzXxp

3.Flipping card effect

CSS 實現卡片翻轉效果。

查看源碼：

https://codepen.io/JeremyWink/pen/oNvybqX

4.Modern Gradient Buttons

CSS 實現漂亮的漸變色 Buttons 合集。

查看源碼：

https://codepen.io/TheCSSKing/pen/abowMLW

5.CSS Card Hover Effects

CSS 實現卡片 Hover 效果。

查看源碼：

https://codepen.io/Jhonierpc/pen/MWgBJpy

彩蛋

12306 購票助手------py12306

隨著國家鐵路運輸的發展，人們生活水平的提高，出行變得越來越方便，但隨之而來的購票問題，卻令人相當的頭痛。每逢節假日，票總是難搶的一批。這不，py12306 便因此而誕生了。

這是一個基於 Python 開發的 12306 購票助手，它具備分佈式、多賬號、多任務的特性，支持 Web 頁面管理，同時也支持釘釘、微信以及郵箱通知，不僅可以查票，也可以直接下單買票。

項目地址：

https://github.com/pjialin/py12306

趣圖

1.當寫的程序，出現 bug 的時候....

2.二進制世界的神奇！

3.硬核演示結對編程

4.總算找到了孤立 Python 的理由了！

5.作為一個開發員，你的優缺點是什麼？

感謝你的閱讀。若你有所收穫，點贊與分享是給我最大的支持。

注：

如需轉載，煩請按下方註明出處信息，謝謝！

原文地址：

https://zhuanlan.zhihu.com/p/86707646

更多文章

1.

2.

3.