如何使用 Firebase Hosting 开始

Firebase 是一个由 Firebase 公司于 2011 年开发的移动和 Web 应用开发平台，于 2014 年被 Google 收购。如今，Firebase 是 Google Cloud 服务的一部分，不仅如此，它还是他们云端产品的旗舰。 Firebase 是一个复杂而多样的产品，主要针对移动应用。然而，它的其中一个特性是高级 web 托管服务。 Firebase Hosting 特点 Firebase Hosting 提供托管静态网站的服务，您可以使用静态网站生成器生成的网站，也可以是使用服务器端 CMS 平台构建的网站，并从中生成网站的静态副本。 只要不是动态网站都可以托管在 Firebase Hosting 上。例如，如果您使用 Disqus 或 Facebook 评论系统，WordPress 博客几乎总是一个很好的静态网站候选。 Firebase Hosting 通过 Fastly CDN 提供文件传输，支持 HTTPS 并自动提供 SSL 证书，并提供自定义域名支持。 其免费层级很大方，并提供便宜的升级计划，非常适合开发者使用。Firebase 提供一个 CLI 界面工具，简化了部署流程，并支持一键回滚。 为什么应该使用 Firebase Hosting？ Firebase 是部署静态网站和单页应用程序的好选择。 我喜欢使用 Firebase Hosting 主要是因为我测试了许多不同的供应商，Firebase 在全球范围内都提供了惊人的速度，而且不需要额外的 CDN，因为 CDN 已经内置在 Firebase 中并且是免费的。 另外，使用自己的 VPS 也是一个很好的选择，但是我不想仅仅为了一个简单的网站而管理自己的服务器，我更愿意专注于内容而不是操作，就像我在 Heroku 上部署应用一样。...

如何使用 Flexbox 讓元素固定在頁面底部

這裡演示了如何將一個 div 元素固定在頁面底部。 以下是一個簡單的範例，展示了如何將一個 div 元素對齊到頁面底部。 我在高度超出視窗的情況下，需要將一個元素固定在頁面底部，但如果屏幕尺寸不夠，它仍然需要跟隨頁面流動。 以下是我使用 Tailwind CSS 創建的非常簡化的範例： <html> <body class="text-center"> <p>test</p> <p>&copy; 2022</p> </body> </html> 我們希望 “footer” HTML 元素使用 Flexbox 固定在底部。 首先，我們使用 Flexbox (flex flex-col)，並且將最小高度設置為屏幕高度 (min-h-screen)。 接下來，我們在 footer 元素之前添加 flex-grow 屬性： <html> <body class="text-center min-h-screen flex flex-col"> <p class="flex-grow">test</p> <p>&copy; 2022</p> </body> </html> 這段代碼生成以下結果：

如何使用 FormData 物件

了解什麼是 FormData 物件以及如何使用它 FormData 物件用於儲存表單輸入欄位的值。 當您需要將文件發送到伺服器時，它非常有用。 這可能是您實際需要它的唯一時間。 下面是一個使用 FormData 通過 fetch 發送文件內容的示例。 我們有一個輸入欄位： <input type="file" id="fileUpload" /> 我們在其上附加了一個 change 事件處理程式： document.querySelector('#fileUpload').addEventListener('change', event => { handleImageUpload(event) }) 並且我們在 handleImageUpload() 函數中管理大部分邏輯： const handleImageUpload = event => { const files = event.target.files const formData = new FormData() formData.append('myFile', files[0]) fetch('/saveImage', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data) }) .catch(error => { console.error(error) }) } 在這個示例中，我們將其 POST 到 /saveImage 端點。...

如何使用 Hugo 开始一个技术博客

