Gatsby介紹

Gatsby是一個使用React構建應用程序和網站的平台。 它是一個允許你使用一系列技術和實踐來構建的工具,這些技術和實踐被統稱為JAMstack。 Gatsby是當前前端開發領域中最火熱的工具之一。為什麼呢?我認為有以下幾個原因: “JAMstack"方法用於構建Web應用程序和網站的大幅增長 行業中對於"Progressive Web Apps”(漸進式Web應用程序)技術的快速采用,這也是Gatsby的關鍵功能之一 它是使用React和GraphQL構建的,這兩個技術非常流行和備受追捧 它功能強大 它的速度很快 文檔很好 網絡效應(有人使用它,創建站點,製作教程,更多人了解它,形成一種循環) 一切都是JavaScript(不需要學習新的模板語言) 它隱藏了複雜性,但允許我們逐步定制每一步 以上都是很好的優點,Gatsby絕對值得一試。 它是如何工作的? 使用Gatsby,您可以使用React組件來構建應用程序。 您通常會使用Markdown編寫在站點中呈現的內容,但您也可以使用任何類型的數據源,例如無頭CMS或像Contentful這樣的Web服務。 Gatsby會構建站點,並將其編譯為靜態HTML,可以部署在任何Web服務器上,例如Netlify、AWS S3、GitHub Pages、常規託管提供商、PAAS等。您只需要找一個可以提供普通HTTP頁面和內容給客戶端的地方。 我在上面的列表中提到了漸進式Web應用程序。Gatsby會自動將您的站點生成為PWA,並使用服務工作器加快頁面加載和資源緩存。 您可以通過插件來增加Gatsby的功能。 安裝 您可以在終端中運行以下命令安裝Gatsby: npm install -g gatsby-cli 這將安裝gatsby命令行工具。 (當有新版本時,可以使用相同的命令進行更新) 您可以運行以下命令創建一個新的"Hello World"站點: gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world 此命令將在mysite文件夾中創建一個全新的Gatsby站點,使用位於https://github.com/gatsbyjs/gatsby-starter-hello-world的starter。 Starter是您可以基於的示例站點。另一個常見的starter是default,可在https://github.com/gatsbyjs/gatsby-starter-default上找到。 您可以在這裡找到所有可用的starter的列表 運行Gatsby站點 在終端完成安裝starter之後,可以運行以下命令來運行網站: cd mysite gatsby develop 這將在本地主機的8000端口上啟動一個新的Web服務器並提供網站。 以下是我們的Hello World starter的運作示例: 檢查站點 如果用您喜歡的代碼編輯器(我使用VS Code)打開您創建的站點,您會發現有3個文件夾: .cache:一個包含Gatsby內部代碼的隱藏文件夾,您在現在不需要更改其中的任何內容 public:在構建站點後包含生成網站的靜態文件 src:包含React組件的文件夾,這裡只有index組件 static:將包含靜態資源,例如CSS和圖片 現在,對默認頁面進行簡單的更改非常容易,只需打開src/pages/index.js文件,將“Hello World!”更改為其他內容,然後保存。網頁應立即熱重載該組件(這意味著網頁實際上不會刷新,但內容會更改 - 這是由底層技術支持的一個技巧)。 要添加第二個頁面,只需在此文件夾中創建另一個.js文件,與index.js具有相同的內容(調整内容)並保存。 例如,我創建了一個名為second.js的文件,具有以下內容: import React from 'react' export default () => <div>Second page!...

Git 常用操作列表

