Writing
Thinking out loud
Engineering notes, architecture decisions, and things I learned the hard way.
Laravel: MongoDB with Laravel
What is MongoDB? MongoDB 是目前流行的 NoSQL 資料庫，是一個文檔導向（doc）的資料庫，不使用傳統的表格與行的模式，而是使用 JSONlike 的文檔（在 MongoDB 中稱為 BSON）來存儲資料。這使得數據結構可以非常靈活，能夠存儲更復雜的數據類型並輕鬆進行嵌套。...
Laravel: niklasravnsborg/laravel-pdf with mPDF 套用客製化的字型
前情提要 這次在工作上遇到中文字體無法解碼問題， 實際上的情況是：使用電腦可以讀取中文字體，但是在手機上卻不行的問題。 當時先思考到的是手機由於缺乏特定字型的支援，所以無法解讀， 因此，解決的辦法就是換掉字體。 不過，因為是承接別人寫的 code，在換之前，想先找出實際上被載入的字體是哪一個， 因此...
Ruby on Rails, Laravel: 起步走
前情提要 半年前，我在 Astrocamp 學習三個月的 Rails 開發， 結束後，誤打誤撞進入了以 Laravel 來開發的工作！ 一開始的確有點擔心自己會不會吃不消，但慢慢發現這兩者在開發上有著很相似的味道， 慢慢記錄使用上的小小心得，或許之後都能用得上也說不定！ 概念理解 在開發框架中，以下...
Linux & MacOS: Commands
剛開始接觸時，有寫了一篇關於 Terminal 的指令，漸漸接觸到越來越多知識後，要開始補足之前沒有寫過的層面，Let's Go! Linux 是什麼？ Linux 是一種開源 Unix 作業系統，其核心是由 Linus Torvalds 在 1991 年開發的。 是一個多用戶、多任務、支援多種硬體...
Laravel: Laravel Homestead 環境建置
預備知識！ 在開始介紹 Laravel Homestead 之前，需要先了解以下內容： Vagrant：Vagrant 是 open source，讓開發者在虛擬機器上管理和配置虛擬機器，而 Laravel Homestead 是建立在 Vagrant 官方預載的 Vagrant box，為開發者提...
Development: MailHog vs mailpit
What is MailHog? MailHog 是針對開發上的電子郵件測試工具。 使用 MailHog 進行 SMTP 郵件發送。 可以透過 Web UI 查看郵件，或使用 JSON API 擷取郵件。 可選擇將郵件釋放到真實的 SMTP 伺服器以進行實際發送。 What is mailpit?...
Hexo: 關於更新 tags, categories 時，導向 404 錯誤
前情提要 在更新自己的 hexo 主題時，也同時更新 tags 與 categories 的寫法，為了不想在導向的路徑上有大寫字母，將所有 tags 與 categories 都更正為小寫，但即便已經以 清除舊的檔案，當時按下部分的 tags 與 categories 都會產生 404。 發現新大陸...
LLM: 大型語言模型應用開發
LLM 是什麼？ LLM (Large Language Model 大型語言模型) 大型語言模型（LLM）是指具有大規模參數和通過大量資料事先獲得基本的理解能力的語言模型。 LLM 用於理解和生成自然語言，並應用在多種自然語言處理任務上，而其發展是深度學習和神經網絡領域的一個重要趨勢。 我們熟知的...
PHP: TCPDF Library in Laravel
前言 總覺得跟 pdf 功能十分有緣分，先前在製作 READMEE 的專案時，有運用到 jspdf 這個前端的 pdf 套件，這次在工作上要使用後端的方式來處理，這次要來介紹 TCPDF! TCPDF 簡介 TCPDF 是一個用於生成 PDF 文件的免費且開源的 PHP 類別，而且也是唯一基於 PH...
Information Security: Cross-site scripting (XSS) Attack
What is Crosssite scripting (XSS) ? 跨站腳本攻擊（CrossSite Scripting，簡稱XSS）是一種網站應用程序中常見的安全漏洞， 允許攻擊者將惡意代碼注入到網頁上，並在用戶瀏覽頁面時執行這些程式碼。 XSS 攻擊的目標是盜取用戶的敏感資訊、繞過訪問控制或...
Git: Git Flow, GitHub Flow, GitLab Flow, Trunk-based development
Git 是在軟體開發上常用的版本控制工具，要如何有效對分支進行管理以及使用 Git 進行協作和開發呢？ 以下分享四種常見的 Flow 分別為 Git Flow, GitHub Flow, GitLab Flow, Trunkbased development，在往後的團隊合作上可以好好的利用！ 1....
Internet: TCP/IP 協定是什麼
當使用者輸入網址後按下 enter 鍵後，實際上發生了什麼事情呢？ 在網路基礎的面試題當中，這一題真的是必須要會的題目！ 當使用者在瀏覽器中輸入網址並按下 Enter 鍵時： Step 1. 使用者輸入 URL：使用者在瀏覽器中輸入網站的 URL，例如 https://www.example.com...
Ruby: String vs Symbol
字串與符號的差異？ 字串（String）： 字串是一種數據類型，用於表示文本數據，例如字母、數字、符號和空格。 字串是由一系列字符組成，這些字符可以包括字母、數字、標點符號等。 字串通常用引號（單引號或雙引號）括起來，例如："Hello, World!"。 字串可以包含多個字符，並且可以進行各種操作...
Ruby: Class & Module
在 Viiisit Ruby Ruby 的物件導向程式語言基礎概念! 有提到 Ruby 是一個物件導向的程式語言，在 Ruby 中，所有的東西幾乎都是物件，為什麼說是幾乎？ 因為像之前有一篇 Viiisit Ruby on Rails Scope 前情提要 Block、Proc 和 Lambda!...
Ruby: 費波那契數 Successione di Fibonacci
面試上很常見的費氏數列，來看看如何用 Ruby 的方法來定義吧！ 費波那契數 Successione di Fibonacci 在數學上，費波那契數是以遞迴的方法來定義： 0, 1, 1, 2, 3, 5, 8, 13... 用文字來說，就是費氏數列由0和1開始，之後的費波那契數就是由之前的兩數相加...
Internet: DNS 跟 IP 是什麼
DNS 是什麼？ DNS (Domain Name System) 將人們可讀取的網域名稱 (www.example.com) 轉換為機器可讀取的 IP 地址 (192.0.1.234)。當開啟 Web 瀏覽器進入網站時，不需要記住這些冗長的數字 （IP 地址）進行輸入，而是輸入像 example....
Internet: HTTP / HTTPS
不知道大家在看網址的時候，有沒有好奇網址的開頭都有 或者 ，這兩者到底是什麼？ 差別又在哪？網路基礎知識難免要理解 HTTP 與 HTTPS 的相關知識，我們來一探究竟吧！ HTTP 是什麼？ HTTP 的全名為 HyperText Transfer Protocol，超文本傳輸協定，是全球資訊網的...
Internet: Session 與 Cookie 是什麼
面試大哉問之超常見的 Session 與 Cookie，本篇就來聊聊一些基礎與相關知識！ Let's go! 為什麼會有 Session 與 Cookie？ 大家是否好奇為什麼會有 Session 與 Cookie？ 他們之所以會存在是因為 HTTP 是一種無狀態協議（Stateless Proto...
Git: Time Machine
What is Git? Git 像是時光機，能保存檔案，也能回顧過去的紀錄，是一種記載著連續性歷史紀錄的系統。 有接觸 Git 工具的人可能會說：「 Git 是一種分散式版本控制系統。」 聽到這會覺得，每個字都看得懂，但是，仍然不知道實質上是做些什麼？ 來看看自己是不是有過數個檔案、數本報告改了又...
Database: 資料庫 Transaction 與 ACID
_今天來點資料庫 Transaction 與 ACID！_ 前情提要 當我們試圖新增、修改或建立資料，並在進行這些操作時發生無法將資料存入資料庫的情況， 資料庫會發生什麼事？ 我用 Rails 建立的註冊功能，當要在使用者資料表中新增一個新的使用者，可能由於某種原因（例如，唯一性約束違反或欄位的格式...
Database: 資料庫正規化與反正規化
_今天來點資料庫正規化與反正規化！_ 正規化資料庫 正規化是資料庫設計的一個關鍵概念，旨在減少資料的冗余和確保資料的一致性。 使用正規化規則來分解資料表，以達到最佳的資料結構，透過將資料拆分成多個相關的資料表，並使用關聯連接在一起，以減少減少數據存儲和更新時的異常情況。 正規化通常分為不同的正規化級...
Database: 資料庫是什麼？
_在之前透過 Active Record Query 去探索在 Rails 裡是如何對資料庫找資料的，想想發現對於資料庫的基本觀念似乎還沒有講述，今天來點資料庫吧！_ 資料庫是什麼？ 簡單來說，資料庫是用於有效地存儲、檢索和管理所有資料！ 平時在詳列出自己的購物清單明細，其實這樣列點式出來就很像一個...
Ruby on Rails: Active Record Query - Enum
_在 Active Record 裡，有一個滿常見的功能，Enum，這功能該如何使用，今天就來點 Enum 吧！_ Enum 是什麼？ Enum（Enumeration的縮寫）稱為列舉，是一種程式設計中常見的資料型別， 用於定義一組具有固定名稱的整數常數。 這些名稱通常用作代表特定狀態、選項、或類別...
Ruby on Rails: Active Record Query - scope
_在 Rails 查詢資料上，除了先前所介紹的 , 的抓取資料的方式之外， 還有一個很特別的方式 scope! 今天真的來點 scope！_ scope 是什麼？ 在 Rails 中，scope（作用域）是一種特殊的查詢方法， scope 查詢方法常見用途是用於按狀態、日期、日期範圍、排序、分組等進...
Ruby on Rails: Scope 前情提要 Block、Proc 和 Lambda
_在 Rails 查詢資料上，除了先前所介紹的 , 的抓取資料的方式之外， 還有一個很特別的方式 Scope! 但是，今天我想先來點 Scope 前情提要 Block、Proc 和 Lambda！_ 前情提要 Block、Proc 和 Lambda！ 在正式說明 Rails 查詢資料上在 Model...
Ruby on Rails: Active Record Query (下)
繼續來探究 Active Record 在抓取資料上的方法！ 繼上篇，我們已經學習了如何進行基本的資料查詢。 這篇將深入介紹一些查詢方法以及常見的解決 N+1 問題該如何解決，Let's go! Grouping 要在查詢 SQL 中應用 GROUP BY 子句，可以使用 方法。 SQL 中的 GR...
Ruby on Rails: Active Record Query (上)
繼續來探究 Active Record，前幾篇談論資料的關聯性，這次我們來點在 Active Record 怎麼抓取資料！ 前情提要 大家還記得當時提及 Active Record 的好處嗎？ 如果沒印象，可以回頭看看：Day 19 理解 Ruby on Rails，ORM 與 Active Rec...
Ruby on Rails: Active Record Associations (下)
_上回我們講到 Active Record Association 的基礎觀念，今天繼續延伸下去！_ Polymorphic Association 多型關聯 多型關聯（Polymorphic Association）是一種在資料庫中建立關聯的方法，允許一個模型與多個其他模型建立關聯，並且可以根據需...
Ruby on Rails: Active Record Associations (上)
before_action :前言 為什麼需要關聯性？ 在 Rails 中，Active Record 關聯是指不同 Model 之間的連結與關係。 我們在一個專案裡，一定不只有一個 Model，會同時存在許多 Model， 在 Rails 裡，我們可以透過關聯將這些 Model 連結在一起，大致上...
Ruby on Rails: Active Record
_今天來點 Active Record!_ 在講述 Active Record 之前，我們先來建立一個基礎概念：ORM Object–relational mapping Object–relational mapping (ORM) 物件關聯映射 物件關聯映射（ORM）是一種軟體設計模式，將資料庫...
Ruby on Rails: Controller, Action, View
建立 Controller 與定義 Action 在先前介紹路徑時，以「文章列表」的路徑為例子： 可以發現，在建立路徑的同時，to: 後方就是 controller 與 action！ Controller 的命名會根據 Route 是使用複數的 resources 還是單數 resource 方法...
Ruby on Rails: Route
今天來點 Routes !https://ithelp.ithome.com.tw/upload/images/20230930/20161764YQPprUetsK.png 在 Viiisit Ruby on Rails CoC & DRY! 有提到 REST 與 RESTful 概念，我們再複習...
Development: MVC
上篇我們提到 Ruby on Rails 的設計原則，今天來點 MVC，看看 Rails 在這樣的模式下是如何運作的！ 什麼是 MVC 架構？ MVC（Model View Controller）是一種軟體架構模式，用於組織和分離應用程式的不同部分，以實現更好的代碼結構和可維護性，這樣的設計概念是以...
Ruby on Rails: CoC & DRY
講到 Ruby 大家一定也聽過 Ruby on Rails 或者 RoR，今天就來點 Ruby on Rails 吧！ Ruby on Rails 是什麼？ Ruby on Rails（簡稱RoR）是一個使用 Ruby 程式語言所開發出來的 Web Framework（網站應用程式框架）。作者是名為...
Ruby on Rails: Gem 是什麼呀
_在開放原始碼的世界，有非常多厲害開發者願意無私的貢獻程式碼，而這些程式碼大多會打包成好用的套件！_ Gem 是 Ruby 的套件管理系統，用於打包、分發和管理 Ruby 程式庫。每個 Gem 都是一個獨立的 Ruby 程式庫，可以包含 Ruby 代碼、文件、測試、文檔和元數據。 像是上篇提及過的...
Development: SOLID
繼上篇的物件導向程式設計概念，近期在面試上有遇到一個很重要的相關觀念， 當時不知道為什麼，現在整理出來分享～ ：有聽過 SOLID 嗎？ ：SOLID 是什麼？ SOLID 是什麼？ SOLID 是一組五個物件導向程式設計的基本原則，旨在幫助開發者創建可維護、可擴展且易於理解的程式碼。這些原則有助於...
Ruby] - Ruby 的物件導向程式語言基礎概念
在之前都是分享 JavaScript 相關的內容，接著想分享自己學習 Ruby 與 Ruby on Rails 時， 了解到的重要知識，都會再接下來的文章中出現唷！ Ruby 是什麼？ A dynamic, open source programming language with a focus...
JavaScript] - ES6 Class 語法糖
在上篇因為 JavaScript 沒有原生的 Class，所以他的繼承方式是以 prototype (原型)，在 ES6 中引入了 Class（類別）語法，他是一種語法糖，提供了更容易使用的方式來建立和管理物件以及實現物件導向程式（OOP）的概念。這種語法糖使得在 JavaScript 中建立和使用...
Viiisit [JavaScript] - Prototype, Prototype Chain & Prototype Inheritance in JavaScript!
今天來點 JavaScript 的原型與繼承！ Prototype（原型）是什麼？ 當我們在 JavaScript 中建立物件時，每個物件都有一個隱含屬性 ， 叫做 prototype（原型）。原型就像是物件的「模板」，決定了物件的一些基本特性和方法。 藉由以下例子，來看看 與 ： 假設我們有一個建...
JavaScript] - How to create Object in JavaScript
物件是 JavaScript 中的核心概念，上篇有提及 ，今天來點如何建立物件吧！ JavaScript 的基本型別 在之前的篇章中都未提及過的基本型別，在說明建立物件之前，來簡單說明一下： 1. 數字（Number）： 用於表示數值。可以是整數或浮點數。例如：、。 2. 字串（String）： 用...
JavaScript] - what is this
今天我想來點 ! 當時在學習 概念時，覺得有點複雜，但他又是 JavaScript 中滿重要的概念之一， 而且之前在看 JavaScript 相關面試題目 javascriptquestions 也發現 是 JavaScript 面試經典題，最近剛好在整理筆記時，想透過本篇文章再次整理一次，讓自己能...
JavaScript] - Event Loop
今天，我想來點 Event Loop （事件循環）! 為什麼會有 Event Loop (事件循環)？ 在正式說明之前，先來理解一下，為何會有 Event Loop (事件循環) 吧！ JavaScript 是一種單執行緒（singlethreaded）的程式語言，也就是在任何給定的時間只能執行一個...
JavaScript] - Promise & async/await
繼上篇提及到回呼函式（Callback Function），今天來講 Promise 與 async/await！ Promise 是什麼？ Promise 是 JavaScript 中用於處理非同步操作的一種概念和對象。 主要目的是更好地處理非同步操作的 Callback Hell (回調地獄)...
JavaScript] - First-Class Function & Callback Function
一級函式（FirstClass Function） 一級函式是指在程式語言中，函式被視為一種「第一級公民」，可以像其他數據類型（如整數、字符串）一樣被處理。 也就是說，函式可以被賦值給變數，作為函式的參數傳遞，以及作為函式的返回值。 一級函式的特點： 函式可以存儲在變數中。 函式可以作為另一個函式的...
JavaScript] - Closure
上篇簡單講述了閉包的特性之後，今天來點不同的舉例來加深印象！ 先來看看以下程式碼： 是不是會很好奇，為什麼輸出都是 ？ 回想一下閉包的特性，雖然上面的程式碼似乎應該依次輸出 、， 但實際上它們都輸出 的原因是因為在迴圈中創建的匿名函式捕獲了變數 的引用，而不是其值。 在 函式中，我們創建了一個函式陣...
Information Security: CORS
before_action :about_same_origin_policy 在講述 CORS（CrossOrigin Resource Sharing 跨來源資源共享）之前， 我們必須了解 SameOrigin Policy (同源政策)，Let's go! SameOrigin Policy...
JavaScript] - Scope Chain & Closure
今天來點 Scope Chain (作用域鏈) 與 Closure (閉包)！ Scope Chain（作用域鏈）是什麼？ 當 JavaScript 使用每一個變數時，會先嘗試在目前的作用域中尋找該變數； 若找不到該變數，便會一直往外層作用域尋找，直到全域作用域還是沒找到的話就會直接報錯。 這一層一...
Ruby on Rails: 由 Active Storage 延伸至 Amazon S3 Bucket
before_action :set_knowledge 最近在專案執行上，碰上需要上傳圖片並且圖片能夠在線上的資料庫做保存，這次藉由 Rails Guide 介紹的 Active Storage 與 Amazon S3 的設置環節來記錄一整個建置的過程！ About Active Storage...
Ruby on Rails: 呼叫 `.pdf` 轉換術
before_action :why I need .pdf? 現階段接了一項新任務，為專案做出 pdf 檔案 專案在如火如荼地進行著，實作將 html 轉成 pdf 格式！ 原本運用的是 wicked_pdf， 後來又使用了 jspdf + html2canvas 來製作這項功能， 就想著順道來記...
Ruby on Rails] - 常見的查詢方法
怎麼用 Ruby 語法查詢資料？ find find 方法只能使用 primary key(id) 值來查找，也就是從 id 去找， 返回查詢對象或拋出 exception（例外訊息）！ exception 意即：如果找不到對應的記錄，則會拋出 ActiveRecord::RecordNotFoun...
Viiisit SQL!
before_action :review What is Active Record? Active Record 是一個設計模式，也是 Ruby on Rails 中的一個核心概念。 用於處理資料庫和應用程式之間的 ORM（ObjectRelational Mapping）模式。 Active...
Ruby on Rails: Model
before_action :複習基礎知識 Route, Controller, View, Model, Migration 這裡我們來把 Route, Controller, View 扮演的角色再複習一次， 並加上 Model, Migration 為整個架構在理解的更透徹！ 在 CRUD 實...
Ruby on Rails: 先備知識
About Rails Rails 是使用 Ruby 程式語言所開發出來的網站開發框架（Web Framework） 由 David Heinemeier Hansson（簡稱 DHH）所開發。 在 Rails 世界有兩個大重點： 慣例優於設定（Convention over Configurati...
Custom Domain - 從零到有，成功建置 viiisit.com!
OMG!!! 終於成功了！（灑花～ _過程真的一波三折，但是看到成功的瞬間，內心真的灑下一百種花，先為自己鼓掌一下！！！_ 這裡分享以 Hexo + GitHub Pages + gandi + Cloudflare 上架！ before_action :mindset 一開始我只是單純使用 Hex...
Ruby] - Constant & Variable
命名方式： 常見的命名方式有 snake_case 跟 camelCase 這兩者。 在 Ruby 大部分是使用小寫英文字母以及底線來組合變數名稱， 例如像是 my_new_post，蛇式命名（snake_case）。 Constant 常數 命名規則：常數是大寫英文字母開頭! 在 Ruby，常數的...
JavaScript] - Hoisting & Scope
繼上篇提到的宣告變數與常數後，透過上篇的總結表格，來聊聊變數提升以及作用域！ Hoisting 在說明 Block Scope (區塊作用域) & Function Scope (函式作用域) 之前， 先來提及 Hoisting (提升)，了解 Hoisting (提升) 可以幫助我們更加了解 Ja...
Ruby] - Intro
Ruby 簡介 發明人：松本行弘 （まつもとゆきひろ） ObjectOriented Programming (OOP) 物件導向程式語言 減少編程時候的不必要的瑣碎時間，想讓編寫程式的人感到開心， 是設計 Ruby 語言的 Matz 的一個首要的考慮；其次是良好的介面設計。 Ruby on Rai...
Viiisit [JavaScript] - const, let, var!
在 JavaScript 裡，最常見的 const, let, var，這三者到底有什麼不同？ Basics const 常數 在宣告常數上，要注意不能重複宣告也不能重新賦值，但是在宣告陣列或是物件時，可修改其內部屬性。 在第三點可以發現 const d = ["a", "b", "c"] 可以藉由...
GitHub: GitHub Pages
What is GitHub Pages? GitHub Pages 是由 GitHub 提供的一項免費的靜態網站托管服務。 可以將靜態網站（HTML、CSS、JavaScript、圖片等）部署在 GitHub 的伺服器上， 使網站可以通過公開的 URL 在網際網路上訪問。 使用 GitHub Pa...
GitHub: `git push` error fixed
Git 與 GitHub 是不同的！ Git 為一項工具，下載至自己的裝置上操作檔案間的版本控制、記載連續性的歷史紀錄； GitHub 則是一個網站、平台，提供一個遠端儲存庫 (Remote Repository)， 讓本地儲存庫（Local Repository）上傳至 GitHub。在 GitH...
Terminal: Usual Commands and Shortcut
What is Terminal? Terminal is a simple textbased interface which lets you access the command line. 簡單來說，Terminal 是一個以文字為基礎的操作介面，所有的指令都必須以鍵盤輸入。初次接觸這個介面...
Compiled Language vs Interpreted Language!
什麼是編譯式語言、直譯式語言？ 在軟體開發中，程式語言的執行方式對於開發者來說是基本的概念， 編譯式語言和直譯式語言，代表著不同的設計哲學和程式執行的方法。 編譯式語言 Compiled Language 當我們談及編譯時，我們談的是一個在程式碼執行之前，先將整個源代碼轉換為機器碼或中間碼的過程。這...
Hello World! I'm Viii!
Hello World! ( coding 之路必見過的 Hello World!) 嗨！我是 Viii，踏入 coding 世界的小菜雞！ 之前在舒服環境待上好一陣子的我，三個月前，決定嘗試不一樣的挑戰。 想想以前在瀏覽網頁，總是對那些動畫效果感到特別好奇，內心不自覺會驚呼：「天阿！好神奇喔！怎麼...