|

node_modules 資料夾大小不是問題,反而是一個特權

node_modules 資料夾大小不是問題,反而是一個特權關於 node_modules 資料夾大小辯論的我的想法 我曾對於 node_modules 資料夾的大小感到懊惱。一個 JavaScript 應用程式怎麼可能在沒有我加入任何一行程式碼的情況下就有100、200MB的大小呢?我只是執行 npx create-react-app todolist,然後下載了218.7MB的東西!(我現在剛剛檢查了一下,這是真的數字)。 每當你思考 node_modules 的大小時, ...

tech wiki
tech wiki
3 min read
|

React元件

React元件React元件簡介 元件是介面中的一個獨立單元。例如,在典型的部落格首頁中,可以找到側邊欄元件和部落格文章清單元件。它們本身由其他元件組成,因此您可以擁有一個部落格文章元件的清單,每個部落格文章都有自己的特殊屬性。 React讓這個過程非常簡單:所有東西都是元件。 甚至普通的HTML標籤本身都是一個元件,並且它們是默認添加的。 下面的兩行程式碼是等價的,它們做的是相同的事情。一個使用JSX,一個不使用,將<h1>Hello World!</h ...

tech wiki
tech wiki
3 min read
|

如何在C中檢查字符值

如何在C中檢查字符值學習如何在C中檢查字符值 在C中工作時,我們可以使用ctype.h標準函式庫的一組函式來檢查char類型變量的值。 我們可以使用以下幾個有用的檢查: isalnum() 檢查字符是否是字母或數字 isalpha() 檢查字符是否是字母 iscntrl() 檢查字符是否是控制字符 isdigit() 檢查字符是否是數字 isgraph() 檢查字符是否是可打印的ASCII字符(但不包括空格) islower() 檢查字符是否是小寫字母 isprint() ...

tech wiki
tech wiki
1 min read
|

如何在使用物件解構時重新命名欄位