這個頁面包含了我覺得很好用但很難記住的 Git 命令列表。 合併一連串的提交並重寫提交歷史 將存在於另一個分支的提交應用到當前分支上 還原文件至最後一次提交的狀態(撤消更改) 以漂亮的圖形顯示提交歷史 獲取更好看的日誌 獲取簡潔的狀態 在本地檢查一個拉取請求 列出和特定文件相關的提交 列出和特定文件相關的提交,包括提交的內容 按提交次數排序列出貢獻者 撤回最後一次提交並推送至遠端 選擇已經提交但未合併至當前分支的所有更改並新建一個分支 停止追蹤某一文件,但仍保留在文件系統中 查詢特定提交所在的分支名稱 將一連串的提交合併為一個提交並重寫提交歷史 git rebase -i 執行後會進入交互式 Rebase 工具,輸入 s 將一個提交與前一個提交合併。需要合併多個提交時重複使用 s 指令。 將存在於另一個分支的提交應用到當前分支上 單個提交: git cherry-pick <commit> 多個提交: git cherry-pick <commit1> <commit2> <commit3> 還原文件至最後一次提交的狀態(撤消更改) git checkout -- <filename> 以漂亮的圖形顯示提交歷史 git log --pretty=format:"%h %s" --graph 獲取更好看的日誌 git log --pretty=format:"%h - %an, %ar : %s" 獲取簡潔的狀態 git status -s 在本地檢查一個拉取請求 git fetch origin pull/<id>/head:<branch> git checkout <branch> 列出和特定文件相關的提交 git log --follow -- <filename> 列出和特定文件相關的提交,包括提交的內容 git log --follow -p -- <filename> 按提交次數排序列出貢獻者 git shortlog -s -n 撤回最後一次提交並推送至遠端 git revert -n HEAD 選擇已經提交但未合併至當前分支的所有更改並新建一個分支 git checkout -b <branch> 停止追蹤某一文件,但仍保留在文件系統中 git rm -r --cached 查詢特定提交所在的分支名稱 git branch --contains <commit>

GitHub開發者介紹

