Express 是一個用於 Node.js 的 Web 框架。Node.js 是一個用於構建網絡服務和應用程序的神奇工具。Express 基於其功能提供了易於使用的功能，以滿足 Web 服務器用例的需求。 Express 簡介 安裝 Hello World 通過理解 Hello World 代碼來學習 Express 的基本知識 請求參數 發送響應 發送 JSON 響應 使用 end() 發送空響應 更改任何 HTTP 標頭值 設置 cookie 設置 HTTP 響應狀態 處理重定向 發送文件供下載 支持 JSONP 路由 命名參數 使用正則表達式匹配路徑 中間件 提供靜態資源 模板 下一步？ Express 是一個 Node.js Web 框架。 Node.js 是一個用於構建網絡服務和應用程序的神奇工具。 Express 基於 Node.js 的功能提供了易於使用的功能，以滿足 Web 服務器用例的需求。Express 是開源、免費、易於擴展且非常高效的。還有很多預先建立的包可供使用，您只需放入並用於執行各種操作。 您可以使用 npm 將 Express 安裝到任何項目中: npm install express 或者使用 Yarn 安裝:...

一個方便的參考，列出所有請求物件屬性以及如何使用它們 請求參數 我提到過請求物件保存了所有的HTTP請求信息。 這些是你可能會用到的主要屬性： 屬性 描述 .app 保存了對Express應用程式物件的引用 .baseUrl 應用程式回應的基本路徑 .body 包含請求主體中提交的資料（必須在可以訪問它之前對其進行解析和填充） .cookies 包含請求中傳送的 cookie（需要 cookie-parser 的中介軟體） .hostname 主機名稱，根據 Host HTTP 標頭 的值 .ip 客戶端的 IP 位址 .method 使用的 HTTP 方法 .params 命名路由參數 .path URL 路徑 .protocol 請求協議 .query 包含請求中使用的所有查詢字串的物件 .secure 如果請求是安全的（使用 HTTPS）則為 true .signedCookies 包含請求中傳送的簽名 cookie（需要 cookie-parser 的中介軟體） .xhr 如果請求是 XMLHttpRequest 則為 true 如何使用 Express 擷取 GET 查詢字串參數 查詢字串是 URL 路徑後面的部分，以問號 ? 開頭。 例如： ?name=flavio 可以使用 & 添加多個查詢參數： ?name=flavio&age=35 如何在 Express 中獲取這些查詢字串的值？...

路由是在呼叫URL時確定應該發生什麼事情的過程，或者也可以確定應用程式的哪些部分應該處理特定的請求。 在Hello World的例子中，我們使用了這段程式碼： app.get('/', (req, res) => { /* */ }) 這創建了一個路由，將使用HTTP GET方法訪問根域名URL /的請求映射到我們想提供的回應。 命名參數 如果我們想要聽取自定義請求，也許我們想要創建一個服務，接受一個字符串，並將其轉換為大寫，而且我們不希望參數作為查詢字串發送，而是作為URL的一部分。我們可以使用命名參數： app.get('/uppercase/:theValue', (req, res) => res.send(req.params.theValue.toUpperCase())) 如果我們向 /uppercase/test 發送請求，我們會在響應的內容中得到 TEST。 你可以在同一個URL中使用多個命名參數，它們都將被存儲在 req.params 中。 使用正則表達式匹配路徑 你可以使用正則表達式來通過一個語句匹配多個路徑： app.get(/post/, (req, res) => { /* */ }) 將匹配 /post、/post/first、/thepost、/posting/something 等等。

了解所有關於 Fetch API 的知識，這是一種基於 Promise 的異步網路請求的現代方法。 介紹 Fetch API 使用 Fetch 捕捉錯誤 Response 物件 Metadata headers status statusText url 內容主體 Request 物件 請求標頭 POST 請求 如何取消 Fetch 請求 尋找更多資訊？ 介紹 Fetch API 自從 IE5 在1998年釋出以來，我們在瀏覽器中有使用 XMLHttpRequest (XHR) 這個選項進行異步網路請求。 在幾年之後，GMail 和其他豐富的應用程式廣泛使用它，使得這種方法變得非常受歡迎，甚至需要一個名稱，AJAX。 直接使用 XMLHttpRequest 一直都很麻煩，所以通常會被某些庫抽象化，而 jQuery 就有其自己的相關幫助方法： jQuery.ajax() jQuery.get() jQuery.post() 它們對於使得這一切變得更加容易特別有著巨大的影響，尤其是在保證它們在舊版瀏覽器上的兼容性方面。 Fetch API 就是一種現代化的異步網路請求方法，並使用 Promises 作為其基礎。 Fetch 在主要的瀏覽器上有著良好的支援，除了 IE。 由 GitHub 提供的 polyfill https://github.com/github/fetch 讓我們可以在任何瀏覽器上使用 fetch。 使用 Fetch 開始使用 Fetch 發送 GET 請求非常簡單：...

