Tous les gists de %!S(string=timmy)

timmy / 使用 Lit 建立具 Shadow DOM 的自訂元件

0 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

這段 HTML + Lit 程式碼建立了一個自訂 Web Component <my-card>，用於顯示標題 (title) 和內容 (content) 的卡片元件，並透過 Shadow DOM 確保內部樣式與外部頁面樣式相互隔離。它示範了如何使用 Lit 定義 Web Components，並確保內部 CSS 只影響元件本身，適用於可重用 UI 元件開發、獨立樣式管理、提升前端模組化，讓開發者能更輕鬆建立可組合的 UI 元件。

custom-elements frontend javascript lit shadow-dom ui-development web-components

1	<!DOCTYPE html>
2	<html lang="zh-TW">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Lit 模組範例</title>
7	<script type="module" src="https://unpkg.com/lit@2.0.0/lit.min.js"></script>
8	</head>
9	<body>

timmy / 使用 Lit Web Components 建立精緻部落格文章展示

0 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

這段 HTML + Lit 程式碼建立了一個動態部落格文章展示元件 <blog-post>，透過 Web Components 技術，使每篇文章可重用並具備獨立的樣式與結構。它包含標題、作者、日期、內容與「閱讀更多」按鈕，並使用 Animate.css 提供動畫效果，使文章顯示時更流暢。此設計適用於部落格、新聞平台或內容管理系統（CMS），能夠讓開發者輕鬆擴展與管理文章內容，提升前端開發的模組化與可維護性。

animate-css blog frontend lit shadow-dom ui-development web-components

1	<!doctype html>
2	<html lang="zh-TW">
3	<head>
4	<meta charset="UTF-8" />
5	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6	<title>精緻部落格文章展示</title>
7	<link
8	href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
9	rel="stylesheet"
10	/>

timmy / 使用 lambda 和 map() 進行列表轉換

0 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

這段 Python 程式碼使用 lambda 匿名函式搭配 map() 函式，對列表 numbers 中的每個數字進行倍數運算。lambda x: x * 2 定義了一個簡單的匿名函式，然後透過 map(double, numbers) 讓列表中的每個數字都經過該函式處理，最終輸出 [2, 4, 6, 8, 10]。這種寫法適用於資料轉換、函式式編程與簡化程式碼結構，提高可讀性與執行效率。

anonymous-functions data-transformation functional-programming lambda list-comprehension map python

1	numbers = [1, 2, 3, 4, 5]
2
3	# 使用普通的函數定義
4	def double(x):
5	return x * 2
6
7	# 使用 Lambda 表達式定義
8	double = lambda x: x * 2
9
10	# 使用 map() 函數將 Lambda 表達式應用到列表中的每個元素

timmy / Loguru 日誌管理與錯誤追蹤

0 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

這段 Python 程式碼使用 loguru 來記錄並管理日誌訊息，支援不同級別（INFO、DEBUG、WARNING、ERROR、CRITICAL）的日誌，並可輸出至終端機 (sys.stderr) 或檔案 (log.txt、debug.txt)。它還示範了顏色標記 (opt(colors=True))、錯誤追蹤 (logger.exception())、格式化 (opt(record=True)) 及自訂篩選條件 (filter=only_debug_filter)。此外，腳本還包含了一個除法函式 (divide())，並處理除數為 0 的異常。這適用於伺服器監控、錯誤記錄、程式偵錯及系統日誌管理，能夠提升日誌的可讀性與除錯效率。

debug error-handling exception-tracking log-management logging loguru python server-monitoring structured-logging

1	import sys
2
3	from loguru import logger # 引入logger套件
4
5	logger.remove() # 移除現有的logger設定
6	logger.add(sys.stderr, level="INFO") # 將logger設定加入到stderr中，並設定level為"INFO"
7	# logger.add(sys.stderr, level="WARNING")
8	# logger.add(sys.stderr, level="ERROR")
9	# logger.add(sys.stderr, level="TRACE")

timmy / 使用 pretty_errors 美化 Python 錯誤訊息

0 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

此程式透過 pretty_errors 讓錯誤訊息更易讀，並觸發除零錯誤 (ZeroDivisionError)，適用於開發除錯與錯誤診斷。

debugging error-handling exception pretty-errors python traceback

1	import pretty_errors
2
3
4	def division_by_zero():
5	1 / 0
6
7
8	if __name__ == "__main__":
9	division_by_zero()

timmy / 模擬數位時鐘的運行

0 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

此程式模擬數位時鐘，使用 datetime 初始化當前時間，透過 Clock 類別每秒遞增時間並即時顯示，適用於時間管理與計時應用。

clock datetime digital-clock python simulation time

1	from time import sleep
2	from datetime import datetime
3
4	class Clock(object):
5	"""Digital Clock"""
6
7	def __init__(self, hour=0, minute=0, second=0):
8	"""Initialization method
9
10	:param hour: Hour

timmy / 啟用 SMB 不安全來賓存取與禁用安全簽名

1 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

此登錄檔修改 SMB 設定，允許不安全的來賓存取 (AllowInsecureGuestAuth)，並禁用安全簽名 (RequireSecuritySignature)，適用於舊設備相容性需求，但可能降低安全性。

file-sharing networking registry security smb windows

1	Windows Registry Editor Version 5.00
2
3	[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\LanmanWorkstation\Parameters]
4	"AllowInsecureGuestAuth"=dword:00000001
5	"RequireSecuritySignature"=dword:00000000

timmy / 自動安裝與設定 Docker 和 Docker Compose

1 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

此腳本自動更新系統、安裝必要套件，下載並安裝 Docker 和 Docker Compose，適用於快速部署容器環境，提高開發與運維效率。

automation bash container devops docker docker-compose linux

1	#!/bin/bash
2
3	# 更新系統軟體庫
4	echo "更新系統軟體庫..."
5	sudo apt-get update -y
6
7	# 安裝必要套件
8	echo "安裝必要套件：apt-transport-https、ca-certificates 和 curl..."
9	DEBIAN_FRONTEND=noninteractive apt-get install -y -qq apt-transport-https ca-certificates curl >/dev/null

timmy / 設定與啟用 en_US.UTF-8 語言環境

1 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

此腳本啟用 en_US.UTF-8 語言環境，更新 locale.gen，並將環境變數寫入 .bashrc 以確保設定持久化，適用於國際化與多語系支援。

automation bash environment linux locale system-settings utf-8

1	#!/bin/bash
2
3	# 啟用 en_US.UTF-8 語言環境
4	echo "啟用 en_US.UTF-8 語言環境..."
5	sudo sed -i '/^# en_US.UTF-8 UTF-8/s/^# //' /etc/locale.gen
6	sudo locale-gen
7
8	# 設定語言環境變數
9	echo "設定語言環境變數..."
10	export LANG=en_US.UTF-8

timmy / Leaflet 多地點標記與自訂圖示

0 j'aimes

0 forks

1 fichiers

Dernière activité 10 months ago

此範例使用 Leaflet 在 OpenStreetMap 上顯示多個地點標記，並使用自訂圖示來強調特定位置，如台北 101、中正紀念堂和士林夜市。點擊標記可顯示彈出資訊，並支援地圖點擊事件以顯示座標。

custom-icons geolocation gis interactive-map leaflet mapping markers openstreetmap web-development

1	<!DOCTYPE html>
2	<html>
3	<head>
4	<title>Leaflet 多個地點範例</title>
5	<meta charset="utf-8" />
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
8	<style>
9	#map {
10	height: 600px;