GitHub是一個聚集了數百萬開發者的網站,他們每天都在一起合作共同開發開源軟體。GitHub同時也是給軟體使用者報告問題的地方,它托管了數十億行程式碼。作為一個開發者,你應該了解GitHub中最重要的一些功能。 GitHub介紹 為什麼使用GitHub? GitHub問題 社交式程式碼開發 關注 星標 衍生 熱門=更好 合併請求 專案管理 比較提交 Webhooks和服務 Webhooks 服務 最後一句 GitHub介紹 GitHub是一個網站,每天都有數百萬名開發者在這裡合作共同開發開源軟體。它也是軟體使用者報告問題的地方,同時也是托管數十億行程式碼的地方。 簡而言之,GitHub是一個為開發者打造的平台,並且是基於Git的。 提示:如果你對Git還不熟悉,可以查看這個Git指南。 作為一個開發者,你每天都無法避免使用GitHub,無論是為了托管你的程式碼還是使用別人的程式碼。本文將介紹GitHub的一些重要概念,以及如何使用一些提升你工作流程的功能,以及如何將其他應用程式整合到你的開發過程中。 為什麼使用GitHub? 現在你已經知道GitHub是什麼,你可能會問你應該為什麼要使用它。 畢竟,GitHub是由一家私人公司管理的,他們從托管別人的程式碼中獲獎利潤。那你為什麼要使用GitHub,而不是類似的平台,如BitBucket或GitLab? 除了個人喜好和技術原因外,有一個重要的原因:每個人都在使用GitHub,所以它的社群效應非常巨大。 大型程式碼庫過去已經從其他版本控制系統遷移到Git,因為Git在使用上非常方便,而GitHub在Open Source社群中一直處於很好的地位(並且付出了很多努力)。 所以今天,無論你查找任何庫,你99%的機會在GitHub上找到它。 除了Open Source程式碼外,很多開發者也會因為使用GitHub上的獨特功能而在上面託管私有庫。 GitHub問題 GitHub問題是全球最受歡迎的錯誤追蹤工具之一。 它提供了一個使庫的所有者可以組織、標記和分配給里程碑的問題的功能。 如果你在由其他人維護的項目上報告問題,它會保持開放,直到你關閉它(例如,如果你找到了問題)或項目所有者關閉它。 有時你會得到結論性答案,其他時候問題會保持開放,並且會被標記一些資訊以對其進行分類。開發者可能會根據您的反饋修復問題或改進程式碼庫。 大多數開發者並不為他們在GitHub上釋出的程式碼提供支援,所以你不能指望獲得及時的回覆。但有時候開源庫是由提供相關服務的公司發布的,這些公司可能對該程式碼提供相關服務,或提供具有更多功能的商業版本,或者有一個插件架構,它們可以作為有償的開發人員工作在開源軟體上。 社交式程式碼開發 幾年前,GitHub的標誌中包含了「社交式程式碼開發」的標語。 這表示什麼,現在是否仍然相關?當然是相關的。 關注 在GitHub上你可以關注開發者,只需要進入他們的個人資料並點擊「關注」按鈕。 你也可以關注一個庫,只需要點擊庫的「關注」按鈕。 無論哪種情況,這些活動都會顯示在你的主頁上。這裡的「關注」不像Twitter上的「關注」,在這裡你可以看到人們在GitHub上做了哪些事情。 星標 GitHub最重要的功能之一是將庫加入星標。這個動作將庫加入到你的「已加星標庫」列表中,使你可以在以後找到你之前感興趣的項目。這也是其中一種最重要的評級機制,因為一個庫獲得的星星數越多,它就越重要,並且會在搜索結果中更常出現。 重要的項目有時可能會有超過7萬的星標。 GitHub還有一個trending頁面,它會顯示在一段時間內獲得最多星標的庫,例如今天、本週或本月。 進入這些熱門列表會產生其他的社交效應,比如被其他網站推薦,因為你有更多的曝光機會。 衍生 一個項目的最後重要的社交指標是fork的次數。 這也是GitHub的關鍵功能之一,因為衍生(fork)是提交合併請求(PR)的基礎,也是一個變更建議。一個人基於你的庫進行衍生,做出一些變更,然後創建一個合併請求來請求你合併這些變更。 有時候衍生的人永遠不會請求合併任何東西,只是因為他們喜歡你的程式碼,決定在它的基礎上添加一些內容,或者解決了他們遇到的某個 bug。 衍生只是將GitHub項目的文件克隆下來,不會包含原始項目的星標和問題。 熱門=更好 總的來說,這些都是項目受歡迎程度的關鍵指標,通常還與最後提交的日期、作者在問題追蹤器中的參與度一起使用,這些都是評估你是否可以依賴一個庫或軟體的有用指標。 合併請求 在介紹**什麼是合併請求(PR)**之前,我們先來看看是如何進行的。 通常,一個人會基於你的庫進行衍生(fork),做出一些變更,然後創建一個合併請求(PR)來請求你合併這些變更。 一個項目可能會有數百個合併請求,一般而言,一個項目越受歡迎,合併請求越多,就像React項目一樣: 一旦一個人提交了一個合併請求,使用GitHub界面很容易,該合併請求需要項目的核心維護者進行審查。 根據你的合併請求的範圍(變更數量、受到變更影響的事物數量、觸及的程式碼的複雜度)維護者可能需要多一點或少一點的時間來確保你的變更與該項目兼容。 一個項目可能會有明確的時間表,他們希望推出一些新的更改。當你在PR中說明了一個復雜的架構時,維護者可能希望保持事情簡單。 這可能意味著不是所有的合併請求都會被迅速接受,也不能保證合併請求會被接受。 就像我在上面發布的例子中,有一個在該庫中已經有一年半的合併請求。這在所有的項目中都會發生。 專案管理 除了問題跟蹤,GitHub界面還提供了其他旨在幫助專案管理的功能。 其中之一是項目(Project)。這在生態系統中非常新,並且使用非常罕見,但它是一個看板工具,有助於組織問題和待完成的工作。 維基(Wiki)旨在用於用戶文檔。到目前為止,我看到的使用Wiki最令人印象深刻的是Go Programming Language GitHub Wiki。...

Glitch:一個很棒的開發者平台

