|

如何使用純 JavaScript 隱藏 DOM 元素

如何使用純 JavaScript 隱藏 DOM 元素了解如何使用純 JavaScript 隱藏和重新顯示元素。 要如何使用純 JavaScript 隱藏 DOM 元素? 每個元素都有一個 style 屬性,可以使用它來修改 CSS 的樣式屬性。 你可以將 display 屬性設置為 ‘none’(就像在 CSS 中使用 display: none; 一樣): 1element.style.display = 'none'; 若要再顯示它,將其設回 blo ...

tech wiki
tech wiki
1 min read
|

arduino-read-values-http

#從Arduino通過HTTP讀取數值 在本教程中,我想擴展Arduino Web Server教程以讀取由傳感器測量的數值,這樣我們只需打開瀏覽器上的一個頁面就可以看到數據。 例如,我們將使用DHT11傳感器測量溫度,並使用接近傳感器測量對象距離。 我們通過訪問/on URL點亮Arduino上的內置LED,並通過打開/off URL關閉它。其他任何操作都不起作用。 這是來自其他教程的代碼: 12345678910111213141516171819202122232425 ...

tech wiki
tech wiki
8 min read
|

React概念:聲明性

React概念:聲明性當你讀到React是一種聲明性的方法來構建用戶界面時,這是什麼意思? 你會遇到一些文章描述React是一種聲明性的方法來構建用戶界面。 React以其聲明性方法讓它在前端世界中變得非常流行且顯著。 這並不是一個新的概念,但React在構建用戶界面方面比HTML模板更具聲明性: 你可以構建Web界面,而無需直接操作DOM 你可以擁有一個事件系統,而無需與實際的DOM事件交互。 聲明性的相對概念是命令式。命令式的一個常見例子是使用jQuery或DOM事件 ...

tech wiki
tech wiki
1 min read
|

如何在 Next.js 表單中添加 ReCaptcha

如何在 Next.js 表單中添加 ReCaptchaReCaptcha 是 Google 對表單垃圾郵件和濫用的解決方案。 這是一個非常有價值的工具。如果您還沒有在 https://www.google.com/recaptcha 創建帳戶,請先創建並添加您的網站域名。 選擇 v2,並選擇「我不是機器人」複選框: 你會獲得一個站點金鑰和站點密鑰。 將密鑰儲存在您的.env文件中: 1RECAPTCHA_SECRET=<....> 現在,在您的 Next.js ...

tech wiki
tech wiki
4 min read
|

簡介 SwiftUI

簡介 SwiftUISwiftUI是開發iOS、iPadOS、watchOS和macOS應用程序的現代化方式。 它從“舊有”方式轉變,使許多現有的蘋果框架(UIKit,AppKit和WatchKit)變得過時。 這些框架有一個共同點:它們是命令式的。 作為程序員,您可以確定事物應該以每個像素為單位如何顯示。然後,您會對用戶事件作出響應並手動更新數據。在每次更改時,您還需要決定UI應該如何更改。 SwiftUI是一個完全的變革,因為它是反應式的,UI反映了數據的狀態。不再像在U ...

tech wiki
tech wiki
2 min read
|

HTTP vs HTTPS

HTTP vs HTTPS探索HTTP和HTTPS之間的主要差異,了解為什麼HTTPS對於一切都更快更好。 HTTP(超文本傳輸協議)是我們所知的網絡的協議基礎。 它位於TCP之上,TCP位於IP之上。 網頁可以使用HTTP或HTTPS(超文本傳輸協議安全版)。 它們有什麼不同?為什麼現在Chrome將HTTP標記為不安全呢? 安全性當您從服務器請求一個HTTP頁面時,數據會通過許多不同的網絡,每個網絡都由一個單獨的公司或實體控制。 從WiFi路由器開始,可能是咖啡店擁有的, ...

tech wiki
tech wiki
3 min read
|

Node路徑模組