了解什麼是 FileList 物件以及如何使用它 當您在 HTML 表單中使用 <input type="file" /> 元素時，當使用者上傳一個或多個檔案時，您將會與 FileList 物件互動。 不只有這種情況可以得到 FileList 物件，透過拖放操作時也會取得 FileList。 而對於表單， 元素預設不允許上傳多個檔案。 您可以使用以下語法檢索只包含一個元素的 FileList： <input type="file" /> const input = document.querySelector('input'); input.addEventListener('change', e => { const fileList = input.files; const theFile = fileList[0]; }); 從 FileList 物件中選擇任何元素將取得一個 File 物件。在這種情況下，我們只有一個元素，所以我們選擇在 0 的位置處的項目。 您也可以使用 item() 方法檢索它，指定索引： const input = document.querySelector('input'); input.addEventListener('change', e => { const fileList = input.files; const theFile = fileList.item(0); }); 然而，如果啟用了 multiple，即使用了 multiple 屬性（<input type="file" multiple />），FileList 將包含多個元素。...

了解什麼是FileReader物件以及如何使用它 FileReader物件以非同步方式讀取檔案的內容。 它提供了四個讀取方法，可以用來開始讀取過程： readAsText()：以文字字串形式讀取內容 readAsDataURL()：將內容以數據URL形式讀取 readAsArrayBuffer()：將內容讀取為ArrayBuffer readAsBinaryString()：以二進制字串形式讀取內容 另外還有一個abort()方法，用來停止任何的讀取操作。 讀取檔案是非同步的，該物件還提供了一些事件，我們可以利用這些事件來追蹤操作的進度： onload：當讀取成功結束時觸發 onloadstart：當讀取開始時觸發 onprogress：當讀取進行中時觸發 onloadend：無論讀取是否成功結束都會觸發 onerror：當發生錯誤時觸發 onabort：當讀取被中止時觸發 一旦讀取操作完成，FileReader物件的result屬性將包含檔案的內容。 error屬性包含錯誤訊息（如果有錯誤發生），而readyState則包含操作的狀態編號。狀態編號為: 0：未載入任何資料 1：資料載入中 2：載入完成 readAsText() 以文字字串形式載入blob的內容。 以下是一個範例，將文字放入#content元素的內部HTML： //..file is available as a blob const reader = new FileReader() reader.onload = event => { const text = reader.result document.getElementById('content').innerHTML = text } reader.onerror = (e) => { console.error(e) } reader.readAsText(file) 以下是一個範例，當使用input元素上傳文本檔時，讀取檔案內容並將內容打印到控制台： <input type="file" allow="text/*" /> const input = document.querySelector('input') input.addEventListener('change', e => { const reader = new FileReader() reader....

了解什麼是File物件以及如何使用它 瀏覽器提供了一個File物件。 文件物件是一個Blob物件，它提供了3個額外的屬性： name（一個字串） lastModified（最後修改的UNIX時間戳記） 加上了Blob物件的屬性： size（文件大小（以位元組為單位）） type（文件的MIME類型） 當你與FileList物件進行交互時，你將會收到一個File物件。可以通過HTML表單的<input type="file" />元素獲取FileList物件，或者通過**拖放(Drag and Drop)**進行交互。 當你獲取了一個FileList物件後，你可以遍歷它，或者選擇其中的元素（例如使用myFileList[0]獲取第一個項目），這樣你就可以獲取到一個File物件。 假設你的表單中有一個input type="file"元素： <input type="file" /> 現在，你可以監聽這個元素的change事件，這樣當你選擇一個文件時，就可以獲取有關它的信息。document.querySelector('input').files將返回一個FileList物件，就像之前解釋的一樣，使用[0]可以獲取到第一個已加載的文件，然後我們可以從File物件中獲取所有需要的屬性： document.querySelector('input').addEventListener('change', () => { const file = document.querySelector('input').files[0] alert(`文件${file.name}最後修改時間為${new Date(file.lastModified).toDateString()}`) }) 參見File物件範例，Flavio Copes的示例。