如何在使用物件解構時重新命名欄位學習如何在物件解構時重新命名欄位 有時候一個物件包含一些屬性,但你希望在解構時更改它們的名稱。 例如,某些函數名稱不符合你的命名慣例,或者你已經有一個使用該名稱的變數。 你可以使用以下語法來重新命名其中一個欄位: 123456789const person = { firstName: 'Tom', lastName: 'Cruise'}const { firstName: ...

tech wiki
tech wiki
1 min read
|

解釋 JavaScript 閉包

解釋 JavaScript 閉包輕鬆介紹閉包的主題,這是理解 JavaScript 函數如何運作的關鍵。 如果你曾經在 JavaScript 中寫過函數,你已經使用過閉包了。 這是一個需要理解的重要主題,會對你能做的事情產生影響。 當一個函數被執行時,它是在定義時的作用域中運行,而不是在執行時的狀態中運行。 作用域基本上是一組可見的變數。 一個函數記住了它的詞法作用域,它能夠訪問在父範圍中定義的變數。 簡而言之,一個函數能夠訪問一個完整的變數集合。 讓我馬上舉個例子來澄清這點 ...

tech wiki
tech wiki
2 min read
|

SQL,創建表格

SQL,創建表格如何在SQL數據庫中創建一個表格 一個數據庫由一個或多個表格組成。 在SQL中創建一個表格是通過使用CREATE TABLE命令來完成的。 在創建時,您需要指定表格的列名,以及它們將要保存的數據類型。 在SQL中定義了幾種不同的數據類型。 最重要的,也是您將最常見到的是: CHAR TEXT VARCHAR DATE TIME DATETIME TIMESTAMP 數值類型包括: TINYINT 1字節 INT 4字節 BIGINT 8字節 SMALLI ...

tech wiki
tech wiki
1 min read
|

Progressive Web Apps 完整指南

Progressive Web Apps 完整指南進步式 Web 應用程式(Progressive Web App,PWA)是一種根據裝置支援提供附加功能的應用程式,包括離線功能、推送通知、接近原生應用程式的外觀和速度,以及本地資源的快取。 介紹 什麼是進步式 Web 應用程式 進步式 Web 應用程式的替代方案 原生移動應用程式 混合應用程式 使用 React Native 建立的應用程式 進步式 Web 應用程式的功能 功能 優勢 核心概念 服務工作程序 應用程 ...

tech wiki
tech wiki
11 min read
|

ER資料模型介紹

ER資料模型介紹對實體-關係資料模型(Entity-Relationship Data Model),也稱為ER模型,提供一個簡單而全面的概述。ER模型是您可以用來理解資料的各種[資料模型](/data-models/)之一。 特別是,它是一個概念性資料模型,因為它沒有與任何特定實施相關聯。這是邏輯資料模型留下的任務。 ER資料模型非常通用且高層次的,可以通過多種完全不同類型的資料庫來實現。 它很棒,因為您只需考慮資料及其組織方式,而不需考慮實現細節。在這 ...

tech wiki
tech wiki
5 min read
|

使用Node.js和Puppeteer進行網頁爬蟲

使用Node.js和Puppeteer進行網頁爬蟲一個關於網頁爬蟲的簡短入門教程 網頁爬蟲的任務是下載網頁並從中提取某種信息。 我最近使用了一個附帶LCD顯示器的Arduino板製作了一個小項目。使用Johnny-Five,可以使用Node.js來編程Arduino,我想要從山頂上測量的溫度,並在Arduino板上顯示出來。 我使用了Google開發的Puppeteer來進行爬蟲任務。Puppeteer是一個很棒的工具,它是一個可以用來控制無頭Chrome實例的Node.js ...

tech wiki
tech wiki
4 min read
|

Swift運算子

Swift運算子 本教程屬於Swift系列。 我們可以使用一組廣泛的運算子對值進行操作。 運算子可以分為多個類別。首先是目標數量:單目運算子需要1個目標、雙目運算子需要2個目標,而獨有的三目運算子則需要3個目標。 然後,我們可以根據操作的類型將運算子分為以下幾類: 賦值運算子 算術運算子 複合賦值運算子 比較運算子 區間運算子 邏輯運算子 加上一些更高級的運算子,包括空值合併、三元條件、溢位、位元和逐點運算子。 註:Swift允許您創建自己的運算子並定義運算子在您自定 ...

tech wiki
tech wiki
3 min read
|

Object的is()方法

Object的is()方法了解一下JavaScript中Object对象的is()方法。 這個方法在ES2015中被引入,它旨在幫助比較值。 用法: 1Object.is(a, b) 除非以下情況,否則結果始終為false: a和b是同一個對象 a和b是相等的字符串(字符串由相同的字符以相同的順序組成時,它們是相等的) a和b是相等的數字(當它們的值相等時,數字是相等的) a和b都是undefined,都是null,都是NaN,都是true或者都是false 在Java ...

tech wiki
tech wiki
1 min read
|

在 PHP 中處理 HTTP 請求

在 PHP 中處理 HTTP 請求讓我們看看如何在 PHP 中處理 HTTP 請求。 PHP 默認提供基於文件的路由。您可以創建一個 index.php 文件,並使其對應到 / 路徑。 在一開始時,我們在 Hello World 的示例中就看到了這一點。 同樣地,您可以創建一個 test.php 文件,然後 Apache 會在 /test 路由上自動提供該文件。 $_GET、$_POST 和 $_REQUEST文件對所有 HTTP 請求進行響應,包括 GET、POST 和其他 ...

tech wiki
tech wiki
2 min read
|

如何在C語言中使用迴圈

如何在C語言中使用迴圈C語言提供了三種迴圈執行的方式:for迴圈,while迴圈和do while迴圈。它們都可以用來迭代陣列,但有一些差異。讓我們詳細看看它們。 for迴圈第一種,也是最常見的一種迴圈是for迴圈。 使用 for 關鍵字可以在開始時定義迴圈的規則,並提供重複執行的程式區塊。 像這樣: 123for (int i = 0; i <= 10; i++) { /* 重複執行的指令 */} (int i = 0; i <= 10; ...

tech wiki
tech wiki
4 min read
|

CSS 虛擬元素

CSS 虛擬元素學習CSS虛擬元素的基礎知識 虛擬元素用於樣式化元素的特定部分。 它們以兩個冒號::開頭。 有時你會在代碼中看到它們用單個冒號表示,但這只是一種為了向後兼容而支持的語法。應該使用兩個冒號來區分它們和虛擬類別。 ::before和::after可能是最常用的虛擬元素。它們用於在元素之前或之後添加內容,例如圖標。 以下是虛擬元素的列表: 虛擬元素 目標 ::after 在元素之後創建一個虛擬元素 ::before 在元素之前創建一個虛擬元素 ...

tech wiki
tech wiki
1 min read
|

使用Arduino和搖桿通過Johnny Five來控制瀏覽器遊戲

使用Arduino和搖桿通過Johnny Five來控制瀏覽器遊戲在這個項目中,我們將使用一個搖桿電子裝置,並將其連接到我們在“如何使用Phaser.js創建遊戲”文章中創建的平台遊戲中。 目標是通過搖桿在遊戲中移動玩家。 使用Johnny Five來實現。在我們的Node.js應用程序中,我們將連接到設備,並創建一個Websockets服務器。在開始之前,我強烈推薦您閱讀Johnny Five教程。 瀏覽器客戶端將連接到此Websockets服務器,並將左/右&# ...

tech wiki
tech wiki
27 min read
|

產品業務的自由

產品業務的自由獨立擁有的產品業務可以提供最高程度的自由。 作為一個完全由個人擁有的小型在線業務,它沒有固定成本,沒有倉庫,沒有員工,沒有辦公室,也沒有必要在某個特定的時間待在某個地方,也沒有會議,也沒有會議電話,這是世界上最美好的生活。它是最接近完全自由的事物。 通過經營在線業務,例如,你可以決定明天出發一個月,探索遙遠的阿拉斯加或新西蘭,而不必關閉業務的任何事務。你不需要給客戶發送郵件告知他們你的旅行,也不需要使用自動回覆器來回復郵件 “我不在辦公室”,因為業務可以 - 根 ...

tech wiki
tech wiki
1 min read
|

JavaScript 回傳值

JavaScript 回傳值學習 JavaScript 的回傳值基礎知識 每個函式都會回傳一個值,預設情況下為 undefined。 當函式的程式碼執行到結束或遇到 return 關鍵字時,函式即被終止。 當 JavaScript 遇到 return 關鍵字時,它會終止函式的執行並將控制權返回給呼叫者。 如果你傳入一個值,在函式中這個值會作為函式的結果返回: 1234const dosomething = () => { return 'test& ...

tech wiki
tech wiki
1 min read
|

教學:Emmet

教學:EmmetEmmet 是一個非常方便的工具,可以讓你快速編寫 HTML。就像魔法一樣。Emmet 不是什麼新東西,已經存在多年,每個編輯器都有對應的插件。 從頭開始建立 HTML 檔案 > 和 + 更高級 倍數 分組以便提高可讀性 id 和 class 屬性 添加獨特的 class 或 id 其他屬性 添加內容 在你的標記中添加遞增數字 標頭中標籤的參考 常用標籤的參考 語義化 HTML 標籤的參考 表單元素的參考 Emmet 是一個非常方便的工具,可以讓你 ...

tech wiki
tech wiki
19 min read
|

JavaScript國際化

JavaScript國際化了解如何在JavaScript中使用國際化 Intl是一個強大的物件,它公開了JavaScript國際化API。 它提供以下屬性: Intl.Collator:允許您進行語言敏感的字符串比較 Intl.DateTimeFormat:允許您進行語言敏感的日期和時間格式設定 Intl.NumberFormat:允許您進行語言敏感的數字格式設定 Intl.PluralRules:允許您進行語言敏感的複數格式設定和複數規則設定 Intl.RelativeT ...

tech wiki
tech wiki
8 min read
|

如何自動在Twitter上分享舊的部落格文章

如何自動在Twitter上分享舊的部落格文章我在我的部落格上有很多長青內容。本教程將解釋我如何自動化在Twitter上重複使用這些內容的過程。 我定期在我的部落格上發表長青內容。所謂長青指的是內容不會關於新聞或最近的事件,而是即使今天有效,一年後,甚至五年後,如果我繼續進行更新以防止信息過時,它仍然有效。 每次我撰寫新的部落格文章時,我都會在Twitter上分享它,如果我的少數幾位絕妙的追隨者(👋)沒有在那裡看到它,他們可能永遠不會再次看到它,我認為這對我來說是一種不公平( ...

tech wiki
tech wiki
13 min read
|

Arduino項目:analogWrite()函數和PWM

Arduino項目:analogWrite()函數和PWM我們使用由Arduino語言提供的analogWrite()函數來輸出模擬信號。 好吧,其實不是真正的模擬信號,而是PWM(脈衝寬度調變)信號。 以Arduino Uno為例,你會注意到有6個類比輸入引腳A0-A5,但沒有類比輸出引腳。 我們使用數字輸出引腳以特定方式來模擬類比輸出。 PWM意味著脈衝寬度調變,這是一種我們從數字設備模擬類比輸出的技術。我們基本上會發出高電平信號一小段時間,然後發出低電平信號,並且我們不 ...

tech wiki
tech wiki
1 min read
|

如何一次性從頁面中移除所有的 CSS

如何一次性從頁面中移除所有的 CSS我想知道沒有 CSS 的頁面是什麼樣子。 我知道的一種方法是打開開發者工具,在 Sources 面板中可以看到 CSS 文件的列表。你可以在那裡刪除 CSS 文件中的內容,然後頁面就會改變。舉個例子,這是我的 <thereactcourse.com> 網站。 它有 3 個 CSS 文件,我可以找一個文件並刪除其中的所有內容: 結果就是這樣,頁面因為我們刪除了 CSS 而改變了: 請注意,這只會改變瀏覽器中的 CSS,不會以 ...

tech wiki
tech wiki
1 min read
|

體重跟踪應用程序

#一個示例Web應用程序的想法清單 每次我開始教程時,我都會陷入困境,不知道應該建造什麼應用程序。再一個待辦事項應用程序?不要再一個了! 如果您正在閱讀此文章,您正在尋找一個想法,一個簡單的應用,您可以在教程中或示例項目中使用該應用來測試新的框架或API,但您找不到真正激起您興趣的內容。 它需要足夠簡單,但同時足夠複雜,值得做。 “我不想再建立另一個待辦事項應用程序”,我聽到你在想什麼。 我撰寫了這篇文章來幫助自己,希望也能幫助到您。 其中一些想法是獨立的(不 ...

tech wiki
tech wiki
7 min read
|

Node fs 模塊

Node fs 模塊Node.js 的 fs 模塊提供了與文件系統進行交互的功能。 無需安裝,作為 Node 核心的一部分,可以通過 require 來使用: 1const fs = require('fs') 一旦這樣做了,你就可以訪問它的所有方法,包括: fs.access():檢查文件是否存在,以及 Node 是否可以使用權限訪問該文件。 fs.appendFile():將數據追加到文件中。如果文件不存在,則會創建新的文件。 fs.chmod() ...

tech wiki
tech wiki
3 min read
|

如何將 JavaScript 中的數組轉換為字符串

如何將 JavaScript 中的數組轉換為字符串在 JavaScript 中將數組轉換為字符串的方法。您可以使用數組的 toString() 方法來獲取數組的字符串表示: 12const list = [1, 2, 3, 4]list.toString() 例子: 數組的 join() 方法返回數組元素的連接字符串: 12const list = [1, 2, 3, 4]list.join() 您可以傳遞參數給這個方法,以添加自定義的分隔符: 1list.join(& ...

tech wiki
tech wiki
1 min read
|

如何設置一個執行 Node.js 應用程式的定時任務

如何設置一個執行 Node.js 應用程式的定時任務了解如何設置定時任務以運行 Node.js 應用程式 首先,在一個文件中創建一個 shell 腳本,例如命名為 run.sh 12#!/bin/shnode app.js 給予它執行權限 1chmod +x run.sh 然後執行 1crontab -e 默認情況下,這將使用默認編輯器打開,通常是 vim。 | 提示:如果你對 vim 不熟悉,請使用 i 進入插入模式,以便於輸入/粘貼,然後使用 esc 和 ...

tech wiki
tech wiki
1 min read
|

運行 Python 程式

運行 Python 程式如何運行用 Python 編寫的程式 有幾種不同的方法可以運行 Python 程式。 特別是,您可以選擇使用互動提示,這裡您可以輸入 Python 程式碼並立即執行,或者將 Python 程式保存到檔案中並執行該檔案。 讓我們從互動提示開始。 如果您打開終端並輸入 python,您將看到如下的畫面: 這是 Python REPL (Read-Evaluate-Print-Loop)。 請注意 >>> 符號以及之後的光標。您可以在這裡 ...

tech wiki
tech wiki
3 min read
|

Vuex,Vue.js 的狀態管理工具

Vuex,Vue.js 的狀態管理工具Vuex 是 Vue.js 的官方狀態管理工具。在這篇教程中,我將解釋它的基本用法。 Vuex 簡介 為什麼應該使用 Vuex 讓我們開始吧 建立 Vuex store 一個使用 store 的使用案例 介紹我們需要的新組件 將這些組件添加到應用程式中 將狀態添加到 store 中 添加一個 Mutation 添加一個 getter 來引用狀態屬性 將 Vuex store 添加到應用程式中 使用 commit 在使用者操作中更新狀態 ...

tech wiki
tech wiki
11 min read
|

如何使用JavaScript將文件上傳到服務器

如何使用JavaScript將文件上傳到服務器在網絡應用程序中,上傳文件並在後端進行處理是最常見的文件處理功能之一。例如,上傳頭像或附件。 假設我們有一個HTML文件輸入元素: 1<input type="file" id="fileUpload" /> 我們在#fileUpload DOM元素上註冊一個變化事件處理程序,當用戶選擇一個圖像時,我們會觸發handleImageUpload()函數並傳入所選文件。 12345 ...

tech wiki
tech wiki
5 min read
|

Swift 物件

Swift 物件 本教程屬於 Swift 系列 在 Swift 中,一切皆為物件。即使我們將數值 8 賦予變數 age,這個 8 也是一個物件。 在某些語言中,物件是一種特殊型別。但在 Swift 中,一切皆為物件,這導致了 Swift 的一個特點:每個值都可以「接收訊息」。 每種型別可以有多個與之相關的函式,我們稱之為方法。 舉例來說,對於數值 8,我們可以呼叫其 isMultiple 方法,以檢查該數字是否為另一數字的倍數: 字串值有另外一組方法。 一個型別也可以有實 ...

tech wiki
tech wiki
1 min read
|

如何準備軟體工程師的面試

如何準備軟體工程師的面試在獲得工作機會之前,你很可能要經歷一個叫做面試的過程。 面試過程當你通過公司的網站直接申請、通過招聘人員或工作廣告申請時,公司會根據你的履歷和求職信來判斷你是否適合。 如果你在龐大的應聘堆中脫穎而出,你將開始所謂的面試過程。 在面試過程中,你需要展示自己的能力,以便公司能夠正確評估你的技能水平,確定你是否適合該職位並提供適當的薪酬。 技術面試有多難?這很大程度上取決於公司的類型。 FAANG面試過程FAANG指的是Facebook、Apple、Amaz ...

tech wiki
tech wiki
2 min read
|

JavaScript 空值合併

JavaScript 空值合併JavaScript中一個強大的運算子是 空值合併 運算子: ??。 您是否曾經使用 || 來在變數為空或未定義時設置默認值? 例如,像這樣: 1const myColor = color || 'red' 而現在,空值合併將取代其中的 ||: 1const myColor = color ?? 'red' 這個運算子有什麼用處呢? 當使用 || 提供回退值時,實際上存在著一系列隱藏的錯誤。 簡單來說, ...

tech wiki
tech wiki
1 min read
|

如何建立您的網站的 staging 版本

如何建立您的網站的 staging 版本在 Netlify 上部署基於 GitHub Pull Request 的網站版本的逐步教程 我當時正在準備推出一門課程,我需要在「發布日期」上完成登陸頁面,但同時又不更改我當時對外公開的版本。 我使用的是 Netlify,它可以從 Git 分支自動部署網站,我的情況是在 GitHub 上進行託管。我將記錄這個過程。其他基於 Git 存儲庫進行 CI/CD 的託管提供商可能也有類似的工具。 Netlify 會自動為 Pull ...

tech wiki
tech wiki
1 min read
|

Astro介紹

Astro介紹最近我在各種地方聽到很多關於Astro的討論,於是我決定去瞭解一下。 我有一個困擾:我討厭伺服器。我討厭管理伺服器,我討厭建立伺服器,我討厭必須擔心伺服器。安全性、維護、升級,這些都不是我喜歡的事情,除非是必需的。 這就是為什麼我喜歡使用像Netlify和Vercel這樣的平臺。我使用了很多靜態網站生成器,如Hugo、Next.js、SvelteKit和傳統的簡單HTML網站。 Astro看起來很有趣,因為它朝著這個方向前進,但有著不同的觀點。 以下是Astro ...

tech wiki
tech wiki
4 min read
|

Express, 請求參數

Express, 請求參數一個方便的參考,列出所有請求物件屬性以及如何使用它們 請求參數我提到過請求物件保存了所有的HTTP請求信息。 這些是你可能會用到的主要屬性: 屬性 描述 .app 保存了對Express應用程式物件的引用 .baseUrl 應用程式回應的基本路徑 .body 包含請求主體中提交的資料(必須在可以訪問它之前對其進行解析和填充) .cookies 包含請求中傳送的 cookie(需要 cookie-parser 的中介軟體) ...

tech wiki
tech wiki
4 min read
|

`npm run dev` 是一個長時間執行的程式

npm run dev 是一個長時間執行的程式我收到了這個問題: 每次運行 npm run dev時,我得到的本地主機端口都不一樣。一開始是 3000,然後再次運行又得到了 3001,再次運行又得到了 3002。我們怎麼強制它使用 3000 端口? 在本地開發網站時,你可以使用 npm run dev 命令來啟動開發伺服器。 這是 Web 開發 中的常見做法,所有工具似乎都會使用這個程式,例如 Astro 和 Next.js 等等。 每次運行這個命令時,它都是一個長時間執 ...

tech wiki
tech wiki
1 min read
|

如何使用Node.js刪除文件

如何使用Node.js刪除文件了解如何使用Node.js從文件系統中刪除文件。 你可以使用Node提供的內置模塊fs,它提供了同步和異步兩種方法。 異步方法是fs.unlink()。 同步方法是fs.unlinkSync()。 它們的區別很簡單:同步調用會導致代碼阻塞並等待文件被刪除,異步方法則不會阻塞代碼,並且在文件被刪除後調用回調函數。 以下是如何使用這兩個函數: fs.unlinkSync(): 12345678910const fs = require('f ...

tech wiki
tech wiki
1 min read
|

如何撰寫不易維護的程式碼

如何撰寫不易維護的程式碼25個實用的技巧,讓你寫出最不易維護的程式碼。 在這篇教學中,我想說明如何撰寫不易維護的程式碼。 透過撰寫不易維護的程式碼,你可以確保自己永遠不會被解雇,因為你將是唯一能理解程式碼做了什麼,以及更重要的是為什麼這麼做的人。 請注意:本文章帶有諷刺的意味。 為你的變數、函數和物件取奇怪、幻想和隨便的名字。名字與該項目的功能或行為應無相關性。 偏好縮寫和首字母縮略詞,不要使用描述性的名字。一個字母的變數很棒。 在程式碼中儘量重複使用變數。在迴圈中始終 ...

tech wiki
tech wiki
2 min read