啊啊學語

Modern Web 2021 共筆 10/13 依照古法、純手工打造的視訊聊天網站，不純免錢！/ GitHub 範例程式碼 確認是否有在線上：long polling or websocket（比較建議用後者） 取得麥克風和鏡頭權限： MediaDevices.getUserMedia() 用 WebRTC 傳送串流資料：socket.io Signal Server：peer.js。Signal Sever 的作用類似媒人婆，介紹雙方的資訊（Session Description Protocol，SDP，紀錄 IP、agent、decode、encode 等資訊），雙方認識後就讓他們點對點直接溝通，不必再透過媒人婆溝通 如果是內網 IP，會透過 NAT（Network Address Translation）轉成 public IP STUN（Simple Traversal of UDP over NATs）、處理不同網路的連線（via TURN server）：不知道這兩個是啥，暫且搜尋到這篇介紹： 明辨STUN/TURN協定　輕鬆跨越NAT建立連線 10/14：測試 八個沒人告訴你的網頁自動化測試挑戰/ 林佳妤（Melo） 主要針對 code less 的工具而言（用螢幕錄製的方式製作 test case），例如 Selenium IDE 測試「滑鼠滑過元件後要發生指定變化」，錄製時會錄到非目標的「mouse over」事件。解一：選擇目標 mouse over。解二：調整敏感度 按鈕被別的東西擋住，使用者按不到，但測試按得到，造成測試通過，但其實功能不合格。解：verify visibility 如何確認按鈕已經 disable？ 有 HTML 和 CSS 兩種方法可以 disable 按鈕，檢查是否有使用其中一種方法 HTML：disable 屬性 CSS： 解一：用 get computed style 計算 pointer-events 屬性（需要比較多程式背景知識）。解二：verify css（code-less） ...

以飲料店的商品種類為例，假設我們現在有飲料和杯子兩種資料。 飲料： id name 1 綠茶 2 紅茶 3 青草茶 杯子： id size 1 500 2 600 3 700 一對一（One to One） 若飲料和杯子是一對一的關係，那麼情況就類似這樣： 綠茶只用 500 cc 的杯子裝 紅茶只用 600 cc 的杯子裝 青草茶只用 700 cc 的杯子裝 一種飲料只有一個尺寸的杯子，而且一個尺寸的杯子也只對應到一種飲料。在這種情況下要建立關聯，有下列兩種方式，擇一即可。這兩種做法在技術上效果是一樣的，不過語意解讀上可能不太一樣。 把關聯欄位加在飲料（語意上，是飲料有杯子這個屬性） 把關聯欄位加在杯子（語意上，是杯子有飲料這個屬性） 把關聯欄位加在飲料的資料表： id name cup_id 1 綠茶 1 2 紅茶 2 3 青草茶 3 把關聯欄位加在杯子的資料表： id size drink_id 1 500 1 2 600 2 3 700 3 一對多（One to Many） 若飲料和杯子是一對多的關係，那麼情況就類似這樣： 綠茶用 500 cc、700 cc 的杯子裝 紅茶只用 600 cc 的杯子裝 一種飲料有許多尺寸的杯子，而且一個尺寸的杯子只對應到一種飲料。 或者是這樣： 綠茶、紅茶、青草茶都只用 500 cc 的杯子裝 一個尺寸的杯子對應到許多種飲料，而且一種飲料只有一個尺寸的杯子。 在這種情況下要建立關聯，一般會選擇加在多的那一邊。如果加在少的那一...

