ChanChanDev 圈圈工程師

學習了瀏覽器的 Process 與 Thread 之後，接著一起來看看一段網址或搜尋關鍵字被輸入網址列送出之後，在瀏覽器內部會發生什麼有趣的事情吧！ HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 這篇的所有內容是來自於原文 《Inside look at modern web browser (part 2)》 的第二篇。其實已經講的很淺顯易懂而且又有超級可愛的插圖，私心認爲已經很難有比它寫的更好的文章了 ，因此這篇文章更像是自己學習的筆記。 另外也因爲它是英文的版本，希望藉由自己的筆記分享可以在讓更多人學習到有幫助的資訊喔！😍 前情提要既上一篇 瀏覽器學習筆記 Part 1 - 圖解學習 Process 與 Thread！ 聊過每天所使用的瀏覽器是因爲一群默默地無名的 執行緒 (Thread) 與 行程 (Process) 相戶合作的結果。而其中扮演類似 ...

我們每天都在使用瀏覽器，但是瀏覽器的內部是怎麼運作的呢？小白如我也不知道，直到看了這篇文章後才。。。 HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 這篇的所有內容是來自於原文 《Inside look at modern web browser》 的第一篇。其實已經講的很淺顯易懂而且又有超級可愛的插圖，私心認爲已經很難有比它寫的更好的文章了 ，因此這篇文章更像是自己學習的筆記。 另外也因爲它是英文的版本，希望藉由自己的筆記分享可以在讓更多人學習到有幫助的資訊喔！😍 前情提要在《Javascript 非同步 & Event Loop！10 分鐘輕鬆圖解學習！》有提到 Javascript 是單執行緒 的重點。之後也引發自己好奇究竟瀏覽器與 Javascript 的關係，進而才找到這篇很棒的文章。因此今天單純從瀏覽器的角度來看看 執行緒 (Thread ...

什麼是二進位呢？為什麼又需要二進位？它跟我們有什麼關係？讓我們簡單地用圖解來一起學習二進位吧！ HIHI ～ 😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 這篇文章之前已於 2020/01/05 發佈在 Medium，因爲已經不再維護 Medium，因此將這篇文章搬回來囉！ 😆 在理解二進位之前，也許可以先從我們最習慣的『十進位』開始出發。 我們開始吧！😆 十進位假如有人叫我們從 0 數到 10，我們習慣的數數方式大概會是這樣：『 0, 1, 2, 3, 4, 5, 6, 7, 8, 9』，從 0 一路數到 9，下一個數字遇到了 10，因為是十進位的關係，所以遇到 10 就會自動的進位。 所謂的『近位』也就是右邊的個位數字歸 0（下圖藍色的 0 ），而在左邊的數字 +1 （下圖紅色的 1）的意思。 0 ~ 10  的進位至於到了 90 ~ 99 的時候，下一個數 ...

當我們學會了 Javascript 的 Function 怎麼使用後，有沒有常常因爲參數、變數、全域變數傻傻分不清楚的問題呢？今天我們就來聊聊 Javascript 的 Function Scope 吧！ HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 Function 前情提要在上一篇 Javascript Function 超基礎入門！老司機勿入！ 提到 Function 的最基礎用法，若錯過的朋友可以先花個簡單的幾分鐘瀏覽一下喔 😀 Function Scope 函數作用域什麼是 Function Scope 函數作用域呢？ 在回答這個問題之前，讓我們一樣來個小故事吧 😆 從前從前從前在一塊元古的大陸上，這塊大陸上有著好幾個大大小小的原始的部落。 這些部落裡中有個不成文且流傳已久的奇怪規定，就是『任何一個從這個部落出生的人，終其一生都不可以跨越邊界』， ...

Javascript Function 是什麼？這篇 Function 超入門是寫給初學者的介紹文，用簡單的幾分鐘一起圖解學習 function 的基礎吧！ HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 閱讀對象這篇是寫給當初新手小白剛學 Javascript 那個懵懵懂懂的自己，也希望能夠幫助新手階段想要學習 function 的你。 若已經是老司機的你（欸）… 還是可以快速看過啦！ 😆 那我們開始囉 😊 為什麼需要 function？function (函數) 是 Javascript 最基本的程式組成區塊之一。 不過在繼續學習之前，我們用先來問一個很簡單的問題？ 你今天早上有喝咖啡嗎？ 😆 OS：「屙？有阿，但跟 function 的關係是啥？🤣」 有的！其實我們已經默默地都在生活中使用 function 了，只是也許我們沒有意會到這件事情罷了！ ...

有聽過 Javascript 是個『非同步』的語言嗎？為什麼它可以做到『非同步』的效果呢？一起用圖解的方式來學習 Javascript 的『同步』與『非同步』吧！ HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 在學習 Javascript 過程中，應該多少都會耳聞過 Javascript 非同步 的特性，在聊聊 非同步 的特性之前，也許我們要先知道何爲 同步 囉 😆。 同步 (Sync)我們用小明早上起床出門上班前的小例子來學習這兩者的差別吧 😀假如小明從起床到上班出門前他需要完成以下幾件事情： 刷牙、洗臉 （10 分鐘） 用義式咖啡機泡咖啡（10 分鐘） 用電鍋準備午餐（10 分鐘） 若今天小明 一件事情完成後，在繼續執行下一件事情。 例如：刷牙、洗臉 （10 分鐘） 完接著用 用義式咖啡機泡咖啡（10 分鐘） ，然後 用電鍋準備午餐（10 分鐘），最 ...

Http Cache 是什麼？為什麼需要 Cache 呢？今天就來點 Cache 相關的小學習吧！ HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 我們進入正片囉 😆 在學習網頁開發的過程中，多多少少都會耳聞 快取 或者是 Cache 這個關鍵字，但是他究竟是用來幹嘛的呢？ 在進入 Cache 的主題前，我們一樣先來個小故事當作起手式。 這次來說說小明跟料理大師 Chef Master 拜師學藝後自己經營餐館的故事囉！ 小明從小就夢想著自己經營著一家餐館，想像著端出熱騰騰的美食到客人面前，客人因爲吃到美食的那刻銷魂的神情，光想到這裏他就感到十分地嚮往。 無奈他目前的工作都跟美食搭不上邊，於是他終於在 30 歲的時候下定決心要成爲特級廚師 😅，所以就 Google 了一下，在陽明山裡找到曾經也是特級廚師的 Chef Master。經過了半年辛苦的密及訓練，Chef ...

你知道什麼是 Session 嗎？為什麼需要它？它又是怎麼運作的呢？ 今天就來聊聊 Session 吧！ HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 身爲一個後端工程師，在學習的過程中一定都會經歷過 2 個關鍵字： Session & Cookie。 也許許多的語言或者是套件已經幫我們完成了 Session 與 Cookie 的功能，我們需要的僅止於知道如何使用他們。然而剛好趁這次的機會來好好瞭解一下他們的使用方式與背後的原理吧。 前情提要這篇是《 Session & Cookie 傻傻分不清楚》的下篇，簡單地介紹了 Session 是什麼與介紹情境。 若錯過上集的朋友，可以請往這邊走： Session & Cookie 傻傻分不清楚：Cookie 篇 在上一集我們有提到，因爲 HTTP 無狀態 的情況下，伺服器無法在這麼多個 HTTP ...

你知道什麼是 Cookie 嗎？為什麼需要它？它又是怎麼運作的呢？今天就來聊聊 Cookie 吧! HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 身爲一個後端工程師，在學習的過程中一定都會經歷過 2 個關鍵字： Session & Cookie。 也許許多的語言或者是套件已經幫我們完成了 Session 與 Cookie 的功能，我們需要的僅止於知道如何使用他們。然而剛好趁這次的機會來好好瞭解一下他們的使用方式與背後的原理吧。 前情提要HTTP (Hypertext Transfer Protocol) 協定目前大部分所有的網路溝通的方式都建立在 HTTP 的協定上。至於 HTTP 是什麼呢？今天先不聊這 Part 😆 簡單地解釋一下 HTTP 的最基本運作方式： 使用者 會對 伺服器 發起一個 HTTP 請求 (Request) 伺服器 接到 使用者 ...

HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍 這篇文章是寫給誰看的呢？ 會使用 Git 的工程師 或 對 Git 有一定瞭解的人 瞭解 Markdown 語法怎麼使用 需要架設自己 Blog 且 希望有自己的網域的人 若你已經知道為什麼要寫 Blog 與使用 Hexo 的原因的朋友，可以快轉到 安裝 / 設定 Hexo 囉 😍 為什麼要架設 Blog身爲一個工程師，隨著時間的成長，所需學習的知識日益增加。對於過往的知識都要完美地記得似乎是一個不可能的任務。於是爲自己所學的技能設立一個知識資料庫讓未來的自己可以查詢似乎就變得十分重要了。 架設 Blog 有什麼好處呢？ 快速方便地回顧記錄過的知識與遇到的問題的解法 累積屬於自己在技術專業知識品牌 面試時可以作爲加分的作品集項目 選擇 Hexo 的原因在 2021 年架設 Blog 有上千種可行的做法。馬上想到的 ...