|

css-breakpoints

#什麼是適用於響應式設計的好的 CSS 斷點值? 我在設計網站時注意到我在使用一些相當隨機的值作為我的 CSS 斷點。有時是像 800 或 1200 這樣的圓整值,有時是一個像 672 這樣具體的像素值。 我搜尋了適合我未來使用的斷點的正確值。 我有一點時間來查找這個,並得出了以下結論。 我們需要擔心的是 5 個主要的設備尺寸: 行動裝置直向(mobile portrait) 行動裝置橫向(mobile landscape) 平板電腦直向(tablet portrait) ...

tech wiki
tech wiki
2 min read
|

Node緩衝區

Node緩衝區瞭解Node緩衝區是什麼,它們用於什麼,以及如何使用它們。 緩衝區是什麼?緩衝區是一塊內存區域。與C、C++或Go等使用系統編程語言的開發人員(或任何與內存交互的程序員)相比,JavaScript開發人員對這個概念不太熟悉,因為js開發人員並不需要直接與內存交互。 它代表著在V8 JavaScript引擎之外分配的固定大小的內存塊(無法調整大小)。 您可以將緩衝區視為一個整數數組,其中每個整數表示一個字節的數據。 它是由Node的Buffer類實現的。 為什麼我 ...

tech wiki
tech wiki
4 min read
|

HTML表單

HTML表單了解如何在HTML中使用表單和所有表單元素標籤 表單是使用Web技術構建的頁面或應用程序中與用戶交互的方式。 您可以通過一組控件與表單交互,當您提交表單時,無論是通過單擊“提交”按鈕還是以編程方式,瀏覽器都會將數據發送到服務器。 默認情況下,數據發送後會導致頁面重新加載,但使用JavaScript,您可以更改這種行為(本書不會介紹該如何更改)。 可以使用標籤來創建一個表單: 123<form> ...</form> 默認情況下,表單使用G ...

tech wiki
tech wiki
17 min read
|

如何處理網頁上的捲動

