Yakim shu Hi, 這是我擴充腦內海馬體的地方。

[第六週] 學習日誌

2019/05/26

本日進度

心得

Chrome 網頁除錯

debugger 工具一直都是大概知道怎麼用,但沒有強烈動機要用、或不知道怎樣才是使用的最佳情境,想說 console.log 不是也很快嗎?用到天荒地老好像也覺得沒差。

還真的差很多。

Soruce 面板介紹:

順便搞懂了按鈕下 breakpoint & 寫 debugger 的差異。

第二期影片

聽了 Hoisting 觀念講解,看完才知道我啥都不懂。

以前認為 Hoisting 就是把 function 跟 Variable 的宣告提上去而已,沒想到還有關作用域的陷阱以及 parameters 加入大亂鬥,真想叫他不要鬧了。

但這樣想我大概只會死在淺灘,今天在神遊中發現一個神人的 JSConf 影片,嚇得全程嘴巴閉不起來,怎麼可以這麼有活力、創意、還充滿幽默感的玩弄 JS,這就是所謂的滿滿的愛嗎?

當然還有恨啦,請看: JSFuck( 用 6 個字元 ()+[]! 可以轉譯出任何 js 內容,屌炸天 )

繼續練英打

玩遊戲就是抱著趣味性可以提升練習的意願,但小拇指始終好卡,有時會練到火大,接著就想找其他樂子。( 此人沒救 )


2019/05/25

本日進度

心得

今天的學習重點是:放肆、隨便、開心就好!

看了 Git、Chrome Web tool 的官方文件,深深覺得夭壽也寫得太清楚( 廢話 ) 以前都覺得那種東西不是寫給凡人看的,但其實都寫得很友善,前提是有點基本概念跟一顆不抗拒英文的心跟忍住不關掉的耐心。

劃掉代辦清單的速度永遠追不上新增的腳步

練英打: 一天練個半小時

另外分享個練英打的網頁:Typing.com,其實這種練打字的遊戲很多,但要做得這麼討人喜歡不簡單啊,而且我覺得訓練蠻扎實的,從最基本的 FJ 開始擴展,一次兩個按鍵慢慢增加。重點是有手指放置位置的動畫,包含不同主題的練習內容、甚至連 html、CSS 都有。

因為自己打字時,手指基本上就是亂放,所以一直沒辦法加快,今天成功的把 C 按鍵從食指改成中指了啊,惡習難改啊!

總之用這練英打我玩的心甘情願,我是查資料時看到此文 培養程式自學能力時應具備的三種能力 分享,這三點真的都非常基本又關鍵,再分享給大家共勉之!


2019/05/24

本日進度

心得

重新檢視 hw2 的程式碼,逐行檢查。

想起以前主管就是這樣看案子的,找我過去問:「 下這個 class 的意義是什麼? 選擇用這個標籤、而不是那個標籤的理由是什麼? 」,光想到那雙銳利的鷹眼在看我的爛 code,腸胃就開始翻騰起來。

hw5 簡答題寫到最後已經走火入魔,也沒有好好審視內容就交出去。其實好像很常都這樣,會一直想著還有哪些能夠補充的、哪些是常犯的錯誤沒提到的,寫到筋疲力盡後,質量開始下降。以後會更重視質而不是量。

開始聽「 Chrome 網頁除錯功能大解密 」,有個障礙是講師聲音好扁,聽得痛苦不只一點,但看到不少課程都是免費的耶,怎麼那麼大愛!

( 寫作業的時間真的比我想像久~~非常多啊,但只要被認同都覺得非常超值 )


2019/05/23

本日進度

心得

[ SEO ]

本來想說今天要來做個 CSS 筆記,紀錄那些比較容易忘記的屬性,但當重看一次 FE101 的 SEO 篇,就把時間都花在研究 SEO 上啦,不過還是有蠻多收穫的,覺得很開心

對於 og tag 很有印象的是,前公司的流量主要來自於臉書,已經教育過小編很多次、更新完 meta 要去 Facebook dugger 重新抓資料,不然會 cache 一陣子。

