FullStack part0 筆記 - Traditional web applications vs Single-page application

Traditional web applications 傳統的 Web 應用程式是指一個使用多個頁面的應用程式,每次使用者在網頁上進行操作時,都需要重新載入整個頁面或者轉到另一個頁面,從而刷新網頁的內容。每次發送請求時,伺服器都會重新生成一個 HTML 頁面,並將其傳送給客戶端。 Example page ...

May 2, 2023 · 1 min · Yen Tsai

FullStack part0 筆記 - Web基本觀念

了解Web 開發原則 Web 開發的第一原則: 第一步就是在瀏覽器上使用F12開啟開發者控制台,Network標籤可以看到Web與伺服器使用HTTP的所有通信, Console標籤可以看到所有在程式內Deubug用的訊息 HTTP GET HTTP GET 是一種 HTTP 請求方法,通常用於獲取網頁上的資源。在進行網路傳輸時,HTTP GET 方法可以向伺服器發送請求,以獲取伺服器上的資源。這些資源可以是網頁、影像、檔案等,而 HTTP GET 方法獲取資源的方式是透過 URL(Uniform Resource Locator,統一資源定位符)進行定位。 HTTP GET 方法是一種安全且幾乎無副作用的請求方法。使用 HTTP GET 方法,客戶端可以向伺服器發送請求,要求伺服器回應一個資源。當伺服器接收到 HTTP GET 請求後,會查找對應的資源,然後將其返回給客戶端。 HTTP GET 方法的請求是無副作用的,即不會對伺服器上的資源進行任何更改。這意味著使用 HTTP GET 方法,客戶端只能獲取伺服器上的資源,而不能修改或刪除它們。 HTTP GET 特色 ...

May 2, 2023 · 1 min · Yen Tsai

Vue.js 學習筆記

聲明式渲染 Declarative Rendering vue核心功能是聲明式渲染:不用關心渲染過程怎麼樣,只要告訴機器最終結果是甚麼就好 在template標籤內的語法用{{ }}渲染動態文字, 可以根據js當前狀態去改變現在HTML的樣子 <script> export default { data() { return { message: 'Hello World!' } } } </script> <template> <h1>{{ message }}</h1> </template> {{ }}內可以執行任何js表達式, ex: <h1>{{ message.split('').reverse().join('') }}</h1> ...

January 19, 2023 · 7 min · Yen Tsai

分層架構模式

分層架構 大多為以下四層: Presentation Layer 表現層: 該層關注的是用戶看到或可以互動的任何內容,包含UI、圖形、表單、影像 Business Layer 業務層: 軟體本身特定的業務邏輯,blog網站會有發布文章、留言功能 Persistence Layer 持久層: 資料存取 Database Layer 資料層: 資料來源 ex:本地DB,雲端DB ...

November 28, 2022 · 1 min · Yen Tsai

設計模式:Repository Pattern

問題 應用程式都有資料存取需求,大多使用關聯式資料庫,使用如ADO.NET, OLE DB…介面,再搭配SQL指令來操作資料 過往小型應用程式資料來源通常來自資料庫, 但現在提倡分散式, 雲端化的情況下, 資料來源具有多樣性 傳統做法:應用程式邏輯與資料存取介面緊密結合, 會提高整合資料的難度 使用時機 資料來源需要有任意抽換的功能 抽離對DB操作的功能到Repository ...

November 28, 2022 · 3 min · Yen Tsai

LINQ查詢語法

LINQ介紹 語言整合查詢(英語:Language Integrated Query,縮寫:LINQ)是Microsoft的一種查詢語法技術,C#、VB都可以使用 LINQ 語法 Where // filter odd number int[] numbers = { 5, 10, 8, 3, 6, 12}; IEnumerable<int> numQuery2 = numbers.Where(num => num % 2 == 0) // Output: 10 8 6 12 ...

November 21, 2022 · 2 min · Yen Tsai

Node Version Manager (NVM):安裝、切換Node.js版本的管理器

nvm介紹 Node Version Manager (NVM) 是用來管理Node.js版本,可以同時安裝多個不同版本,因應不同專案環境去快速做切換 安裝方式 Windows Windows環境下到nvm-windows Releases提供最新版本的安裝檔案,Assets處下載nvm-setup的檔案 執行exe檔案進行安裝流程 安裝完成後在cmd輸入nvm測試是否安裝成功 若成功會跳出nvm version nvm --version ...