Glitch是一個非常棒的平台,可以用來學習和實驗程式碼。本文將向您介紹Glitch,並讓您從零到一成為Glitch的高手。 Glitch是一個很好的學習編程的平台。 我在許多教程中使用Glitch,我認為它是一個展示概念並允許人們使用您的項目並在其基礎上建立的很棒的工具。 以下是我在Glitch上使用React和React Router創建的示例項目:https://glitch.com/edit/#!/flaviocopes-react-router-v4-2 使用Glitch,您可以輕鬆地創建JavaScript編寫的應用程序的演示和原型,從簡單的網頁到React或Vue等高級框架,以及支持服務器端的Node.js應用程序。 它基於Node.js構建,您可以安裝任何 npm包,運行webpack等等。 它是由一些非常成功的產品開發人員共同打造的,包括Trello和Stack Overflow,所以它在這方面具有很高的可信度。 我為什麼認為Glitch很棒呢? Glitch在如何呈現自己的方面“打動了”我,它介面有趣,但又不簡化。 您可以訪問日誌,控制台和許多內部內容。 此外,接口中非常突出的重新混音的概念使我更有可能在那裡創建許多項目,因為我永遠不需要從一個空白項目開始。 您可以開始直接進入代碼,而無需花時間設置環境、版本控制等等,並專注於您的想法,並獲得自動HTTPS URL和用於媒體資源的CDN。 此外,它完全沒有鎖定,只需使用Node.js(或者如果您不使用服務器端Javascript,只需使用HTML,JS和CSS)。 它是免費的嗎? 是的,它是免費的,將來他們可能會在付費計劃上添加更多功能,但他們聲明目前的Glitch將永遠免費。 有合理的限制,例如: 您有128MB的空間(不包括npm包),此外還有512MB的媒體資源空間。 您每小時可以處理4000個請求。 如果5分鐘內不訪問應用程序且應用程序不接收任何HTTP請求,則應用程序將停止,長時間運行的應用程序將在12小時後停止運行。只要有HTTP請求進來,它們就會重新啟動。 Glitch概述 這是Glitch的主頁,它顯示了一些因為很酷而被認為值得展示的項目,以及一些入門項目: 創建帳戶非常簡單,只需點擊“登錄”並選擇Facebook或GitHub作為您的“進入點”(我建議選擇GitHub): 您將被重定向到GitHub以進行授權: 登錄後,主頁也會顯示您的項目: 點擊“您的項目”將帶您轉到您的個人資料頁面,URL中包含您的姓名。我的是https://glitch.com/@flaviocopes。 您可以將項目設為“固定”,以便在有很多項目時更容易找到它們。 重新混音的概念 當您剛開始時,當然沒有自己的項目。 Glitch使得非常容易開始,您從不需要從空白項目開始。您始終是從另一個項目重新混音。 您可以重新混音您喜歡的項目,也可以重新混音您在Twitter上找到的項目或在Glitch主頁上展示的項目,或者您可以從一個作為啟動項目的項目開始: 一個簡單的網頁 Node.js Express應用程序 Node.js控制台 Create-React-App應用程序 Nuxt入門應用程序 這些合集中還有許多其他啟動項目: Hello World項目 構建塊 如果您現在正在學習編碼,那麼Learn to Code Glitch合集非常不錯。 我創建了一些作為我的演示和測試組態應用的啟動應用,它們是: 簡單的HTML + CSS + JS Glitch React + webpack創建的啟動項目 Glitch Glitch使創建自己的構建塊變得非常容易,通過將它們固定在個人資料中,您可以始終將它們保持在頂部,以便更容易找到。 重新混音一個項目 一旦您要開始對一個項目進行修改,您只需點擊它,然後出現一個窗口: 有3個按鈕: 預覽:項目是代碼,代碼應該做一些事情。這將顯示項目的結果。 編輯項目:顯示項目的源代碼,並且您可以開始編輯它 重新混音:將項目克隆為一個新項目 每次重新混音一個項目時,都會創建一個新的項目,並隨機生成一個名稱。 以下是剛創建和重新混音另一個項目後的項目示例: Glitch將其命名為guttural-noodle。點擊名字可以更改它: 您還可以更改描述。...