什麼是封包（network packet） 在 packet-switched network 中被傳輸的東西就叫做封包。封包分為 control information 和 user data 兩個部分，control information 紀錄著要將封包送去哪裡的相關資訊，user data 則是要給對方的資料。以包裹來比喻的話，control information 紀錄著收件者、寄件者等等資訊，user data 則是包裹的內容物。 一筆大的資料，可先分割為若干封包後再進行傳輸。 封包傳輸（Packet switching） 封包傳輸可分為兩種 communication mode：connectionless 和 connection-oriented。 connectionless mode 此種模式，不需要預先建立與接收方之間的通道，因此，在同一個通道中，可以同時進行多個通訊。但代價是，要在 control information 攜帶更多訊息，例如目的地位址、來源位置、埠號等等，可能還會有封包的序號。因為每個封包可能是經由不同的路徑抵達目的地，所以送出封包的順序，和最後接收方收到的順序可能是不一樣的，所以，若封包的順序很重要的話，需要有封包序號才能將封包以正確的順序排列。 屬於此模式的協定有：Internet Protocol（IP）、User Datagram Protocol（UDP）。 connection-oriented mode 此種模式，在傳輸資料前，要預先建立與接收方之間的通道，因此 control information 需要攜帶的資料比較少，例如，不需要位址資訊，只需要 connection identifier。但代價是，一旦建立通道，其他的傳輸就不能使用此通道。 屬於此模式的協定有：Transmission Control Protocol（TCP）。 參考資料 Network packet - 英文維基百科 Packet switching - 英文維基百科 封包傳訊vs.電路傳訊 電腦網路與連結技術：第四章 網路層

為什麼要有通訊協定 不同機器之間，若要能夠溝通的話，需要大家都使用相同的語言。所有人都遵守通訊協定，就不會出現語言隔閡。 什麼是 TCP/ IP 通訊協定 要實現「不同機器之間能夠溝通」，從硬體到軟體，有許多工作要完成。為了讓這份工作比較容易進行，所以將工作拆分成好幾個部分，各自獨立完成；以後若要維護的話，哪個部分有問題，只要維修那個部分就好，不必把所有部分都拿出來檢查，降低維修難度。 至於工作到底要怎麼拆分，不同的模型有不同的建議。OSI（Open System Interconnection）模型切成七層工作，DoD（Department of Defense Model）模型則是切成四層，每一層都有不同的通訊協定。雖然目前實作上通常不是採用 OSI 模型，但為了方便理解「不同機器之間能夠溝通」的機制，通常會用 OSI 模型講解，也會試著將 DoD 模型對應到 OSI 模型。 DoD 模型中有許多通訊協定，不過以 TCP、IP 這兩個通訊協定最具有代表性，所以 DoD 模型又稱為 TCP/ IP 模型。TCP 協定對應到 OSI 模型中的傳送層，IP 協定則是對應到網路層。 TCP、IP 通訊協定負責什麼工作 TCP 協定 發送端的 TCP，和接收端的 TCP，會先進行三向交握，確認彼此能夠順利傳輸資料，才正式開始傳輸資料。 我們可以把要傳輸的資料想像成要郵寄的包裹，郵寄時，包裹會有尺寸或重量的限制，同樣地，傳輸的資料也會有大小的限制。如果資料太大了，TCP 會拆分成小包裹，並且幫每個小包裹編號（以便接收端最後能把小包裹還原成大包裹），並注意是否每一個小包裹都成功送達，若沒有成功送達，TCP 會再補上缺少的小包裹。如果資料太小了，TCP 會幫包裹灌水，以符合大小的下限。 IP 協定 IP 位址就像收件地址，以便確認要將包裹送去哪個主機。IP 位址目前有兩種版本，IPv4 用 32 位元儲存地址，IPv6 用 128 位元儲存地址。所以 IPv6 有比較多的地址可以分配給不同的主機。 IPv4 以 IPv4 而言，位址可以切成兩個部分，第一部分代表 Net ID，第二部分代表 Host ID。相同的 Net ID，代表主機位在相同的 IP 網段，相同 IP 網段的主機之間可以用廣播的方式傳遞資料，而不必透過路由。可以從 N...