但每次新聞部的人還是手刀衝過來問說:「 為什麼改了 meta,但分享的貼文還是沒有改?! 」。

( 攤手 )

[ hw2 - Medium ]

終於切完了,好開心啊!!雖然 code 其實很亂,又不太想整理,覺得畫面看起來不錯就交吧。

但想到以前抱著這種心態都會被主管電得要死,還是認真整理才是正途。

[ hw5 - 簡答題 ]

越寫越發現更多有關 position 的特性,雖然以前很常用,但有時候遇到問題就是亂試一通,試到可以搞定為止,今天才有種以前在衝三小的體悟。

總之越寫越長到一個欲罷不能,希望明天可以交作業!

其實每週都想要完成挑戰題之後再一次交,但看到 week6 的挑戰題,完全提不起勁啊,決定先把正事做完、有時間再挑戰~

筆記

[第六週] 基礎 SEO 標籤 - meta、og、JSON-LD

明日預定計畫


2019/05/22

本日進度

心得

[ 了解瀏覽器的運作 ]

有鑒於前兩天切版都非常沒勁,今天察覺不行,要做點別的事讓自己有點動力。

早上看了之前 Huli 給的兩篇延伸文章,研究瀏覽器的渲染原理,很厲害的長文,第一篇我光是認真看完,發現居然過了兩個小時… 有點扯,但瀏覽器的解析過程好像不再那麼神秘,學到很多。

我是看翻譯版的,所以內容有些落漆,但有興趣的同學可以參考看看:浏览器的工作原理:新式网络浏览器幕后揭秘

第二篇雖然只有英文,但內容蠻友善的簡單易懂,決定 1 天 看 1 part:Inside look at modern web browser

為此還問了男友 CPU 跟 GPU 的差別、內顯跟外顯,還順便查了一般硬碟、SSD,usb3.1, 3.0, 2.0 的寫入速度差別,感覺是一堂生活基礎電腦課,蠻有趣的。臭宅差點就順勢在原價屋買起電腦( 住手啊 )

[ 寫 HTML、form 筆記 ]

從以前的工作經驗來看,最討厭的就是切表單了,標籤又多又雜,CSS 還很難調,因為每個瀏覽器的解析差滿多的,真是喜歡不起來。

「 對付敵人的第一步,就是先了解他 」

所以今天花時間好好研究表單的元素,寫完我決定要來喝一杯。

[ async vs defer ]

重新複習 <script> 標籤的屬性 async & defer 的差別:

筆記


2019/05/21

本日進度

心得

Medium 剩下留言區,今日高點是想到個奇淫技巧讓 side-nav 消失的自然一點!很瞎的方法、但忍不住覺得自己很優秀哈哈哈哈

不過今天狀態還是一樣不太好,上午完全提不起勁,最後決定卯起來做家事、整理環境,效果出奇地好、整個身心都在勞動中被療癒。決定睡前喝茫讓心情好一點!

( 敲碗求旅遊故事後續 )

明日預定計畫

找回動力


2019/05/20

本日進度

心得

力不從心的一天。

很想盡力做到跟 Medium 一模一樣,導致在很多小細節上花很多時間,總覺得效率很差。 不知道為什麼 chrome 放 svg 背景圖有困難,最後還是放前景圖,但這樣不是我想實現的方法,覺得很嘔。

開心的點是昨天很認真研究 flex,所以捨棄習慣的 float 沒什麼問題,最讓人困擾的還是 CSS 命名方式吧。

認真看了幾篇 BEM 文章,對於 block 跟 element 的定義、element 能有兩層以上嗎、到底能不能用後代選擇器,還是有點困惑,導致過程中一直猶豫不決該怎麼寫,煩惱的時間都被偷走了啊啊啊啊

總之今天狀態不太好,陷下去也不是辦法,來看一拳超人第 2 季。

今天學到的

明日預計進度

完成 hw2