web development

我花了 2 個多月開發了一個用來提供 JavaScript 課程的 web 應用程式。它是使用 Next.js、NextAuth.js、Prisma、SQLite 等優秀技術構建的。 然後我意識到我失去了對重要事物的關注，那就是內容。 於是我將它轉換為 Notion 網站。 這就是它的外觀： 我在過去幾年中有時使用 Notion，但今年夏天的一天，我決定全力以赴。 我將我生活中的一切都添加到了 Notion 中，並且擺脫了多個重疊的應用程式。 然後我發現你可以將任何頁面共享為網站。 在 Web 上共享一個頁面可以讓 Notion 成為我見過的最好的內容管理系統。我見過很多系統，但它是如此容易更新頁面，幾乎是即時的，非常新鮮。 而且還有一些工具在此基礎上提供了一些功能增強，比如 Super 或 Potion。這些工具讓你可以創建快速、靜態的網站。 在我的自定義解決方案中創建網站和內容之後，我開始將所有東西都搬到 Notion 上，並且非常開心。 這是我第一個使用這種技術棧的課程。 對於之前的課程，我使用了使用 Hugo 構建的靜態網站，但是升級到更高的層次很好。 我是一位開發人員，但我並不總是需要編碼。 在製作東西時，無代碼或低代碼是一個很好的幫助。 我還在考慮使用 Notion 和 Super 來製作落地頁面。它們非常容易通過預製的塊（如價格、推薦評語等）來創建落地頁面，這類似於 Webflow，只是你可以在 Notion 中管理所有內容。 即將推出的 JavaScript 課程將成為第一個測試並使用該系統的課程。和其他一切一樣，這都是一次測試。 我不知道它是否會取得成功。可能會成功，也可能不會。我們拭目以待。問題可能會出現，我會尋找解決方案。然後我會決定是否值得，以及將來是否會再次使用。

有許多在線工具可以幫助您 lint 或格式化程式碼。本文列出了一些對 HTML、CSS 和 JavaScript 最有用的工具。 改進您的JavaScript程式碼的流行專案的官方在線版本 Prettier（格式化程式碼） https://prettier.io/playground/ ESLint（程式碼檢查工具） https://eslint.org/demo JSHint （程式碼檢查工具） http://jshint.com/ 其他語言的工具 CSS http://www.codebeautifier.com/ HTML http://htmlformatter.com/ JSON https://jsonformatter.curiousconcept.com/ https://jsonformatter.org/ GraphQL http://toolbox.sangria-graphql.org/format 通用工具（能處理不止一種語法） https://ctrlq.org/beautifier/

理由一，JavaScript是建構網站的主要語言。 網站是在網路上進行任何事情的頭號工具。每家公司都需要一個網站或電子商務網站，每個新業務也都會需要一個。 理由二，JavaScript是有史以來最受歡迎的語言之一。有很多部落格、課程和書籍可以幫助你解決任何問題。 理由三，相較於其他程式語言，JavaScript實際上非常容易學習和撰寫。 理由四，由於JavaScript的普及，你可以找到很多JavaScript開發人員的工作。 遠程工作越來越普遍，公司很難找到有能力的JavaScript開發人員，因此如果你正在尋找工作，這是一個完美的選擇！

在什麼情況下使用Node.js是一個好主意？為什麼選擇Node.js而不是其他解決方案？本文旨在回答這個問題。 在建立任何類型的軟件時，都有大量的Node.js替代方案。 為什麼Node.js是一個好選擇？ 在本文中，我將告訴你一些使用它的好理由。 Node.js是JavaScript JavaScript可能是世界上最受歡迎的編程語言。 JavaScript是唯一一種可以運行在Web瀏覽器中的語言，這使得它比任何其他語言都具有獨特的優勢。 隨著React Native、Electron和類似的解決方案的崛起，它也是唯一一種可以用來創建網絡應用、前端和後端、手機應用、桌面應用的語言。 它非常通用，一旦你在某個領域掌握了JavaScript語言，你的技能可以很容易地轉移到另一個領域，你只需要學習環境的差異（例如，如何使用React Native而不是Electron，或者DOM）。 這是你在其他地方找不到的。 此外，JavaScript是一門非常出色和靈活的語言。 如果你已經因為在瀏覽器中工作而熟悉JavaScript，那麼選擇Node.js就是显而易见的。 Node.js是事件驅動和單線程的 這是什麼意思？簡單來說，它可以很好地處理大量的負載。 每個Node.js程序都可以處理大量的並發連接，由於其非阻塞的I/O特性，仍然非常快速。 這意味著你擁有一切必要的工具來構建一個非常高效的系統。 Node.js非常受歡迎 這帶來了一些副作用。 首先，你會發現在線上討論任何類型的問題時都能找到解決方案。社區非常龐大且樂於助人。 它很容易入門，並且有很多可以學習的資源。 其次，有一個庫可以解決任何問題。 npm庫中有大量可以隨時使用的庫，只需運行一個簡單的npm install命令即可。 由於其受歡迎程度，一個惡性循環形成：你最喜歡的API可能只提供一個官方的Node.js庫，而其他語言可能根本就不被考慮，只能使用非官方的軟件包（質量不一）。 你可以輕鬆部署Node.js應用 有些編程環境需要專用的設置，即使是簡單的項目也是如此，因為沒有人為它們建立生態系統。 Heroku以簡化Rails應用程序開發而聞名，如今在Node.js中我們也有其他可比擬的解決方案。 我考慮的是Zeit Now。 當我需要一個能夠輕鬆設置一個示例Node.js應用程序並與世界共享的場所時，我會想到Glitch（提示：它也可以運行私有應用程序）。