如何處理網頁上的捲動了解如何與捲動互動、處理捲動事件以及節流 在網頁中,捲動以查看頁面下方的內容可能是最常見的事件,比點擊或鍵盤事件更常見。 您可以在window對象上監聽scroll事件,以獲取用戶每次捲動頁面時的信息: 123window.addEventListener('scroll', event => { // 偵測到 scroll 事件}) 在事件處理函數內,您可以通過檢查window對象的scrollY屬性來檢查 ...

tech wiki
tech wiki
3 min read
|

HTTP 請求的工作原理

HTTP 請求的工作原理從開始到結束,當你在瀏覽器中輸入URL時會發生什麼事情 HTTP協議 我僅分析URL請求 與macOS / Linux相關的事情 DNS查找階段 gethostbyname TCP請求握手 發送請求 請求行 請求標頭 請求主體 響應 解析HTML 本文描述了瀏覽器如何使用HTTP/1.1協議進行頁面請求 如果你曾經參加過面試,可能會被問到:“當你在Google搜索框中輸入內容並按下Enter鍵時會發生什麼”. 這是一 ...

tech wiki
tech wiki
6 min read
|

電子元件:電阻器

電子元件:電阻器電阻器是一種具有一定電阻的導體元件。 我們有很多不同的電阻器,使用各種材料製成,並具有不同的電阻值。例如,在我的集合中,我目前擁有: 10Ω 220Ω 330Ω 1kΩ 2kΩ 5kΩ 10kΩ 100kΩ 1MΩ 每個數值都具有不同的顏色組合,以便讓我們識別電阻值。 閱讀顏色是一種獨立的技能,有一些在線計算器可以幫助您進行計算,比如這個。 上述是具有固定電阻值的固定電阻器。 其他一些電阻器(稍後我們將看到)可以讓用戶更改它們的電阻(電位器),有些則根據溫 ...

tech wiki
tech wiki
1 min read
|

如何翻轉 JavaScript 陣列

如何翻轉 JavaScript 陣列我之前需要將一個 JavaScript 陣列進行翻轉,以下是我所做的方法。 給定一個陣列 list: 1const list = [1, 2, 3, 4, 5] 最簡單和直觀的方法就是調用陣列的 reverse() 方法。 這個方法會修改原始的陣列,所以我可以將 list 声明為常量(const),因為我不需要將 list.reverse() 的結果重新賦值給它: 1234const list = [1, 2, 3, 4, 5]list. ...

tech wiki
tech wiki
1 min read
|

Node.js的簡史

Node.js的簡史回顧Node.js從2009年到現在的歷史 你可能難以置信,但Node.js只有9歲。 相比之下,JavaScript已經有23歲了,而我們所熟悉的網路(在Mosaic問世之後)已經有25歲了。 對於一個技術而言,9年的歷史只是極短暫的時間,但Node.js似乎已經存在了很久很久。 我很榮幸從它剛出生的那天開始就與Node一起工作,儘管當時只有很少的資訊,但你已經能夠感覺到它是一個重大的事物。 在這篇文章中,我想從歷史的角度來概述Node的大局。 一點歷 ...

tech wiki
tech wiki
3 min read
|

如何使用JavaScript在iPad上建立儀表板

如何使用JavaScript在iPad上建立儀表板在本篇文章中,我將向您展示我如何使用JavaScript為JavaScript課程建立一個註冊計數器,以便我可以看到有多少人註冊了這個課程(註冊時間為11月15日至11月22日!) 這個計數器是一個完全多餘的東西,是我在拖延時做的,想要避免重要的工作。 我一直在思考不同的方法來實現這個功能,比如使用Scriptable創建一個JavaScript的iOS小工具。 但後來我想,嗯,那就只做一個網頁好了。一個我可以在iPad上保持 ...

tech wiki
tech wiki
5 min read
|

JavaScript 學習路線圖

JavaScript 學習路線圖JavaScript是一個令人驚嘆的語言!它最初只是一種在瀏覽器中操作文檔的簡單方式,多年來,它成為了全球最流行的編程語言,現在它在各個領域都有應用。通過遵循我的學習路線圖,來學習JavaScript編程語言吧! JavaScript是一個令人驚嘆的語言! 它最初只是一種在瀏覽器中操作文檔的簡單方式,多年來,它成為了全球最流行的編程語言,現在它在各個領域都有應用。 這裡是學習JavaScript的一個路線圖的初步嘗試。 注:我將所有內容都放在 ...

tech wiki
tech wiki
3 min read
|

如何使用Python刪除所有舊推文

如何使用Python刪除所有舊推文我不喜歡保留太多「歷史性」的推文,尤其是那些我發表的愚蠢言論。因此,我決定刪除它們。 為此,我從 Twitter 設定中請求了所有推文的存檔。取得存檔可能需要花上數天的時間。我的存檔日期可以追溯到 2015 年,盡管我從 2007 年起就使用 Twitter。也許我已在 2015 年刪除了先前的推文,但是我不記得了。 我得到了存檔,下載並解壓縮了該文件夾,然後執行以下命令: 123python -m venv .venvsource .ven ...

tech wiki
tech wiki
2 min read
|

JavaScript 表達式

JavaScript 表達式表達式是可以被評估並解析為值的代碼單位。JavaScript 中的表達式可以分為各種類別。 算術表達式 字串表達式 基本表達式 陣列和物件初始化表達式 邏輯表達式 左邊表達式 屬性存取表達式 物件創建表達式 函數定義表達式 調用表達式 算術表達式屬於這個類別的表達式都會計算為一個數字: 12341 / 2i++i -= 2i * 2 字串表達式計算為字串的表達式: 1'A ' + 'string' 基 ...

tech wiki
tech wiki
3 min read
|

HTML `video`標籤

HTML video標籤探索使用HTML video標籤的基本知識。 video標籤允許您在HTML頁面中嵌入視頻內容。 此元素可以通過getUserMedia()或WebRTC使用網絡攝像頭來進行視訊流,也可以通過使用src屬性引用視頻源來播放視頻: 1<video src="file.mp4" /> 默認情況下,瀏覽器不會為此元素顯示任何控件,只顯示視頻。 這意味著只有在設置為自動播放時(稍後將介紹),音頻才會播放,用戶無法看到如何停止播 ...

tech wiki
tech wiki
5 min read
|

CSS 中的响应式 pre 标签

CSS 中的响应式 pre 标签在我的博客上,我在一些文章中遇到了一些响应性的问题。结果发现是一些代码片段引起的。 在我的博客上有一些文章,在这些文章中,有一些代码片段超出了正常页面宽度而没有空格。 例如: 1cd /some/super/long/super/long/folder 或者其他非常长的命令。 我的博客上的代码片段都是自动添加在 code 标签内,而 code 标签内部又包含了一个 pre 标签。 默认情况下,pre 标签上的 CSS white-space ...

tech wiki
tech wiki
1 min read
|

nextjs-router

#如何使用Next.js路由器 学习如何使用next/router包来控制Next.js中的路由 在使用Link连接两个页面的Next.js上,我们看到了如何使用Link组件在Next.js应用中声明式地处理路由。 在JSX中管理路由非常方便,但有时您需要以编程方式触发路由更改。 在这种情况下,您可以直接访问Next.js的路由器,它位于next/router包中,并调用其push()方法。 下面是访问路由器的示例: 123456import { useRouter ...

tech wiki
tech wiki
2 min read
|

在React中的代碼分割

在React中的代碼分割什麼是代碼分割,以及如何在React應用程序中引入它 現代JavaScript應用程序在捆綁大小方面可能相當巨大。您不希望用戶需要下載1MB大小的JavaScript包(包括您的代碼和使用的庫)才能加載首頁,對吧?但是這是使用Webpack捆綁構建的現代Web應用程序的默認情況。 該捆綁包將包含一些可能永遠不會運行的代碼,因為用戶只停留在登錄頁,從不看到應用程序的其他部分。 代碼分割是僅在需要時加載JavaScript的一種實踐方式。 這將改善: 應 ...

tech wiki
tech wiki
4 min read
|

Python常量

Python常量Python沒有強制變量成為常量的方式。 最接近的方法是使用枚舉(enum): 123class Constants(Enum): WIDTH = 1024 HEIGHT = 256 然後可以使用例如Constants.WIDTH.value來獲取每個值。 這樣的值是無法重新賦值的。 另外,如果你想依賴命名慣例,可以遵循這個:將永遠不會更改的變量以大寫來聲明: 1WIDTH = 1024 沒有人會阻止覆蓋這個值,而Python也不會阻止這樣的操作。 這是大 ...

tech wiki
tech wiki
1 min read
|

React Context API (React 上下文 API)

React Context API (React 上下文 API)上下文 API 是一種很好的方法,讓我們在應用程式中傳遞狀態,而不需要使用 props。 上下文 API 的引入可以讓我們在應用程式中傳遞狀態 (並且允許該狀態在多個組件之間更新),而不需要使用 props。 React 團隊建議,在只有幾個層級的子組件需要傳遞狀態的情況下,仍然使用 props,因為相比於上下文 API,props 是更簡單的 API。 在許多情況下,使用上下文 API 可以避免使用 Redu ...

tech wiki
tech wiki
4 min read
|

go-github-api

#使用Go從GitHub獲取存儲庫列表在這篇文章中,我將使用Go的net/http標準庫包,不使用任何附加庫,向GitHub API請求公共存儲庫的信息。GitHub有一個很好的公共API稱為Search,您可以在https://developer.github.com/v3/search/#search-repositories上查看。具體而言,我對獲取當前擁有1萬個以上星標的Go存儲庫感興趣。我們可以傳遞一個查詢來獲取我們想要的內容。查看Search API文檔 ...

tech wiki
tech wiki
7 min read
|

Vue 方法 vs 監聽器 vs 計算屬性

Vue 方法 vs 監聽器 vs 計算屬性Vue.js 提供了三種方法來處理內容:方法 (methods)、監聽器 (watchers) 和計算屬性 (computed properties)。該如何選擇使用哪一種方法呢? 使用方法 (methods) 的時機: 當需要對 DOM 中的某些事件做出反應時。 當某些事情在組件中發生時調用函數。你可以從計算屬性 (computed properties) 或監聽器 (watchers) 中調用方法。 使用計算屬性 (compu ...

tech wiki
tech wiki
1 min read
|

Python 虛擬環境

Python 虛擬環境在您的系統上運行多個 Python 應用程序很常見。 當應用程序需要相同的模塊時,您可能會遇到一個棘手的情況,其中一個應用程序需要一個模塊的版本,而另一個應用程序需要該模塊的不同版本。 為了解決這個問題,您可以使用 虛擬環境。 我們將使用 venv,其他工具的運作方式類似,比如 pipenv。 使用以下命令在您要啟動項目的文件夾中創建一個虛擬環境: 1python -m venv .venv 或者在已經存在的項目所在的文件夾中運行該命令。 然後運行以下 ...

tech wiki
tech wiki
1 min read
|

Web Components 自訂元素

Web Components 自訂元素Web Components 自訂元素初學教學 我使用了一個叫作 CSS Doodle 的 CSS 函式庫創建了我的第一個自訂元素。這是一個很棒的應用,它使用自訂元素讓你創建令人驚艷的 CSS 動畫效果。這激發了我對於了解底層原理的慾望。所以我決定更深入地研究 Web Components,這是一個很多人請我寫的主題。 自訂元素讓我們可以創建新的 HTML 標籤。 我一開始無法想像這有什麼用處,直到我使用了 CSS Doodle 函式庫。 ...

tech wiki
tech wiki
13 min read
|

在 VS Code 中使用正則表達式進行搜索和替換

在 VS Code 中使用正則表達式進行搜索和替換我需要對我的網站存儲庫進行一個相當大的更改。 我有數百個 Markdown 文件,而在我的 Markdown 中,有時會包含帶有空格的圖像,這主要是因為它們是截圖,所以格式類似於 1Screen Shot 2021-10-16 at 09.45.47.png 加載圖像的字符串是: 1![Alt text](/images/vscode-search-replace-regex/Screen\_Shot\_2021-10-16 ...

tech wiki
tech wiki
2 min read
|

Node 檔案統計

Node 檔案統計如何使用 Node 獲取檔案的詳細資訊 每個檔案都有一組我們可以使用 Node 檢視的詳細資訊。 特別是使用 fs 模組提供的 stat() 方法。 您可以呼叫它並傳遞檔案路徑,一旦 Node 獲取了檔案詳細資訊,它將調用您傳遞的回調函數,該函數帶有2個參數:錯誤訊息和檔案統計資訊: 12345678const fs = require('fs')fs.stat('/Users/flavio/test.txt', (e ...

tech wiki
tech wiki
2 min read
|

在 Hugo 中嵌入 HTML 到 Markdown

在 Hugo 中嵌入 HTML 到 Markdown在最長的一段時間後,我從 Blackfriday 切換到默認的 Hugo Markdown 渲染器 Goldmark。我延遲了這個切換的時間,但在版本 0.100 中,他們移除了被棄用的舊版 Markdown 渲染器。 不幸的是,這意味著我在 Markdown 中嵌入的所有 HTML 都停止運作。 我通過在我的 config.yaml 文件中啟用這個選項來解決這個問題: 1234markup: goldmark: rende ...

tech wiki
tech wiki
1 min read
|

如何修復在 Next.js 中序列化日期對象的 JSON 錯誤

如何修復在 Next.js 中序列化日期對象的 JSON 錯誤了解在返回包含日期對象的對象時,在 Next.js 中出現 JSON 可序列化錯誤的原因,以及如何修復它。 如果您使用 Next.js 與數據庫,您肯定會遇到這樣的問題。 您在 getServerSideProps() 或 getStaticProps() 中獲取一些數據,例如這樣使用 Prisma: 123456789export async function getServerSideProps() { ...

tech wiki
tech wiki
3 min read
|

Linux命令:umask

Linux命令:umask快速指南介紹了umask命令,該命令用於設置文件的默認權限。 當你創建一個文件時,你不需要事先決定權限。權限有默認值。 可以使用umask命令來控制和修改這些默認值。 輸入umask而無參數將顯示當前的 umask,即 0022: 0022 是什麼意思?這是表示權限的八進制值。 另一個常見的值是 0002。 使用 umask -S 來查看可讀的表示法: 在這個案例中,文件的擁有者(u)具有對文件的讀、寫和執行權限。同一組(g)中的其他用戶具有讀和 ...

tech wiki
tech wiki
1 min read
|

Heroku Redis 最大記憶體策略

Heroku Redis 最大記憶體策略Heroku提供了一個很棒的Redis插件,免費提供25MB的記憶體。 這個存儲量只需數千個項目即可輕鬆填滿,具體取決於您存儲的內容。 Heroku有一個名為maxmemory-policy的配置選項,它決定了當Redis數據庫內存填滿時系統的行為。 默認情況下,這個屬性被設置為noeviction,這意味著當嘗試存儲更多數據時,Redis會引發錯誤。 這樣做是為了讓您意識到正在發生的事情,一旦您發現可以更改此行為,那麼就是時候確定如何 ...

tech wiki
tech wiki
1 min read
|

如何在Laravel中使用Blade模板

如何在Laravel中使用Blade模板 本教程是《Laravel手冊》的一部分。從https://flaviocopes.com/access/ 下載手冊。 Laravel的視圖文件以 .blade.php 為結尾,並且是 Blade 模板。 Blade 是一個服務端模板語言。 在其基本形式下,它就是 HTML。正如你所看到的,上面我使用的這些模板只包含 HTML。 但你可以在Blade模板中做很多有趣的事情:插入數據、添加條件語句、使用循環、根據用戶是否已驗證顯示不同內 ...

tech wiki
tech wiki
3 min read
|

測試 React 元件

測試 React 元件使用 Jest 和 react-testing-library 測試你的第一個 React 元件 開始測試 React 元件最簡單的方法是使用快照測試。快照測試是一種讓你在獨立環境中測試元件的技術。 如果你對軟體測試很熟悉,這就像你為類別進行單元測試一樣:你測試每個元件的功能。 我假設你已經使用 create-react-app 創建了一個 React 應用,這個應用已經預先安裝了我們需要的測試套件 Jest。 讓我們從一個簡單的測試開始。CodeSan ...

tech wiki
tech wiki
10 min read
|

如何為我的網站添加黑暗模式

如何為我的網站添加黑暗模式逐步指導,讓您的網站有日夜兩種模式,讓它適用於不同時間的使用。 更新:我現在使用媒體查詢第5級:prefers-color-scheme Media Queries Level 5 规範包含了一個新的 prefers-color-scheme 媒體功能。 目前,在所有主要的瀏覽器中都支持這個功能。自 Chrome/Edge 76 版本、Firefox 67 版本和 Safari 12.1 版本之後,甚至包括 iOS Safari。 我們 ...

tech wiki
tech wiki
7 min read
|

CSS偽類

CSS偽類學習CSS偽類的基礎知識 偽類是預定義的關鍵字,用於根據元素的狀態或對特定子元素進行選擇。 它們以單冒號:開頭。 它們可以作為選擇器的一部分使用,非常有用,例如在活動或訪問鏈接上更改樣式,懸停時更改樣式,聚焦或對第一個子元素或奇數行進行目標。在許多情況下非常方便。 以下是您可能會使用的最常用的偽類: 偽類 目標 :active 正在被用戶激活的元素(例如點擊)。通常用於鏈接或按鈕 :checked 已啟用的複選框,選項或單選按鈕輸入類型 :def ...

tech wiki
tech wiki
3 min read
|

如何在 Node.js 的回調函數中使用 promises 和 await

如何在 Node.js 的回調函數中使用 promises 和 await大部分的 Node.js API 在還沒有 promises 的時候就已經建立了,在這些 API 中,使用了回調函數的解決方案。 一般的 Node.js API 使用方式如下: 123doSomething(param, (err, result) => {}) 這個也同樣適用於一些庫,例如 node-redis。當我在一個項目中使用它時,到了某個時候我真的需要把所有的回調函 ...

tech wiki
tech wiki
5 min read
|

使用 Vite 創建新的 React 應用程式

使用 Vite 創建新的 React 應用程式當我需要創建React應用程式並需要後端時,我會首選使用 Next.js 框架。 Next.js 提供了許多內建功能,它非常受歡迎,遵循的約定也避免了我在分析和決策方面的困惑。 但有時我只想創建一個單純的 React 應用程式,也許是為了進行演示或開始一個專案,而不需要 Next.js 提供的所有內容。 我不想擔心這些,我只想自由地進行 React 實驗。 我過去使用過 create-react-app,但現在我使用 Vite。 ...

tech wiki
tech wiki
2 min read
|

npx Node套件執行器

npx Node套件執行器npx是一種非常酷的執行Node代碼的方式,提供了許多有用的功能。 在這篇文章中,我想介紹一個非常強大的命令,從2017年7月開始在npm的5.2版本中可用:npx。 如果你不想安裝npm,你可以單獨安裝npx套件 npx讓你執行使用Node編寫並通過npm註冊表發佈的代碼。 輕鬆運行本地命令Node開發人員習慣將大多數可執行命令作為全局套件發佈,以便它們能夠在路徑中並立即執行。 這很痛苦,因為實際上你不能安裝不同版本的相同命令。 運行npx 命 ...

tech wiki
tech wiki
3 min read
|

如何開始一個部落格的第一步

如何開始一個部落格的第一步第一步總是最難的,不論你想做什麼事情,跑步、編碼、煮飯還是寫部落格。 在這一章中,我想確保你準備好了跳入部落格的第一步。 選擇域名在創建部落格之前,有一件非常重要的事情你需要做,那就是選擇一個域名。 你可以注意到關於域名有三種模式。人們使用自己的名字和姓氏組合,就像我使用flaviocopes.com一樣。有些人喜歡使用幻想名字或者他們的綽號,這也是完全可以的。 如果這個名字很酷,你可以將其打造成一個品牌,這是非常棒的。比如codinghorror. ...

tech wiki
tech wiki
5 min read