Commentary

簡評七

我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理

  • 當睇唔明人地D code
    • 查書
      • 唔知要查嘅野係邊頁
      • 要先對成個知識體系有基本了解，先可以有效率咁search
    • 查Google
      • 唔知用咩keyword去search
      • 同查書一樣
    • 試+靠估
      • 可能會得出錯嘅結論，學左D錯嘅野
  • 做住學
    • 要有觀念打底先扎實
      • 都係要了解左成個知識體系先
    • 我好同意E一點，要打好底咁先學到野。因為做野果時好多時都有deadline，一定要好有效率咁學，唔係最後係壓力下，只係patch到work就算，可唔到可以reuse嘅knowledge。
  • 會寫的多、看懂的少
    • 如果你還是用一知半解的觀念去開發，你會花上大把大把的時間在除錯、鬼打牆、生悶氣、捶心肝。
      • 其實就係leaky abstraction 嘅問題
        • 當你要maintain D code，就算D third party library 好勁，好可靠，都要花時間去理解佢點運作。
        • 因為世上係冇完美嘅abstraction，當一遇到底層嘅問題，必需要對library有深入嘅了解先solve到。
        • 當出左事先抽時間去學，好可能會趕唔切，因為未必可以locate到個問題係邊個abstraction layer出事。
  • 當中推介D書遲D抽時間速睇。

21 May 2018

Don’t need to re-read, but the recommended book list worth reading

Dear JavaScript Maintainers,

MIT license stated the code is not guarenteed to work properly.

21 May 2018

文中用器官捐贈做例，解釋用system去改變人嘅行為：Default 唔捐嘅時候，只有15%嘅人登記捐贈。Default係捐嘅時候，有10%登記唔捐，姐係有90%嘅人捐。

以器官捐贈引子，希望user用Opensource嘅野嘅時候，唔好只諗住要blame 個creator，要default保持住感恩之心，畢竟你用嘅時候，咩野都冇付出到。

JavaScript Will Finally Get Proper Asynchronous Programming

async will be available in ES2017. It make the javascript non blocking, even there are long running code.

21 May 2018

我之前完全理解錯左篇文，係理解左CPS之後再重讀

以下無需重讀

Reflections of an “Old” Programmer

  • Knowledge decay
    • 隨住科技嘅進步，好多舊嘅技術會慢慢fade out
  • Knowledge accumulation rate
    • 學野嘅速度
  • Three stages
    • Eager apprentice
      • 快速咁去學好多新嘅language, library 同 framework
    • Rising start
      • 對現今流行嘅野都有掌握，開始精進
      • 開始面對轉折點
        • 成為左senior要教新人，review人地D code，少左時間自己學野
        • D knowledge會開始decay，出現 accumulation rate < decay rate 嘅情況
    • Steady veteran
      • 要keep住用空閒時間學新野，唔係就會變返新手
      • 有人會決定轉去做management, sales, testing … etc
  • Advice
    • 睇長線D
      • 㨂D有得接觸新野嘅公司，寧可低pay D
        • 以防工作用嘅technology 第時decay曬
    • 學decay level 低嘅knowledge
      • algorithms, application security, performance optimization, and architecture
      • 唔好不停去追新嘅libraries

21 May 2018

補充一點，係工作時盡量抽20%時間學新野

Half of what a programmer knows will be useless in 10 years

學徒之路

同上邊幾篇文都有D共通點

  • 基礎的知識、理論
    • Decay rate 比較低嘅knowledge
    • 可以透過書本、文件、或別人的教導獲得
  • 經驗和應用類的知識
    • Decay rate 高
    • 好似上一篇提及嘅學習方法咁
      • 不該全盤接受別人的想法，特別是經驗
      • 可以引以為鑑，反省自己的做法和想法
    • 例子
      • Design Pattern
      • Test Driven Development
      • Agile
  • 次要嘅發展方向的內容
    • 以理論派嘅方式， 就係以研讀和理解的方式學習
  • 主要嘅發展方向的內容先多花時間以實戰方式進行

閱讀程式碼的心理層面

講點樣睇code，其實好多篇文都講類似嘅野

  1. 先掌握整體結構，了解各檔案、目錄、模組嘅作用
    • 咁先可以知道自己係邊個abstraction layer，
      • 揾到自已想睇嘅code同skip D 唔重要嘅野
  2. 靠file, function 同 variable name去估D code做咩
    • 前提都要D code都要寫得好
  3. 睇class 同 function declaration
    • Interface 係這個abstraction object 之間溝通嘅方法
    • 睇完structure，估到個大約結構可以睇下 interface 驗證自己嘅想法
  4. 先睇Data structure 再睇 code
    • Code 係用黎process data, program 就好似一條變化緊嘅data stream咁，由stream嘅源頭，姐係data structure睇會易明D。
    • 但係當D code唔係用黎handle data就唔work，例如一D dev ops 嘅code
  5. 睇人地嘅註解
    • 放到咁後係當有comment 果時己經去到睇 code 嘅level，未了解structure就睇code好易睇錯野。
  6. 要focus，唔好心急跳黎睇
    • 未清楚曬就skip好易中伏，到最後仲用多左時間，

A Web Dev’s Valentine

Create a heart with CSS and html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.heart:before,
.heart:after {
  background: #cd231b;
  border-radius: 50px 50px 0 0;
  content: "";
  height: 25px;
  left: 15px;
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  width: 15px;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

21 May 2018

Don’t need to re-read

The end of the clearfix hack?

We apply clearfix hack to float element container to prevent it collapse. But there a new value flow-root for display to solve this problem. We don’t need to have clearfix hack in the future.
FYI: Can I Use

21 May 2018

Don’t need to re-read

CSS only 3d Macbook Air

Crazy CSS and HTML only macbook air animation

21 May 2018

Don’t need to re-read

Hard Reset: Using the CSS Initial Value

initial value reset the property to default value of user’s browser. So the normalized style will be reset too.
initial does not work in all IE, even IE 11. WTF.

21 May 2018

Don’t need to re-read