一个从零开始到部署的使用 Hugo 开始技术博客的详细教程 Hugo 是一个非常好的工具，可以用来开始一个博客。 我自己在这个博客中使用了 Hugo 已经超过 2 年了。我喜欢使用 Hugo 的原因有几个。 它是简单，无聊，灵活，快速。 最重要的原因是它是简单的。你不需要学太多东西就可以开始使用。 你可以使用 Markdown 编写内容，这个格式允许我使用我最喜欢的编辑器（Bear）来写文章。 Hugo 是无聊的。不要误会，这是一件非常好的事情。作为一个开发者，我总是有冲动的想要不停地调整各种东西。Hugo 没有使用任何花哨的技术。它是用 Go 语言构建的，而 Go 是我最喜欢的语言之一，但这并不意味着我想要深入了解 Hugo 的内部工作方式，并改变它的工作方式。 Hugo 也没有展示任何炫酷或者下一代的东西，就像许多 JavaScript 框架经常会做的那样。 因此它非常无聊，这给了我很多的时间来做真正有用的事情，比如写内容。我专注于内容，而不是内容的展示方式。 话虽如此，Hugo 是非常灵活的。我用一个开源的主题开始了我的博客，然后随着时间的推移，完全改变了它。有时，我想在我的网站上做一些超出了普通博客范围的事情，而 Hugo 可以让我实现这些功能。 最后，我喜欢 Hugo 的另一个原因是它快速。为什么呢？首先，它的核心是 Go 语言，而 Go 语言以其非常快的速度而闻名。在 Go 的生态系统中，没有 100MB 依赖的概念。所有的东西都被设计得尽可能快速。此外，Hugo 不需要进行一些使用花哨技术时需要的繁琐操作。这是非常无聊的一个副产品。 好了，废话不多说。 Hugo 真的很棒，尤其是对于开发者来说，而且你愿意使用 Markdown 来写作的话。非技术人员可能会拒绝使用 Markdown，这是可以理解的。 此外，你还需要为使某些事情真正奏效而准备一个基于 Git 的工作流程。 在何处托管 Hugo 网站 Hugo 博客是完全静态的。这意味着你不需要自己托管服务器，也不需要使用特殊的服务。 Netlify、Now 和 GitHub Pages 是 3 个非常好的免费托管 Hugo 博客的地方。...

如何使用 insertAdjacentHTML

insertAdjacentHTML 是一個非常酷的 DOM 方法，我們可以在任何 DOM 元素上調用它來向頁面添加新的內容。 這是一種很好且靈活的插入新內容的方式。 該方法在一個元素上被調用，並接受兩個參數：位置和包含 HTML 的字符串。 以下是一個示例： const item = `<div> test </div> ` document.querySelector('#container').insertAdjacentHTML('afterend', item) 請注意這裡的 afterend 字符串。 它表示我們要將 HTML 添加到容器中的位置。 我們有四個可能的位置： beforebegin：在元素之前 afterbegin：在元素的第一個子元素之前 beforeend：在元素的最後一個子元素之後 afterend：在元素之後 以下是我們如何向列表添加新項目的示例： document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')

如何使用 JavaScript 來禁用按鈕

了解如何使用 JavaScript 以程式化的方式禁用或啟用按鈕 HTML 的按鈕元素是少數具有獨立狀態的元素之一。與幾乎所有的表單控件一起使用。 其中一個常見需求是使用 JavaScript 以程式化的方式禁用或啟用按鈕。 例如，您希望僅在文字輸入元素填寫時才啟用按鈕。 或者當特定的複選框被點擊時，例如那些用於表示“已閱讀條款和條件”的複選框，而實際上沒有人會閱讀。 以下是具體操作步驟： 首先，使用document.querySelector() 或 document.getElementById() 選取元素: const button = document.querySelector('button') 如果您有多個按鈕，您可能需要使用document.querySelectorAll() 並循環遍歷結果。 無論如何，一旦您有元素引用，您可以將其 disabled 屬性設置為 true 以禁用按鈕： button.disabled = true 若要重新啟用按鈕，則將其設置為 false 即可： button.disabled = false

如何使用 JavaScript 編碼 URL

如果您需要將 URL 作為 GET 請求的一部分發送，那麼您可能需要將其編碼。 在 JavaScript 中，該如何編碼 URL？ 根據您的需求，有兩個 JavaScript 函數可以幫助您。 第一個是 encodeURI()，第二個是 encodeURIComponent()。 注意：您可能會讀到 escape() 的相關資訊，但它已被棄用，不應使用。 這兩種方法在編碼哪些字符方面有所不同。 具體來說，encodeURI() 不會編碼 ~!@#$&*()=:/,;?+，而 encodeURIComponent() 則不會編碼 -_.!~*'()，而編碼其他所有字符。它們之間的區別是為了不同的用途： encodeURI() 用於編碼完整的 URL。 encodeURIComponent() 用於編碼單個 URL 參數值。 如果要對完整的 URL 調用 encodeURIComponent()，因為它會編碼 /，URL 路徑分隔符也將被編碼（以及其他內容）： encodeURI("http://example.com/ hey!/") //"http://example.com/%20hey!/" encodeURIComponent("http://www.example.org/a file with spaces.html") //"http%3A%2F%2Fexample.com%2F%20hey!%2F" MDN 提出了一個改進方案，以符合 RFC 3986 標準，使用以下函數實現： const fixedEncodeURIComponent = (str) => { return encodeURIComponent(str).replace(/[!'()\*]/g, (c) => { return '%' + c.charCodeAt(0).toString(16) }) } 您可以將它應用於要添加到 URL 中的每個參數。...