Go CLI 教程:Fortune 克隆

我之前写了两篇 CLI 应用的教程,分别是构建 gololcat 和 gocowsay。在这两篇教程中,我都使用了 fortune 作为输入生成器。 在本文中,我将用 Go 完成这个“管道三部曲”的最后一部分 - gofortune。 首先,什么是 fortune?参考 维基百科的定义,Fortune 是一款简单的程序,从一个引述数据库中随机显示一条信息。 说简单点,它是一个随机引述生成器。 它的历史可以追溯到 Unix Version 7 (1979)。至今仍然广泛应用。许多 Linux 发行版都默认安装了它,而在 MacOS 上,可以通过 brew install fortune 命令进行安装。 在某些系统上,它还会在使用 shell 时作为欢迎语或告别语。 维基百科上还提到: 许多人选择将 fortune 输入到 cowsay 命令中,以增添对话的幽默感。 而对于我来说,我会使用我的 gocowsay 命令。 好了,先到这里,让我们用 Go 构建一个 Fortune 的克隆版本。 下面是程序的功能概述。 fortunes 文件夹的位置与系统和发行版有关,可以使用构建标志硬编码它,或者使用环境变量。但为了锻炼,我要做一件“肮脏”的事情,直接询问 fortune,通过执行 fortune -f 命令,并得到如下输出: 输出的第一行包含 fortunes 文件夹的路径。 package main import ( "fmt" "os/exec" ) func main() { out, err := exec....

Go 中的介面

介面是一種型別,它定義了一個或多個方法簽名。 方法並沒有被實現,只有它們的簽名:方法名稱、參數型別和返回值型別。 像這樣: type Speaker interface { Speak() } 現在你可以有一個函數接受任何實現了介面所定義的所有方法的型別: func SaySomething(s Speaker) { s.Speak() } 並且我們可以將任何實現了這些方法的結構體傳遞給它: type Speaker interface { Speak() } type Person struct { Name string Age int } func (p Person) Speak() { fmt.Println("來自" + p.Name + "的問候") } func SaySomething(s Speaker) { s.Speak() } func main() { flavio := Person{Age: 39, Name: "Flavio"} SaySomething(flavio) }

Go 中的地圖(Maps)

在 Go 中,地圖(map)是一種非常有用的資料類型。 在其他程式語言中,它也被稱為字典、哈希表或關聯陣列。 以下是如何創建一個地圖: agesMap := make(map[string]int) 你不需要設定地圖可以容納多少項目。 你可以以這種方式將新項目添加到地圖中: agesMap["flavio"] = 39 你還可以使用以下語法直接初始化地圖的值: agesMap := map[string]int{"flavio": 39} 你可以使用以下方式獲取與鍵關聯的值: age := agesMap["flavio"] 你可以使用 delete() 函式來從地圖中刪除項目: delete(agesMap, "flavio")

Go 中的函式

函式是一段具有名稱的程式碼塊,其中包含一些指令。 在「Hello, World!」的範例中,我們建立了一個 main 函式,這是程式的入口點。 package main import "fmt" func main() { fmt.Println("Hello, World!") } 這是一個特殊的函式。 通常,我們會給函式取一個自訂的名稱: func doSomething() { } 然後你可以呼叫它: doSomething() 函式可以接受參數,我們必須像這樣設定參數的型別: func doSomething(a int, b int) { } doSomething(1, 2) a 和 b 是我們內部與函式相關聯的參數名稱。 函式可以返回一個值,像這樣: func sumTwoNumbers(a int, b int) int { return a + b } result := sumTwoNumbers(1, 2) 請注意我們指定了返回值的 型別 在 Go 中,函式可以返回超過一個值: func performOperations(a int, b int) (int, int) { return a + b, a - b } sum, diff := performOperations(1, 2) 這很有趣,因為許多語言只允許返回一個值。...

Go 中的指標

假設你有一個變數: age := 20 使用 &age 可以取得這個變數的指標,也就是它在記憶體裡的位址。 當你有了這個變數的指標後,可以使用 * 運算子來取得它指向的值: age := 20 ageptr := &age agevalue := *ageptr 這在你想要呼叫一個函式並將該變數作為參數傳遞時很有用。預設情況下,Go 會在函式中複製該變數的值,所以這不會改變 age 的值: func increment(a int) { a = a + 1 } func main() { age := 20 increment(age) //age 仍然是 20 } 你可以使用指標來解決這個問題: func increment(a *int) { *a = *a + 1 } func main() { age := 20 increment(&age) //age 現在變成了 21 }

Go 資料結構:二元搜尋樹

在這篇文章中,我們將分析和實現二元搜尋樹的資料結構。 樹 是一個有階層結構的表示法。通常我們可以通過想像一個家族的族譜樹來理解樹的概念。 二元搜尋樹是一種每個節點最多有兩個子節點的樹。 二元搜尋樹具有左節點的值小於右節點的值的特性。 這是我們在本文中要建構的資料結構。它是一個非常有用的資料結構,可以有效地存儲和索引數據,並且可以快速檢索數據。 詞彙定義: 根:樹的第 0 層 子節點:除了根節點以外的每個節點 內部節點:具有至少一個子節點的節點 葉節點:沒有子節點的每個節點 子樹:以特定節點為根的一組節點 預備信息: 一個二元搜尋樹資料結構將公開以下方法: Insert(t):插入項目 t 到樹中 Search(t):如果項目 t 存在於樹中,則返回 true InOrderTraverse():按中序遍歷訪問所有節點 PreOrderTraverse():按先序遍歷訪問所有節點 PostOrderTraverse():按後序遍歷訪問所有節點 Min():返回存儲在樹中的最小值項目 Max():返回存儲在樹中的最大值項目 Remove(t):從樹中刪除項目 t String():打印可讀取的樹形結構 我將創建一個 ItemBinarySearchTree 的泛型類型,並且支持併發,它可以通過使用 genny 來生成包含任何類型的樹,從而封裝了包含數據的實際值特定資料結構。 我將節點定義為: // Node 組成樹的單個節點 type Node struct { key int value Item left *Node // 左節點 right *Node // 右節點 } 這個 key 值允許使用任何類型的項目,並且使用一個單獨的值來計算正確的位置。我實現它為整數,但它可以使用任何可以進行比較的類型。 將項目插入樹中需要使用遞歸,因為我們需要找到確定的位置來插入它。規則是,如果節點的鍵值小於當前節點的鍵值,我們將其作為左子節點插入,如果沒有左子節點。否則,我們使用左子節點作為基礎節點重新計算位置。對於右子節點也是同樣的原則。 遍歷是指遍歷樹的過程。我們實現三種不同的方法來遍歷,因為有三種不同的方法。以二元搜尋樹為例: 我們可以以以下方式進行遍歷: 中序遍歷:通過遵循最小鏈接來訪問所有節點,直到找到最左側的葉節點,然後處理該葉節點,通過進入與當前節點關聯的下一個最小鍵值來移動到其他節點。在上面的圖中,遍歷順序為:1 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 9 -> 10 -> 11。 先序遍歷:在訪問子節點之前,先訪問節點本身。在上面的圖中,遍歷順序為:8 -> 4 -> 2 -> 1 -> 3 -> 6 -> 5 -> 7 -> 10 -> 9 -> 11。 後序遍歷:找到最小的葉節點(最左側的葉節點),然後處理它的兄弟節點和父節點,然後進入下一個子樹,並向上遍歷到父節點。在上面的圖中,遍歷順序為:1 -> 3 -> 2 -> 5 -> 7 -> 6 -> 4 -> 9 -> 11 -> 10 -> 8。 我們在測試中使用的 String 方法會打印出上述樹的可視化結果:...