|

Phaser: 處理畫布

Phaser: 處理畫布 本篇文章是 Phaser 系列的一部分。點擊這裡 查看系列的第一篇文章。 Phaser 遊戲是在 HTML 的 <canvas> 元素中渲染的。 如果你對 Canvas 還不熟悉,我在 Canvas API 教程 中詳細介紹了它。 我們創建一個帶有特定寬度和高度的畫布,並在其中繪製內容。 我們無法使用 CSS 來對元素進行排版,而是需要使用更底層且較困難的 API。 幸運的是,Phaser(以及其他使用底層 Canvas 的庫)抽象了所 ...

tech wiki
tech wiki
1 min read
|

JavaScript 參考:物件

JavaScript 參考:物件關於 JavaScript 物件屬性和方法的一切 本篇文件記錄了所有 Object 內建物件的屬性和方法。 除了原始類型(字串、數字、布林值、符號、null 或 undefined)之外的任何值都是一個物件。即使是陣列或函式,在底層也都是物件。 可以使用物件字面語法來生成一個物件值: 12const person = {}typeof person // "object" 可以使用 Object 全局函 ...

tech wiki
tech wiki
5 min read
|

Linux命令:xargs

Linux命令:xargs快速指南,介紹 xargs 命令的使用,它用於將一個命令的輸出作為另一個命令的參數。 xargs 命令在UNIX shell中用於將標準輸入轉換為命令的參數。 換句話說,通過使用 xargs,將一個命令的輸出用作另一個命令的輸入。 以下是使用的語法: 1command1 | xargs command2 我們使用管道(|)將輸出傳遞給 xargs。這將運行 command2 命令,並使用 command1 的輸出作為其參數。 讓我們舉個簡單的例子。 ...

tech wiki
tech wiki
2 min read
|

Go中的結構體

Go中的結構體結構體是一種包含一個或多個變量的類型。它類似於一組變量,我們稱之為字段。這些字段可以具有不同的類型。 下面是一個結構體定義的示例: 1234type Person struct { Name string Age int} 請注意,我們使用大寫字母命名字段,否則這些字段將對包私有。當您將結構體傳遞給其他包提供的函數(例如用於處理 JSON 或數據庫的函數)時,將無法訪問這些字段。 一旦我們定義了結構體,我們可以使用該類型初始化變量: 1fl ...

tech wiki
tech wiki
2 min read
|

Vue.js過濾器

Vue.js過濾器過濾器是Vue.js中的一種功能,它讓我們可以對模板插值中使用的值應用格式化和轉換。 過濾器是由Vue組件提供的一種功能,它允許您對模板動態數據的任何部分應用格式化和轉換。 它們不會更改組件數據或其他任何內容,但它們只會影響輸出。 舉個例子,假設您要打印一個名字: 12345678910111213<template> <p>嗨 {{ name }}!</p></templat ...

tech wiki
tech wiki
4 min read
|

如何使用遷移來創建和修改資料庫架構

如何使用遷移來創建和修改資料庫架構 本教程是 Laravel 手冊的一部分。您可以從 https://flaviocopes.com/access/ 下載。 遷移非常適合處理資料庫的變更,這樣您就可以應用這些變更,並在需要恢復到先前狀態時回滾數據。 從終端機中停止 Laravel 伺服器,然後運行以下命令來創建一個新的遷移,我們將使用它來創建我們需要使用的資料庫表: 1php artisan make:migration initial_table_creation 此 ...

tech wiki
tech wiki
2 min read
|

使用Go建立CLI命令:cowsay

使用Go建立CLI命令:cowsayCowsay 是那些你無法生活沒有的應用之一。 它基本上是根據傳遞給它的任何訊息生成ASCII圖片的一頭牛,以上的屏幕截圖中使用 fortune 生成。 不僅限於牛類,它還可以打印企鵝、麋鹿和許多其他動物。 聽起來像是一個適合移植到Go的有用應用! 我還喜歡它附帶的簡單英文許可證: 12345678910111213==============cowsay 許可證==============cowsay 根據Perl的許可證進行分發:艺术许 ...

