Posts

Showing posts from January, 2021

Chrome Dev Tools 中的 element.style 是什麼

Image
 Chrome Dev Tools 中的 element.style,指的是下圖紅框中的東西 就我目前查到的資料,element.style 中的設定,來自兩個地方: 在 html 中設定 style 在 javascript 中設定 style element.style 中的設定,會覆蓋掉原本在 css 中做的設定。如果在做 css 設定時加上 ! important,就不會被覆蓋掉。但是強烈建議避免使用 ! important,因為會蓋過原本「當兩個 style 互相衝突的時候,哪個 style 會優先被套用」的權重計算,增加 debug 的難度。 可以觀察底下這個簡單的 範例 : See the Pen element.style example by Flora ( @rossignol ) on CodePen . 在 html 中設定 style="color: blue;" 在 javascript 中設定 style.backgroundColor = "yellow" 在 css 中設定: .hi {   border: 3px solid pink;   color: red;   background-color: red; } 參考資料: What is element.style and why is it overriding my css settings?  - stackoverflow How do I find the origin source of an element.style? i.e. Which JS or jQ file is injecting it. I want to fix, not override - stackoverflow  When Using !important is The Right Choice 用 JavaScript 把 element.style 全部覆寫或清空

書單

 科技與社會 數位時代的人權思辨:回溯歷史關鍵,探尋人類與未來科技發展之道 因果革命 物聯網生存指南: 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 Expose

「軟體開發實務入門」學習心得

 我在 2020 年 12 月參加了 AlphaCampe 學期 2 -2:軟體開發實務入門,學習用 AJAX串接 API、用 MVC 架構 將程式碼模組化,以及控制程式的流程。 (這份心得是用課程中建議的  ORID 的架構寫的)

rest parameters 和閉包

 事情是這樣的: 我參加了AlphaCame 學期 2-2(2020 年 12 月開課),課程教我們製作一個翻牌配對點數的遊戲:把一副撲克牌,牌背朝上擺好。每次只能翻開兩張牌,如果翻開的牌點數不一樣 (只看點數,不看花色),一秒後會蓋牌;如果翻開的牌點數一樣,分數加十分。所有的牌都配對完後,遊戲結束。 See the Pen 學期2-2_A15_Memorizing Game by Flora ( @rossignol ) on CodePen . 原本的教案,appendWrongAnimation 函式如下: appendWrongAnimation(...cards) {     cards.map(card => {       card.classList.add('wrong')       card.addEventListener('animationend', event =>         event.classList.remove('wrong'), { once: true })     })   } 我改成下列這樣(修改處以粗體標示): appendWrongAnimation(...cards) {     cards.map(card => {       card.classList.add('wrong')       card.addEventListener('animationend', event =>          card .classList.remove('wrong'), { once: true })     })   } 當翻開的兩張牌點數不一樣,就會呼叫這個 appendWrongAnimation 函式,幫那兩張牌的外框加上閃爍的特效(在 CSS 中有設定 .wrong 的特效 ),動畫跑完後再把那兩張牌的 class name 改回來。 我很好奇,那個標粗體的 card 變數是怎麼運作的。尤其是,當我把外框閃爍 0.2 秒的特效,從播放 5 次改成 10 次後,我就更困惑了。事情是這樣的:依照我目前的理解,我推測程式是這樣運作的 model.revealed