|

如何使用 window.prompt()

如何使用 window.prompt()本文將介紹如何使用瀏覽器提供的 prompt() API,讓使用者做出選擇。 prompt() 函式可讓我們從使用者獲取輸入。 這個 API 已經存在於網頁的早期,並且獲得各大瀏覽器的支援。 它非常簡單易用,特別適用於快速原型開發,你可以直接調用 prompt() 函式來獲取使用者輸入,而不需要建立表單。 下面是使用方法:調用 prompt() 函式,並傳入一個字符串作為問題的描述: 1prompt("你的年齡是多少?&quo ...

tech wiki
tech wiki
1 min read
|

Nano的簡單指南

Nano的簡單指南nano 是一個適合初學者使用的編輯器。 使用 nano <檔案名稱> 命令來執行它。 你可以直接在文件中輸入字符,而不需要擔心模式的問題。 使用 ctrl-X 可以退出並結束編輯。如果你對文件進行了修改,編輯器會詢問你是否確認保存修改或者放棄它們。在底部的幫助信息中,展示了可以使用的鍵盤命令: pico 和 nano 在功能上差不多,不過 nano 是 pico 的 GNU 版本。早期,pico 不是開源的,為了滿足 GNU 操作系統的授權要 ...

tech wiki
tech wiki
1 min read
|

如何從 Node.js 程式結束

如何從 Node.js 程式結束了解如何以最佳方式終止 Node.js 應用程式 有多種方式可以結束 Node.js 應用程式。 在控制台中運行程式時,可以使用 Ctrl-C 來關閉它,但我想在這裡討論的是程式化的結束。 讓我們從最極端的方式開始,並看看為什麼最好不要使用它。 process 核心模組提供了一個便捷的方法,可以讓你程式化地退出 Node.js 程式:process.exit()。 當 Node.js 執行這一行時,進程立即被強制結束。 這意味著任何待處理的回調 ...

tech wiki
tech wiki
3 min read
|

Linux指令:export

Linux指令:export快速指南介紹了“export”指令,該指令用於將變量導出到子進程中 “export”指令用於將變量導出到子進程中。 這意味著什麼呢? 假設您以以下方式定義了一個名為TEST的變量: 1TEST="test" 您可以使用echo $TEST來打印其值: 但是,如果您嘗試在名為script.sh的文件中定義一個包含上述命令的Bash腳本: 然後,您設置chmod u+x script.sh,並使用./script.sh執行此腳 ...

tech wiki
tech wiki
2 min read
|

如何在暗模式下更改HTML圖片URL

如何在暗模式下更改HTML圖片URL使用CSS很容易根據系統是否處於暗模式來進行更改,只需使用prefers-color-scheme媒體特性。 如果您想了解更多關於暗模式的資訊,請查看我在暗模式的博客文章。 今天我遇到了一個問題 - 如何更改HTML中定義的圖片,而不是CSS規則? 事實證明,有一種純HTML的方法可以做到這一點,而不需要任何CSS或JavaScript。 我們可以使用picture標籤來包裝img標籤: 123456<picture> < ...

tech wiki
tech wiki
1 min read
|

在JavaScript中生成隨機而唯一的字符串

在JavaScript中生成隨機而唯一的字符串在構建我的在線課程平台時,我遇到了生成數千個唯一URL的問題。 每個參與課程的人都會被分配一個唯一的URL。後端知道所有這些URL並將有效的URL映射到課程內容上。 我希望有一個唯一的URL,因為我可以將URL關聯到購買郵件。 這樣,我就可以避免使用登錄功能,同時讓每個人都有一個單獨的URL,以便在URL意外或故意被公開分享時,我可以阻止濫用。 於是我開始寫我的Node.js腳本。 我使用了randomstring這個包,並將數字 ...

tech wiki
tech wiki
2 min read
|

React入門

React入門React視圖庫介紹 什麼是React?React是一個旨在簡化視覺界面開發的JavaScript庫。 它是在Facebook開發並於2013年釋出的,是一些最廣泛使用的應用程序的引擎,為Facebook和Instagram等眾多應用程序提供動力。 它的主要目標是通過將UI分成一系列組件,使得在任何時間點都可以輕松理解界面及其狀態。 React為什麼如此受歡迎?React在前端Web開發領域引起了轟動。為什麼? 比其他替代方案更簡單在React宣布時,Ember ...

tech wiki
tech wiki
2 min read
|

成為一個出色的開發團隊成員

成為一個出色的開發團隊成員如何適應團隊環境 作為一名開發者,您幾乎總是在團隊環境中工作。 是什麼讓您成為一個出色的開發團隊成員?我在上一個模塊中已經談到了一些使您成為一個出色的開發團隊成員的主要技能,特別是共鳴、對新技術的開放性、您不是代碼以及願意改變觀點。 在這篇文章中,我想討論更多關於優秀團隊成員的特質。 優秀的團隊成員願意向其他團隊成員尋求幫助,也願意幫助任何人。 優秀的團隊成員不會以一種讓他們感到不好的方式批評其他人的代碼。這也包括過去編寫的代碼和您必須維護的舊項目。 ...

tech wiki
tech wiki
1 min read
|

鼠標事件

鼠標事件在 JavaScript 中了解與鼠標事件的基本互動方式 在處理鼠標事件時,我們有以下能力: mousedown 鼠標按下 mouseup 鼠標釋放 click 點擊事件 dblclick 雙擊事件 mousemove 鼠標移動到元素上方時 mouseover 鼠標移動到元素或其子元素上方時 mouseenter 鼠標移動到元素上時。類似 mouseover 但不會冒泡(稍後會詳細解釋!) mouseout 鼠標移出元素或進入子元素時 mouseleave 鼠標移出 ...

tech wiki
tech wiki
3 min read
|

Bash Shell 腳本編寫入門

Bash Shell 腳本編寫入門這是關於編寫Bash Shell腳本的詳細概述。 腳本編寫是一種自動化在計算機上定期執行的任務的強大方式。 在本教程中,將詳細介紹腳本編寫,並將成為進一步深入和高級教程創建實際腳本的基本參考。 查看我的Bash介紹文章。 Bash提供了一組命令,這些命令組合在一起可以用來創建小程序,按照慣例我們稱之為腳本。 請注意區別。我們不說Bash編程,而說Bash腳本,我們也不稱Bash腳本為”Bash程序”。這是因為在您的腳本變得失控之前,通常可以達 ...

tech wiki
tech wiki
11 min read
|

如何退出 Vim

如何退出 Vim讓我幫助您最終退出 Vim! 想要保存更改並退出嗎?按下 esc 鍵,然後輸入 :wq,意思是 write(寫入)並 quit(退出)。 想要在不保存更改的情況下退出嗎?按下 esc 鍵,然後輸入 :q!。 不要覺得糟糕,因為不知道如何退出 Vim 的人並不少,如果你在 Twitter 上搜索一下,你會看到各種梗和有趣的推文: “如何生成隨機字符串?把一個大一的電腦科學學生放在 Vim 中,然後要求他們保存並退出。” “只有简单地退出 Vim 是不可能的。” ...

tech wiki
tech wiki
1 min read
|

如何在 JavaScript 中在特定索引位置添加項目到陣列

如何在 JavaScript 中在特定索引位置添加項目到陣列了解如何在 JavaScript 中在特定索引位置添加項目到陣列 假設您想要在陣列中添加一個項目,但不想將項目附加在陣列的末尾。您想要明確地將其添加到陣列的特定位置。 這個位置被稱為索引。 陣列索引從0開始,因此如果您想要在第一個位置添加項目,則會使用索引0,在第二個位置索引是1,以此類推。 要執行此操作,您將使用陣列的splice()方法。這個函數非常強大,除了我們現在要使用的方式之外,它還允許從陣列中刪除項目 ...

tech wiki
tech wiki
2 min read
|

在 JavaScript 中使用 let vs const

在 JavaScript 中使用 let vs constlet 和 const,該選擇哪一個呢? 在 JavaScript 中,我們通常使用兩個關鍵字來聲明變量:let 和 const。 什麼時候該使用其中之一? 我總是會首選使用 const。 為什麼呢? 因為 const 保證變量的值無法被重新賦值。 在編程中,我總是認為能給我帶來最小風險的選項是最好的。 我們有大量可能引發問題的東西。 你給予某個事物的權限越大,你就需要承擔更多的責任。 而我們通常並不希望如此。 當然, ...

tech wiki
tech wiki
1 min read
|

如何使用文字展開節省時間

如何使用文字展開節省時間優化常見的電子郵件或其他通訊任務 在晚上10點睡覺之前,我回答了收件匣中最重要的電子郵件。 我一口氣睡了8個小時(這是我作為人類所需的最少時間),醒來時發現有67封新郵件。 我正在推出我的JavaScript全棧課程,這是一個有趣的工作。我收到了很多問題的電子郵件,有學生想連接學生計劃,也有報名確認通知。 其中一部分郵件需要與其他內容相同的答案,只是需要一些個性化。例如,每次給予學生或購買力平價折扣,都需要寫很多內容。 所以我設置了一種可以更快速完成這 ...

tech wiki
tech wiki
2 min read
|

如何解決在 Next.js 中安裝 Tailwind 時出現「無法解析相依性樹」的 PostCSS 和 Tailwind 問題

如何解決在 Next.js 中安裝 Tailwind 時出現「無法解析相依性樹」的 PostCSS 和 Tailwind 問題如何解決在 Next.js 網站安裝 Tailwind 時出現「無法解析相依性樹」錯誤的問題 在設置新的 Next.js 專案並使用 Tailwind 時,我遇到了一個問題。 這個問題可能只是一個暫時性的錯誤,由於配置問題和庫的版本,但我想寫下來以便其他人遇到相同問題時能夠參考。 我運行了以下命令: 1npm install tailwindcss p ...

tech wiki
tech wiki
1 min read
|

選擇性無知

選擇性無知一項能夠真正改善你日常生活技能之一就是培養選擇性無知。 選擇性無知是「有意選擇性地忽略分散注意力、不相關、或其他不必要的資訊」的概念。 Tim Ferriss在他有名的《4小時工作周》一書中描述了一個類似的概念,他稱之為「資訊飲食」。但我認為選擇性無知略有不同。你選擇深入研究某個事物,有意無視其他許多事物。 這是在一個許多人和公司都喜歡大聲宣揚並試圖推銷自己敘事的世界中保持理智的方法。 我認為任何人引入選擇性無知到他們的生活中都會受益,但開發人員尤其可以從中受益。 ...

tech wiki
tech wiki
2 min read
|

移除圖片中的 EXIF 資料

移除圖片中的 EXIF 資料在上傳圖片到網路之前,我有需要移除可能包含位置和其他應該不被分享的 EXIF 資料,因為這是使用 iPhone 拍攝的照片。 小技巧:如果您已經知道要從照片中移除位置資料,在分享面板中點擊「選項」,然後再選擇「AirDrop」之前,您可以選擇停用位置資料和其他元數據的傳送。 我找到了一種在 Mac 上簡單完成的方法。 最簡單的方式是使用 ImageOptim。只需將圖片拖放到該工具中,它將移除所有的 EXIF 資料。 或者,如果您更喜歡使用命令 ...

tech wiki
tech wiki
1 min read
|

通知 API 指南

通知 API 指南通知 API 負責顯示使用者系統通知。這是瀏覽器提供給開發者的介面,允許在沒有在瀏覽器中打開網站的情況下,經由使用者的允許,向使用者顯示訊息。 介紹通知 API 權限 建立通知 新增內容 新增圖片 關閉通知 介紹通知 API通知 API 是瀏覽器提供給開發者的介面,允許在沒有打開網站或網頁應用程式的情況下,通過使用者的允許,向使用者顯示訊息。 這些訊息是一致且原生的,也就是接收者從外觀和使用者體驗的角度習慣了它們。它們具有系統層級的特性,並不特定於您 ...

tech wiki
tech wiki
4 min read
|

這是我的小數位花園

這是我的小數位花園最近我在 HN(Hacker News)上碰巧發現了「數位花園」的概念,當時 Joel Hooks 的文章「我的部落格是一個數位花園,而不是部落格」在首頁排名第一。 這樣我就接觸到了這個詞和這個理念。 這個網站是許多東西的集合:它是一個教程的收藏,也是你可以獲得我的免費書籍的地方,也是我每天精心維護的事物。 擁有一個類比的花園,換句話說就是現實世界中的花園,是一樣的 - 如果你想要它美麗和好看,你需要不斷地照顧它。 我把我的網站叫做 部落格,但這只是指首頁文 ...

tech wiki
tech wiki
2 min read
|

如何在Vue.js的單文件組件中使用SCSS

如何在Vue.js的單文件組件中使用SCSS了解如何在Vue.js組件中啟用SCSS 使用Vue CLI,您可以啟用“CSS預處理器”,並且可以選擇要啟用的預處理器: 如果您使用的是非基於Vue CLI的項目,或者是使用Vue CLI初始化但沒有添加CSS預處理器支持的項目,則可以後期添加支持: 1npm install --save-dev node-sass sass-loader 在應用程序組件中,您可以使用: 123<style lang="scs ...

tech wiki
tech wiki
1 min read
|

Linux 命令:jobs

Linux 命令:jobs關於 jobs 命令的快速指南,該命令用於列出我們啟動的作業的狀態 在 Linux / macOS 中運行命令時,我們可以使用命令後面的 & 符號將其設置為在後台運行。 例如,我們可以在後台運行 top: 1top & 這對於運行時間較長的程序非常方便。 我們可以使用 fg 命令回到該程序。如果我們只有一個後台作業,這是完全沒問題的,否則我們需要使用作業編號:fg 1、fg 2 等等。 為了獲取作業編號,我們使用 jobs ...

tech wiki
tech wiki
1 min read
|

比較網頁上的動畫選項

比較網頁上的動畫選項動畫是一個迷人的主題。無論您想要添加互動動畫,如過渡效果,還是構建整個全屏體驗,您都擁有所有所需的工具。 動畫是一個迷人的主題。無論您想要添加互動動畫,如過渡效果,還是構建整個全屏體驗,您都擁有所有所需的工具。 而且,您有很多不同且具有不同目的的選擇。 CSS 通常被認為更加高效,儘管 JavaScript 也可以非常高效。一切取決於您需要做什麼,以及每幀渲染所需的時間。 CSS 過渡效果 CSS 動畫 SVG 動畫 Canvas API 動畫 Web ...

tech wiki
tech wiki
2 min read
|

JavaScript instanceof 運算子

JavaScript instanceof 運算子深入了解 JavaScript instanceof 運算子。 JavaScript的instanceof運算子會在第一個運算子是右邊所傳入物件的實例,或其原型鏈中的其中一個祖先時,回傳true。 在下面的例子中,可以看到myCar物件是Fiesta類別的實例,所以myCar instanceof Fiesta會回傳true。同樣地,由於Fiesta繼承自Car,所以也會回傳true,myCar instanceof Car。 ...

tech wiki
tech wiki
1 min read
|

CSS盒模型:box-sizing: border-box

CSS盒模型:box-sizing: border-box默認情況下,如果在元素上設置了寬度(或高度),這將應用於內容區域。 這不包括填充、邊框和外邊距,它們是添加在其上面的。 例如,我在一個p元素上設置了以下CSS: 123456p { width: 100px; padding: 10px; border: 10px solid black; margin: 10px;} 下面是瀏覽器應用的效果: 您可以通過設置box-sizing屬性來更改這種行為 ...

tech wiki
tech wiki
1 min read
|

類型化數組

類型化數組了解什麼是類型化數組以及如何使用它們 JavaScript提供了8種類型化數組類型: Int8Array:8位有符號整數數組 Int16Array:16位有符號整數數組 Int32Array:32位有符號整數數組 Uint8Array:8位無符號整數數組 Uint16Array:16位無符號整數數組 Uint32Array:32位無符號整數數組 Float32Array:32位浮點數數組 Float64Array:64位浮點數數組 它們都是ArrayBuffer ...

tech wiki
tech wiki
2 min read
|

2023博客重新設計

2023博客重新設計時不時地,我會覺得我的網站看起來很糟糕,或者我對它感到厭倦,想要重新設計。 這個網站經歷了很多次重新設計。 以下是2018年的截圖 這是2019年 直到昨天,它是這樣的: 從今天起,我們有了一個新的設計,基於WordPress Beaumont 主題,由Anders Norén開發,根據我的Astro代碼庫進行了一些自定義: 以下是暗黑模式的效果: 希望你喜歡! tags: [“redesign”, “WordPress”, “Beaumon ...

tech wiki
tech wiki
1 min read
|

為什麼 useEffect 會運行兩次?

為什麼 useEffect 會運行兩次?如何解決 useEffect 運行兩次的問題 React 18 於 2022 年 3 月發佈,改變了 useEffect() 的默認行為。 起初,我甚至沒有意識到這一點,這個改變被埋在了大量的新功能之中。 如果您的應用程式在升級到 React 18 後運作怪異,那是因為 useEffect 的默認行為變成運行兩次。 這只在開發模式下發生,但這是每個人構建應用程式的模式。 而且只在嚴格模式下發生,但這是使用 Vite、create-rea ...

tech wiki
tech wiki
4 min read
|

應用於軟體產品的稀缺原則

應用於軟體產品的稀缺原則什麼是稀缺原則?它如何幫助你發展基於軟體的業務呢? 本文是專注於心理學原則的系列文章之一,專門應用於軟體領域。 當你最後一次在網上查找某樣東西時,你所尋找的那個特定商品已經售罄了嗎?這增加了你對該商品的渴望嗎?你過了兩天、一個星期後還會再次查看嗎?你是否訂閱了“重新上架”郵件通知呢? 我肯定有這樣的情況,而且很多次。 當某個特定活動的門票供應短缺時,你會有種感覺,覺得既然即將售罄,那肯定是一個好活動。 如果商品有庫存,我就不會關心,並想“下周我再買 ...

tech wiki
tech wiki
5 min read
|

鍵盤事件

鍵盤事件在 JavaScript 中,探索與鍵盤事件的基礎互動。 在與鍵盤事件互動時,有3種類型的事件: 「keydown」鍵盤按鍵已按下。 「keyup」鍵盤按鍵已釋放。 當鍵盤按鍵保持按下並且重複時,也會觸發「keydown」事件。 雖然通常會在特定元素上監聽滑鼠和觸控事件,但在文件上監聽鍵盤事件很常見: 123document.addEventListener('keydown', event => { // 按下按鍵} ...

tech wiki
tech wiki
1 min read
|

如何在 JavaScript 中進行類型檢查而不使用 TypeScript

如何在 JavaScript 中進行類型檢查而不使用 TypeScript了解如何在 JavaScript 中添加類型而不使用 TypeScript。 如果你不是住在岩石下,你應該對 TypeScript 有所了解。這是一種由微軟推出的新語言,基本上它是 JavaScript 加上了類型(並編譯成 JavaScript 在瀏覽器中運行)。 雖然我在一些測試專案中使用過 TypeScript,但是我傾向於避免使用 TypeScript 來編寫我的教程,原因有很多。 首先,我主要 ...

tech wiki
tech wiki
5 min read
|

如何在 Hugo 中傳遞多個參數給 partial

如何在 Hugo 中傳遞多個參數給 partial在 Hugo 中,如何傳遞多個參數給 partial?這並不像看起來那麼簡單,你需要使用一個技巧。讓我們看一下。 我使用 Hugo 來管理這個網站,它非常方便。 今天遇到的一個問題是如何將 2 個參數傳遞給 partial。 由於在 partial 中無法訪問 .Site.Pages 以獲取網站頁面列表(由於作用域問題),我不得不創建一個字典並填充其中 2 個項目: 1{{ partial "my ...

tech wiki
tech wiki
1 min read