Front-end

前言

2021-05-25 補充：文中所提到的在 target phase 會依照加上 event listener 的順序觸發，在新版的 Chrome 似乎更改了這個行為，請參考：Chrome 89 更新事件触发顺序，导致99%的文章都错了（包括MDN）

（補充：感謝 othree 前輩的指點，指出這其實是在講 DOM 裡面事件傳遞的順序，因此把標題以及內文修正，原標題為：JavaScript 的事件傳遞機制：捕獲與冒泡）

今天為大家帶來的內容是 DOM 裡面的事件傳遞機制，而與這些事件相關的程式碼，相信大家應該不太陌生，就是addEventListener, preventDefault跟stopPropagation。

簡單來說，就是事件在 DOM 裡面傳遞的順序，以及你可以對這些事件做什麼。

為什麼會有「傳遞順序」這一詞呢？假設你有一個ul元素，底下有很多li，代表不同的 item。當你點擊任何一個li的時候，其實你也點擊了ul，因為ul把所有的li都包住了。

假如我在兩個元素上面都加了eventListener，哪一個會先執行？這時候呢，知道事件的執行順序就很重要。

另外，由於某些瀏覽器（沒錯，我就是在說 IE）的機制比較不太一樣，因此那些東西我完全不會提到，有興趣的可以研究文末附的參考資料。

閱讀更多

Web

前言

前陣子在研究跟 HTTP Cache 有關的一些東西，看得眼花撩亂，不同的 Header 愈看愈混亂，像是Pragma, Cache-Control, Etag, Last-Modified, Expires 等等。找了許多參考資料閱讀之後才有了比較深刻的理解，想說若是從一個比較不同的角度來理解 Cache，說不定會比較容易了解這些 Header 到底在做什麼。

在之前查的資料裡面，很多篇都是逐一解釋各個 Header 的作用以及參數，而我認為其實參數講多了容易造成初學者混淆，想說怎麼有這麼多奇怪的參數，而且每一個看起來都很像。所以這篇文章嘗試一步一步藉由不同的問題來引導出各個 Header 使用的場景以及出現的目的。還有，因為這篇是給初學者看的，所以不會講到所有的參數。

其實關於 Cache 這一部分，很多網路資源的說法都不太一樣，如果碰到有疑義的地方我會盡量以 RFC 上面寫的標準為主。如果有錯誤的話還麻煩不吝指正，感謝。

閱讀更多

Web

前言

幾個禮拜前我在工作上碰到了一些跟 Cookie 有關的問題，在這之前，我原本想說：Cookie 不就那樣嘛，就算有些屬性不太熟悉，上網找一下資料就好了，哪有什麼跟 Cookie 有關的難題？

然而事實證明我錯了。我還真的碰到了一個讓我解超久的 Cookie 問題。

相信看到這邊，很多人應該躍躍欲試了，那我就先來考一下大家：

什麼情形下，Cookie 會寫不進去？

像是語法錯誤那種顯而易見的就不用說了，除此之外你可能會答說：寫完全不同 domain 的 Cookie。例如說你的網頁在 http://a.com 卻硬要寫 http://b.com 的 Cookie，這種情形當然寫不進去。

或者，你可能會回答：不在 https 卻想加上 Secure flag 的 Cookie。
沒錯，像是這種情形也會寫不進去。

除了這些，你還能想到什麼嗎？

如果想不太到，那就聽我娓娓道來吧！

閱讀更多

Front-end

前言

最近剛好碰到一些 CSRF 的案例，趁著這次機會好好研究了一下。深入研究之後才發現這個攻擊其實滿可怕的，因為很容易忽略它。但幸好現在有些 Framework 都有內建防禦 CSRF 的功能，可以很簡單的開啟。

但儘管如此，我認為還是有必要瞭解一下 CSRF 到底在幹嘛，是透過怎樣的手段攻擊，以及該如何防禦。就讓我們先來簡單的介紹一下它吧！

CSRF 是一種 Web 上的攻擊手法，全稱是 Cross Site Request Forgery，跨站請求偽造。不要跟 XSS 搞混了，他們兩種是不同的東西，那到底什麼是 CSRF 呢？先從我自身的一個案例談起好了。

閱讀更多

Others

前言

最近剛好在做直播相關的東西，雖然說是做前端，但還是必須懂一些直播的原理
至少要知道有哪些格式，以及各種格式的優缺點是什麼，做起來也會比較踏實

這篇就簡單記錄一些心得跟資料，如果想比較深入了解 hls 的，可以參考下面這兩篇文章：

  1. 直播协议的选择：RTMP vs. HLS
  2. 在线视频之HLS协议—学习笔记：M3U8格式讲解及实际应用分析

閱讀更多

Back-end

前言

Redis 是一個 in-memory 的 key-value database，因此常常被用在需要快取（Cache）一些資料的場合，可以減輕許多後端資料庫的壓力。這篇就來簡單介紹一下 Redis 提供哪些好用的東西，以及可以應用在什麼地方。

閱讀更多

Android

（原文發表於：http://blog.techbridge.cc/2016/05/20/fast-way-to-get-apk-information/）

前言

在 之前，我們曾經介紹過如何反編譯 Android Apk。而藉由反編譯，我們可以知道許多跟 apk 有關的資訊，例如說 AndroidManifest.xml，只要這個檔案就可以看出 apk 的一些基本資訊，還可以看到整個 apk 的程式碼跟使用到的資源（圖檔、影片、聲音等等）。

但若是今天我們只想要知道基本資訊，完全不想知道 apk 是怎麼寫的，也根本不關心它用到哪些資源，那該怎麼辦呢？反編譯需要一點時間，愈大的 apk 需要愈久，有沒有更好的方法呢？

閱讀更多

Back-end

（原文發表於：http://blog.techbridge.cc/2016/04/23/fast-restful-nodejs-api-backend/）

前言

現今有些網站採用了 Single Page Application 的方案，後端只負責提供 API 讓前端抓取資料，達成完全的前後端分離。前端的選擇有很多種，你可以用 Angular，可以用 Ember.js，也可以用 React + Redux。至於後端的 API，必須符合固定格式，才能讓前端的人員比較好抓取。而這個「固定格式」，最常見的就是我們今天的重點：RESTful。

閱讀更多