All gists - Opengist

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>

timmy / Raspberry Pi 環境監測系統

0 likes

0 forks

3 files

Last active 1 year 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 1 year 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