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