Front-end

前言

在上一篇 CORS 完全手冊(一):為什麼會發生 CORS 錯誤?裡面,我們理解了為什麼瀏覽器要有 same-origin policy,以及跨來源請求擋的其實是 response 而不是 request。在釐清了一些錯誤的觀念以及對 CORS 有基本的認知以後,就可以來講講怎麼樣解決 CORS 的問題。

先跟大家預告一下,這篇會提到的解決問題的方法並不完整。事實上,跨來源請求分成兩種,簡單請求跟非簡單請求,「跨來源請求擋的其實是 response 而不是 request」基本上只適用於簡單請求,而這一篇只會針對「簡單請求」,至於到底怎麼分簡單還是非簡單,以及非簡單的要如何處理,這些都會在下一篇提到。

想要解決基本的 CORS 錯誤,其實有滿多種方法,先來介紹幾個「治標不治本」的:

  1. 關掉瀏覽器的安全性設置
  2. 把 fetch mode 設成 no-cors
  3. 不要用 AJAX 拿資料

以下就會先針對這三個方法再進一步講解,講完以後我們會來講最後一個也是最正確的做法:「請後端加上 CORS header」。

閱讀更多

前言

三年前的時候寫了一篇文章:輕鬆理解 AJAX 與跨來源請求,提到了串接 API、AJAX、same-origin policy、JSONP 以及 CORS,當時把自己想講的都放進去了,但現在回頭看,好像有很多滿重要的部分沒有提到。

三年後,再次挑戰這個主題,並且試著表達地更完整。

會想寫這個系列是因為在程式相關的討論區上,CORS 是發問頻率很高的主題,無論是前端或是後端都有可能來問相關的問題。

所以我就想說:「好,那我來寫一個系列好了,我要試著把這個主題寫到每個碰到 CORS 問題的人都會來看這個系列,而且看完以後就知道該怎麼解決問題」,這算是我對這篇文章的目標,如果文章的品質沒辦法達成這個目標,我會持續改進。

這系列一共有六篇文章,分別是:

會從 same-origin policy 開始講起,接著講到為什麼跨來源存取資源會有錯誤,再來會講如何錯誤地以及正確地解決 CORS 相關的問題,而第三篇會詳細講解跨來源請求的詳細流程,像是 preflight request 之類的東西。

基礎的部分看前三篇就夠了,接下來會比較深一點。第四篇會帶你一起看 spec,證明前面幾篇不是我在虎爛的,而第五篇則是帶大家看看 CORB(Cross-Origin Read Blocking)、COEP(Cross-Origin Embedder Policy)或是 COOP(Cross-Origin-Opener-Policy)之類的跨來源相關規定,以及相關的安全性問題,最後一篇則是一些比較零散的主題以及心得感想。

閱讀更多

前言

不知道大家有沒有聽過 vite 這個工具,看它名字有個 v,大概就可以猜到可能跟 Vue 有關。沒錯,這是 Vue 的作者尤雨溪開發出來的另外一套工具,原本是想要給 VuePress 用的,但是強大之處就在於它不僅限於此。

Vite 在 GitHub 上的 About 只寫了兩個句子:

Native-ESM powered web dev build tool. It’s fast.

如果你有體驗過,就會發現真的很快。Vite 是 build tool 跟 dev server 的綜合體,這篇會簡單教大家使用一下 vite,然後來談 ES modules,再來看看 vite 神奇的地方。

閱讀更多

前言

之前在公司裡面做一些效能上的調整時,無意間發現了一個奇怪的現象,繼續往下追查之後才發現是個好像沒有被什麼人發現過的 bug,而且成因我覺得挺有趣的,就想說可以寫一篇跟大家分享一下。

這篇技術含量不高,可以抱持著看故事的心態來看這篇,會比較有趣一點。

故事的開端

故事的起源呢,是之前在公司裡面要做一些網站上的調整,試著增進一下載入的速度。當我們談到性能最佳化這一塊,其實有很多可以做的,例如說跟 Server 那邊比較有關的是:

  1. 使用 HTTP/2
  2. 使用 gzip 或是 brotli 進行壓縮
  3. 使用 Cache(可以加快 revisit 的速度)
  4. 使用 CDN
  5. 降低 TTFB 時間

不過以上都需要後端或是 SRE 的協助,跟前端其實關係不大。跟前端關係比較大的,也可以分成很多面向來看,例如說以「減少資源」的角度來看,可以做的事情有:

  1. Image 格式調整(壓縮 + webp 或其他格式)
  2. JS 大小(ugligy、code spliting、dynamic import)
  3. CSS 大小(minify、移除不需要的 CSS)

如果以「加速載入重要資源」的角度,可以加上 preload 或是 preconnect 這些 hint,來提示瀏覽器哪些東西應該先被載入。

還可以從「減少 JS 執行時間」的角度來看,例如說如果是寫 React,可以用 shouldComponentUpdate、PureComponent 或是 memo 來減少不必要的 re-render。

這一篇既然標題都寫 styled components 了,主題當然就是圍繞在 CSS 這一塊。

