SchaosinSchaos’s Blog前端三十系列彙整嗨大家，這是前端三十系列的最後一篇了；如果您有跟著筆者一起進行這連續三十天的旅程，相信多少都能感受到自己的成長吧？Aug 23, 2020Aug 23, 2020
SchaosinSchaos’s Blog透過 MJML 快速完成 RWD Email 排版去年的 前端三十系列文 中，我寫道「2019 年了，不要再用 Table 排版了」；PO 文的幾天後，我卻在工作中被主管指派，要切版新產品的訂單通知信，並實作專門產出 Email Template 給各產品使用的內部…Apr 8, 2020Apr 8, 2020
SchaosinSchaos’s Blog前端三十｜30. [WEB] 從輸入網址列到渲染畫面，過程經歷了什麼事情？相信讀者您在生活中，多少都會有搜尋、瀏覽網頁的經驗吧？輸入網址、而身為網頁製造者的前端工程師，你真的知道你寫出來的網頁在部屬之後，是怎麼從網址變成頁面，進而顯示在瀏覽器中的嗎？Oct 15, 2019Oct 15, 2019
SchaosinSchaos’s Blog前端三十｜29. [WEB] 網站常見的資安問題有哪些？在本系列文前面的旅程中，我們討論了許多語言特性、效能優化、技術選型，但如果網站的安全性不足，無法正確保護網站使用者的資料、甚至成為惡意程式的寄生處，那前面堆砌了再多美好也都成枉然。今天就讓我們一起來看看網站常見的資安問題吧。Oct 14, 2019Oct 14, 2019
SchaosinSchaos’s Blog前端三十｜28. [WEB] HTTP 和 HTTPS 的差別是什麼？相信大多數的讀者，對這個畫面應該都不陌生吧？當前最熱門的瀏覽器 Google Chrome 從 Chrome 69 開始，會在網站使用 HTTP 作為傳輸協定時，在網址列提示使用者「不安全」，甚至出現上圖的提示畫面，藉此來要求網站開發者盡快將網站轉為透過 HTTPS…Oct 13, 2019Oct 13, 2019
SchaosinSchaos’s Blog前端三十｜27. [WEB] Cookie & Session 是什麼？Cookie 和 Session 這兩個名詞，相信大部分的開發者都不會太陌生，特別是 Cookie，從社群網站、電商平台、Google Analytics 分析等地方，無處不見它的應用；但從本質上，Cookie & Session 究竟是什麼呢？這就要從 HTTP 的特性說起。Oct 12, 2019Oct 12, 2019
SchaosinSchaos’s Blog前端三十｜26. [BE] API 設計拿資料要透過 POST，會有什麼問題嗎？現代的網站越來越多前後端分離的架構，透過 前端 MVC 框架 快速堆砌出 SPA，再透過 API 取得變動的資料也已經是開發者日常；而用來聯繫前後端的 API，其重要性自然也就不言而喻了。身為一個前端開發者，認識後端的 API 設計方式也是很重要的一環，今天就讓我們針對…Oct 12, 2019Oct 12, 2019
SchaosinSchaos’s Blog前端三十｜25. [BE] Node.js 與 JavaScript 的關係是什麼？隨著 Node.js 的問世，前端開發者的觸角也逐漸蔓延到後端；藉由 Node.js，前端開發者得以使用較為熟悉的 JavaScript 為敲門磚，逐步的拓展自己的技術守備範圍。但為什麼為了網頁而生的語言可以透過 Node.js 跑在伺服器端呢？Oct 11, 2019Oct 11, 2019
SchaosinSchaos’s Blog前端三十｜24. [BE] 請說明一下 npm 的套件管理機制在現代的網站中，使用他人開放原始碼的套件輔助開發已經是稀鬆平常的事情，無論是透過套件加速堆砌產品，或是在開發環境中加上協助工程師的各式工具，只需要稍加設定，一個專案便能輕易加載了成千上萬的外部程式；但如此方便的機制，究竟是怎麼實現的呢？Oct 10, 2019Oct 10, 2019
SchaosinSchaos’s Blog前端三十｜23. [FE] 網頁的快取機制是怎麼運作的？筆者在剛開始寫網頁時，總是會遇到改了檔案重新整理畫面卻沒更新，或是更新了一張圖檔到伺服器但網頁內容沒有更換等情況，使得現在按 Ctrl/CMD + R 時，小指都會自動同時按下 Shift 來忽略快取；相信不少人多少都有類似的經驗吧？但到底什麼是快取呢？Oct 9, 2019Oct 9, 2019
![前端三十｜28. [WEB] HTTP 和 HTTPS 的差別是什麼？](https://miro.medium.com/v2/resize:fill:160:106/0*GzGhyY6oBHXkqNWP.png)
![前端三十｜28. [WEB] HTTP 和 HTTPS 的差別是什麼？](https://miro.medium.com/v2/resize:fill:320:214/0*GzGhyY6oBHXkqNWP.png)
