Schaos’s Blog

去年的 前端三十系列文 中，我寫道「2019 年了，不要再用 Table 排版了」；PO 文的幾天後，我卻在工作中被主管指派，要切版新產品的訂單通知信，並實作專門產出 Email Template 給各產品使用的內部…

相信讀者您在生活中，多少都會有搜尋、瀏覽網頁的經驗吧？輸入網址、而身為網頁製造者的前端工程師，你真的知道你寫出來的網頁在部屬之後，是怎麼從網址變成頁面，進而顯示在瀏覽器中的嗎？

在本系列文前面的旅程中，我們討論了許多語言特性、效能優化、技術選型，但如果網站的安全性不足，無法正確保護網站使用者的資料、甚至成為惡意程式的寄生處，那前面堆砌了再多美好也都成枉然。今天就讓我們一起來看看網站常見的資安問題吧。

相信大多數的讀者，對這個畫面應該都不陌生吧？當前最熱門的瀏覽器 Google Chrome 從 Chrome 69 開始，會在網站使用 HTTP 作為傳輸協定時，在網址列提示使用者「不安全」，甚至出現上圖的提示畫面，藉此來要求網站開發者盡快將網站轉為透過 HTTPS…

Cookie 和 Session 這兩個名詞，相信大部分的開發者都不會太陌生，特別是 Cookie，從社群網站、電商平台、Google Analytics 分析等地方，無處不見它的應用；但從本質上，Cookie & Session 究竟是什麼呢？這就要從 HTTP 的特性說起。

現代的網站越來越多前後端分離的架構，透過 前端 MVC 框架 快速堆砌出 SPA，再透過 API 取得變動的資料也已經是開發者日常；而用來聯繫前後端的 API，其重要性自然也就不言而喻了。身為一個前端開發者，認識後端的 API 設計方式也是很重要的一環，今天就讓我們針對…

隨著 Node.js 的問世，前端開發者的觸角也逐漸蔓延到後端；藉由 Node.js，前端開發者得以使用較為熟悉的 JavaScript 為敲門磚，逐步的拓展自己的技術守備範圍。但為什麼為了網頁而生的語言可以透過 Node.js 跑在伺服器端呢？

在現代的網站中，使用他人開放原始碼的套件輔助開發已經是稀鬆平常的事情，無論是透過套件加速堆砌產品，或是在開發環境中加上協助工程師的各式工具，只需要稍加設定，一個專案便能輕易加載了成千上萬的外部程式；但如此方便的機制，究竟是怎麼實現的呢？

筆者在剛開始寫網頁時，總是會遇到改了檔案重新整理畫面卻沒更新，或是更新了一張圖檔到伺服器但網頁內容沒有更換等情況，使得現在按 Ctrl/CMD + R 時，小指都會自動同時按下 Shift 來忽略快取；相信不少人多少都有類似的經驗吧？但到底什麼是快取呢？

如果讀者您在開發、建置網站的過程中，有嘗試透過任何套件、框架，或是瀏覽器的 fetch、XHR 串接外部 API，相信對於「跨域請求」這個名詞一定不會陌生，更別說是那個怵目驚心的 CORS 錯誤訊息了；今天我們就來討論跨域問題的原因，以及解決方法。

隨著網頁技術不斷翻新，前端需要處理的事也就越來越繁雜；在這樣龐雜豐富且迅速更迭的技術環境之下，將開發流程自動化、工程化就成了必需，開發者也自然會需要一些工具來協助優化這些流程。今天就讓我們一起聊聊前端的打包工具。

Perl 之父 Larry Wall 曾說過，工程師有三大美德，分別是：「懶惰」、「急躁」與「傲慢」。其中的「急躁」指的便是對於效能低落的程式會有所追求；身為一個前端工程師，如果自己做出來的網站一打開就白畫面好幾秒，點擊連結後就開始無止盡的等待，畫面樣式變動還會一格一格…

一個好的想法，在好的團隊共同協作之下可能可以成為好的產品，但如果市場不知道有這樣好的產品存在，前述所有的好，也只能淪為白功；在這個資訊爆量的時代，如何從海量的網站中脫穎而出，成為被市場看見的那一個，也就成了每間公司都在追尋的聖杯。

稍有經驗的開發者，可能對最近 SPA，SSR 等術語不太陌生，大概也能知道 SPA 指的是單頁式應用（Single Page Application）、SSR 是伺服器渲染（Server-Side Rendering）；可是仔細想想，在前端整個興起之前，主流的 PHP、JSP…