如何使用 JavaScript 獲取明天的日期

如何使用 JavaScript 獲取明天的日期呢？ 前幾天我遇到了這個問題。 於是我對 Date 對象進行了一些測試，特別是使用了它的 getDate() 和 setDate() 方法。getDate() 方法返回當前日期，而 setDate() 方法設置當前日期。 以下是獲取明天日期的步驟： 首先，使用 new Date() 獲取當前日期。 通過將日期加 1 來設置新的日期。 完成！ 使用 setDate() 方法傳遞 <今天>.getDate() + 1 的結果，即可設置日期為「明天」。 如果日期是 31（在有 31 天的月份），而你在當前日期上使用 setDate() 方法加 1，日期將變為下個月的第一天。或者，如果是 12 月 31 日，那麼日期將變為下一年的 1 月 1 日。 以下是示例代碼： const today = new Date() const tomorrow = new Date(today) tomorrow.setDate(tomorrow.getDate() + 1) tomorrow 現在是代表明天日期的 Date 對象。時間不會改變，仍然是你執行命令的時間加上 24 小時。 如果你還想將時間重置為「明天的 00:00:00」，可以通過調用 tomorrow.setHours(0,0,0,0) 來實現。

如何使用 JavaScript 類別

在 2015 年，ECMAScript 6 (ES6) 標準引入了類別。這篇文章將教你如何使用類別。 JavaScript 有一種相對不常見的方式來實現繼承：原型繼承。雖然我認為原型繼承是很好的一種方式，但它與其他流行的程式語言實現的繼承方式不同，後者是基於類別的。 來自於 Java、Python 或其他語言的人很難理解原型繼承的細節，因此 ECMAScript 委員會決定在原型繼承的基礎上添加糖衣語法，使其類似於其他流行語言中基於類別的繼承方式。 重要的是：JavaScript 在底層仍然保持相同，你仍然可以以正常的方式訪問對象原型。 類別定義 以下是一個類別的示例： class Person { constructor(name) { this.name = name } hello() { return 'Hello, I am ' + this.name + '.' } } 類別有一個識別符，我們可以使用 new ClassIdentifier() 來創建新對象。 當對象被初始化時，將調用 constructor 方法，並傳入任何參數。 類別可以有任意數量的方法。在這個例子中，hello 是一個方法，可以在所有由這個類別派生的對象上調用： const flavio = new Person('Flavio') flavio.hello() 類別繼承 一個類別可以繼承另一個類別，在使用該類別初始化的對象將繼承兩個類別的所有方法。 如果被繼承的類別和繼承的類別中有同樣名稱的方法，最近的方法將優先執行： class Programmer extends Person { hello() { return super.hello() + ' I am a programmer....

如何使用 macOS 终端

终端是编程装备中不可或缺的一员。它允许您执行其他无法实现的任务。 您可以在 Spotlight 中搜索 Terminal，或者转到 应用程序 文件夹，打开 实用工具 子文件夹，找到 终端 应用程序。 打开后，您会看到以下屏幕，或者非常相似： bash-3.2 指示了 shell 的类型和版本。在这里出现了一个新词 - shell。什么是 shell？Shell 是一种允许我们与操作系统及其应用程序进行交互的程序。 注意：当前 macOS 自 Catalina 版本开始使用 zsh。这个教程与此无关。 有不同类型的 shell，Bash 是最受欢迎的之一。有些人使用 Fish（像我一样），有些人使用 Z Shell，还有其他类型的。 Shell 基本上是允许我们输入命令的程序。 文件系统命令 我们可以从输入 ls 命令开始，当我们按下 Enter 键后，shell 会显示当前文件夹中的文件。 Shell 通常从您的主文件夹开始，这在 Mac 上位于 /Users/yourname。 我们如何知道我们当前在哪个文件夹中？您可以使用 pwd 命令获取当前文件夹的路径。 您可以使用 cd 命令更改当前文件夹。 如果只输入 cd，shell 将返回到您的主文件夹。 您可以使用 mkdir 命令创建新文件夹。 运行命令 在 shell 中，您可以访问计算机上安装的所有程序和文件。非常丰富的资源。 您可能需要执行的一个任务是在 Node 和 JavaScript 中进行编程时使用 npm。 npm 不是一个开箱即用的命令，您需要从 https://www....