tech wiki
tech wiki
11 min read
|

Svelte 綁定

Svelte 綁定如何在 Svelte 中使用綁定 使用 Svelte,您可以在數據和 UI 之間創建雙向綁定。 許多其他 Web 框架可以提供雙向綁定,這是一種非常常見的模式。 在表單中特別有用。 bind:value讓我們從您通常會使用的最常見的綁定方式開始,您可以使用 bind:value 來應用它。您從組件狀態中獲取一個變量,並將它綁定到表單字段上: 12345<script>let name = ''</script>&l ...

tech wiki
tech wiki
9 min read
|

如何使用 useReducer React Hook

如何使用 useReducer React Hook了解 useReducer React Hook 的用途以及如何使用它! 自從 React 引入了 hooks 以來,我在幾個專案中都使用過它們,它們真的很強大。 移除所有基於 class 的組件,讓代碼更像是真正的 JavaScript。而且函數組件終於可以管理狀態了。 如果你對 hooks 還不熟悉,請先看看我的React hooks介紹。 我有時會使用到的一個 Hook 是 useReducer。 1import Re ...

tech wiki
tech wiki
4 min read
|

some-days

有些日子比其他日子好 我每天睡8小時。一天有24小時,所以我有大約16小時的時間。 不是所有的小時都是相等的。 也不是所有的日子都是相等的。 作為一個創作者,有些日子比其他日子好。 白天裡,有些小時比其他小時好。 午餐後,根據你吃的東西,接下來的2-3小時可能幾乎是浪費的。 晚上你可能太累了,無法做任何有意義的事。 早上你可能還不夠清醒。 真正有用的做事時間非常有限。 有些人比我更擅長時間管理。他們說:“不管怎樣,我從早上8點到中午12點工作”。大多數時候我做不到這點。我有事 ...

tech wiki
tech wiki
1 min read
|

如何在JavaScript中交換兩個數組元素

如何在JavaScript中交換兩個數組元素在JavaScript中,如何交換數組中的2個元素? 假設我們有一個包含5個字母的數組a。 1const a = ['a', 'b', 'c', 'e', 'd'] 我們想要將索引為4的元素(在這個例子中是’d’)和索引為3的元素(在這個例子中是’e’)進行交換。 我們可以使用一個暫存變量tmp來存儲索引為4的元素的值,然後將索引為 ...

tech wiki
tech wiki
1 min read
|

Swift條件語句:三元條件運算符

Swift條件語句:三元條件運算符 本教程屬於Swift系列 三元條件運算符是if表達式的一種簡短形式。它允許我們在條件為真時執行一個表達式,並在條件為假時執行另一個表達式。 以下是語法: 1`條件` ? `真值` : `假值` 舉個例子: 123456let num1 = 1let num2 = 2let smallerNumber = num1 < num2 ? num1 : num2 // smallerNumber == 1 這種語法比if語句要簡潔,有時 ...

tech wiki
tech wiki
1 min read
|

React概念:純度

React概念:純度純度是什麼,純函數和純組件是什麼 在JavaScript中,如果一個函數不改變對象,而只是返回一個新的對象,則稱為純函數。 一個函數,或者一個方法,要被稱為純,不能引起副作用,在使用相同的輸入多次調用時應該返回相同的輸出。 純函數接收輸入並返回輸出,不改變輸入或其他任何東西。 它的輸出僅由參數決定。你可以對這個函數調用100萬次,並給定相同的參數,輸出始終是相同的。 React將這個概念應用到組件上。當組件的輸出僅依賴於它的props時,它被稱為純組件。 ...

tech wiki
tech wiki
1 min read
|

如何解決“未定義的document”錯誤

