我將我的Raspberry Pi安裝為全網廣告攔截器，使用Pi-hole。 它運作得很好。 有時候必須更新Pi-hole的軟體，因為會有新版本釋出等等。 你可以在Pi-hole管理介面底部看到這個通知： 你可以手動更新它，透過在Raspberry Pi上登入，可以使用VNC或SSH，然後執行以下指令： pihole -up 然後，版本就會更新： 你可以設定一個腳本，使用cron job定期自動執行pihole -up。 執行crontab -e，然後在最底下加入： 0 6 * * * pihole -up 這樣它就會在每天早上6點自動執行。
我有幾個基於Ubuntu的VPS，並且我在日曆上設定了提醒，定期登錄並更新套件以及進行安全修補。 以下是我使用的步驟（這主要是給我自己下次忘記時參考的筆記）： 以root身分連接到伺服器，然後執行以下指令： apt-get update 以獲取套件索引的最新更新。 然後執行以下指令： apt-get upgrade 實際上更新套件。 最後，如有必要（取決於需要更新的套件類型），重新啟動系統： reboot
我使用了以下的 Shell 腳本： #!/bin/bash for dir in \*/; do cd "$dir" if [ -f package.json ]; then rm -rf node\_modules npx ncu -u npm update fi cd .. done
有时候我会收到一些人给我的邮件，他们在从学习编程到真正成为开发者的过程中遇到了困难。 这个过程通常是从某种课程开始的。 也许是一个视频课程，也许你只是开始跟着YouTube上的一些教程学习。 你构建了你的第一个应用，然后是第二个应用。 你不断地重复这个过程，从超简单的应用到更复杂的应用。 首先要注意的是，这需要时间，正如我在一篇独立的文章中所写的那样。 从学会编程到精通它没有简单捷径，你必须花费无数小时在电脑、平板上，阅读书籍，观看教程，通过谷歌搜索寻找解决问题的答案。 在某个时候，你会感到足够有能力了。你知道如何跳过空白的文件，你有一个应用程序组合，可以回顾你如何构建它们。 当你遇到问题时，你可能以前遇到过这个问题，所以你试图记起你是如何解决它的。 你可能有一个可以独立完成的项目的想法。这是我强烈推荐的做法：从一个想法开始并付诸行动。 例如，我现在正在重新学习Swift，并首次学习SwiftUI。我想构建一个iOS应用程序，而iOS与Web开发有很大的差异。 我正在按照上面提到的方法进行。 我每天花几个小时观看教程，然后在其实现的示例应用程序上进行工作的余下时间。 我正在努力熟悉这个技术，工具，以及Swift编写的代码与多年日常使用的JavaScript相比是如何工作的。 那么我要如何从在线观看视频教程转移到参与真正的iOS应用程序开发呢？ 我知道有一天我会有一个项目想法。我已经写下了很多项目想法，但总有一天我会跳出来并开始着手一个项目。 也许是一个非常简单的项目。 例如，我曾想知道为什么没有一个简单的“计数器”应用程序，你需要计数某件事情，所以你只需按下一个按钮，应用程序会记住计数。 我可能会着手开发这个。 当然，我肯定会遇到问题和难题。我会返回谷歌寻找解决方案，或者去找我已经有的项目。 但是我会一直前进着。 通过完成1、2、3个简单的项目，我会感到准备好去做一些更困难的事情。也许涉及使用传感器或使用网络。 你的目标可能是能够开发应用程序或网站。为自己，为朋友，为公司。 或者你可能想被一家公司雇佣。对于这种情况，难度较大，因为公司通常在招聘时都希望找到有经验的人才。即使是初级职位，他们也想看到你是否已经有过成果。 假设你不是一名刚刚从学校出来拥有计算机科学学位的人，情况就不同了。但对其他人来说，我建议两件事情。 首先，编写自己的作品集。网站、网络应用、应用程序，无论是什么。 发布好的作品。不要只是随便做10个项目然后把它们加入你的简历中。与其有很多小项目，不如有一个你关心并花了1年时间的项目。 然后，让自己被看到。当地的公司一直在寻找人才。参加他们组织的活动，当地的聚会。通过人际关系寻找一个地方公司通常比在线找工作容易得多。 你有作为开发人员工作的朋友、家人或朋友的朋友吗？与他们会面聊聊。从小事情做起，有一天大事情就来了。尽量看看你是否有任何捷径与一家公司取得联系。 当我被问及如何成为一名开发者时，这就是我的建议。每个人的情况都不一样。有些人只是开始了一个项目，它变成了他们的职业，无需为别人找工作。 我开始写博客，那时我还是个大学生，毕业后我立即开办了自己的公司，为一款热门的内容管理系统提供定制服务。在线上，因为我不想生活在城市里。由于博客，我已经有人向我求助，所以那是我开始的方式，回到了2008年。 对我来说不是理想的工作，但后来公司与我取得了联系，我成为了一家公司的合同工，然后是另一家公司，然后我也开始进行自己的软件项目开发。
我有一個水平的項目列表，當一行文字有 2 行時，會有一些額外的空間，並且其 flex 兄弟元素會延伸到整個高度。 這是原始碼： <li class="flex"> <code class="flex-none text-sm whitespace-normal mr-2 mt-0.5 bg-white text-black p-1 "> {new Date(post.date).toString().slice(4, 11)} </code>{' '} <code class="flex-none text-sm whitespace-normal mr-2 bg-black text-white border p-1 "> {post.tag} </code> <a href={'/' + post.url + '/'}>{post.title}</a> </li> 為了修復這個問題，我在 code 區塊中添加了 self-start 類別，這在 Tailwind CSS 中應用了 CSS align-self: start;。
我想在我的 HTML 页面上的兄弟元素之间创建一个分隔。 我有一个想法，可以将它们包装在section标签或div中，并在该元素的顶部和底部应用外边距。 另一种方法是不改变整体的 HTML 结构，而是使用一个标签作为分隔线。 所以我使用了一个 hr 标签，它在语义上表示段落级别标签之间的主题性断裂。 我使用以下样式来使它不可见，但仍然占用空间： hr { margin-top: 100px; border: none; }
CSS 可以用來為列表添加多種樣式。 list-style-type 屬性用於設置列表所使用的預定義標記： li { list-style-type: square; } 這裡有很多可能的取值，你可以在這裡查看 https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type，其中包含了它們的外觀示例。其中一些最受歡迎的取值包括 disc、circle、square 和 none。 list-style-image 屬性用於在預定義標記不適用時，使用自定義圖片作為標記： li { list-style-image: url(list-image.png); } list-style-position 屬性允許將標記放置在列表內容的 outside（默認）或 inside ，在頁面的流動中而不是頁面外： li { list-style-position: inside; } list-style 這個縮寫屬性讓我們可以在同一行中指定所有這些屬性： li { list-style: url(list-image.png) inside; }
學習如何使用 CSS 將項目固定在容器底部 這是一個相當常見的需求，我最近也遇到了這個問題。 我曾經嘗試使用 bottom: 0 給目標元素設定位置，希望將其固定在父元素的底部。 後來發現我漏掉了兩件事：在目標元素上設置 position: absolute，並在父元素上添加 position: relative。 範例代碼： <div class="container-element"> ... <div class="element-to-stick-to-bottom"> ... </div> </div> .element-to-stick-to-bottom { position: absolute; bottom: 0; } .container-element { position: relative; }
了解如何使用 Drag and Drop API 為您的使用者創建交互式體驗 使用 Drag and Drop API，您可以定義頁面中的哪些元素是可拖動的，並在用戶拖動元素時攔截它。 它在現代瀏覽器中得到了很好的支持： 在我們開始研究這個 API 之前，我們必須知道如何定義頁面中的可拖動元素。我們可以通過在頁面的 HTML 中添加 draggable 屬性並將其設置為 true 來實現： <div draggable="true"> ... </div> 這就足以使元素成為可拖動的。 提示：圖片、文字選擇和鏈接默認情況下是可拖動的，除非您在它們上面設置了 draggable 為 false。 我們還可以從用戶計算機中將文件拖動到瀏覽器中。在這種情況下，我們傳輸的是文件。 我們還需要澄清的另一點是元素可以拖放到哪裡。就像我們不能隨意拖動任何元素一樣，我們也不能隨意拖放到任何元素中。元素必須是有效的放置目標。 要使元素成為放置目標，您需要侦聽其 dragover 事件，並根據需要從該事件返回 false 或調用 preventDefault()： const element = document.querySelector('#my-drop-target') element.addEventListener('dragover', event => { event.preventDefault() }) 一旦完成了上述步驟，我們就擁有了一個可拖動元素和一个放置目標，就可以開始進一步操作了。我們可以與可拖動元素交互的事件有： dragstart drag dragend 放置目標上可以交互的事件有： dragenter dragover dragleave drop 拖放操作概述及觸發的事件 當用戶開始拖動一個可拖動元素時，可以進行鼠標點擊並移動鼠標，或者也可以單擊並保持選擇，然後移動選擇區，此時會在元素上觸發 dragstart 事件： element.addEventListener('dragstart', event => { //... }) 傳遞給事件處理函數的 event 對象是一個 DragEvent 對象。它是從更一般的事件對象中擴展出來的，與所有其他事件（鼠標，鍵盤，滾動等）共享。...
一個設置 Firestore 作為資料庫的教程，這是一個非常方便的解決方案，可以解決你的儲存問題！ 我有一個需求，需要為我的 成員俱樂部 創建一個儲存數據的地方，這是我教授編程的地方。 我希望我的用戶可以通過點擊一個按鈕來手動說“我完成了這個課程”。 基本上，我想為每個用戶存儲一個特定的對象。 設置 Firebase 我決定使用 Firebase 以及他們提供的 Firestore 資料庫 來實現這個需求。 它的免費版本是很慷慨的，每個月最多可以存儲 1GB 的數據，並且網絡傳輸量可以達到 10GB，這遠超出了我的預期。 在 Firebase 網站上打開 https://firebase.google.com/ Firebase 是一個由 Google 提供的產品，所以一旦你登錄到 Google，你也就登錄到 Firebase。 通過點擊“創建專案”來創建一個新的 Firebase 專案。 給它一個名字： 然後就完成了： 我點擊了 iOS 和 Android 旁邊的“Web”圖標，然後輸入了應用程序名稱： Firebase 立即給了我需要的訪問密鑰，還附帶了一些示例代碼： 在這之後，Firebase 讓我添加一些數據庫的安全規則。 你可以選擇兩個默認選項：對每個人開放，或對每個人關閉。我選擇了對每個人開放，這是他們稱之為 測試模式。 就是這樣！我準備好了，可以創建一個集合了。 什麼是集合？在 Firestore 的術語中，我們可以創建許多不同的集合，並為每個集合分配文檔。 然後，文檔可以包含字段和其他集合。 這和其他 NoSQL 數據庫（比如 MongoDB）沒有太大區別。 我強烈建議觀看這個主題的 YouTube 播放列表，非常棒。 所以，我添加了一個我稱之為 users 的集合。 我希望使用一個特殊的字符串 id 來識別每個用戶。 前端代碼 現在我們進入 JavaScript 部分。 在頁腳中，我包含了 Firebase 提供的這兩個文件：...