使用CSS很容易根據系統是否處於暗模式來進行更改，只需使用prefers-color-scheme媒體特性。 如果您想了解更多關於暗模式的資訊，請查看我在暗模式的博客文章。 今天我遇到了一個問題 - 如何更改HTML中定義的圖片，而不是CSS規則？ 事實證明，有一種純HTML的方法可以做到這一點，而不需要任何CSS或JavaScript。 我們可以使用picture標籤來包裝img標籤： <picture> <source srcset="dark.png" media="(prefers-color-scheme: dark)"> <img src="light.png"> </picture> 如果支援且啟用了暗模式，則將使用dark.png圖片作為img標籤的源。 這個標籤的支援非常好，不支援此標籤或不支援暗模式的舊瀏覽器將回退顯示light.png圖片。 值得注意的是，在任何情況下，瀏覽器不會下載兩張圖片：如果是暗模式，就只會下載dark.png圖片；如果是亮模式，則只會下載light.png圖片，因此不會浪費帶寬。
執行 process.version： process 物件的 version 屬性會返回一個字符串，其中包含當前的 Node.js 版本。 在瀏覽器中，process 物件未定義，所以會產生 ReferenceError： 另一種方式是引用 process.versions（複數）： 這會返回一個包含各個組件版本的物件。 要獲取主要版本（在這個例子中是 12），可以使用以下代碼： process.versions.node.split('.')[0]
使用 Homebrew 安裝舊版本的某個套件可能比你預期的要複雜一些 我遇到了這個問題：我更新了我使用的 CMS - Hugo，其中一個比我使用的版本更新的版本引入了一個破壞性的變更。 我的首頁不再列出博客文章了。我沒有時間弄清楚為什麼，所以我說：“我只需回滾”。 現在的問題變成了.. “怎麼辦？” 首先，我卸載了 Hugo： brew unlink hugo 然後我按照我在這篇文章中找到的指示進行操作。我需要搜索 Hugo 套件公式https://github.com/Homebrew/homebrew-core/search?utf8=%E2%9C%93&q=hugo&type= 然後點擊該文件（Formula/hugo.rb），並點擊History按鈕以查看所有先前的版本。 我找到了我想要的 0.53 版本，並點擊<>按鈕以查看該時間點上的homebrew-core 存儲庫。然後我打開了 Formula/hugo.rb 文件，並點擊Raw以獲取該文件的直接 URL。 然後，我把它用作 brew install 的參數。例如： brew install https://raw.githubusercontent.com/Homebrew/homebrew-core/5441fa16872c9a56bd5997558df45b808f13285b/Formula/hugo.rb 就這樣。 解決我的問題的下一步是卸載當前安裝的版本，並嘗試逐個更新版本，這樣我就可以找出引入了導致問題的變更的發佈版。
這是一個關於如何安裝 Next.js 的逐步指南。 要安裝 Next.js，您需要先安裝 Node.js。 請確保您已經安裝了最新版本的 Node.js。在終端機中輸入 node -v，並將其與 https://nodejs.org/ 上列出的最新 LTS 版本進行比較。 安裝完 Node.js 後，您將可以在命令行中使用 npm 命令。 如果在這個階段遇到任何問題，我建議您參考以下我為您撰寫的教程： 如何安裝 Node.js 如何更新 Node.js npm 包管理器介紹 Unix Shell 教程 如何使用 macOS 終端機 Bash Shell 現在，您已將 Node 更新為最新版本並且擁有 npm，請在任何您喜歡的位置創建一個空文件夾，例如在您的主文件夾中，然後進入該文件夾： mkdir nextjs cd nextjs 接著，創建您的第一個 Next 專案： mkdir firstproject cd firstproject 現在使用 npm 命令將其初始化為 Node 專案： npm init -y -y 選項告訴 npm 使用項目的默認設置，填充一個示例的 package.json 文件。 現在安裝 Next 和 React： npm install next react react-dom 您的專案文件夾現在應該有 2 個文件：...
如何在開發電腦上安裝 React 你該如何安裝 React？ React 是一個函式庫，所以說「安裝」可能聽起來有點奇怪。也許「設置」是一個更好的詞，但你懂得概念。 有多種方式可以設置 React，以便在你的應用程式或網站中使用。 在網頁中直接載入 React 最簡單的方法是將 React 的 JavaScript 檔案直接添加到網頁中。當你的 React 應用程式與現有頁面上的元素互動時，而不是控制整個導航方面時，這是最佳選擇。 在這種情況下，你需要在 body 標籤的末尾添加兩個 script 標籤： <html> ... <body> ... <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js" crossorigin ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js" crossorigin ></script> </body> </html> 在連結中的 16.7.0-alpha.2 版本表示當前最新版本的 16.7 alpha（在撰寫本文時）。請將其更改為可用的最新 React 版本。 在這裡，我們載入了 React 和 React DOM 兩個庫。為什麼會有兩個庫呢？因為 React 完全獨立於瀏覽器，可以在瀏覽器之外使用（例如，在 React Native 上使用於移動設備）。因此需要 React DOM 來添加瀏覽器的包裝。 在這些標籤之後，你可以載入使用 React 的 JavaScript 檔案，或者甚至在 script 標籤中內嵌 JavaScript： <script src="app.js"></script> <!-- or --> <script> //我的應用程式 </script> 使用 JSX 需要多一個步驟：載入 Babel...
如何在您的系統上安裝Node.js：使用套件管理器、官方網站安裝程式或nvm 您可以使用不同的方式來安裝Node.js。 讓我向您展示最常見和方便的方法。 所有主要平台的官方套件可在https://nodejs.org/en/download/上找到。 在這裡，您可以選擇下載LTS版本（LTS代表長期支援版）或最新可用版本。像往常一樣，最新版本包含了最新的好東西。 該網站提供了Windows、Linux和macOS的套件。 一種非常方便的安裝Node.js的方式是通過套件管理器。在這種情況下，每個操作系統都有自己的套件管理器。 在macOS上，Homebrew是事實上的標準，一旦安裝完成，就可以通過在命令行界面中運行以下命令來輕鬆安裝Node.js： brew install node Linux和Windows的其他套件管理器列在https://nodejs.org/en/download/package-manager/上。 nvm是一種常用的運行Node的方式。它允許您輕鬆切換Node版本，並安裝新版本以進行嘗試，並在發生問題時輕鬆回滾，例如。 這也非常有用，可以使用舊的Node版本測試代碼。 有關此選項的更多信息，請參見https://github.com/creationix/nvm。 我的建議是，如果您剛開始使用並且尚未使用Homebrew，請使用官方安裝程式。否則，Homebrew是我最喜歡的解決方案，因為我可以通過運行brew upgrade node輕鬆更新Node。 無論如何，安裝Node後，您將可以在命令行中使用node可執行程序。
您可以從https://redis.io/download下載最新版本的Redis。 Redis可以安裝在任何伺服器上。在此我們將在本地安裝以進行測試。 在macOS上，使用Homebrew安裝更簡單。運行以下命令： brew install redis 然後運行： brew services start redis 以使Redis在計算機重新啟動時自動啟動和重新啟動。 您也可以使用以下命令手動啟動： redis-server /usr/local/etc/redis.conf 在Linux Ubuntu上，您需要運行以下命令： sudo apt-get install redis-server Redis將自動啟動並運行。 一旦啟動，Redis將監聽端口6379。 在本地伺服器上運行時，無需密碼即可運行。但當Redis暴露在互聯網上時，請確保在redis.conf配置文件中設置密碼，其位置取決於您的操作系統。
一個逐步指南，成為全端開發人員 成為全端開發人員是在科技領域擁有穩固職業的好途徑。 在這篇教程中，我想要和您談談成為全端開發人員所需的所有步驟。 首先，什麼是全端開發人員？ 全端開發人員是網頁工程領域中的一個特定範疇。 傳統上來說，網頁上我們總是有前端開發人員和後端開發人員。有時候他們也被稱為前端工程師和後端工程師。 前端開發人員通常負責CSS、HTML、JavaScript。他們也是React/Vue/Angular開發人員。後端開發人員通常負責API、資料庫、伺服器端的擴展。在大型團隊中，DevOps負責後端更多配置、設置和維護部分。 全端開發人員負責的是前端開發人員和後端開發人員之間相互重疊的技術和程序。 他們以水平方式擴展主題列表，而不是從垂直角度進入每個主題並深入研究。 相比前端開發人員，全端開發人員對於完美且具有較高性能的CSS選擇器的內幕了解可能較淺，但他們在其他領域更加瞭解。 全端開發人員可能在為網頁應用程序提供支持的React應用程序上工作，同時創建API並管理資料庫。 全端開發人員的需求量大嗎？ 絕對大量。需求很高。看看RemoteOK.io的全端標籤。 全端開發人員是通才。公司總是需要通才的人，那些能夠負責一部分程式碼庫的人。 通才不會說“我不碰API，那是後端開發人員的工作”。通才不會拒絕學習React，只因為這不是他們的專長領域。 是的，通才有時可能學習與他們的主要職業或喜愛的技術看似無關的事情，但隨著時間的推移，他們增加了對公司的價值，因為他們知道如何將許多不同的技術堆疊融合在一起。 當然，也需要專家。 一些公司，像是初創公司，可能更願意雇用通才，因為也許您是第三位被僱用的人，每個人都需要做所有的事情。 一些更成熟的公司可能只聘請專家，因為他們需要填補那個職位，而且他們還有其他專門人員。 這完全取決於公司對新招聘者的目標。 製作者和獨立開發者都是全端開發人員 我來自一個獨立開發者的背景，這基本上意味著我自己開發應用程序和產品。 在這種情況下，您通常是一位全端開發人員。您從零開始建立應用程序並進行發布和維護。 如果您是這種情況下的人，那麼您的知識對於初創公司和小型公司真的非常有價值，因為您在許多不同的領域都有很多經驗。包括設計、用戶體驗和營銷。 我需要知道什麼才能成為一位全端開發人員？ 涉及到的主題的確切列表取決於您對全端開發人員的定義。這不是一成不變的（不幸的是！）。 有些人認為成為全端開發人員需要掌握以下知識： HTML、CSS和JavaScript Rails和Ember Laravel和Vue.js React和Node.js 所有這些定義都是正確的。 這取決於您偏好的技術堆疊。 我對全端開發人員的定義是： 計算機網絡和互聯網/網頁運作的基礎 HTML CSS JavaScript 基礎知識 如何使用DOM Web平台API的基礎知識 Node.js 和 Express React 點擊這些鏈接以了解更多有關每個具體事項的信息，因為我在這些主題上都有詳細文章。 當然，您可以使用任何其他Node.js服務器框架替換Express，並使用任何前端框架替換React。 如何成為一名全端開發人員？ 對於“我該如何成為全端開發人員？”這個問題，我的答案是：需要時間和努力。學習技術是一個開始。下載我寫的所有電子書，並閱讀它們。參加在線課程。 然後，最重要的是要多練習您所學的技術。 我推薦的練習方式是參加100天的程式碼挑戰。這是一個挑戰，要求您每天至少編寫1小時的程式碼並創建出色的小型項目。 隨著時間的推移，您的技能會提高，項目的複雜度也會增加。 或者，您也可以直接開始您有想法的項目，這個在明年會推出的大型應用程序。激勵動力始終是關鍵，因此以完成一個大型項目的目標開始可能對您的進展有益。
我决定自己托管我的网站分析数据。 为什么这样做呢？ 作为一个人生原则，我倾向于不自托管自己的“东西”，除非其优点远远超过了缺点。 首先，自托管的缺点是显而易见的，那就是“从现在开始，这是我需要担心的事情”。将这个负担交给其他人是很棒的，尤其是当你只使用免费方案时。 我也乐意支付费用，别误解我的意思。 但有时成本是无法接受的。 就像我的电子邮件通讯。当寄出的数量很大时，托管解决方案的费用就太高了。 另外，就网站分析而言，当页面浏览量相当大时，托管解决方案的价格也可能变得很高。 所以，我决定自建自己的分析解决方案。 在支付了一年的Plausible用户订阅费用后，我决定这样做。我在一段时间内测试了他们的托管选项，针对一些较小的网站，我还想托管我的主要网站，也就是这个博客，但是..托管方案对于这个博客来说太昂贵了。我不介意支付那笔年度订阅费用，因为我认为支持这个项目是好的。 但是如果我为此付费每月70美元的话，我就会认为这不是“那么”有用的信息了。 我喜欢看网站分析，但1,000美元的费用有些太高了。 而且只需要每月4美元就可以了，使用DigitalOcean Droplet（虚拟专用服务器）（实际上是免费的，因为我有时在链接到他们时会放一个推荐链接，这样可以获得充足的免费资源）。 需要注意的一点是，我说的是DigitalOcean Droplet，而不是DigitalOcean应用程序平台，主要是因为应用程序平台的价格从每月5美元起，但不提供数据库，所以你需要自带数据库，而DigitalOcean在其“托管数据库”提供中提供此服务，但价格是15美元/月。 介绍完毕，现在我们来逐步解释。 如果你还没有DigitalOcean帐户，请先创建一个。 使用我的DigitalOcean推荐链接注册，即可在接下来的60天内获得价值200美元的免费信用。 然后创建一个新项目。 侧边栏点击 新建项目： ！ 输入一个名称，比如“Analytics”。 在“告诉我们它的用途”框里选择一个选项，否则无法创建项目。然后点击 创建项目。 在下一个面板点击 立即跳过。 ！ 项目现在已经创建成功。 然后点击第一个元素“启动Droplet”，Droplet是DigitalOcean对虚拟专用服务器（Virtual Private Server）的术语： ！ 这将显示创建新Droplet的界面。 选择一个区域。通常选择接近大多数用户的区域。作为一个欧盟人，出于法规的原因，我希望所有数据都保持在欧盟，所以我选择了一个欧洲服务器。 ！ 接下来，你可以选择一个镜像，将其部署到Droplet上。 ！ 点击 Marketplace 标签： ！ 我看到了“Docker”在推荐列表中。如果你没有看到，可以搜索并选择它。 ！ ！ 或者，你也可以使用另一个Linux Droplet并在其中安装Docker。 我们使用Docker是因为Plausible是通过Docker进行自托管的。 像这样的项目通常会提供Docker安装程序，因为他们只需要管理一个环境，而且对你而言，出错的可能性更小。 如果你对Docker还不太熟悉，请不要担心。 我会逐步解释每个步骤。 同时，可以查看我的Docker介绍。 现在我们继续。我们需要为Droplet选择一个大小。请注意，DigitalOcean默认情况下真的希望你选择一个快速的Droplet 😅，但在CPU选项下请选择“常规”： ！ ！ 然后点击左箭头或“显示所有计划”以查看所有计划： ！ 你应该能够选择每月4美元的计划。 在我编辑这篇教程的时候，某种原因下，该计划当前不可用。 所以我选择的是每月6美元的计划： ！ 然后往下滚动。 我使用SSH密钥设置了我的身份验证方法，如果你已经完成了这个设置，很棒，你可以使用它。但是我不想让这个教程太长，所以我们将只使用密码进行身份验证。 为root用户选择一个密码，并将其安全地保存在某个地方： ！ 最后，点击 创建Droplet： ！...
我在我的部落格上有很多長青內容。本教程將解釋我如何自動化在Twitter上重複使用這些內容的過程。 我定期在我的部落格上發表長青內容。所謂長青指的是內容不會關於新聞或最近的事件，而是即使今天有效，一年後，甚至五年後，如果我繼續進行更新以防止信息過時，它仍然有效。 每次我撰寫新的部落格文章時，我都會在Twitter上分享它，如果我的少數幾位絕妙的追隨者（👋）沒有在那裡看到它，他們可能永遠不會再次看到它，我認為這對我來說是一種不公平（因為我在撰寫該部落格文章時花了很多時間） ，對可能通過該文章學到新知識的人也是一種不公平。 我有時會不時分享一篇舊文章，但這是一個手動過程。我必須記得這樣做，而且我還必須記錄我已經分享過的內容，以避免再次發佈相同的內容。 因此，我想在這個問題周圍創建一個小小的自動化，以在我睡覺的時候每天發佈2篇舊文章。 我知道有一些服務可以做到這一點，但是-嘿-我們是開發人員，開發人員會建立自己的工具 😄 棧 在Airtable上托管數據 在Glitch上創建Node.js應用程序 依賴項 初始化Airtable 分頁查詢該表的記錄 處理所有帖子 進入Express 一切正常！ 使用IFTTT自動發布 棧 我想創建一個應用程序，從列表中查找我要重複使用的帖子，當我調用特定的URL時，它會分享一篇隨機的帖子，總是選擇一篇不久前分享的帖子。 應用程序將基於Node.js，托管在Glitch上。我經常在教程中使用Glitch來進行代碼示例，它非常好用！ 你不僅僅可以創建小型演示，還可以創建一個完整的Node.js應用程序，這對我的需求來說非常合適。儘管應用程序在幾個小時的不活動後關閉，但是一個HTTP請求就可以喚醒它。 最後一個謎題是決定在哪裡托管數據。我想要一個容易訪問的服務，不需要繁瑣的權限和授權設置，所以我選擇了Airtable。 在Airtable上托管數據 Airtable是一個類似於電子表格和數據庫的混合體。您可以非常輕松地添加數據，也可以通過API很容易地導出數據。 我創建了一個簡單的底部來保存帖子表： 它有以下列： 標題：帖子標題 鏈接：帖子鏈接 已分享：如果該帖子最近已經分享過了 禁用：如果選中，則該帖子將不會被 分享。有用的"暫停"內容 描述：可選的文字，將在標題之後，在鏈接之前分享在Twitter上 我在表中填充了一些帖子。您可以 我將使用這個表作為數據源，並使用Node.js API進行訪問。Airtable.js是官方的JavaScript庫。 Airtable的一個很酷的功能是API文檔是動態的，並且根據您的表的鍵和ID進行個性化，因此您可以直接將代碼放在應用程序中。 它還更進一步，提供您使用的確切字段以及實時內容： 這本身就很神奇，我希望更多的服務在他們的API文檔中也做這樣的好事。 現在，進入Glitch！ 在Glitch上創建Node.js應用程序 我在Glitch上構建的Node.js應用程序需要與Airtable和Twitter通信。 這是完整的應用程序：https://glitch.com/edit/#!/flavio-repurpose-old-posts-twitter Glitch提供了一個很好的功能，允許您在共享項目時將密鑰和參數保密，方法是將它們放在.env文件中。 我設定了Airtable訪問的密鑰： AIRTABLE_API_KEY AIRTABLE_BASE_ID AIRTABLE_BASE_NAME AIRTABLE_VIEW_NAME 以及Twitter的鍵： TWITTER_CONSUMER_KEY TWITTER_CONSUMER_SECRET TWITTER_ACCESS_TOKEN TWITTER_ACCESS_TOKEN_SECRET 這些Twitter參數是由Twitter Apps面板提供的。創建一個應用程序以獲取消費者密鑰和秘密，並通過單擊生成一個個人訪問令牌。 應用程序以此構建。在Node.js代碼中，通過process.env可以訪問.env值。 依賴項 應用程序使用 Express.js Airtable.js Twit 我使用方便的添加套件功能將它們添加到Glitch中，該功能在打開package.json文件後可用。 初始化Airtable 讓我們開始： const base = require('airtable').base(process.env.AIRTABLE_BASE_ID) 通過在基底上調用select()方法，Airtable返回一個查詢對象。...