技術世界充滿了各種縮寫，很難將它們全部記住。 以下是網頁開發和相關領域中的一些常見縮寫： AI 人工智慧（Artificial Intelligence） AJAX 非同步 JavaScript 與 XML（Asynchronous JavaScript And XML） API 應用程式介面（Application Programming Interface） AWS 亞馬遜網路服務（Amazon Web Services） CD 持續佈署（Continuous Deployment） CDN 內容傳遞網路（Content Delivery Network） CI 持續整合（Continuous Integration） CLI 命令列介面（Command Line Interface） CMS 內容管理系統（Content Management System） CORS 跨來源資源共用（Cross Origin Resource Sharing） CRUD 建立、讀取、更新和刪除（Create, read, update, and delete） CSS 層疊樣式表（Cascading Style Sheets） CTA 呼籲至動作（Call To Action） DDD 領域驅動設計（Domain Driven Design） DNS 網域名稱系統（Domain Name System） DOM 文件物件模型（Document Object Model） DRY 不要重複自己（Don’t Repeat Yourself） FTP 檔案傳輸協定（File Transfer Protocol） GA 谷歌分析（Google Analytics） GCP 谷歌雲端平台（Google Cloud Platform） GNU GNU’s Not Unix（GNU’s Not Unix） GPL 通用公共許可證（General Public Licence） GUI 圖形使用者介面（Graphical User Interface） HTML 超文件標記語言（HyperText Markup Language） HTTP 超文本傳輸協定（Hyper Text Transfer Protocol） HTTPS 超文本傳輸安全協定（Hyper Text Transfer Protocol Secure） IAAS 基礎設施即服務（Infrastructure As A Service） IDE 整合開發環境（Integrated Development Environment） IE 網際網路瀏覽器（Internet Explorer）（已停止更新） IP 網際網路協定（Internet Protocol） JSON JavaScript 物件表示法（JavaScript Object Notation） KISS 保持簡單愚蠢（Keep It Simple Stupid） LTS 長期支援（Long Term Support） MDN 莫茲拉開發者網絡（Mozilla Developer Network） ML 機器學習（Machine Learning） MVC 模型-視圖-控制器（Model View Controller） MVP 最小可行產品（Minimum Viable Product） NPM Node 套件管理員（Node Package Manager） OOP 物件導向程式設計（Object Oriented Programming） OSS 開放原始碼軟體（Open Source Software） PAAS 平台即服務（Platform As A Service） PHP PHP 超文字預處理器（PHP Hypertext Preprocessor） PR 拉取請求（Pull Request） REPL 讀取-執行-輸出-環迴（Read Execute Print Loop） REST 表徵狀態傳輸（REpresentational State Transfer） RPC 遠程過程呼叫（Remote Procedure Call） SAAS 軟體即服務（Software As A Service） SEO 搜尋引擎優化（Search Engine Optimization） SFC 單檔案元件（Single File Component） SFTP 安全檔案傳輸協定（Secure File Transfer Protocol） SMTP 簡單郵件傳輸協定（Simple Mail Transfer Protocol） SPA 单页应用（Single Page Application） SQL 結構化查詢語言（Structured Query Language） SSH 安全殼層（Secure SHell） SSL 安全套接層（Secure Socket Layer） TCP/IP 傳輸控制協定/網際網路協定（Transmission Control Protocol/Internet Protocol） TDD 測試驅動開發（Test Driven Development） TLD 頂級網域（Top Level Domain） TLDR 太長不讀（Too Long Didn’t Read） VPN 虛擬私人網路（Virtual Private Network） VPS 虛擬私人伺服器（Virtual Private Server） W3C 世界廣泛網 (W3) 協會（World Wide Web (W*3) Consortium） WET 寫兩次所有（Write Everything Twice） WYSIWYG 所見即所得（What You See Is What You Get） XML 可延伸標記語言（Extensible Markup Language） XSS 跨網站指令碼（Cross Site Scripting） YAGNI 不需要就別加（You Ain’t Gonna Need It）

