我的電子書創建流程 目前我有15本免費的書籍，我會免費分享給訂閱我的電子報的所有人。 其中有些書籍已經出到第二版（關於 JavaScript 和 React 的書籍），因為技術發展迅速，我們必須跟上腳步。 第一本書是在2018年出版的。 在不久的將來，我打算重新組織我的免費電子書集合，對其中的一些進行修訂，甚至可能新增一些新的書籍。 自從我最後一次更新到美妙的[2021 MacBook Pro 14"] (https://flaviocopes.com/macbook-pro-2021-review/)之後，我不得不在我的 Mac 上重新設置我的書籍創建工作流程，所以我趁機寫了這篇文章。 我使用一個叫做 honkit 的工具。 這是一個叫做 gitbook 的工具的分支，我以前一直在使用它，但是它已經被棄用很長時間了，不再可用。 honkit非常好用。它是一個用於使用 Markdown 創建書籍並生成 PDF / ePub / Mobi 版本的免費工具。 我可以更新一本書籍，只需一個命令就可以將它上傳到我的網站，並讓 CloudFlare 進行分發。 據我所知，這是迄今為止最簡單的工具，能夠生成所有這些書籍版本。 還有其他一些工具，但並不具備所有這些功能。 以下是開始使用的方法。 創建一個文件夾，並在其中添加一個 book.json 文件 { "author": "你的名字", "title": "書籍標題" } 創建一個垂直的 cover.jpg 圖像，用於封面。如果你還想創建 ePub / Mobi 版本，可以再添加一個 cover_small.jpg。 創建一個 SUMMARY.md 文件，用於編寫目錄結構： - [前言](README.md) - [第一章](content/1-first.md) - [第二章](content/2-second.md) 然後添加一個 README.md 文件，這是前言的 Markdown 文件。 添加一個 content/1-first.md 文件，這是第一章的 Markdown 文件。...

了解這個由 Next.js 提供的強大技術，用於在 Next.js 應用程序中創建 API 端點。 除了創建頁面路由（意味著頁面作為 Web 頁面提供給瀏覽器），Next.js 還可以創建API 路由。 這是一個非常有趣的功能，因為這意味著 Next.js 可以用於創建存儲在 Next.js 中並通過 fetch 請求傳輸 JSON 的數據的前端。 API 路由位於 /pages/api/ 文件夾下，並且與 /api 端點相映射。 這個功能在創建應用程序時非常有用。 在這些路由中，我們編寫的是 Node.js 代碼（而不是 React 代碼）。這是一個範式轉變，你從前端轉向後端，但非常平滑。 假如你有一個 /pages/api/comments.js 文件，它的目標是以 JSON 的形式返回博客文章的評論。 假如你有一個存儲在 comments.json 文件中的評論列表： [ { "comment": "第一條" }, { "comment": "好文章" } ] 下面是一個示例代碼，返回評論列表給客戶端： import comments from './comments.json' export default (req, res) => { res.status(200).json(comments) } 它將在 /api/comments URL 上聽取 GET 請求，你可以使用瀏覽器來調用它：...

你需要知道圖片在文件系統中的位置。 如果是從互聯網獲取的圖片，你可以將它保存到系統的臨時文件夾。 然後安裝 image-size npm 模塊： npm install image-size 你可以像這樣使用它： import sizeOf from 'image-size' const { height, width } = sizeOf(fileLocation)

當你需要程式化地從伺服器下載檔案時，你會如何下載一個檔案呢？ 這個問題讓我自問不已，當我需要從伺服器下載檔案並將其儲存在本地時。 以下是我所使用的程式碼： const fs = require('fs') const request = require('request') const download = (url, path, callback) => { request.head(url, (err, res, body) => { request(url) .pipe(fs.createWriteStream(path)) .on('close', callback) }) } const url = 'https://…' const path = './images/image.png' download(url, path, () => { console.log('✅ 完成！') }) 這段程式碼使用了內建的 fs 模組以及 request 模組。 必須先安裝 request： npm install request 需要注意的是，request 模組最近已經被棄用，這意味著它已經被「完成」，不會再有新的功能被加入。但這並不表示它停止運作，也不表示我們該停止使用它。

改善 Twitter 卡片的一個故事 我會在 Twitter 上分享我的博客文章，曾經有一段時間，我為每篇博文畫了一張圖片。 我設置了 Hugo，使其使用存儲在帖子文件夾中的 banner.png 或 banner.jpg 圖片作為開放圖形圖片，如下所示： <meta property="og:image" content="https://flaviocopes.com/axios/banner.png" /> 如果一篇文章沒有圖片，我會顯示我的頭像代替： <meta property="og:image" content="https://flaviocopes.com/img/avatar.png" /> 問題來了：我很久以前就停止製作這些自定義的橫幅圖片了，而且我的大部分博文都沒有橫幅圖片。 它們在 Twitter 上看起來都一樣： 我無法手工製作500個橫幅圖片。自從看到 Indie Hackers 為論壇博客文章生成這些圖片（一個很棒的點子）之後，我就一直在考慮以編程方式生成這些圖片。 因此，在獲得了一個很好的橫幅圖片的靈感後，我決定為我的每一篇博文創建一個自定義橫幅。 該橫幅是一個 PNG 圖片，為了保持文章的重點（“如何使用 Node.js 和 Canvas 創建並保存圖片”），我將省略其中的一些部分。 此外，有很多不同的方法可以實現我做的事情，下面只是其中一種方法。 首先，我們需要哪些 npm 包？ 只需要一個！canvas： npm install canvas 這個包為我們提供了一個基於 Node.js 的 Canvas API 實現，我們在瀏覽器中非常熟悉和喜愛。 換句話說，我用來生成圖片的所有內容在瀏覽器中也可以運行。 只是，我們不是從 <canvas> HTML 元素獲取 Canvas 實例，而是載入庫，從中獲取 createCanvas 函數： const { createCanvas } = require('canvas') 然後，我調用此函數，傳遞 canvas 的寬度和高度，我設置為 1200x600：...

Node.js 內建的模組以往被稱為非 promise-based 模組。 這是由於在 promise 之前，這些模組就已經存在了。 我們已經有了 promisify 有一段時間了。但我最近發現 Node.js 提供了一個新的基於 promise 的 API。 我以為這是新功能，但它其實已經在 Node.js 10（2018年）中引入了，已經過了一段時間！ 目前這個功能只適用於 fs 內建模組。 我不確定這是否很快就會移植到其他原生模組。 以下是如何使用它： import * as fs from 'node:fs/promises'; | 注意到現在可以使用 node:fs 约定来識別內建模組。 現在你可以使用任何 fs 方法，使用 promises 或 await： const posts = await fs.readdir('content');

使用 Node.js 讀取 CSV 檔案的快速教程 許多不同的 npm 模組可以讓你從 CSV 檔案中讀取資料。 其中大部分是基於串流(streams)的，像是 csv-parser 或者 node-csv。 這些模組非常適合在生產系統中處理 CSV 檔案。 如果不需要考慮效能，我喜歡保持事情的簡單。例如，對於一次性解析 CSV 檔案來整合我的後端系統。 為了這樣做，我使用了 neat-csv，這個套件將 csv-parser 的功能以簡單的 async/await 介面暴露出來。 使用 npm install neat-csv 安裝它，然後在你的應用程式中引入它： const neatCsv = require('neat-csv'); 然後從檔案系統中讀取 CSV 檔案，並將檔案內容傳遞給 neatCsv： const fs = require('fs'); fs.readFile('./file.csv', async (err, data) => { if (err) { console.error(err); return; } console.log(await neatCsv(data)); }); 現在你可以開始根據資料的格式（JavaScript 物件陣列）進行任何你需要的操作了。

了解如何在 VS Code 中使用 Prettier 來格式化 .astro 檔案。 使用 Astro 的一個缺點是 Prettier 無法理解它的語法。 因此，在 VS Code 中無法在儲存/貼上時自動格式化。 那麼，如何在 VS Code 中使用 Prettier 自動格式化 Astro 檔案呢？ 為了讓它運作，我們需要進行一些設定。 首先，安裝 Web 開發的預設格式化工具 Prettier。 Prettier 並沒有針對 Astro 的特定格式化工具。 所以在專案資料夾中，執行以下指令來安裝這個插件 https://github.com/withastro/prettier-plugin-astro npm install -D prettier-plugin-astro 現在，確保在 VS Code 的設定中啟用了 Editor: Format On Save 和 Editor: Format On Paste。 接下來，當你儲存檔案或貼上程式碼時，你應該可以看到它被格式化。 如果這個功能沒有運作，請確保在 VS Code 中打開了特定的專案資料夾，而不是該專案的父資料夾。 這可能導致 Astro 格式化工具無法運作。

Prisma 使用教程 Prisma 是一個有趣的 ORM（Object-Relational Mapping）。 ORM 是一個對數據庫的抽象層。 在過去的幾個月中，我有幸在幾個不同的項目中使用了 Prisma，現在我想向您展示如何輕鬆入門（並不斷前進）。 我將在基於 Next.js 的 React 應用程序中使用 Prisma。 您可以創建一個新的 Next.js 應用程序文件夾： npx create-next-app 要添加 Prisma，您首先需要在開發依賴中包括 prisma： npm install -D prisma 現在，您可以使用 npx 命令訪問 Prisma CLI 工具。嘗試運行： npx prisma 您將看到如何使用它的說明。 現在運行以下命令為您的項目設置 Prisma： npx prisma init 這將創建一個 prisma 文件夾，在其中創建一個 schema.prisma 文件： // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema datasource db { provider = "postgresql" url = env("DATABASE\_URL") } generator client { provider = "prisma-client-js" } 它還將創建一個 ....

我使用 Prisma 從資料庫中取得資料。 在我的情況中，我從 Tweets 資料表中取得推文，它們按照最舊到最新的順序列出。 我希望像 Twitter 一樣相反，最新的推文會最先顯示。 所以我修改了我的資料擷取程序： await prisma.tweet.findMany({ orderBy: [ { id: 'desc' } ] });