| 2023-06-26 JavaScript中的值是傳值還是傳址? JavaScript中的值是傳值還是傳址?答案是:取決於具體情況! 原始資料類型是按值傳遞。 物件是按址傳遞。 原始資料類型包括數字、字串、布林值、null、undefined和符號。 除了原始資料類型外,其他都是物件。陣列是物件。函式是物件。 當你將一個數字傳遞給一個函式時,它將被複製到該函式內部: 12345678const increment = num => { num = num + 1}const num = 2increment(num ...
| 2023-06-26 簡單易用的React狀態管理庫 簡單易用的React狀態管理庫每個應用程式都需要管理狀態。在React中,我們可以使用hooks,尤其是useState(),並傳遞props來解決許多問題。 當事情變得比較複雜時,我喜歡立即轉向使用狀態管理庫。最近我最喜歡的之一是easy-peasy。 它基於Redux構建,並提供了一種更簡單的方式來與狀態交互。 我喜歡保持我的程式碼盡可能簡單。簡單易懂,簡單美觀。 應該盡量避免複雜性,並將其隱藏在向我們提供簡單接口的庫中。這就是這個庫的情況,也是我喜歡它的原因! 使用以下 ...
| 2023-06-26 Arduino 項目:使用瀏覽器點亮內建LED Arduino 項目:使用瀏覽器點亮內建LED在這篇教學中,我們將擴展 Arduino Web Server 範例 ,以便可以通過瀏覽器向 Arduino 發送指令。 我們將透過存取 /on 的 URL 點亮 Arduino 上的內建 LED,並透過開啟 /off 的 URL 來關閉它。其他任何指令都將無效。 以下是來自其他教學的程式碼: 123456789101112131415161718192021222324252627282930313233343536373839 ...
| 2023-06-26 從頭開始創建一個簡單的 Node.js Hello World Docker 容器 從頭開始創建一個簡單的 Node.js Hello World Docker 容器在Dockerfile介紹文章中,我介紹了一個簡單的 Node.js Dockerfile 示例: 123456FROM node:14WORKDIR /usr/src/appCOPY package*.json app.js ./RUN npm installEXPOSE 3000CMD ["node", "app.js"] 注意:在CMD行中使用雙 ...
| 2023-06-26 電子基礎:電阻 電子基礎:電阻如果你將電池的正極和負極連接在一起,流過的電流將會過大,並會對電池造成損壞。電流過大,需要受到限制。 我們需要引入電阻的概念,它是對電流流動的一種限制。 電阻限制了電路中的電流流動。電路中的每個元件都有一些電阻,即使是電線的電阻也很低。 電阻的單位是歐姆(Ω)。 1歐姆被定義為1伏特除以1安培: 1 Ω = 1 V / 1 A 這就是我們所說的歐姆定律:R = V / I,其中R是電阻的符號,V是電壓的符號,I是電流的符號。 由此可得: V = R * I I ...
| 2023-06-26 如何使用SWR 如何使用SWR一個簡短的SWR教程 在Next.js應用程式中,使用SWR是進行GET請求的最佳方法之一。 你可以通過以下命令來安裝它: 1npm install swr 並且你需要定義一個fetcher函數,我通常在lib/fetcher.js文件中使用同樣的方式: 12const fetcher = (...args) => fetch(...args).then((res) => res.json())export default fetcher 在組件 ...
| 2023-06-26 deno #Deno手冊:Deno的簡潔介紹 🦕 快速了解Deno,這是一個現代的Node.js替代方案 我每週都會探索新的專案,而且很少有像Deno這樣引起我的注意。 Deno是什麼?如果你熟悉Node.js,那麼Deno就像Node一樣。但在很多方面上有很大的改進。 讓我們從一個我最喜歡Deno的快速功能列表開始: 它是基於JavaScript語言的現代特性 它擁有豐富的標準庫 它的核心是TypeScript,這在很多方面都有很大的優勢,包括一流的TypeScript支持(您 ...
| 2023-06-26 如何解決最常見的「學習編程」問題 如何解決最常見的「學習編程」問題學習編程是很難的。特別是在今天這個快速變化的世界中,事物似乎在您能趕上速度之前就已經不斷變動。 以下是一些我每天在幫助學習編程的人時經常遇到的常見問題,沒有特定的順序。 認為編程對您來說太難。編程確實很難。但是讓我告訴您,如果我能學會編程,那麼您也能。這是一個陡峭的學習曲線,就像您做的任何事情一樣。但是繼續創建項目,繼續學習,您會成功的。不要氣餒,我們都曾經處於這種困境中。 盲目追隨最新潮流。網絡是一個狂野的地方,每個人都在試圖推銷自己或自己 ...
| 2023-06-26 Linux命令: open Linux命令: open一個快速指南,介紹了 open 命令的使用方式,用於打開文件、目錄和應用程序。 使用以下語法,open 命令可用於打開文件: 1open <文件名> 您也可以打開一個目錄,在 macOS 上,這會打開 Finder 應用程序並顯示所在的目錄: 1open <目錄名> 我經常使用它來打開當前目錄: 1open . 特殊的 . 符號表示當前目錄,而 .. 表示上級目錄 同樣的命令也可以用於運行應用程序: 1open &l ...
| 2023-06-26 javascript-hardest-concepts #最難理解的JavaScript概念 昨天我在Twitter上問了個問題: “在JavaScript中,最複雜的主題是什麼?你學習它花費最多時間的是哪個?” 我收到了200多個回覆。 以下是一些經常被提到的內容: this 非同步JavaScript(promises, callbacks, async/await) 閉包 事件循環 遞歸 作用域 變數提升 原型繼承 bind(), call(), apply() reduce() 生成器 fetch() 除 ...
| 2023-06-26 PostgreSQL 使用者權限 PostgreSQL 使用者權限在這篇教學中,我將解釋如何在 PostgreSQL 中管理使用者和權限。 在 PostgreSQL 中,一切都是圍繞著「角色(role)」的概念建立的。 在 macOS 安裝 PostgreSQL 時,安裝腳本會根據你的 macOS 使用者名稱建立一個角色,並且賦予一組權限。 在 PostgreSQL 中沒有使用者,只有角色。 透過在終端機中執行 psql postgres 命令,你會使用你的 macOS 使用者名稱自動登入 PostgreSQ ...
| 2023-06-26 我是如何決定創建一個新的專案管理應用程式的 我是如何決定創建一個新的專案管理應用程式的在過去的幾年中,我建立了許多應用程式。其中大部分是為iOS開發的,一些是為Mac,還有一些是為Web開發的。回顧過去,其中大部分都只有一些小型的目標,但有些很有前途,比我想像的還要大。但它們最終都未能成就。隨著時間的推移,我把所有這些項目都放棄了。 其中有一些應用程式可能只是能夠“存活”,但軟體最終會像水果一樣過期。如果你不不斷更新以符合作業系統的使用者介面並持續維護它,軟體就會消亡。 在過去的幾年裡,我專注於教導開發者創建Web應用 ...
| 2023-06-26 HTTP 狀態碼列表 HTTP 狀態碼列表每個 HTTP 響應都附帶一個狀態碼,以明確的數字信息表明請求的處理方式。 HTTP 狀態碼是從服務器發送給客戶端的 HTTP 響應的首行。 如果您想知道服務器為什麼發送了特定的狀態碼以及它的含義,或者如果您正在構建服務器並且正在尋找要返回的完美的狀態碼,這個列表將非常有用。 狀態碼由 3 位數字和一個簡短的描述組成。 數字的第一位確定了響應組。 共有五個組: 1xx:信息性響應 - 表示請求已接收且已被理解 2xx:成功的響應 - 表示客戶端發出的請求 ...
| 2023-06-26 Laravel入門 Laravel入門 本教程是Laravel手冊的一部分,從https://flaviocopes.com/access/下載。 要開始使用Laravel,您需要在計算機上設置PHP環境。您可以通過各種方式來完成這一點。在繼續之前,請刪除過去可能完成的任何舊版本PHP安裝。具體方法取決於您如何在計算機上安裝PHP。希望您沒有這樣做,我們可以繼續。在macOS上,使用Homebrew(如果尚未安裝,請先安裝Homebrew),然後使用以下命令安裝PHP和Composer: 1b ...
| 2023-06-26 如何在Node中獲取當前文件夾 如何在Node中獲取當前文件夾解釋了兩種引用文件系統的方式:./ 和 __dirname 在Node.js腳本中,基本上有兩種引用當前文件夾的方式: ./ __dirname 除了 ./ ,還有指向上級文件夾的 ../ ,它們的行為方式相同。 這兩者之間有一個很大的區別。 在Node腳本中使用 __dirname 會返回當前JavaScript文件所在文件夾的路徑。 使用 ./ 會給出當前的工作目錄。這將返回與調用 process.cwd() 結果相同的結果。 最初的 ...
| 2023-06-26 C中的基本I/O概念 C中的基本I/O概念在C中如何使用printf和scanf进行输入/输出 C是一种简单的语言,而C的“核心”不包含任何输入/输出(I/O)功能。 当然,这不是C的特有情况。语言的核心通常对I/O不做任何假设。 在C的情况下,通过C标准库的stdio.h头文件中定义的一组函数向我们提供输入/输出功能。 您可以使用以下命令导入此库: 1#include <stdio.h> 在您的C文件顶部。 该库提供给我们 ...
| 2023-06-26 使用 map、filter、reduce 和 find 编写 JavaScript 循环 使用 map、filter、reduce 和 find 编写 JavaScript 循环如何在 JavaScript 中执行常见的操作,其中可能使用循环,使用 map()、filter()、reduce() 和 find() 循环通常用于在任何编程语言中对数组执行操作:给定一个数组,您可以迭代其元素并执行计算。 让我们看看如何选择常见需求并使用**函数式编程**方法执行它们,而不使用循环。 注意:我不推荐其中一种方法。我只是想介绍执行相同操作的不同方式,并可能向您介绍一些以 ...
| 2023-06-26 SwiftUI:Button視圖和更新應用程序狀態 SwiftUI:Button視圖和更新應用程序狀態Button視圖可用於顯示互動式按鈕元素。 我們可以這樣聲明它: 123Button("按鈕標籤") { // 當點擊時執行的操作} 或者這樣聲明: 12345Button { // 當點擊時執行的操作} label: { Text("按鈕標籤")} 第二種方式在按鈕的標籤中有其他內容,而不僅僅是文本時比較 ...
| 2023-06-26 JavaScript 中的基本類型 vs 物件 JavaScript 中的基本類型 vs 物件JavaScript 中的基本類型和物件有哪些主要區別呢? 首先,讓我們定義一下什麼是基本類型。 JavaScript 中的基本類型有: 字串 (String) 數字 (Number 和 BigInt) 布林值 (true 或 false) 未定義 (undefined) 符號值 (Symbol) null 是一種特殊的基本類型。如果你執行 typeof null,會返回 'object',但它實際上是一種基本 ...
| 2023-06-26 一個大型白板是對自己最好的投資 一個大型白板是對自己最好的投資我愛我的白板。 它是一個大的、巨大的白板。 今天我剛剛把它移到一個新的位置,鑽了一些洞在一個新的牆上(意思是它從未被放過的牆)。 我從小就有這個白板,不記得它是從哪裡來的。 它可能是一件聖誕禮物或生日禮物。我現在還留著它。 我把所有事情都計劃在這個白板上。 它比任何的待辦事項應用程式,比任何思維導圖工具都強大。 可能是因為它是一個現實世界的物品。 它是真實的,就像你把大腦裡的思緒下載到這個大大的白色表面時,白板筆的味道也是真實的。 我不斷地改變 ...
| 2023-06-26 JavaScript 代理对象 JavaScript 代理对象在使用对象时,我们可以创建一个代理对象来拦截和改变现有对象的行为。 我们使用在ES2015引入的Proxy原生对象来实现。 假设我们有一个car对象: 123const car = { color: 'blue'} 一个非常简单的例子是当我们尝试访问一个不存在的属性时返回一个‘Not found’字符串。 你可以定义一个代理对象,每当你尝试访问这个对象的属性时都会被调用。 你可以通过创建另一个对象来实现, ...
| 2023-06-26 在React中处理组件上的DOM事件 在React中处理组件上的DOM事件我想根据鼠标悬停状态来显示或隐藏一个小面板。 当我悬停在链接上时,面板会显示出来。 然后我可以用鼠标进入这个面板,当我移开鼠标时,面板会隐藏起来。 就像Twitter上的个人资料,在鼠标悬停在一个人的名字上时会显示出来: 对于触发面板显示的<a>元素,我添加了onMouseEnter事件: 12345<a onMouseEnter={() => { setShowCard(true) } ...
| 2023-06-26 如何在Next.js中運行構建時執行腳本 如何在Next.js中運行構建時執行腳本我試圖看看將我的基於Hugo的博客移植到Next.js是否是一個好的選擇(這並不是)。在這個過程中,我遇到了一個問題。 我需要更改每個圖片的路徑,因為Hugo允許一個帖子與Markdown文件位於同一個文件夾中,而Next.js則不允許這樣做。 但是,我不想打亂我的工作流程。能夠將圖片放在與Markdown文件相同的文件夾中對於編寫和維護都非常方便。 所以我的計劃是:在構建時,我會遍歷所有帖子,收集圖片,並在/public/images ...
| 2023-06-26 一個關於Vim的簡短指南 一個關於Vim的簡短指南vim 是一款非常受歡迎的文件編輯器,尤其在程序員中間。它正在積極開發和頻繁更新,並且擁有龐大的社區。甚至有一個Vim研討會! 在現代系統中,vi 只是指向 vim 的別名,這意味著 vi 是 vim 的增強版。 通過在命令行上運行 vi 命令來啟動它。 您可以在啟動時指定要編輯的特定文件名: 1vi test.txt 您需要知道Vim有2個主要模式: 命令(或正常)模式 插入模式 當您啟動編輯器時,您處於命令模式。您無法像GUI編輯器那樣直 ...
| 2023-06-26 Node.js事件循環 Node.js事件循環事件循環是了解Node.js最重要的方面之一。 為什麼這個很重要?因為它解釋了Node.js為什麼可以是非同步的並且具有非阻塞的I/O,也解釋了Node.js的”殺手級應用”,這正是使它變得如此成功的原因。 Node.js的JavaScript代碼運行在單個線程上,一次只能發生一件事。 這實際上是一種很有幫助的限制,因為它簡化了編程,不需要擔心並發問題。 您只需注意如何編寫代碼,避免阻塞線程的任何事情,例如同步網絡調用或無限循環。 總的來說,在 ...
| 2023-06-26 The Object preventExtensions() method The Object preventExtensions() method了解JavaScript Object物件的preventExtensions()方法 JavaScript的preventExtensions()方法是Object物件中的一種方法,它接受一個物件作為參數,並返回相同的物件。傳遞的物件會被改變,成為一個不接受新屬性的物件。無法添加新的屬性,但可以刪除現有的屬性,並且可以更改現有的屬性。 範例: 12345const dog = {} ...
| 2023-06-26 React Hooks 簡介 React Hooks 簡介學習如何使用 Hooks 建立 React 應用程式 Hooks 是在 React 16.7 中引入的功能,它將改變我們未來編寫 React 應用程式的方式。 在出現 Hooks 之前,某些關鍵的功能只能在類別組件中實現:擁有自己的狀態和使用生命週期事件。輕巧靈活的函式組件在功能上受到了限制。 Hooks 允許函式組件擁有狀態並響應生命週期事件,並且幾乎使類別組件過時。它們還允許函式組件以良好的方式處理事件。 存取狀態 使用 useState() ...
| 2023-06-26 Next.js 如何在新視窗中開啟連結 Next.js 如何在新視窗中開啟連結以下是在 Next.js 中如何在新視窗中開啟連結的方法: 123<Link href={url}> <a target="_blank">點擊這個連結</a></Link> 首先,將 a 標籤包裹在 Link 元件中(這是 Next.js 提供的 Link 元件),然後在 a 標籤內部加入 target="_blank" 屬性 ...
| 2023-06-26 如何在 Docker 容器外訪問檔案 如何在 Docker 容器外訪問檔案如果容器是隔離的,那麼它們如何與主機進行通信,例如存儲數據?因為當我們從映像創建容器時,容器被移除時生成的任何數據都會丟失。 因此,我們需要一種方式來實現永久性存儲。 我們可以使用 Bind Mounts 和 Volumes 來實現。 兩者之間沒有太大的區別,除了 Bind Mounts 可以指向主機計算機上的任意文件夾,並且不由 Docker 直接管理。 讓我們首先看看 Bind Mounts。一個典型的例子是日誌文件。假設您的應用在容器 ...
| 2023-06-26 如何在Netlify functions中使用環境變數 如何在Netlify functions中使用環境變數一個關於如何在Netlify functions中使用環境變數的簡要指南。 要在 Netlify Functions 中使用環境變數,可以訪問 process.env 變量: 1process.env.YOUR_VARIABLE 您也可以在JS文件的開頭使用對象解構,使代碼更加精簡: 1const { YOUR_VARIABLE } = process.env; 因此,在程序的其餘部分中,您只需 ...
| 2023-06-26 如何使用CSS選擇第一個子元素 如何使用CSS選擇第一個子元素問題:在我的Markdown文件中,我需要對第一個ul進行樣式設置,也無法通過添加類名或ID來使用CSS進行選擇。 所以我研究了如何使用選擇器來選中它。 HTML結構如下: 1234567<div id="content"> <ul> ...目錄 </ul> ...其他HTML內容</div> 下面的代碼將選中div#content的第一個子元素ul並保持其他ul元素不受影響: ...
| 2023-06-26 JavaScript 中的分號 JavaScript 中的分號在 JavaScript 中,分號是可選的。我個人喜歡在我的代碼中避免使用分號,但許多人更喜歡使用它們。 JavaScript 中的分號在社群中存在著分歧。有些人喜歡無論如何都使用分號。其他人則喜歡避免使用它們。 在使用分號多年之後,在2017年秋季,我決定試著根據需要避免使用它們,並且我設置了 Prettier 來自動從我的代碼中移除分號,除非有特定的代碼結構需要它們。 現在我發現避免使用分號是自然的,我認為代碼看起來更好,並且更容易閱讀。 這 ...
| 2023-06-26 SwiftUI:屬性 SwiftUI:屬性您可以將任何屬性添加到任何 SwiftUI 視圖中,就像這樣: 12345678910import SwiftUIstruct ContentView: View { let name = "Flavio" var body: some View { Text("Hello, \(name)!") .font(.largeTitle) ...
| 2023-06-26 DataView物件 DataView物件了解DataView物件及其使用方法 DataView是一個對ArrayBuffer的視圖,類似於Typed Arrays,但是在這種情況下,數組中的項目可以具有不同的大小和類型。 以下是一個例子: 12const buffer = new ArrayBuffer(64)const view = new DataView(buffer) 因為這是對緩衝區的視圖,我們可以指定從哪個字節開始,以及長度: 1const view = new DataView( ...
| 2023-06-26 Vue.js 單檔元件 Vue.js 單檔元件學習如何使用 Vue 創建單一檔案來封裝一個組件的所有相關內容,集中管理外觀和行為。 一個 Vue 組件可以在一個 JavaScript 檔案(.js)中這樣聲明: 123Vue.component('component-name', { /* 選項 */}) 或者: 123new Vue({ /* 選項 */}) 也可以在一個 .vue 檔案中指定。 這個 .vue 檔案非常酷,因 ...
| 2023-06-26 Notion API,更新頁面的圖示表情符號 Notion API,更新頁面的圖示表情符號以下是使用Notion API更新Notion頁面的圖示表情符號的方法。 假設您已經初始化了Notion客戶端: 12345import { Client } from '@notionhq/client'//...const notion = new Client({ auth: process.env.NOTION_API_KEY }) 假設頁面id存儲在page_i ...
| 2023-06-26 將文字保存到 Node.js 中的文件中 將文字保存到 Node.js 中的文件中所以您想使用 Node.js 將一些文字保存到文件中。 非常簡單: 12345678910import fs from 'node:fs'const text = 'yo'fs.writeFile('text.txt', text, (err) => { if (err) { console.error(err) } console.log( ...
| 2023-06-26 如何從 MongoDB 集合中刪除所有項目 如何從 MongoDB 集合中刪除所有項目在使用 MongoDB 時,你可能需要從集合中刪除所有項目。 你可以通過調用集合的 deleteMany 方法並傳入一個空對象來實現。 像這樣: 1yourcollection.deleteMany({}) 下面是一個完整的示例: 123456789101112131415161718192021const mongo = require('mongodb').MongoClientconst ...
| 2023-06-26 在 Docker 容器中部署 Go 應用程式 在 Docker 容器中部署 Go 應用程式 簡介 安裝 Go 官方鏡像 一個範例應用 將應用程式擺到 Docker 精簡 Docker 映像檔 多階段建置 簡介如果你從沒聽過 Docker,不過這很不可能,第一件你應該知道的事情是 Docker 允許你以隔離方式執行應用程式,高度關注於分離的問題,但同時允許它們與外部世界通訊和互動。 還有你應該知道的是,每個人都在使用它,每個主要的雲端服務提供商也都有專用於運行容器的解決方案,所以你應該學習它! 安裝安裝方法隨你的系統而異 ...
| 2023-06-26 Python數據類型 Python數據類型Python有幾種內置類型。 如果你創建了一個name變量並將其賦值為“Roger”,這個變量將自動表示一個字符串數據類型。 1name = "Roger" 你可以使用type()函數檢查變量的類型,將變量作為參數傳入,然後將結果與str進行比較: 12name = "Roger"type(name) == str #True 或者使用isinstance(): 12name = "Roger" ...
| 2023-06-26 Go工作空間介紹 Go工作空間介紹Go的一個特點是我們稱之為工作空間。 工作空間是Go的“主體”。 默認情況下,Go選擇$HOME/go路徑,所以你會在家目錄中看到一個go文件夾。 它首次在安裝封包時創建(稍後我們將看到),也用於存儲一些工具。例如,當我在VS Code中加載hello.go文件時,它提示我安裝[gopls](https://pkg.go.dev/golang.org/x/tools/gopls)命令、Delve調試器(dlv)和[staticcheck linter](htt ...
| 2023-06-26 如何使用 Firebase Firestore 作為你的資料庫 如何使用 Firebase Firestore 作為你的資料庫一個設置 Firestore 作為資料庫的教程,這是一個非常方便的解決方案,可以解決你的儲存問題! 我有一個需求,需要為我的 成員俱樂部 創建一個儲存數據的地方,這是我教授編程的地方。 我希望我的用戶可以通過點擊一個按鈕來手動說“我完成了這個課程”。 基本上,我想為每個用戶存儲一個特定的對象。 設置 Firebase我決定使用 Firebase 以及他們提供的 Firestore 資料庫 來實現這個需求。 它的免費 ...
| 2023-06-26 如何創建一個滑鼠離開視窗時彈出的彈窗 如何創建一個滑鼠離開視窗時彈出的彈窗你知道那些當你試圖關閉瀏覽器視窗時出現的煩人彈窗嗎? 它們好像知道你在試圖關閉視窗,就像它們能讀取你的思想一樣。 實際上,這是一個非常簡單的概念,你需要聽取特定的DOM事件。 我個人不推薦使用彈窗,因為我覺得它們很煩人,但是你的公司可能要求你實現一個,所以在這裡我們就來實現一個。 我喜歡保持事情簡單,所以這裡是HTML的部分: 123456789<!doctype html><head><title>彈窗 ...
| 2023-06-26 部署 PHP 應用程式 部署 PHP 應用程式當你有一個準備好的應用程式時,就該部署它並讓它可以從網上任何地方存取! PHP 是在網上部署方面,擁有最佳成敗故事的程式語言。 相信我,其他每一種程式語言和生態系統都希望自己和 PHP 一樣容易。 PHP 的優點、它準確理解並允許取得這令人難以置信的成功,是即時部署。 你把一個 PHP 檔案放在 Web 伺服器服務的資料夾中,它就能正常運作了。 不需要重新啟動伺服器,執行可執行檔,什麼都不需要。 這仍然是眾多人的做法。你以 3 美元每月租用一個共享主機, ...
| 2023-06-26 JavaScript的堆疊資料結構 JavaScript的堆疊資料結構堆疊是一種資料結構,相較於陣列具有更多限制。 我們只能將項目加入堆疊頂部,並且只能移除堆疊頂部的項目。 想像一下一堆書。你只能從頂部添加書,並且只能從頂部移除書。 因此,如果你添加了一堆書,然後想要存取第一本添加的書,你需要先移除所有書,直到到達第一本書。 這個概念被稱為「先進後出」(First In, Last Out,FILO)。 雖然JavaScript的陣列是內建的,不需要自己建立,但我們必須自己實現堆疊。 我們將創建一個封裝我們資料 ...
| 2023-06-26 在React中的條件渲染 在React中的條件渲染如何在React中動態輸出某些元素或其他元素 在React的元件JSX中,您可以基於條件進行動態決定要輸出的元件或其他元素,或者只是其中一部分的JSX。 最常見的方式可能是使用三元運算符: 12345const Pet = (props) => { return ( {props.isDog ? <Dog /> : <Cat />} )} 另一種方式是使用&&運算符 ...
| 2023-06-26 Linux 命令:man Linux 命令:man一個介紹 man 命令的快速指南,用於學習如何使用命令行命令。 每當我不知道如何使用一個命令時,我輸入 man <命令> 來查看手冊: 這是一個 man (來自於 “manual”, 手冊) 頁面。作為一名開發人員,掌握使用 man 頁面是一個必需的工具。它們包含的信息很豐富,有時候幾乎太多了。 上面的截圖只是 ls 命令的 14 個頁面中的其中之一。 Man 頁面分為 7 個不同的組,根據編號進行標識: 1 是用戶命令 2 是內核系統 ...
| 2023-06-26 如何製作網頁原型 如何製作網頁原型快速瀏覽我使用的簡單工作流程以製作網頁原型。 有時候我會為我的專案工作在單頁網頁上。 也許我想重新設計部落格,也許是一個新專案的登陸頁。 以下是我使用的工作流程。 我喜歡使用 Tailwind 建立原型。 首先,我先設定好所有的 Tailwind 和 PostCSS Pipeline: 建立 postcss.config.js 檔案: 1234567891011121314const purgecss = require('@fullhuman/po ...
| 2023-06-26 在 Tailwind 中對子元素應用樣式 在 Tailwind 中對子元素應用樣式雖然不常發生,但有時候我會考慮如何在 Tailwind 中對子元素應用樣式。 下一次遇到這種情況,我就可以參考這篇部落格文章來解決。 你可以使用以下這個類別名稱將 bg-gray-300 這個樣式套用到當前元素的所有子元素上: 1[&>\*]:bg-gray-300 像這樣使用: 123<div class="[&>\*]:bg-gray-300"> ....</div ...
| 2023-06-26 phaser-mouse-input #Phaser:滑鼠輸入 該文章是Phaser系列的一部分。點擊這裡查看系列文章的第一篇。 任何 GameObject 都可以被設置為可互動。 為了實現這一點,我們必須通過調用setInteractive()方法來設置。 12text = this.add.text(100, 100, '測試')text.setInteractive() 一旦一個 GameObject 變成了可互動的,它就可以聽取事件。 我們可以使用on()方法來做到這一點。我們通 ...