November 21, 2022 · 1 min · Yen Tsai

在hexo新增留言板功能(utterances)

前言 過去對 blog 的留言板功能用過 Disqus,用了之後會在留言處自動插入廣告 看到 utterances 使用 github issue 當作留言板的儲存位置覺得滿酷的,就來研究一下 安裝環境 hexo 6.3.0 Next theme npm 8.5.5 Windows 10 流程 到 GitHub 創建一個公開的儲存庫 到utterances app並在 GitHub 上啟用,選擇剛剛新增的儲存庫 到utterances官網進行參數設定,下拉到 Repository 處 repo:填入留言板綁定的專案名,圖片中有提到要注意的事項:專案要是公開的、有授權utterances app 設定 issue 標題取名方式,有以下幾種: Issue title contains page pathname Issue title contains page URL Issue title contains page title Issue title contains page og:title Specific issue number Issue title contains specific term 設定 issue 標記名稱(選填) 設定留言板主題配色 GitHub Light GitHub Dark Preferred Color Scheme GitHub Dark Orange Icy Dark Dark Blue Photon Dark Boxy Light Gruvbox Dark 建立好的儲存庫透過 hexo 建置好一個 blog,並修改成 Next 樣式 ...

November 14, 2022 · 1 min · Yen Tsai

cs131 lecture 15 Optical flow

簡介 光流是描述視覺運動的一個方法,透過具有時間序列的影像來得到影像中不同物件的運動速度與他們的運動角,有了運動光流資訊可以用來: 運動方向檢測 物件分割 立體視差測量等等 如何得到影像中的光流 舉例來說一個影片由多個連續影像組成,我們追蹤不同影像同一點P,第t個frame時位置是P(x1, y1),在t+1時位置是P(x2, y2),透過這兩點座標就可以算出運動方向與運動速度 要算出這兩點光流的前提: 亮度恆定 移動前後兩點的亮度應該是相等的 $ I(x, y, t) = I(x + u, y + v, t+1) $ 微小的移動 在以上條件約束的前提下,亮度恆定與微小移動下 $ I(x, y, t) = I(x + u{\delta}t, y + v{\delta}t, {\delta}t) $ 對等號右邊的式子進行泰勒展開式,保留一階項 $ I(x + u, y + v, t+1) \approx I(x,y,t)+I_x∙u+I_y∙v+I_t$ 假設亮度不變,下個時間同個點的亮度相等 $ I_x∙u+I_y∙v+I_t \approx 0$ $ \nabla I∙[u,v]^T + I_t = 0 $ 不能透過等式 $ \nabla I∙[u,v]^T + I_t = 0 $ 解出u,v,因為只有一個等式內含有兩個未知數u,v ...

November 8, 2021 · 1 min · yanz

Machine learning Roadmap 2021 介紹

Machine learning Roadmap 2021 介紹 現在最紅的AI,也就是以深度學習,資料驅動的模型來預測、評估得到結果 為了加強對於Machine learning的廣度與深度理解,在網路上看到一個Machine learning roadmap的圖,整理得滿不錯的 Roadmap:https://whimsical.com/machine-learning-roadmap-2021-MJ9c7zUafrUKFzheRJ8jwy Roadmap提供所有想了解機器學習的人一個整理: 機器學習問題 機器學習的過程 機器學習的工具 機器學習的相關資源 機器學習的模型派系(ex:監督,非監督…) 機器學習的模型訓練、最佳化 機器學習的IDE、常用的第三方套件 機器學習使用的數學 機器學習的相關應用、部屬 他其實已經很完整,廣度及深度都已經有了,剩下的是如何從整理好的關鍵字向下研究,提高深度 例如:github上的Deep-Learning-Papers-Reading-Roadmap,它提供了學習方面的整理,有序的讓你了解到Deep learning這方面的經典模型 如果從Road map了解後對某一部份更有興趣,可以學習並尋找更多資源,然後填上認為缺少的重要訊息 接下來我想從這個Roadmap上的關鍵字進行相關的整理,再次對機器學習/深度學習上做一個複習

October 11, 2021 · 1 min · yanz