Node路徑模組Node.js的路徑模組提供了一些有用的功能來處理檔案路徑。 path模組提供了許多非常有用的功能來存取和操作檔案系統。 不需要單獨安裝它。由於它是Node的核心部分,只需透過require進行引用即可: 1const path = require('path') 此模組提供了path.sep來提供路徑分隔符號(在Windows上為\,在Linux和macOS上為/),以及path.delimiter提供路徑分隔符(在Windows上 ...

tech wiki
tech wiki
5 min read
|

如何學習程式設計

如何學習程式設計從這裡開始,如果你想成為一個程式設計師 嗨,我是一個程式設計師。我是那種整天坐在電腦前,讓它執行「事情」的酷人之一。 我們的生活相當不錯。天氣不好也沒問題,我們在室內工作。世界上任何地方都有很多工作機會。而且我們可以遠程工作,因為程式設計是在電腦上進行的。 我能理解你想成為一個程式設計師的原因,而且我想幫助你。 首先,你應該弄清楚你將要工作的領域。或者你想要工作的領域。 這取決於你的目標、傾向,以及在該領域找到好工作的可能性。 因為不只有「程式設計」或「軟體開 ...

tech wiki
tech wiki
4 min read
|

重新啟動 Node 進程,而不更改檔案

重新啟動 Node 進程,而不更改檔案我有需要運行一個 Node 專案,如果出現某些原因失敗,可以再次運行它。 我想到使用 nodemon,它是當檔案發生變化時重新啟動 Node 進程的方式。 我以為它也會在進程崩潰時重新啟動,但事實並非如此。 因此,我找到了這個解決方案。 如果進程崩潰,我使用命令行在主要應用檔案上運行 touch 命令,這樣 nodemon 就會檢測到檔案的變化並重新啟動進程: 1nodemon -x 'node app.js || touch ...

tech wiki
tech wiki
1 min read
|

HTTP/2協議

HTTP/2協議詳細描述了HTTP/2協議的工作原理。 我建議先閱讀HTTP教程 HTTP/2是當前版本的HTTP協議。它由IETF(互聯網工程任務組)委員會於2015年發布,由於其獨特的功能,目前被廣泛采用。 HTTP/2比上一個版本的HTTP 1.1要更高效。在當時,HTTP/2的速度提升如此引人注目,以至於它很快就被廣泛采用。通過對Web服務器進行簡單的更改(因為HTTP/2與HTTP 1.1完全向下兼容) ...

tech wiki
tech wiki
3 min read
|

JavaScript Switch條件語句

JavaScript Switch條件語句學習JavaScript Switch條件語句的基礎知識 當你有幾個選項可以選擇時,if/else語句非常有用。 然而,當選項太多時,使用if/else可能變得過於冗長,你的代碼會變得太複雜。 在這種情況下,你可能希望使用switch條件語句: 123switch(<表達式>) { // 場合} 根據表達式的結果,JavaScript會觸發你定義的特定場合: 123456789101112const ...

tech wiki
tech wiki
2 min read
|

在Netlify上托管靜態網站的教程

在Netlify上托管靜態網站的教程發現Netlify,一個非常適合靜態網站的優秀托管服務,它還有一個很好的免費計劃、免費CDN並且運行非常快速。 我把我的博客托管在Netlify上。 我一段時間前轉移,我的前一個托管服務遇到了一些問題,導致我的網站在幾個小時內無法訪問,所以在等待它恢復上線期間,我尋找了一個快速的方式將其還原,並在Netlify上創建了一個複本。 由於這個博客使用的是Hugo,它是一個靜態網站生成器,所以我不需要太多工作將博客遷移到新的托管服務上。我只需要一 ...

tech wiki
tech wiki
4 min read
|

JavaScript 語句

JavaScript 語句學習 JavaScript 語句的基礎知識 如果表達式是 JavaScript 中可以評估的單個單位,那麼語句可以包含一個或多個不同的表達式,並由引擎執行以執行操作。 程序由多個語句組成。語句可以跨越多行。 就像表達式一樣,JavaScript 有一整套不同的語句: 表達式語句 声明語句 控制流語句 循环語句 雜項語句 讓我們深入瞭解細節。 分隔語句語句可以以可選的分號 ; 結束。使用分號,您可以在單個行中有多個語句。我通常不使用分號,但您可以在 ...

tech wiki
tech wiki
4 min read
|

軟體開發沒有門檻

軟體開發沒有門檻軟體開發作為一個職業非常棒,因為它沒有門檻。 你不需要學位或特殊學習。 你不需要在開始之前通過測驗。 你只需要一台電腦和一本書,就可以開始學習。 沒有任何阻礙。你不會只通過實驗病人而成為醫生,但你可以通過與電腦實驗成為一名程式設計師。 如果你發現自己不喜歡它,你可以賣掉你的電腦,一切就結束了。 還有什麼能阻止你呢? tags: [“軟體開發”, “程式設計”, “教育”]

tech wiki
tech wiki
0 min read
|

在數位時代獨立於現代社會中

在數位時代獨立於現代社會中有時候我覺得自己屬於一個小而特殊的領域。 我生活在一個由使用數位設備(桌機、筆記型電腦、智慧型手機或平板電腦)創造價值並在數位網絡中傳播的人所組成的生態系統中。 我透過部落格文章和線上課程幫助軟體開發者在他們的工作上更上一層樓。那就是我做的。 我這個領域中的其他人創作視頻、寫電子書,他們還有付費的電子通訊、製作軟體產品然後以一次性或訂閱的方式出售。 在現實生活中,我不認識任何做和我一樣的工作的人。可悲的是如此。我不生活在這種常見的生態系統中。我知道我 ...

tech wiki
tech wiki
2 min read
|

沒有頻道的Discord

沒有頻道的Discord在過去的幾年裡,我以聊天室的形式組織了一些具有社群特色的課程。 我一直使用Discord,這對於學生來說非常好,可以建立社群。 現在我正在計劃我的下一門課程,JavaScript大師課程,我打算繼續使用同樣的方式。 今天我在閱讀這篇文章 https://becca.ooo/discord ,這篇文章討論了為何沒有頻道的Discord是有道理的。 有些事情你已經習慣於現狀,並沒有停下來思考。我總是在我的Discord社群中建立多個頻道。但是如果這一次除了 ...

tech wiki
tech wiki
1 min read
|

JavaScript 如何退出函數

JavaScript 如何退出函數如何在 JavaScript 函數的中間快速結束退出? 你可以使用 return 關鍵字來實現。 當 JavaScript 遇到 return 關鍵字時,它立即退出函數,並將你在 return 之後傳遞的任何變量(或值)作為結果返回。 這是我經常使用的方法,以確保如果某個條件不符合預期,我可以立即退出函數。 也許我期望有一個參數,但它不存在: 1234567function calculateSomething(param) { ...

tech wiki
tech wiki
1 min read
|

在React中處理表單

在React中處理表單如何在React應用程序中處理表單 表單是少數默認具有互動性的HTML元素之一。 它們的設計目的是允許用戶與頁面進行互動。 常見的表單用途? 搜索 聯繫表單 購物車結帳 登錄和註冊 等等! 使用React可以使我們的表單具有更多互動性且不那麼靜態。 在React中處理表單有兩種主要方式,它們在基本級別上有所不同:數據是如何管理的。 如果數據由DOM處理,我們稱之為非受控組件 如果數據由組件處理,我們稱之為受控組件 如您所想,大多數情況下都會使用受 ...

tech wiki
tech wiki
8 min read
|

如何解決 Node.js 中的 `util.pump is not a function` 錯誤

如何解決 Node.js 中的 util.pump is not a function 錯誤找出如何解決在運行舊的 Node 代碼時可能出現的 util.pump is not a function 錯誤。 如果在運行 Node.js 應用程序或代碼片段時出現 “util.pump is not a function” 錯誤,則是因為應用程序代碼過於陳舊,與當前的 Node.js 運行時不兼容。 Node.js 提供的 pump() 方法用於使用以下語法將可讀流寫入可寫流: ...

tech wiki
tech wiki
1 min read
|

使用Node.js一次遞增多個文件夾的數字

使用Node.js一次遞增多個文件夾的數字如何解決一個小型文件夾管理問題 我有一個問題。 我正在創建許多格式為以下的文件夾: 123451-yo2-hey3-cool4-hi5-whatsup 一個數字後面跟著一個破折號和一個字符串。 我創建了40個這樣的文件夾,然後我意識到我必須在中間插入一個文件夾,像這樣: 1234561-yo2-hey3-NEWONE3-cool4-hi5-whatsup 問題是,我必須更改所有的文件夾數字,現在它們應該跟隨3-NEWONE文件夾。 ...

tech wiki
tech wiki
5 min read
|

如何成為全端開發人員

如何成為全端開發人員一個逐步指南,成為全端開發人員 成為全端開發人員是在科技領域擁有穩固職業的好途徑。 在這篇教程中,我想要和您談談成為全端開發人員所需的所有步驟。 首先,什麼是全端開發人員?全端開發人員是網頁工程領域中的一個特定範疇。 傳統上來說,網頁上我們總是有前端開發人員和後端開發人員。有時候他們也被稱為前端工程師和後端工程師。 前端開發人員通常負責CSS、HTML、JavaScript。他們也是React/Vue/Angular開發人員。後端開發人 ...

tech wiki
tech wiki
3 min read
|

簡介

# 什麼是資料 URL 資料 URL 是一種 URI 方案,提供了一種將資料嵌入到文件中的方法,它通常用於在 HTML 和 CSS 中嵌入圖像。 簡介 資料 URL 的外觀 瀏覽器支援 安全性 簡介資料 URL 是一種 URI 方案,提供了在 HTML 文件中直接嵌入資料的方法。 假設您想要嵌入一個小圖像。您可以按照通常的方式,上傳圖像到一個文件夾,然後使用 img 標籤讓瀏覽器通過網路請求它: 1<img src="image.png" /&g ...

tech wiki
tech wiki
3 min read
|

什麼是 Doctype

什麼是 Doctype任何 HTML 文件都必須以文件類型聲明(Document Type Declaration),簡稱 Doctype,開頭,該聲明告訴瀏覽器該頁面使用的 HTML 版本。 任何 HTML 文件都必須在第一行開始以 文件類型聲明 (簡稱doctype)開始,該聲明告訴瀏覽器該頁面使用的 HTML 版本。 這個文件類型聲明(不區分大小寫): 1<!DOCTYPE html> 告訴瀏覽器這是一個 HTML5 文件。 瀏覽器渲染模式 有了這個聲明, ...

tech wiki
tech wiki
3 min read
|

使用多用電表測量電壓、電流和電阻

使用多用電表測量電壓、電流和電阻數位多用電表是一個方便的工具,是您入門時所需的少數工具之一。 有許多種多用電表,從很便宜的一些(大約10美元),像這個便宜購買的多用電表,但質感也很便宜: (圖片) 除非您要從事非常專業的應用,但您不需要從這開始,您可以花不到30美元買一個很棒的多用電表。 我花了30美元買的這個非常好: (圖片) 這兩者之間的大小和建造質量之間有很大的差異: (圖片) 您還可以看到一個有一個“10A”插座,而另一個有一個“20A”插座。這意味著其中一個可以在斷 ...

tech wiki
tech wiki
3 min read
|

Next.js 添加的應用程式圖示

Next.js 添加的應用程式圖示了解 Next.js 開發模式中生成的圖示的含義 在 Next.js 應用程式上工作時,您是否看到頁面右下角有一個小圖示,看起來像一道閃電? 如果將鼠標懸停在上面,它會顯示 “Prerendered page”: 這個圖示只在開發模式下可見,它告訴您該頁面符合自動靜態優化的條件,這基本上意味著它不依賴於必須在調用時獲取的數據,並且在構建時(運行 npm run build 時)可以預渲染並構建為靜態 HTML 文件。 Next.js 通過 ...

tech wiki
tech wiki
1 min read
|

使用Rest和Spread處理物件和陣列

使用Rest和Spread處理物件和陣列學習在JavaScript中使用兩種現代技術來處理陣列和物件。 你可以使用spread運算子 ...來展開陣列、物件或字串。 讓我們從一個陣列的例子開始。給定 1const a = [1, 2, 3] 你可以使用以下方式創建一個新的陣列 1const b = [...a, 4, 5, 6] 你也可以使用以下方式創建一個陣列的複製 1const c = [...a] 這對於物件也同樣適用。使用以下方式克隆一個物件: 1const n ...

tech wiki
tech wiki
3 min read
|

一個關於 ed 編輯器的簡短指南

一個關於 ed 編輯器的簡短指南ed 是原始的 UNIX 文本編輯器,它是你可以使用的最基本的編輯器。但它也很少被大多數人使用,如果根本就不用的話。 輸入 ed 來運行它。這將啟動一個互動式會話。輸入 a 進入寫入模式,然後按下 enter。然後輸入你想要的內容,完成後,在一行上只輸入一個句點 (.) ,然後按下 enter。 現在輸入 w ,後跟一個檔案名稱以將緩衝區保存到檔案中。它會返回寫入檔案的字節數。 你可以按 q 退出。 你可以使用 ed 來編輯一個檔案,只需使用檔 ...

tech wiki
tech wiki
1 min read
|

Go中的循環結構

Go中的循環結構Go語言中最好的功能之一是為你提供更少的選擇。 我們只有一個循環語句:for。 我們可以像這樣使用它: 123for i := 0; i < 10; i++ { fmt.Println(i)} 我們首先初始化一個循環變量,然後設置我們每次迭代檢查的條件,以決定是否結束循環,最後在每次迭代結束時執行後置語句,在這個例子中是對i進行增量運算。 i++對變量i進行遞增。 < 運算符 用於比較i和數字10,返回true或fals ...

tech wiki
tech wiki
2 min read
|

應用程式總是需要一個資料庫嗎?

應用程式總是需要一個資料庫嗎?關於資料庫需求的一些想法。也許你需要它,也許不需要。 應用程式總是需要一個資料庫嗎?當然不是。 就像科技中的一切一樣,在每個情況下都沒有一個理想的解決方案。 電腦提供了許多不同的資料儲存方式。最明顯的替代方案是檔案。 一個常見的例子是內容管理系統(CMS)。有些CMS使用資料庫來儲存資料(比如WordPress),有些則更偏好使用檔案來儲存資料(比如Grav或Statamic)。 在這種情況下不使用資料庫意味著更簡單的部署到一個虛擬主機服務上。 ...

tech wiki
tech wiki
1 min read
|

CSS過渡的入門指南

CSS過渡的入門指南CSS過渡是在CSS中創建動畫的最簡單的方法。在過渡中,您更改屬性的值,並告訴CSS根據某些參數慢慢將其變化到最終狀態。         CSS過渡介紹 CSS過渡的示例 過渡的時間函數值 瀏覽器DevTools中的CSS過渡 可以使用CSS過渡動畫的屬性 CSS過渡介紹CSS過渡是在CSS中創建動畫的最簡單的方法。 在過渡中,您更改屬性的值,並告訴CSS根據某些參數慢慢將其變化到最終狀態。 CSS過渡由以下屬性定義: 屬性 描述 tran ...

tech wiki
tech wiki
6 min read
|

programming-math

需要懂數學才能做程式設計嗎? 不一定需要。即使在學校的數學成績不好,你仍然可以成為一個優秀的程式設計師。 我自己從事程式設計已經有20年了,從來沒有因為忘記需要的數學知識而去翻數學書。我在高中和大學時學習了很多數學,那些內容非常高深抽象,甚至我現在都忘記了學習的目標是什麼(除了通過考試)。 有一種普遍的觀點是,要成為一個優秀的程式設計師,你必須擁有出色的數學能力。這種觀點可能是因為最早從事計算機編程的人大多數是數學家,主要是因為當時還沒有“計算機編程師”的專業學校。當然,計算 ...

tech wiki
tech wiki
2 min read
|

如何從命令行打開 VS Code

如何從命令行打開 VS Code安裝 VS Code 命令行工具的簡單指南 我寫這篇博客文章是因為我正在設置一台新的 Mac,遇到了一些我習以為常的小問題,在首次安裝 VS Code(我最喜歡的編輯器!)時,這些功能並不是默認提供的。 我習慣於在終端中輸入 code 文件夾名稱 來打開 VS Code 中的文件夾。或者 code 文件名 來打開一個文件。 今天,我自動地按照這樣的方式操作,但是卻出現了“命令未找到”的錯誤! 我不得不進入 VS Code,按下 cmd-opti ...

tech wiki
tech wiki
1 min read
|

電子元件:可變電阻器(Potentiometers)

電子元件:可變電阻器(Potentiometers)可變電阻器是一種微小的元件,具有3個連接器:一側有2個,另一側有1個: 其中的兩個連接器是輸入端,一個連接到負極,一個連接到正極,而另一端則是輸出端。 透過旋轉可變電阻器,我們可以在輸出端獲得輸入引腳間的電壓差的一部分。 這是因為可變電阻器是一種可以調整電阻的電阻器。在這個例子中,我們使用的是一個10kΩ的可變電阻器: 看這個模擬:如果我們將可變電阻器旋轉到最左邊(逆時針),在輸出端和地之間會有9V的電壓差,因為可變電 ...

tech wiki
tech wiki
1 min read
|

Phaser: 碰撞和屏幕边界

Phaser: 碰撞和屏幕边界 本文是《Phaser 系列》的一部分。点击这里查看系列的第一篇文章。 你可以检测到物理启用的物体之间的碰撞。 Phaser 为我们提供了两个方便的方法来开始。 我们有 collider 和 overlap。两者都可以让我们检测对象是否接近彼此,但有一个区别:collider 在物体相遇时会自动使其反弹,而 overlap 允许物体彼此重叠。 以下是如何添加一个 collider: 12345const collisionHappened = ...

tech wiki
tech wiki
2 min read
|

如何將密碼存儲在資料庫中

如何將密碼存儲在資料庫中你不需要將密碼直接存儲在資料庫中。你需要存儲密碼的雜湊值,這是從密碼產生的一個字符串,但沒有辦法從雜湊值回推出原始的密碼值。 使用Node,安裝 bcrypt: 1npm install bcrypt 引入它,並設置salt回合值,稍後我們會使用它: 123const bcrypt = require('bcrypt')const saltRounds = 10 創建密碼雜湊值使用下面的代碼創建密碼雜湊值: 1const has ...

tech wiki
tech wiki
2 min read
|

如何使用終端機從伺服器下載文件

如何使用終端機從伺服器下載文件我需要從伺服器上轉移一個文件。 我通過 SSH 連接,不想設置 SFTP 連接(而且也不確定是否允許 SFTP 連接),因此我打開另一個終端窗口並使用了 scp 命令。 這是語法: 1scp -i /.ssh/yourkey [[email protected]](/cdn-cgi/l/email-protection):/path-to-file/on/server.txt ./ 將 USER 和 SERVER 替換為您的伺服器詳情,/pat ...

tech wiki
tech wiki
1 min read
|

即將開始的2023年訓練營

即將開始的2023年訓練營今天我要給大家介紹一下bootcamp.dev 2023年訓練營的最新消息。 Web Development Bootcamp 是一個為期10週的高強度網上課程,教授使用現代技術如HTML、CSS、JavaScript、Tailwind、Astro、React、Next.js等基礎的網頁開發知識。 每年我只舉辦一次訓練營,並以班級形式進行。 在2020、2021和2022年已有超過3000名學生參加訓練營,並取得了巨大成功。 我一直收到學生的郵件,告 ...

tech wiki
tech wiki
2 min read