閱讀更多

前言

在我的部落格裡面,其實很少有工具類的教學文章。一來是因為這種工具類文章都大同小異,二來是我生性懶惰,許多手把手教學都需要鉅細靡遺外加豐富截圖,實在是不適合我。

但這次會來寫這個題目,是因為我覺得 webpack 是個新手不容易懂,就算懂了也不一定是真的懂的工具。或是換句話說,它是常常被誤解的一個工具。

這並不是 webpack 本身的問題,而是現在許多新手切入前端都直接從 React 或是 Vue 開始,而且都使用了他們各自提供的 CLI 工具,等到要客製化一些設定時才注意到:「阿,原來有個東西叫做 webpack」。

CLI 工具帶來了方便性,優點是讓新手能夠快速上手,不用去管那些繁瑣的設定;而缺點就是若是新手沒有意識到背後那些工具,等到哪一天工具壞了、不能用了或是有地方需要修改,就是噩夢的開始。

為了讓這種情況減少,我才決定寫這篇文章,希望從源頭帶大家認識 webpack 這項工具以及模組化的概念。你必須先知道什麼是模組,才能理解什麼是 webpack。

開頭我想先透過幾個問題讓大家思考自己對模組化以及 webpack 是否熟悉:

  1. 為什麼很多專案(例如說 React)在部署前都要先 build?這個步驟在幹嘛你知道嗎?
  2. 你知道 require/module.exportsimport/export 的差別嗎?
  3. 你知道 import 與 export 這兩個語法在瀏覽器上面不是隨便就能使用嗎?
  4. 你知道為什麼要用 webpack 嗎?
  5. 你知道 webpack 為什麼要有 loader 嗎?

這些問題應該會在讀這篇文章時慢慢有點靈感,在最後面時會幫大家解答。

閱讀更多

簡介

近幾年前端框架大放異彩,許多新手才學沒多久的 JavaScript,就直接學習三大框架了(雖然 React 不是框架,但整個生態系其實就跟框架沒兩樣,因此我覺得歸類在框架也不是不行)。

而這三大框架通常都是拿來寫 SPA(Single Page Application)用的,我一直認為在學習這些框架前應該要具備一些基礎知識,尤其是對於前後端的理解,否則一定會遇到很多不知道從何解起的問題。

因此,本文舉出一個我自己曾經碰過,學生也常常跑來問我的問題當作範例,大家也可以先想一下自己能不能回答出這個問題:

假設今天我有個 SPA,搭配某些 router 的 library 來實作路由,所以 /list 會連到列表頁,/about 會到關於我的頁面。

可是奇怪了,當我把 SPA 上傳到 GitHub Pages 之後,首頁是好的,我從首頁進去 /list 也是好的,可是當我在 /list 重新整理的時候,卻顯示 404 not found,這是為什麼呢?

要回答這個問題,必須先來複習一下前後端相關的網路基礎知識。

閱讀更多

(原文寫在 Medium,順便在這邊備份一下)

雖然說我一直很清楚自己目前偏好的學習方法以及路線,並且把我認為適合的路徑都變成上課的大綱拿去教學,但一來好像沒多少人會去看那個大綱,二來大綱並沒有詳細解釋背後的原因。因此我才覺得自己有必要寫這一篇,來寫一下自己認為比較「紮實」的網頁前端學習路線。

閱讀更多

前言

以 CSS 架構方法來說,主流的大概可以分成三個:OOCSS、SMACSS、BEM,這些架構的提出都是為了讓 CSS 更好維護,這幾個的介紹以及差異可以參考 @arvinh 寫過的 淺談 CSS 方法論與 Atomic CSS

但我們今天要談的不是上面提到的這三種,而是另外一種相較之下沒那麼主流(但好像有慢慢流行的趨勢),而且很少人第一眼看到就會贊同的方法:functional CSS。

閱讀更多

前言

前幾天看見 Redux 作者 Dan Abramov 寫的這篇:Things I Don’t Know as of 2018,看了之後其實滿有感觸的,前些日子也在思考這種跟自信相關的事情,也做了個簡單的總結,寫下了兩年過後,我能夠被稱為資深工程師了嗎?

無獨有偶地,這幾天也看到一些 2019 年更新版的學習路線圖,下面依舊有些留言在說「怎麼前端要學那麼多東西」、「怎麼學的完」、「前端好難啊」等等之類的,雖然這兩件事看似沒有關連,但我覺得其實是相關的。

閱讀更多

前言

前些日子在忙公司的產品改版,從原本的 PHP 換成後端 Go + 前端 React SPA,分成桌面版跟手機版兩個不同的 Project,而既然都改版了,自然要把最新最潮的 PWA 也放在目標裡面,之前耳聞 PWA 很久但卻沒有實作過的我也有了機會來嘗試這個東西。

如今產品已經改版完畢且上線了兩三個月,慢慢穩定下來,在優化 PWA 的過程中也讓我有了一些心得可以讓大家分享。

在舉一些實際案例之前,先讓我們來談談到底怎樣才算是 PWA。

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×