整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
趣是最好的老師，HelloGitHub 就是幫你找到興趣！
分享 GitHub 上有趣、入門級的開源項目。
這是一個面向編程新手、熱愛編程、對開源社區感興趣 人群的月刊，月刊的內容包括：各種編程語言的項目、讓生活變得更美好的工具、書籍、學習筆記、教程等，這些開源項目大多都是非常容易上手，而且非常 Cool。主要是希望大家能動手用起來，加入到開源社區中。
在瀏覽、參與這些項目的過程中，你將學習到更多編程知識、提高編程技巧、找到編程的樂趣。
最后 HelloGitHub 這個項目就誕生了
以下為本期內容｜每個月 28 號發刊
1、ngx_waf：一個 Nginx 防火墻模塊。我差點就錯過了的寶藏項目，它使用簡單不需要復雜的配置，支持的功能直戳我的痛點。你看：
2、fast-cpp-csv-parser：讀取 CSV 文件的 C++ 庫（僅頭文件）。示例代碼：
# include "csv.h"
int main(){
io::CSVReader<3> in("ram.csv");
in.read_header(io::ignore_extra_column, "vendor", "size", "speed");
std::string vendor; int size; double speed;
while(in.read_row(vendor, size, speed)){
// 對 ram.csv 文件中的數據，做你想做的事情吧！
}
}
3、UNO：使用 C++ 編寫的命令行 UNO 紙牌游戲。操作方便支持人機或聯機對戰，游戲基于 Asio 網絡庫和現代 C++ 開發，也有對 C++17 的嘗試。分別實現了服務端、客戶端，代碼簡單對 C++ 新手友好，UNO 的愛好者快來玩一玩吧！
4、godot：一款功能豐富的開源游戲引擎。最初它只是一款 2D 引擎，近期拓展了 3D 部分的能力。相較于 UE4 或者 Unity 這樣的成熟商業引擎來說，Godot 還很年輕不夠成熟，尤其 3D 方面的能力。但它擁有簡易的開發方式，上手簡單。而且社區活躍、文檔覆蓋全面、有較為豐富的示例代碼，對于剛入門的游戲開發者友好。同時開源引擎底層代碼完全開源，開發者可以閱讀和貢獻代碼，而不是只停留在游戲邏輯開發層面?？偠灾?Godot 是一個極有潛力的游戲引擎，推薦給想學習游戲開發的同學
5、water.css：一個專門為簡單頁面和示例網頁準備的 CSS 框架
6、fyne：一款 Go 語言跨平臺 UI 庫。想用 Go 寫圖形界面應用的小伙伴，快速上手：
安裝
$ go get fyne.io/fyne
運行一個 demo
$ go get fyne.io/fyne/cmd/fyne_demo/
$ fyne_demo
7、golearn：Go 寫的機器學習框架。來，跑個模型試試吧：
cd $GOPATH/src/github.com/sjwhitworth/golearn/examples/knnclassifier
go run knnclassifier_iris.go
8、keepass2android：一個開源的 Android 密碼管理器。下載地址，功能：
9、PrettyZoo：一款 Java 寫的高顏值 ZooKeeper 客戶端桌面應用。該項目使用了 JDK11 以及 JavaFX 編寫的 GUI 客戶端，代碼量適中適合想學習 JavaFX 編寫應用的朋友。需要連接 ZK 服務端查看數據的話，手邊有這么個工具還是挺方便的。實用和顏值集一身的項目
10、vueblog：一款輕量級 Java 博客項目。基于 SpringBoot+Vue 實現并附有詳細開發文檔和講解視頻，讓剛學會 Java 的同學也能搞定。每個體面的技術人員可能都有一個自己說了算的博客吧
11、x-spreadsheet：基于 JavaScript 實現的輕量級 Web 電子表格庫。它功能齊全，包含表格的基本操作和函數等，還有詳細的中文文檔，在線嘗試
12、h5-Dooring：一款功能齊全的 H5 頁面可視化配置平臺。讓你通過可視化的方式制作出 H5 頁面，技術棧以 React 為主，后臺采用 Node.js 實現。雖然網上有很多這種工具，但本項目免費開源、功能齊全值得一試
13、Ant-Forest：基于 Auto.js 的螞蟻森林能量自動收獲腳本。它是個“綠色環保”的項目，我能從中感受到滿滿的愛和想把它做好的決心！來看看作者開發 Ant-Forest 時解決了哪些難題：
14、tui.image-editor：功能齊全的圖片編輯器。支持圖片剪裁、旋轉、涂鴉等功能，實現了 Vue 和 React 封裝的組件，便于整合進你的項目
15、windows95：基于 Electron 實現的 Windows 95 操作系統。它實現了該操作系統下的所有東西，對！所有！想體驗下 Windows 95 版的掃雷嗎？下載安裝即可
16、LuLu：免費開源的 macOS 防火墻軟件
17、humhub：用 PHP 寫的開源社交平臺?？催^《社交網絡》的小伙伴，都知道大名鼎鼎的 Facebook 最早就是扎克伯格用 PHP 語言寫出來的，humhub 能夠讓不會編程的小伙伴也可以用創建出一個社交平臺啦。跟著提示一步步操作，不到 1 分鐘我的社交平臺就建好了
18、phpbrew：一個編譯、安裝、管理多版本 PHP 的工具。有了它就可以方便地在不同 PHP 版本之間自由切換啦，特性：
19、python-patterns：Python 設計模式和使用場景的集合
20、pgcli：支持語法高亮和自動補全的 Postgres 數據庫客戶端命令行工具。它安裝簡單上手快速，如果你用過 Postgres 數據庫自帶的命令行工具，就一定能感受到 pgcli 的迷人之處
21、15-minute-apps：基于 PyQt 框架寫的小型桌面應用程序的集合。想用 Python 寫桌面應用的小伙伴，這個項目應該可以幫到你。比如寫個掃雷游戲：
22、Pine：一個免費、輕量、簡潔的 macOS Markdown 編輯器。功能：
23、Publish：專為 Swift 開發人員準備的靜態網站生成器。讓你實現整個網站都是用 Swift 構建的工具，支持多種主題、插件以及更多強大的自定義選項。示例網站，安裝和快速開始：
$ git clone https://github.com/JohnSundell/Publish.git
$ cd Publish
$ make
$ mkdir MyWebsite
$ cd MyWebsite
$ publish new
24、open-source-rover：NASA 面向科技愛好者開源的火星漫游車設計方案和代碼。通過該項目你可以使用便宜的樹莓派做出自己的火星漫游車，所需的零件很容易就可以買到，遙控部分是使用現成的 Xbox 手柄或者手機，減少花銷。喜歡動手和硬件的小伙伴們，這個東西夠酷嗎？
25、bat：替代 cat 的命令行工具。你還在命令行用 cat 查看文件嗎？那你就 out 啦！今天推薦的 bat 它不僅支持語法高亮，還能展示 Git 的改動。macOS 下安裝命令：brew install bat 相信你用過 bat 后就不會再想用回 cat 了
26、Web-Dev-For-Beginners：微軟開源的 Web 開發教程。該教程共有 24 節課，但目前只有英文版
27、neofetch：展示操作系統信息的命令行工具，支持將近 150 種操作系統
28、jpeg_tutorial：教你編寫 JPEG 解碼器的教程，示例為 Rust 代碼
29、sql-style-guide：一份 SQL 語句編寫風格建議。比如：
-- Good
select *
from users
where email = 'example@domain.com'
-- Bad
select *
from users
where email = "example@domain.com"
30、pure-bash-bible：該書有好多復制就能用的 bash 函數，我愿稱其為 bash 的“奇技淫巧”。比如把字母轉為大寫的函數：
upper() {
# Usage: upper "string"
printf '%s\n' "${1^^}"
}
$ upper "hello"
HELLO
31、pulse：根據包含馬賽克的人臉圖像，生成一張相似容貌的結果。注意不是復原哦，僅可用于人臉
32、Surface-Defect-Detection：該項目整理了目前大量靠譜的表面缺陷檢測數據集，還有最新的頂會論文以及作者的解讀筆記。從事視覺方向的小伙伴，心動了嗎？
迎留言告訴我本期你最喜歡那個項目，如果覺得本文還不錯的話，就點贊、轉發一波吧～
這篇文章中，我將分享21個HTML技巧，包括代碼片段，可以提升你的編碼技能。
讓我們立即開始吧。
（本文視頻講解：java567.com）
習CSS是構建好看網頁的一種方式。但是，在學習過程中，我們傾向于（大部分時間）限制自己，一遍又一遍地使用相同的屬性。畢竟，我們是一種習慣性的動物，我們會使用自己習慣且熟悉的東西。
因此，在這篇文章中，向你介紹7個 比較少見且好用的 CSS 屬性，希望對你有所幫助。
CSS 的屬性 vertical-align 用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。
就像定義說的，這個屬性允許你垂直對齊文本。它對于順序指示器(st, nd等)、需要的輸入星號(*)或沒有正確居中的圖標特別有用。vertical-align取其中一個值:super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom，或從基線開始的長度(px，%， em, rem等等)。
baseline: 使元素的基線與父元素的基線對齊。HTML規范沒有詳細說明部分可替換元素的基線，如<textarea> ，這意味著這些元素使用此值的表現因瀏覽器而異。
sub：使元素的基線與父元素的下標基線對齊。
super：使元素的基線與父元素的上標基線對齊。
text-top：使元素的基線與父元素的上標基線對齊。
text-bottom：使元素的底部與父元素的字體底部對齊。
middle：使元素的中部與父元素的基線加上父元素x-height（譯注：x高度）的一半對齊。
注意 vertical-align 只對行內元素、表格單元格元素生效：不能用它垂直對齊塊級元素。
資源:MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align）。
writing-mode 屬性定義了文本水平或垂直排布以及在塊級元素中文本的行進方向。為整個文檔設置書時，應在根元素上設置它（對于 HTML 文檔應該在 html 元素上設置）。它采用以下值之一horizontal-tb (default) | vertical-rl | vertical-lr。
horizontal-tb：對于左對齊(ltr)腳本，內容從左到右水平流動。對于右對齊(rtr)腳本，內容從右到左水平流動。下一水平行位于上一行下方。
vertical-rl：對于左對齊(ltr)腳本，內容從上到下垂直流動，下一垂直行位于上一行左側。對于右對齊(rtr)腳本，內容從下到上垂直流動，下一垂直行位于上一行右側。
vertical-lr：對于左對齊(ltr)腳本，內容從上到下垂直流動，下一垂直行位于上一行右側。對于右對齊(rtr)腳本，內容從下到上垂直流動，下一垂直行位于上一行左側。
資源:MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode）。
font-variant-numeric CSS屬性控制數字，分數和序號標記的替代字形的使用。
它采用以下這些值之一：normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions。
此屬性對于設置數字樣式很有用。根據情況，你可能希望顯示老式的數字或帶有斜杠的零，對于這些情況，font-feature-settings很有用。
請注意，font-variant-numeric是font-feature-settings組屬性的一部分。諸如font-variant-caps或font-variant-ligatures之類的屬性也屬于該組。還要注意，像所有font-feature-settings屬性一樣，你的字體需要實現上述功能才能正常工作。我使用的字體是Fira Sans。
資源:MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric）。
每當我們有不想讓用戶選擇的文本，或者相反，如果發生了雙擊或上下文單擊，希望選擇所有文本時，user-select屬性將非常有用。
此屬性采用以下值之一：none | auto | text | all。
none：元素及其子元素的文本不可選中。請注意這個Selection 對象可以包含這些元素。從Firefox 21開始， none 表現的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新啟用選擇。
autoauto 的具體取值取決于一系列條件，具體如下：
text：用戶可以選擇文本。all：在一個HTML編輯器中，當雙擊子元素或者上下文時，那么包含該子元素的最頂層元素也會被選中。
資源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/user-select)。
clip-path CSS 屬性可以創建一個只有元素的部分區域可以顯示的剪切區域。區域內的部分顯示，區域外的隱藏。剪切區域是被引用內嵌的URL定義的路徑或者外部svg的路徑，或者作為一個形狀例如circle()。clip-path屬性代替了現在已經棄用的剪切 clip屬性。
此屬性采用以下值之一:circle() | ellipse() | polygon() | path() | url()。
由于這是對該屬性的介紹，因此，這里不會深入研究每個值。
我使用最多的兩個值是circle和polygon。circle(radius at pair)值有兩個參數，第一個參數是圓的半徑，第二個參數是表示圓心的點。polygon(pair, pair, pair ...)值取3個或更多的點，表示一個三角形、一個矩形等等。
shape-outside的CSS 屬性定義了一個可以是非矩形的形狀，相鄰的內聯內容應圍繞該形狀進行包裝。默認情況下，內聯內容包圍其邊距框; shape-outside提供了一種自定義此包裝的方法，可以將文本包裝在復雜對象周圍而不是簡單的框中。它采用與clip-path相同的值。
clip-path定義用戶如何查看元素，shape-outside定義其他HTML元素如何查看元素。
資源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside)。
最后，backgroundclip CSS屬性設置元素的背景是否擴展到其border、padding 或content 框之下。
此屬性采用以下值之一：border-box (default) | padding-box | content-box | text
資源:MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip)。
下圖是結合上面 7 個屬性實現的布局，讓大家加深一下印象。
如果你還知道一些新奇的屬性，歡迎留言。
作者：Mustapha Aouas 譯者：前端小智 來源：dev
原文：https://dev.to/mustapha/7-amazing-css-properties-you-may-not-know-yet-eej
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