如何解決“未定義的document”錯誤以下是解決在Node.js中或使用像Next.js這樣的工具時可能出現的“referenceerror: document未定義”錯誤的方法。 document是瀏覽器提供的一個對象,它在服務器端JavaScript環境中無法使用。 我在我的廣泛的DOM Document Object Model指南中詳細描述了document對象。 特別是在Node.js中,沒有辦法解決這個問題 - 你必須找出使用document的具體位置,並重新檢 ...

tech wiki
tech wiki
1 min read
|

Phaser:鍵盤事件

Phaser:鍵盤事件 本篇文章是Phaser系列的一部分。點擊這裡查看該系列的第一篇文章。 滑鼠事件會在遊戲物件上觸發,因為我們通常是透過滑鼠點擊元素。而鍵盤事件則不會與特定的遊戲物件相關聯,我們只是按下鍵盤上的按鍵。 所以我們需要在this.input.keyboard對象上監聽這些事件,如下所示: 123this.input.keyboard.on(<event>, function() {}) <event>是一個字符串 ...

tech wiki
tech wiki
3 min read
|

使用 VS Code 和 Delve 调试 Go

使用 VS Code 和 Delve 调试 Go我最喜欢的代码编辑器是来自微软的 VS Code。在过去的20年里,我使用过许多编辑器,但这是迄今为止最好的。 VS Code 是开源的,即使在我的不太新的 MacBook Pro 上也很快,它从不在进行中崩溃,它可以自定义扩展,但开箱即用效果也很好。 这一切都很棒,但是如何调试 Go 程序呢?你可能认为需要一个笨重的 IDE,但事实并非如此。通过 Delve,由 Derek Parker 开发的工具,调试 Go 程序非常简单。 ...

tech wiki
tech wiki
3 min read
|

React Router:如何從動態路由中獲取數據

React Router:如何從動態路由中獲取數據當您使用 React Router 以動態參數的方式時,一個非常常見的需求是獲取我們在頁面中顯示的數據。 舉個例子,假設我們有一個項目列表,點擊項目後會進入項目詳情頁,URL 地址為 /project/PROJECT_ID。 我找到了兩種方法來實現這個需求。 首先,在路由中聲明這樣的路徑: 123<Route path="/project/:id"> <SingleProject /&g ...

tech wiki
tech wiki
3 min read
|

公園的步道系統

公園的步道系統步道系統是指某個區域周圍的一組步道網絡。它可以是徒步步道、雪地摩托步道等等。 就像步道系統為你提供了一張你曾經去過和將要去的地方的地圖一樣,你的企業的步道系統是其他人導航你的宇宙的地圖。 我來舉個例子,說明一下我的企業步道系統。 我有一個博客,我每天在這個博客上寫作。很多人通過谷歌和其他站點找到這個博客,這些站點上有人鏈接到我過去寫的博客文章。 所有這些都是從外部世界帶到我步道系統開始的道路。 我無法控制每天有多少人出現在步道系統的門口。 我能控制的是步道是否乾 ...

tech wiki
tech wiki
3 min read
|

使用useState與對象:如何更新

