All gists - Opengist

timmy / 使用 tcpdump 捕獲 POP3/IMAP 流量

0 likes

0 forks

2 files

Last active 1 year ago

這兩段 Bash 指令都利用 tcpdump 監控 eth0 網卡上的郵件流量，第一個同時捕捉 POP3 (port 110) 與 IMAP (port 143) 的封包並存成 imap_pop3.pcap，而第二個則專門捕捉 POP3 (port 110) 流量並存成 pop3_traffic.pcap，方便後續進行網路分析或除錯。

linux network-monitoring packet-capture security tcpdump

1	#!/bin/bash
2
3	tcpdump -i eth0 port 110 or port 143 -w imap_pop3.pcap

timmy / Hammerspoon 快速鍵與功能範例

0 likes

0 forks

4 files

Last active 2 years ago

Hammerspoon 配置範例，包括快速鍵與功能實現，適合初學者學習與擴展。

1	-- 快速鍵：command + alt + ctrl + W
2	hs.hotkey.bind({"cmd", "alt", "ctrl"}, "W", function()
3	-- 顯示通知：「Hammerspoon - Hello World」
4	hs.notify.new({title = "Hammerspoon", informativeText = "Hello World"}):send()
5	end)

timmy / settings.json

0 likes

0 forks

1 files

Last active 1 year ago

automation development formatting lsp pyright python ruff venv

1	{
2	"lsp": {
3	"pyright": {
4	"settings": {
5	"python": {
6	"pythonPath": ".venv/bin/python"
7	}
8	}
9	}
10	},

timmy / Python 虛擬環境設定（venv）

0 likes

0 forks

1 files

Last active 1 year ago

此 JSON 配置檔案用於設定 Python 虛擬環境 (venv) 的路徑，適用於編輯器（如 VS Code），確保 Python 解譯器和專案依賴管理在指定的虛擬環境 .venv 中執行。

configuration json python venv virtual-environment vscode

1	{
2	"venvPath": ".",
3	"venv": ".venv"
4	}

timmy / 啟動 Python 虛擬環境 (venv)

0 likes

0 forks

1 files

Last active 1 year ago

這段 Bash 指令用於啟動 Python 虛擬環境 (venv)。虛擬環境能夠隔離 Python 依賴，避免與系統環境發生衝突。執行後，Shell 會進入 .venv 目錄下的虛擬環境，使後續的 Python 執行與套件管理都發生在該環境中。

automation bash python script shell venv virtual-environment

1	#!/bin/bash
2	source .venv/bin/activate

timmy / Lit 與 Tailwind CSS 表單範例

0 likes

0 forks

1 files

Last active 1 year ago

這段 HTML 結合 Lit 與 Tailwind CSS，建立了一個自訂 Web Component <custom-form>，包含使用者名稱（唯讀）、電子郵件、密碼輸入欄位及提交按鈕，並透過 LitElement 繪製至 Light DOM 以確保 Tailwind CSS 樣式生效。此範例適用於動態 Web 表單開發，可作為登入或註冊介面，並可進一步擴展以支援更多互動功能。

form html javascript lit tailwindcss ux-design web-components

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Lit Form Example</title>
7	<!-- 引入 Tailwind CSS -->
8	<script src="https://cdn.tailwindcss.com"></script>
9	<!-- 引入 Lit -->
10	<script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script>

timmy / 使用 Lit 與 Tailwind CSS 建立自訂 Web 元件

0 likes

0 forks

1 files

Last active 1 year ago

這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個自訂 Web Component <beach-house-card>，用於顯示海灘別墅的資訊卡片。它包含標題、房屋圖片集、評價、地點、描述與按鈕，適用於房屋租賃平台、旅遊網站或 Airbnb 風格的 UI，並支援響應式設計與深色模式。

frontend javascript lit responsive-design tailwindcss web-components

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Beach House Card</title>
7	<!-- 引入 Tailwind CSS -->
8	<script src="https://cdn.tailwindcss.com"></script>
9	<!-- 引入 Lit -->
10	<script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script>

timmy / 使用 Lit 和 Tailwind CSS 建立商品卡片

0 likes

0 forks

1 files

Last active 1 year ago

這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個自訂 Web Component <product-card>，用於顯示商品資訊卡片。它包含商品圖片、名稱、價格、庫存狀態、尺寸選擇、購買按鈕及收藏按鈕，適用於電商網站、購物平台或商品展示頁面，並支援響應式設計，提供現代且直覺的購物體驗。

ecommerce javascript lit tailwindcss ui-design webcomponents

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Product Card</title>
7	<!-- 引入 Tailwind CSS -->
8	<script src="https://cdn.tailwindcss.com"></script>
9	<!-- 引入 Lit -->
10	<script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script>

timmy / 使用 Lit 與 Tailwind CSS 建立 Web Component

0 likes

0 forks

1 files

Last active 1 year ago

這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個自訂 Web Component <my-component>，用於展示帶有標題、描述和按鈕的簡單 UI 卡片。它示範了如何在 Lit 中使用 Tailwind CSS，並透過 Light DOM 渲染確保樣式生效，適用於前端開發測試、組件設計或 UI 開發的快速原型。

frontend javascript lit tailwindcss ui-design webcomponents

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Lit with Tailwind CSS</title>
7	<!-- 引入 Tailwind CSS -->
8	<script src="https://cdn.tailwindcss.com"></script>
9	<!-- 引入 Lit -->
10	<script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script>

timmy / 使用 Lit 與 Animate.css 建立動態 Web 元件

0 likes

0 forks

1 files

Last active 1 year ago

這段 HTML 結合 Lit 和 Animate.css，建立了一個自訂 Web Component <my-component>，透過 Animate.css 提供彈跳（bounce）動畫效果，讓文字顯示時具有動態感。它示範了如何在 Lit 中整合外部 CSS 動畫庫，適用於前端 UI 動畫、互動式網頁元件或吸引使用者注意的視覺效果設計。

animatecss frontend javascript lit ui-animation webcomponents

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Lit with Animate.css</title>
7	<!-- 引入 Animate.css -->
8	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
9	<!-- 引入 Lit -->
10	<script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script>