Nalson

這一篇是參考以下教學文章[教學] Azure Blob Storage 使用指南 – 創建篇實作練習的紀錄 Azure Blob Storage 設定流程Microsoft Azure 的 Blob Storage 提供了透過 restful api 來對檔案進行取得檔案以及對其新增、修改刪除的功能，對於在許多機房能夠同時存取非常方便，本篇將教學如何透過 azure portal 創建 Microsoft Azure 的 Blob Storage。 Blob 主要架構分為三層 架構 說明 儲存體帳戶 (storage account) 表示一個倉庫帳號，一個使用者可以創間多個儲存體帳戶 容器 (container) 類似於硬碟的概念，在一個 storage account 可以有多個 container，用來區分不同用途的檔案 Blob (檔案或資料) 類似於檔案系統的檔案，並且可以有資料夾多層式的階層來做更進一步的分類 創建 storage account首先進入 azure portal...

前言這邊我是參考這篇 一文教会你如何使用 Vercel 部署你的 NestJS 应用 教學文章跟著操作的紀錄 Nestjs 專案增加 vercel 設定文件在跟目錄下新增 vercel.json 文件 12345678910111213141516171819202122{ "version": 2, "builds": [ { "src": "src/main.ts", "use": "@vercel/node" } ], "routes": [ { "src": "/(.*)", "dest": "src/main.ts", "methods": [ "GET", ...

前言這邊在練習Nuxt 3時想要運行在Docker 上，所以就找到這篇文章將 Nuxt3 發布至 docker 中，Dockerfile 看這裡就對了實際測試可以成功，所以記錄一下過程 Dockerfile1234567891011121314151617181920212223# 使用 node 長期支援版FROM node:lts-alpine# 設定工作目錄WORKDIR /app# 複製 package.json 和 package-lock.json 至工作目錄COPY package*.json ./# 依照指定版本安裝依賴RUN npm ci# 複製所有COPY . .# 建立生產版本RUN npm run build# 暴露的連接埠EXPOSE 3000# 啟動應用程式CMD ["node", ".output/server/index.mjs"] 打包1docker build -t my-nuxt-app . 啟動1docker run -d --name nuxt-app -p 3000:3000...

LinkedIn Redesign Nuxtjs3準備Figma 設計稿https://www.figma.com/file/7EeOLaEuMD7cNIsXTM8vp0/LinkedIn-Redesign-UI-Kit-(Community)?node-id=0%3A1&mode=dev 建立Nuxt.js 3 專案npx nuxi@latest init nuxt-linkedIn-redesign 把每一頁透過 Builder.io 產生程式 Framework 選擇 Vue 新增 profile page 元件1npx nuxi add page profile 調整 app.vue 檔案 12345<template> <div> <NuxtPage /> </div></template> 另外需要安裝...

前言這篇文章是我在 2022 iTHome 鐵人賽看到 PixiJS青銅玩家 系列 文章做的一個紀錄。 PixiJS 是什麼?PixiJS 是一個用於創建2D網頁遊戲和互動內容的快速輕量級渲染引擎。它是一個使用JavaScript編寫的開源庫，提供了簡單而強大的API，使開發者能夠輕鬆地創建高性能的瀏覽器內遊戲和互動應用。 安裝PixiJSnpm1npm i...

前言這篇文章是我在 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 當你使用指令啟用...

前言這篇文章是我在 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...

前言這篇文章是我在 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...

這篇文章是我在 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 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...