Nuxt 3 DevTools 視覺化工具
前言這篇文章是我在 2023 iTHome 鐵人賽看到 Ryan 大大 寫的 Nuxt 3 實戰筆記 系列 文章做的一個紀錄，我之前也都有看到發表Nuxt 相關的文章，寫得都很用心仔細很值得跟著練習，我覺得最特別的是 Nuxt 新的 DevTools功能 安裝與啟用 Nuxt DevTools目前最新版的 Nuxt CLI 在建立專案時，預設已經預置並啟用了 Nuxt DevTools，你無需再另外設置，你可以透過專案下的 ./nuxt.config.ts 檔案確定，devtools.enabled 屬性是否設定為 true。 12345export default defineNuxtConfig({ devtools: { enabled: true, }}) 如果你的專案尚未啟用 Nuxt DevTools，你可以使用下列指令來為專案加入，需要注意的是 Nuxt DevTools 需要 Nuxt v3.1.0 或更高版本。 1npx nuxi@latest devtools enable 當你使用指令啟用...
Nuxt 3 使用 Nuxi 建立模板檔案
前言這篇文章是我在 2023 iTHome 鐵人賽看到 Ryan 大大 寫的 Nuxt 3 實戰筆記 系列 文章做的一個紀錄，我之前也都有看到發表Nuxt 相關的文章，寫得都很用心仔細很值得跟著練習，我覺得最特別的是 Nuxt 新的 DevTools功能 使用 nuxi 快速建立模板檔案建立檔案的指令格式如下： 1npx nuxi add <TEMPLATE> <NAME> [--cwd] [--force] 變數 功能 TEMPLATE 指定要產生的檔案模板類型，目前支援專案內常會使用到的 component、page 與伺服器 api 等。 NAME 填寫檔案名稱，也可以以路徑串接，來建立子資料夾中的檔案 –cwd 指定專案起始目錄，預設為 .。 –force 如果檔案存在，強制覆蓋檔案。 建立路由頁面 - nuxi add page舉個例子，建立一個 about 路由頁面： 1npx nuxi add page about 產生出的檔案 ./pages/about.vue...
Nuxt 3 實戰學習筆記 - 環境設定
前言這篇文章是我在 2023 iTHome 鐵人賽看到 Ryan 大大 寫的 Nuxt 3 實戰筆記 系列 文章做的一個紀錄，我之前也都有看到發表Nuxt 相關的文章，寫得都很用心仔細很值得跟著練習，我覺得最特別的是 Nuxt 新的 DevTools功能 Nuxt CLI 指令nuxi 全名為 (Nuxt CLI, Nuxt Command Line Interface)，是由 Nuxt 提供開發的標準工具，Nuxt CLI 就像是 Vue CLI 可以建立 Vue 專案，我們當然也就可以使用 Nuxt CLI 來建立 Nuxt 的專案。 環境準備環境準備流程如下，通常主要會用到的nuxi 指令也是這幾個 清除 npx 快取建立 Nuxt 專案檢查專案相關資訊升級 Nuxt 3 版本啟動開發伺服器清除自動產生的 Nuxt 檔案和快取產生靜態網站使用的預渲染打包專案建構生產環境需要的程式包預覽網站開發工具 Nuxt DevTools 更多完整的指令與用法可以參考官方文件。 清除 npx 快取 - clear-npx-cache1npx...
Python 網頁服務開發的 UX 與 DX 比較
這篇文章是我在 Agoda Engineering 部落格的文章閱讀紀錄UX vs. DX in Python Web Servers UX vs. DX in Python Web ServersAgoda在11月舉辦了一場與曼谷Python社群合作的ThaiPy聚會。演講者是Agoda的高級軟體工程師Mohamad Kamar，他分享了有關“Python Web伺服器中的UX vs DX”的演講。他深入探討了Python在Web伺服器架構方面的多樣性，從簡單的同步伺服器到複雜的異步和基於框架的伺服器。這篇博客文章總結了演講中討論的要點。 什麼是 UX and DX...
優化前端分析：Agoda 開發者的品質策略與工具
這篇文章是我在 Agoda Engineering 部落格的文章閱讀紀錄Refining Front End Analytics: Quality Strategies and Tools for Developers at Agoda Front End (FE) Analytics at Agoda在Agoda，前端（FE）分析是一個動態框架，旨在追蹤使用者在前端應用程式中的行為和互動。這個系統每天處理超過35億個事件，並分析超過1500個上下文字段，對於塑造和優化Agoda面向客戶、合作夥伴和內部應用程式的使用者體驗至關重要。 FE Analytics...
Google Analytics 4 練習紀錄
這篇是記錄我在看鐵人賽 跟著 OXXO 一起學 GA4 ( Google Analytics 4 ) 的過程 GA4 介紹GA4 是什麼？Google Analytics 4 ( GA4 ) 是 Google 的最新版本分析工具，與過去的版本不同的是，GA4 更加注重事件驅動的分析，除了支持跨設備和跨平台數據收集，也提供了更多人工智慧和機器學習功能，能夠更有效地透過流量了解使用者。 GA4 以「事件 Events」為資料收集的基礎，除了幾個基本事件，如果要分析額外資訊，則需要自行建立其他額外事件，這種全新的資料收集架構，大幅提高在商業應用上的深度與彈性，但也增加了不少學習門檻，且 GA4 目前仍在不斷發展階段，許多未來「可能調整」的介面或功能，也是導入 GA4 時需要面對的挑戰。 發展歷程自 2005 年推出以來，GA 整合了許多的功能，已經成為一個廣泛使用且不可或缺的分析工具，下方簡單整理了 GA 的發展歷程與重要里程碑： 年份 概要 1997 網站數據分析工具 Urchin 誕生 2005 Google 收購 Urchin，正式推出 Google...
Agoda全端工程師的日常生活
這篇文章是我在 Agoda Engineering 部落格的文章閱讀紀錄A Day in the Life of a Full-Stack Engineer 在軟體開發不斷變化的領域中，全端工程師的角色既關鍵又全面。這些多才多藝的專業人員是網絡的建築師和建造者，同時負責製作用戶界面元素，同時管理保持數字平台運行順暢的服務器端流程。這是一個要求不僅廣泛技能，還需要解決問題思維和持續學習的角色。在這篇文章中，Maksym...
pytest-sugar 測試輸出美化與隨機測試
今天我們要介紹該如何美化我們在進行測試時終端機的輸出，以及讓我們的測試可以隨機的進行 測試輸出美化套件安裝1pip install pytest-sugar 測試案例下方為本次會使用到的測試案例，透過參數化的方式建立四次測試 12345678910111213import pytestargvalues = [[1, 1, 2], [4, 4, 8]]@pytest.mark.parametrize(argnames='num1, num2, result', argvalues=argvalues)def test_add(num1: int, num2: int, result: int): assert num1 + num2 == result@pytest.mark.parametrize(argnames='num1, num2, result', argvalues=argvalues)def example_add(num1: int, num2: int, result: int): assert num1...
pytest-xdist併發測試
這篇是記錄我在看鐵人賽 Python 與自動化測試的敲門磚 的過程 pytest-xdist，可以協助我們將 pytest 用併發的方式進行測試，白話來說就是同時進行很多個測試，而不是一個測完才接著下一個 套件安裝1pip install pytest-xdist 建立測試程式建立三個測試程式，並於每個測試案例內都進行等待五秒 12345678910111213from time import sleepdef test_case_1(): sleep(5)def test_case_2(): sleep(5)def test_case_3(): sleep(5) 成果展示未使用併發測試時，可以看到測試總共花了 15 秒左右 使用 pytest -n auto 表示要使用併發模式進行測試，可以看到測試時間只花了六秒鐘左右 併發數量若使用 auto 會自動抓取電腦 CPU 核心數，來建立併發數量，一般建議使用 CPU 核心數 / 2 的併發數量來進行測試可以透過 pytest -n 來進行併發數量的設定，例如：pytest -n 3...
Pytest 客製化
這篇是記錄我在看鐵人賽 Python 與自動化測試的敲門磚 的過程 透過設定 pytest.ini 即可讓我們進行一些簡單的客製化，讓 pytest 更符合我們的需求 預設指令透過設定 pytest.ini 我們可以達到每次執行 pytest 時，會自動帶入指定的參數，例如：-s、-v …於整個專案最外層建立 pytest.ini 檔案 編輯 pytest.ini 1234[pytest]addopts = --maxfail=1 -s -v 範例當中，我們設定了在使用 pytest 時會自動帶入 -s、-v 參數，並且設定當發生一次錯誤時就會停止測試 建立測試程式 12345678import pytestargvalues = [[1, 1, 2], [2, 2, 5], [3, 3, 7], [4, 4, 8]]@pytest.mark.parametrize(argnames='num1, num2, result', argvalues=argvalues)def test_add(num1: int, num2: int, result:...
