debugger 工具一直都是大概知道怎麼用，但沒有強烈動機要用、或不知道怎樣才是使用的最佳情境，想說 console.log 不是也很快嗎？用到天荒地老好像也覺得沒差。
還真的差很多。
Soruce 面板介紹：
Watch 應該是最常用的DOM breakpoints 面板 真心實用，覺得沒睡著很值得（？Call Stack 可以解決我想觀察別人 code，但一大坨就卻步的問題。順便搞懂了按鈕下 breakpoint & 寫 debugger 的差異。
聽了 Hoisting 觀念講解，看完才知道我啥都不懂。
以前認為 Hoisting 就是把 function 跟 Variable 的宣告提上去而已，沒想到還有關作用域的陷阱以及 parameters 加入大亂鬥，真想叫他不要鬧了。
但這樣想我大概只會死在淺灘，今天在神遊中發現一個神人的 JSConf 影片，嚇得全程嘴巴閉不起來，怎麼可以這麼有活力、創意、還充滿幽默感的玩弄 JS，這就是所謂的滿滿的愛嗎？
當然還有恨啦，請看： JSFuck（ 用 6 個字元 ()+[]! 可以轉譯出任何 js 內容，屌炸天 ）
玩遊戲就是抱著趣味性可以提升練習的意願，但小拇指始終好卡，有時會練到火大，接著就想找其他樂子。（ 此人沒救 ）
今天的學習重點是：放肆、隨便、開心就好！
看了 Git、Chrome Web tool 的官方文件，深深覺得夭壽也寫得太清楚（ 廢話 ） 以前都覺得那種東西不是寫給凡人看的，但其實都寫得很友善，前提是有點基本概念跟一顆不抗拒英文的心跟忍住不關掉的耐心。
另外分享個練英打的網頁：Typing.com，其實這種練打字的遊戲很多，但要做得這麼討人喜歡不簡單啊，而且我覺得訓練蠻扎實的，從最基本的 F、J 開始擴展，一次兩個按鍵慢慢增加。重點是有手指放置位置的動畫，包含不同主題的練習內容、甚至連 html、CSS 都有。
因為自己打字時，手指基本上就是亂放，所以一直沒辦法加快，今天成功的把 C 按鍵從食指改成中指了啊，惡習難改啊！
總之用這練英打我玩的心甘情願，我是查資料時看到此文 培養程式自學能力時應具備的三種能力 分享，這三點真的都非常基本又關鍵，再分享給大家共勉之！
重新檢視 hw2 的程式碼，逐行檢查。
想起以前主管就是這樣看案子的，找我過去問：「 下這個 class 的意義是什麼？ 選擇用這個標籤、而不是那個標籤的理由是什麼？ 」，光想到那雙銳利的鷹眼在看我的爛 code，腸胃就開始翻騰起來。
hw5 簡答題寫到最後已經走火入魔，也沒有好好審視內容就交出去。其實好像很常都這樣，會一直想著還有哪些能夠補充的、哪些是常犯的錯誤沒提到的，寫到筋疲力盡後，質量開始下降。以後會更重視質而不是量。
開始聽「 Chrome 網頁除錯功能大解密 」，有個障礙是講師聲音好扁，聽得痛苦不只一點，但看到不少課程都是免費的耶，怎麼那麼大愛！
（ 寫作業的時間真的比我想像久～～非常多啊，但只要被認同都覺得非常超值 ）
本來想說今天要來做個 CSS 筆記，紀錄那些比較容易忘記的屬性，但當重看一次 FE101 的 SEO 篇，就把時間都花在研究 SEO 上啦，不過還是有蠻多收穫的，覺得很開心
對於 og tag 很有印象的是，前公司的流量主要來自於臉書，已經教育過小編很多次、更新完 meta 要去 Facebook dugger 重新抓資料，不然會 cache 一陣子。
但每次新聞部的人還是手刀衝過來問說：「 為什麼改了 meta，但分享的貼文還是沒有改？！ 」。
（ 攤手 ）
終於切完了，好開心啊！！雖然 code 其實很亂，又不太想整理，覺得畫面看起來不錯就交吧。
但想到以前抱著這種心態都會被主管電得要死，還是認真整理才是正途。
越寫越發現更多有關 position 的特性，雖然以前很常用，但有時候遇到問題就是亂試一通，試到可以搞定為止，今天才有種以前在衝三小的體悟。
總之越寫越長到一個欲罷不能，希望明天可以交作業！
其實每週都想要完成挑戰題之後再一次交，但看到 week6 的挑戰題，完全提不起勁啊，決定先把正事做完、有時間再挑戰～
[第六週] 基礎 SEO 標籤 - meta、og、JSON-LD
有鑒於前兩天切版都非常沒勁，今天察覺不行，要做點別的事讓自己有點動力。
早上看了之前 Huli 給的兩篇延伸文章，研究瀏覽器的渲染原理，很厲害的長文，第一篇我光是認真看完，發現居然過了兩個小時… 有點扯，但瀏覽器的解析過程好像不再那麼神秘，學到很多。
我是看翻譯版的，所以內容有些落漆，但有興趣的同學可以參考看看：浏览器的工作原理：新式网络浏览器幕后揭秘
第二篇雖然只有英文，但內容蠻友善的簡單易懂，決定 1 天 看 1 part：Inside look at modern web browser
為此還問了男友 CPU 跟 GPU 的差別、內顯跟外顯，還順便查了一般硬碟、SSD，usb3.1, 3.0, 2.0 的寫入速度差別，感覺是一堂生活基礎電腦課，蠻有趣的。臭宅差點就順勢在原價屋買起電腦（ 住手啊 ）
從以前的工作經驗來看，最討厭的就是切表單了，標籤又多又雜，CSS 還很難調，因為每個瀏覽器的解析差滿多的，真是喜歡不起來。
「 對付敵人的第一步，就是先了解他 」
所以今天花時間好好研究表單的元素，寫完我決定要來喝一杯。
重新複習 <script> 標籤的屬性 async & defer 的差別：
async： 用非同步模式加載，下載後立刻執行，但同時也繼續載入頁面與其他 js 檔案。defer： 下載完會先等著，等到頁面都解析完成，觸發 DOMContentLoaded 事件才執行。Medium 剩下留言區，今日高點是想到個奇淫技巧讓 side-nav 消失的自然一點！很瞎的方法、但忍不住覺得自己很優秀哈哈哈哈
不過今天狀態還是一樣不太好，上午完全提不起勁，最後決定卯起來做家事、整理環境，效果出奇地好、整個身心都在勞動中被療癒。決定睡前喝茫讓心情好一點！
（ 敲碗求旅遊故事後續 ）
找回動力
力不從心的一天。
很想盡力做到跟 Medium 一模一樣，導致在很多小細節上花很多時間，總覺得效率很差。 不知道為什麼 chrome 放 svg 背景圖有困難，最後還是放前景圖，但這樣不是我想實現的方法，覺得很嘔。
開心的點是昨天很認真研究 flex，所以捨棄習慣的 float 沒什麼問題，最讓人困擾的還是 CSS 命名方式吧。
認真看了幾篇 BEM 文章，對於 block 跟 element 的定義、element 能有兩層以上嗎、到底能不能用後代選擇器，還是有點困惑，導致過程中一直猶豫不決該怎麼寫，煩惱的時間都被偷走了啊啊啊啊
總之今天狀態不太好，陷下去也不是辦法，來看一拳超人第 2 季。
sticky 在 safari 要加前綴box-shadowing 可以搞定多層邊框完成 hw2
Written on May 22nd , 2019 by Yakim shu