我已經在這個博客上寫了很長一段時間了。在這段時間裡，我涵蓋了許多不同的主題。 回顧往事，我從一些隨機的 Web 開發主題開始，然後專注於 Go、React、Node.js、CSS、HTML、瀏覽器 APIs、Next.js、Vue.js、Svelte、數據庫、Python、Swift，甚至電子學和 C 語言。 有時候，當我有希望寫一些與我通常所寫的主題不同的內容時，我會考慮一下。 這是我的博客，它不是一本名為“Web 開發”或其他類似的出版物。 儘管如此，當你長時間寫關於一個主題時，即使是像我這樣涵蓋了廣泛範圍的主題，你也會開始覺得自己與讀者之間有一個“合約”。 如果我決定寫關於 X 的內容而讀者對此不感興趣，會發生什麼事呢？他們會停止閱讀或關注這個博客嗎？他們會取消訂閱郵件通訊嗎？ 除非你完全偏離了主題，否則幾乎從不會有這種情況。 你讀到了上面的主題列表嗎？它們之間幾乎沒有什麼相關性，除了它們都與編程有關。但是一位 React 開發者對於 C 語言或 CSS 沒有興趣。 因此，廣泛的專業領域是編程，在這個領域下我可以寫關於任何事情。 如果我開始寫關於園藝、狗、或者徒步旅行之類的內容，那就不一樣了。 有時候我會談論商業方面的事情，或者內容的製作，但這些都是相關的。 我考慮過在旅行時寫一些類似“旅遊博客”的帖子，只是為了做些不同的事情。也許有一天我會寫，儘管我不想讓讀者困惑。還有 Google 啊哈哈。 對我來說，規則是寫我想寫的內容。每天寫一篇帖子是關鍵。否則我早就停下來了。如果有一天我想寫關於旅行、烹飪或其他任何事情的內容，我就會去寫。 有時候我寫一篇關於如何為數字遊牧在整個歐洲旅行期間設置我的面包車的帖子，說實話，關於這些主題我獲得了更多的回覆。也許只是因為在他們那個時代這有些不尋常。 我將來要做的一件事是開始寫關於 SwiftUI 和 iOS 開發的內容。我已經考慮了好幾個月了。其實，我想已經有幾年了。 但現在我覺得是合適的時候了。 過去，我決定寫一些我不是非常熱衷的主題，比如數據庫。我對數據庫有多少熱情呢？我開始寫了幾天後就停下來了。 但我想，我可以寫一些我對於 iOS 應用的想法，計劃階段，開發過程，上架 App Store，等等的內容，這可能是我的一部分讀者非常感興趣的內容。 也許他們也有一個 iOS 應用的想法，這可能會是他們開始的觸發點。 我是否對 Web 開發厭倦了？絕對不是。而且任何 iOS 應用也需要與 Web 或 API 相應的對應組件，所以這不意味著我會停止寫關於它的內容。 而且我喜歡 JavaScript。 我只是喜歡編程。用代碼創造事物。不管是 Web 應用、iOS 應用還是桌面應用，都無關緊要。 對我來說，改變一下我寫關於什麼的方式只是為了多元化並保持我的能量水平高。 對我來說一直都是這樣。我會工作在一個 Web 應用上，然後轉到 iOS 應用，然後再轉到 macOS 開發，然後再回到 Web 應用。...

在使用Next.js連結兩個頁面中，我提到了如何使用Link Next.js組件在兩個頁面之間建立連結。當您使用它時，Next.js會透明地處理前端路由，當用戶點擊鏈接時，前端會負責在無需觸發新的客戶端/服務器請求和響應循環的情況下顯示新頁面，這通常是網頁的情況。 當使用Link時，Next.js為您做的還有一個事情。 只要使用<Link>包裹的元素出現在視口內（這意味著對於網站用戶而言是可見的），Next.js就會預取它指向的URL，只要它是本地鏈接（在您的網站上），使應用程式對於查看者來說極快。 這個行為只在生產模式下觸發（稍後我們將詳細討論這個），這意味著如果您使用npm run dev運行應用程式，您必須停止應用程式，使用npm run build編譯生產束，然後使用npm run start運行它。 使用DevTools中的網絡檢查器，您會注意到在頁面加載時，位於折疊部分以上的所有鏈接都會在load事件在您的頁面上觸發後（在頁面完全加載後觸發，且在DOMContentLoaded事件之後）開始預取。 任何其他不在視口內的Link標籤將在用戶滾動並且它可見時被預取。 預取在高速連接上是自動進行的（Wi-Fi和3G+連接，除非瀏覽器發送Save-Data HTTP標頭）。 您可以通過將prefetch屬性設置為false來取消對個別Link實例的預取： <Link href="/a-link" prefetch={false}> <a>一個鏈接</a> </Link>