使用useState與對象:如何更新當使用useState定義的狀態變量是一個具有屬性的對象時,如何更新它可能有些困惑。 你不能只是更新對象,否則組件將不會重新渲染。 我找到的一種模式涉及創建一個帶有一個屬性的臨時對象,並使用對象解構來從現有的兩個對象中創建一個新對象: 12345678910const [quizAnswers, setQuizAnswers] = useState({})...const updatedValue = { ...

tech wiki
tech wiki
1 min read
|

在安裝 Docker 後的第一步

在安裝 Docker 後的第一步完成Docker安裝後,您應該會看到一個新視窗,引導您進行使用Docker建立映像檔和容器的第一步驟: 這是一種有趣的方式,讓您快速下載並執行第一個容器映像檔。 您可以在此應用程序內建的右側終端中運行命令,但我更喜歡在自己的終端中執行。 我打開 macOS 終端,運行 cd dev 進入家目錄中的 dev 文件夾,然後創建一個 docker 子目錄,將用於容納所有的Docker實驗。我運行 cd docker 進入此目錄,然後執行以下命令: ...

tech wiki
tech wiki
4 min read
|

MacBook Air或MacBook Pro用於網頁開發?

MacBook Air或MacBook Pro用於網頁開發?我寫這篇文章是因為我在Twitter上看到很多人在問這個問題。如果您使用Linux或Windows,這個問題對您來說根本不成問題。此外,您並不需要一台MacBook來學習網頁開發,您可以使用任何電腦。 蘋果目前推出了兩款筆記本電腦,第一款是MacBook Air,然後是MacBook Pro。 我兩種都用過,所以讓我告訴你我會選擇哪一款。 如果僅考慮功率和速度,您會選擇自己負擔得起的最強大的MacBook Pro。 ...

tech wiki
tech wiki
2 min read
|

JavaScript原型繼承

JavaScript原型繼承JavaScript因為使用原型繼承而在流行的程式語言中相當獨特。讓我們來看看這意味著什麼。 JavaScript因為使用原型繼承模型而在流行的程式語言中相當獨特。 這是什麼意思呢? 每個JavaScript物件都有一個被稱為prototype的屬性,指向另一個物件。 這個不同的物件就是物件原型。 我們的物件使用這個物件原型來繼承屬性和方法。 假設你使用物件字面語法來創建物件: 1const car = {} 或者使用new ...

tech wiki
tech wiki
2 min read
|

JSON介紹

JSON介紹JSON是一種儲存和交換資料的優良格式,廣泛用於JavaScript但不僅限於此-了解一切有關它的知識! JSON是一種文件格式,用於儲存和交換資料。 資料以鍵值對的形式儲存。 JSON格式易於人類閱讀,非常適合手動編輯。 這是一個JSON字符串的例子: 1234{ "name": "Flavio", "age": 35} 從這個小片段中,你可以看到鍵被包裹在雙引號中,冒號分隔鍵和值 ...

tech wiki
tech wiki
4 min read
|

Parcel,一個更簡單的Webpack

Parcel,一個更簡單的WebpackParcel是一個網頁應用程序打包工具。它與Webpack處於同一工具類別,但有不同的價值主張。Parcel承諾可以不需要任何配置,同時保持速度快。 Parcel是一個網頁應用程序打包工具。 它與Webpack處於同一工具類別,但有不同的價值主張。 主要功能包括: 資源打包(JS、CSS、HTML、圖片) 零配置代碼拆分 使用Babel、PostCSS和PostHTML的自動轉換 熱模塊替換 使用緩存和並行處理以加快構建速度 Par ...

tech wiki
tech wiki
4 min read
|

如何使用 Node.js 讀取 CSV 檔案

如何使用 Node.js 讀取 CSV 檔案使用 Node.js 讀取 CSV 檔案的快速教程 許多不同的 npm 模組可以讓你從 CSV 檔案中讀取資料。 其中大部分是基於串流(streams)的,像是 csv-parser 或者 node-csv。 這些模組非常適合在生產系統中處理 CSV 檔案。 如果不需要考慮效能,我喜歡保持事情的簡單。例如,對於一次性解析 CSV 檔案來整合我的後端系統。 為了這樣做,我使用了 neat-csv,這個套件將 csv-parser 的功 ...

tech wiki
tech wiki
1 min read
|

我過去做的所有軟體項目

我過去做的所有軟體項目我在這些年裡製作的一個漫長的軟體項目列表 備註:此列表不包括作為其他公司或個人的承包商製作的項目。只有我自己作為獨立創業家/獨立黑客/製造商而建立的項目 我15歲開始編程,現在36歲,我擁有一個漫長的項目列表,這些項目雖然最終失敗,但都有助于創造現在我這個36歲的獨立創業家的形象。 我第一次接觸編程是在Amiga上,它附帶了百科全書套件。那裡有一個叫做RexxMast的東西,你可以打開它,然后可以輸入任何東西。唯一的問題是,我不知道該 ...

tech wiki
tech wiki
7 min read
|

資料模型

資料模型資料模型定義了如何給予資料一個結構,以及資料如何與其他資料相連接。 我們有許多不同類型的資料模型。它們可以分為兩個主要的類別:概念模型和邏輯模型。 最著名的概念模型是實體關係(Entity-Relationship)模型,也稱為 ER 模型。在設計階段,當您開始時最好使用此模型來組織資料,因為它最貼近我們思考的方式,並且不受任何特定實作的影響。 另一方面,邏輯模型更接近實作。 邏輯模型包括(包括但不限於): 關聯模型 階層模型 網狀模型 物件模型 從名稱就可以看出 ...

tech wiki
tech wiki
1 min read
|

經營部落格的利與弊

經營部落格的利與弊擁有一個部落格並非全是遊戲與樂趣。在你的旅程中可能會遇到很多困難。 認識到這一點是朝著正確方向邁出的第一步。 寫作的障礙寫作障礙是一件事。我對此沒有一般性的建議,關於這個主題有許多更好的建議,比我能提供的還要多。 我解決不知道該寫什麼的方法是選擇我想要學習的主題,並公開地進行學習。就像我現在寫的這篇文章一樣,我正在學習一個全新的事物(Arduino和電子感應器),同時重新發現我在學校學習過的舊的電子學題目。 我在學習這個事物的同時拍攝視頻,並根據適合於部落格 ...

tech wiki
tech wiki
6 min read
|

使用 Express 擷取 POST 查詢參數

使用 Express 擷取 POST 查詢參數在本篇文章中,我們將介紹如何使用 Express 擷取 POST 查詢參數。 POST 查詢參數通常是由 HTTP 客戶端傳送的,例如表單提交或是進行 POST 請求時傳送的資料。 如何存取這些資料呢? 如果資料是以 JSON 格式傳送,使用 Content-Type: application/json,你需要使用 express.json() 中介軟體: 1234const express = require('exp ...

tech wiki
tech wiki
2 min read
|

如何在 C 中訪問命令行參數

如何在 C 中訪問命令行參數學習如何在 C 中訪問命令行參數 在你的 C 程式中,當命令啟動時,你可能需要從命令行接受參數。 對於簡單的需求,你只需要將 main() 函数的簽名從 1int main(void) 修改為 1int main(int argc, char *argv[]) argc 是一個整數,它包含了命令行中提供的參數數量。 argv 是一個字符串數組。 當程式啟動時,我們可以通過這兩個參數獲取傳入的參數。 注意,argv 數組中始終至少有一個項目:程 ...

tech wiki
tech wiki
2 min read
|

Swift 程式語言介紹

Swift 程式語言介紹 本文是關於 Swift 的新系列文章的開始 Swift 程式語言是由蘋果於 2014 年推出的,並且是與所有蘋果操作系統系列一起使用的官方語言: iOS、iPadOS、watchOS、macOS、tvOS。 Swift 是一個開放源碼、通用、編譯的程式語言。 它是一個靜態類型的程式語言。 每個值都有一個分配的類型。在編譯時使用該值作為參數或返回時,將始終檢查其類型。如果不匹配,則程式將無法編譯。 Swift 的編譯器是 LLVM,並且它包含在用於蘋 ...

tech wiki
tech wiki
3 min read
|

如何在JavaScript中檢查字串是否以另一字串開頭

如何在JavaScript中檢查字串是否以另一字串開頭在JavaScript中,檢查一個字串是否以另一個子字串開頭是一個常見的需求。下面介紹如何在JavaScript中執行這個檢查。 2015年引入的ES6標準為String原型對象添加了startsWith()方法。 這是在現代JavaScript中執行這個檢查的方法。 這意味著你可以在任何字串上調用startsWith()方法,提供一個子字串作為參數,然後檢查結果是否為true或false: 12'testing ...

tech wiki
tech wiki
1 min read
|

Glitch:一個很棒的開發者平台

Glitch:一個很棒的開發者平台Glitch是一個非常棒的平台,可以用來學習和實驗程式碼。本文將向您介紹Glitch,並讓您從零到一成為Glitch的高手。 Glitch是一個很好的學習編程的平台。 我在許多教程中使用Glitch,我認為它是一個展示概念並允許人們使用您的項目並在其基礎上建立的很棒的工具。 以下是我在Glitch上使用React和React Router創建的示例項目:https://glitch.com/edit/#!/flaviocopes-r ...

tech wiki
tech wiki
9 min read
|

為什麼不應該修改 JavaScript 物件的原型

為什麼不應該修改 JavaScript 物件的原型了解為什麼不應該修改 JavaScript 物件的原型,以及應該做什麼 作為程式設計師,我們必須首先學會的技能之一就是如何尋找解決方案。 Google 是你的朋友。而大多時候,一個來自 2009 年的 StackOverflow 解答能夠完美解決你在 2019+ 的問題。 在該網站或個人部落格上,有時候我會看到一些修改內建物件原型的程式碼。 就像這個例子,它擴充了 Array 物件的原型,增加了一個 insert 方法: 12 ...

tech wiki
tech wiki
2 min read
|

使用 Git 工作流管理多分支的工作

使用 Git 工作流管理多分支的工作我在项目中使用 Git 作为版本控制工具,并且经常遵循以下策略。 这个策略受到了A successful Git branching model的启发。 我有两个永久分支:master和develop。 以下是我日常开发中遵循的规则: 当我接手一个新任务或决定加入一个功能时,有两条主要路径: 如果功能较为简单,或后续提交不会破坏代码(至少我希望如此):我可以在develop分支上提交,或者创建一个快速功能分支,然后将其合并到develop ...

tech wiki
tech wiki
2 min read
|

如何在 Ghost 網站上添加搜索功能

如何在 Ghost 網站上添加搜索功能我想在自己使用 Ghost 架設的網站上添加搜索功能。 你可以在這個頁面上看到這個教程的最終效果:https://ritywool.it/ricerca/。 當你第一次開始處理這個任務時,你會覺得 “這一定很簡單”。 但不知何故 Ghost 軟件並沒有提供一個簡單的解決方案,你需要使用第三方插件並修改模板。這確實需要一位懂得處理這些的開發者。 不知道為什麼他們沒有提供一個內建的簡單解決方案,而不是需要像我這樣的開發者花時間來調整主題。 這 ...

tech wiki
tech wiki
4 min read
|

HTML 的 `iframe` 標籤

HTML 的 iframe 標籤了解使用 HTML 的 iframe 標籤的基礎知識 iframe 標籤允許我們將來自其他來源(其他網站)的內容嵌入我們的網頁中。 從技術上講,iframe 創建了一個嵌套的瀏覽上下文。這意味著 iframe 中的任何內容都不會干擾父頁面,反之亦然。JavaScript 和 CSS 不會「洩漏」到/從 iframe 中。 許多網站使用 iframe 執行各種操作。你可能熟悉 Codepen、Glitch 或其他允許你在頁面的一部分中編 ...

tech wiki
tech wiki
5 min read
|

學習如何找解決方案和尋求幫助

學習如何找解決方案和尋求幫助作為一名開發人員,你需要培養的一項特殊技能是如何找到解決方案,以及在自己找不到解決方案時,如何尋求幫助。 作為開發人員,最好的技能之一就是知道如何解決問題。 你永遠不會遇到一個完全瞭解某項技術的開發人員。好吧,也許在花費大量時間學習其所有細節後才有可能。 但是,當你向某人請教一個略有不同的話題時,他們可能沒有答案。比如,他們對React了如指掌,但當你想知道如何使用React構建iOS應用程序時,他們可能完全沒有做過任何iOS開發。 這時,那個人就 ...

tech wiki
tech wiki
3 min read