什麼時候會用到 CORS CORS：跨來源資源共用（Cross-Origin Resource Sharing） 舉例：瀏覽器連線到 http://localhost:3000 的伺服器，伺服器回傳的 HTML 檔案中，在 javascript 裡用 XMLHttpRequest 請求 https://example.com 的資源。 只要通訊協定、網域、和通訊埠三者中有一個不同，就屬於跨來源資源請求。 所以 http://localhost:3000 請求 https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css 上的資源，就屬於跨來源資源請求。 為了保護資訊安全，跨來源資源請求是受到限制的。若想完成跨來源資源請求，需要遵守 CORS 的規範，不然就會失敗。 CORS 的規範是什麼 簡單請求、非簡單請求 跨來源資源請求，分為簡單請求，和非簡單請求。 定義：符合底下所有條件的就是簡單請求，不符合的就是非簡單請求 HTTP 方法是 GET、HEAD 或 POST 自訂的請求頭只能是 Accept、Accept-Language、Content-Language 或 Content-Type（此項的值只能是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain） If the request is made using an XMLHttpRequest object, no event listeners are registered on the object returned by the XMLHttpRequest.upload property used in the request; that is, given an XMLHttpRequest instance xhr, no code has called xhr.upload.addEventListener() to add an event listener to monitor the upload.（字面上的意思似乎是，如果是用 XMLHttpRequest 物件發出請求，而且請...

 我看過的網址列開頭有這幾種： http: 和 https: 是通訊協定 file: 可以在瀏覽器中打開電腦裡的檔案  javascript: 可以在瀏覽器上執行 javascript 然後我剛剛看到，上傳圖片後讓使用者預覽圖片的功能，預覽圖片的連結，開頭是： blob: ⋯⋯我不太確定他是什麼，好像跟「把檔案轉成二進制資料」有關係，但是我還是沒弄懂「把檔案轉成二進制資料」是什麼意思，畢竟，電腦是二進位，存在電腦裡的檔案也是二進位，為什麼還需要把已經是二進位的檔案轉成二進制資料⋯⋯我目前的知識不足以讓我理解這是什麼情況。 ⋯⋯然後我一直沒有察覺的困惑，因為這根 blob: 的稻草而爆發了： 這些看起來功能很不一樣的東西，為什麼格式都固定會加冒號啊，這整件事是怎麼一回事啊？有什麼規律存在，把這些不一樣的東西整理在一起了嗎？ 目前蒐集到一個關鍵字：URI schemes。新的情報暫時安撫了我的爆發，真是可喜可賀！ 參考資料： 中文維基百科： 統一資源標誌符方案 英文維基百科： List of URI schemes

 科技與社會 數位時代的人權思辨：回溯歷史關鍵，探尋人類與未來科技發展之道 因果革命 物聯網生存指南： 5G世界的安全守則 唐鳳：我所看待的自由與未來 Google地圖革命: 從Google地圖、地球、街景到「精靈寶可夢GO」的科技傳奇內幕 切莫為惡：科技巨頭如何背叛創建初衷和人民 Instagram崛起的內幕與代價：以及它如何改變了文化、商業、科技、媒體，與我們每一個人 Networks of Outrage and Hope: Social Movements in the Internet Age, Edition 2 溝通 你想通了嗎？：解決問題之前，你該思考的6件事 從需求到設計：如何設計出客戶想要的產品（十週年紀念版） 溫伯格的軟體管理學套書（1－4卷） Google模式: 挑戰瘋狂變化世界的經營思維與工作邏輯 心理安全感的力量: 別讓沉默扼殺了你和團隊的未來 MIT最打動人心的溝通課: 組織心理學大師教你謙遜提問的藝術 理解 錯失恐懼：從心理、人際、投資到求職，讓10億人深陷的焦慮陷阱 帶腦去上班 程序開發心理學 (銀年紀念版溫伯格技術思想三部曲) 我如何真確理解世界：漢斯．羅斯林的人生思辨 真確: 扭轉十大直覺偏誤，發現事情比你想的美好 知識的假象: 為什麼我們從未獨立思考？ 技術 改變世界的九大演算法：讓今日電腦無所不能的最強概念 Clean Code -- Udemy 資訊安全 碼書：編碼與解碼的戰爭 The Complete Cyber Security Course : Hackers Ex...

 二進制和十進制轉換過程中，產生的誤差範例： 0.1 + 0.2 = 0.30000000000000004 100 / 3     = 33.333333333333336 1/3 * 100 = 33.33333333333333 相關參考資料： 重新認識 JavaScript: Day 03 變數與資料型別 JavaScript 浮點數陷阱及解法 只有1%的Python 程式設計師搞懂過浮點數陷阱 IEEE-754 Floating Point Converter