介紹 Fish Shell 我用 Fish Shell 已經好幾個月了，我認為這是我使用過的最好的 Shell。有很多原因。 大多數人似乎都使用Bash，因為它是許多系統的默認選項（更新：現在 macOS 的默認選項是 Zsh），或者使用Zsh，配合強大的工具如 Oh My Zsh 使它更加令人驚嘆。 儘管Bash很棒，但它是一個非常基本的shell，具有有限的可配置選項。我主要使用它來運行Bash腳本（這是另一個話題）而不是作為交互式shell。Zsh提供了很多功能，但需要進行一些配置才能設置，這可能會讓初學者感到害怕。同樣，過多的選項和自由意味著您可能很容易陷入配置症，每周更換20次選項以確保您不會錯過任何東西。 Fish Shell 為此而生！這款shell提供了一個令人驚嘆的環境，並且帶有全部功能的開箱即用配置。 我的最愛 Fish Shell 功能包括： 它能更好地自動完成已經執行的命令，只這一點就真的讓我每天工作更有效率和減壓很多。 您只需開始輸入命令，然後按 up 鍵，即可在shell歷史記錄中看到您以前使用該命令的所有時間。 您可以在任何系統上安裝 Fish，而且它在各個系統上的運作方式都相同，無需進行太多自定義以取得這些高級功能。 至於腳本編寫，Fish 與 Bash 腳本有很大不同（我認為是更好的方式），但您仍然可以運行任何 Bash 腳本，只要在前面加上 #!/bin/bash。 在安裝之後，您將獲得以下優勢： 語法突出顯示 美觀的提示符 自動完成 參數建議，並提供 man 頁面提示 基於 web 的配置 我認為 Fish 是最適合初學者的 shell。 我記得有件有趣的事情是當我打開它的首頁時。一開始我搞不清楚這是否是過去的遺物： 對於幾乎沒用過文字界面的使用者，可以在網頁上設置您的顏色並查看函數、變量和歷史記錄。 然後我意識到這是程序員的幽默，這讓我發笑。科技應該始終讓人感到有趣，對吧？ 首先，什麼是 shell？ Shell 是一種與底層操作系統進行交互的界面。它允許您使用文本和命令執行操作，並為用戶提供腳本創建等高級功能。 安裝 在 macOS 上運行 brew install fish 來安裝 Fish。 查看我的 macOS 终端指南...

Flexbox，也被稱為靈活盒子模型，是兩種現代佈局系統之一，與 CSS Grid 一起使用。 介紹 瀏覽器支援 啟用 Flexbox 容器屬性 對齊行或列 垂直和水平對齊 更改水平對齊 更改垂直對齊 關於 baseline 的注意事項 包裝 適用於每個單個項目的屬性 使用順序在其他項目之前/之後移動項目 使用 align-self 進行垂直對齊 根據需要增加或減少項目的大小 flex-grow flex-shrink flex-basis flex 介紹 Flexbox，也被稱為靈活盒子模型，是兩種現代佈局系統之一，與 CSS Grid 一起使用。 與 CSS Grid（雙維）相比，flexbox 是一種單維度佈局模型。它根據行或列對佈局進行控制，但不能同時進行控制。 Flexbox 的主要目標是允許項目根據您設置的某些規則填充其容器提供的整個空間。 除非您需要支援像 IE8 和 IE9 這樣的舊瀏覽器，否則 Flexbox 是一個讓您忘記使用以下工具的工具: 表格佈局 漂浮 clearfix hacks display: table hacks 讓我們深入研究 flexbox，並在非常短的時間內成為它的大師吧。 瀏覽器支援 截至撰寫本文（2018 年 2 月），它獲得了 97.66% 的用戶支援，所有最重要的瀏覽器都已實施它多年，因此即使是舊瀏覽器（包括 IE10+）也得到了支援: 雖然我們必須等待幾年讓用戶趕上 CSS Grid，但 Flexbox 是一個較舊的技術，現在可以使用。 啟用 Flexbox 通過設置...

我使用 Gatsby 創建了一個網站，並想要更改網站圖示（favicon）。 我迅速查找了如何更改它，過程非常簡單。 預設的網站圖示是 static/favicon.ico 這張圖片。只需更改該圖片，然後你的網站圖示就會更新。 如果你使用 gatsby-plugin-sharp 插件，預設的網站圖示則是 src/images/gatsby-icon.png。 你不必使用相同的路徑或相同的格式 - 圖片也可以是 SVG 格式的。例如，你可以打開 gatsby-config.js 文件，並將 plugins.gatsby-plugin-sharp.options.icon 屬性從 src/images/gatsby-icon.png 更改為你想要的圖片路徑。 例如，我將我的新網站圖示放在 src/images/logo-small.svg，並將配置屬性更改為指向該圖示。 接著運行 gatsby develop，你會立即看到 Gatsby 更新了所有不同尺寸的網站圖示：