All gists from timmy

timmy / Lit 與 Tailwind CSS 表單範例

0 likes

0 forks

1 files

Last active 10 months 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 10 months 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 10 months 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 10 months 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 10 months 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>

timmy / Raspberry Pi 環境監測系統

0 likes

0 forks

3 files

Last active 10 months ago

此系統使用 Raspberry Pi 讀取 DHT11 感測器的溫濕度資料，並根據溫度範圍控制 LED 燈號。資料會定時儲存至 MySQL 資料庫，並透過 schedule 套件自動執行。程式透過 Supervisor 設定為背景服務，確保持續執行並記錄日誌。

automation dht11 gpio iot mysql python raspberrypi sensors

1	CREATE DATABASE environment;
2
3	USE environment;
4
5	CREATE TABLE environment_data (
6	id INT AUTO_INCREMENT PRIMARY KEY,
7	humidity FLOAT NOT NULL,
8	temperature FLOAT NOT NULL,
9	recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP
10	);

timmy / 釋放 Linux 記憶體快取

0 likes

0 forks

1 files

Last active 10 months ago

這段 Bash 腳本用來釋放 Linux 系統的快取記憶體，確保系統資源得以回收並提升效能。它會先執行 sync 指令將文件系統的變更寫入磁碟，然後透過 echo 3 > /proc/sys/vm/drop_caches 清除頁面快取、目錄條目及 inode 快取。此腳本需要 root 權限，適用於伺服器維護、效能測試或記憶體回收作業。

bash cache linux memory optimization performance tuning

1	#!/bin/bash
2
3	# 確保腳本以 root 身份執行
4	if [ "$EUID" -ne 0 ]; then
5	echo "請使用 root 權限執行此腳本。"
6	exit 1
7	fi
8
9	# 同步文件系統資料到磁碟，防止資料遺失
10	sync

timmy / SSH 透過跳板機自動代理連線

0 likes

0 forks

1 files

Last active 10 months ago

此 SSH 設定根據目標 IP 或域名，透過不同的跳板機 (ProxyCommand) 進行連線，確保內外部網路存取的靈活性與自動化。

automation jump-host networking proxycommand security ssh

1	Host *.internal.local
2	ProxyCommand bash -c 'timeout 3 nc -z %h %p \|\| ssh -W %h:%p jump.internal.example.com'
3
4	Host *
5	ProxyCommand bash -c 'timeout 3 nc -z %h %p \|\| ssh -W %h:%p jump.external.example.com'
6
7	Host 192.168.0.*
8	ProxyCommand bash -c 'timeout 3 nc -z %h %p \|\| ssh -W %h:%p jump1.example.com'
9
10	Host 172.16..

timmy / 使用 arp-scan 掃描區域網路中的設備

0 likes

0 forks

1 files

Last active 10 months ago

這段 Bash 腳本設定了環境變數（如 PATH 和 TZ 時區為台北時間），然後執行 arp-scan 指令來掃描本地網路（--localnet）的所有設備的 MAC 和 IP 地址。此腳本適用於網路管理、設備偵測、安全監控或尋找局域網內的未知設備，但需要 root 權限才能執行 arp-scan。

arp-scan automation bash localnet network scanning security

1	#!/bin/bash
2
3	# 定義預設的配置設定
4	SHELL=/bin/sh
5	PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
6	TZ='Asia/Taipei'
7
8	# 將配置設定寫入環境變數
9	export PATH
10	export LANG=en_US.UTF-8

timmy / 使用 asyncio 執行非同步 Shell 命令

0 likes

0 forks

1 files

Last active 10 months ago

這段 Python 程式碼使用 asyncio 來非同步執行系統指令，透過 asyncio.create_subprocess_exec() 建立子行程，並並行執行多個指令（如 ping 和 ls）。它適用於非同步處理系統指令、提升效能、避免阻塞主執行緒，適合用於自動化腳本、伺服器管理或批次處理任務。

asyncio non-blocking parallel-execution python shell subprocess

1	import asyncio
2
3	async def run_command(*args):
4	# 建立子行程
5	process = await asyncio.create_subprocess_exec(
6	*args,
7	stdout=asyncio.subprocess.PIPE,
8	stderr=asyncio.subprocess.PIPE)
9
10	# 等待子行程完成