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