推薦其他『自我練習』資源：30 Seconds of Code

liuderchi commented 6 years ago

看到使用 Codewar 作為自我練習也想推薦一個資源：

30 seconds of code

它標榜收集了 可以在三十秒內理解的實用 JS code

用起來個人覺得有幾個優點：

社群活躍，幾乎每天都有 PR
程式碼會搭配簡短範例，理解的時候更有情境
有網頁介面，閱讀方便。

個人會在瀏覽器 console 下這段程式碼『隨機閱讀』，像是背英文單字卡一樣跳著看。

snippets = document.querySelectorAll('pre.language-js:nth-child(3)');
topics = document.querySelectorAll('h3.section');
topics[Math.round(Math.random()*topics.length)].scrollIntoView(true);

或是把程式碼當作答案：先遮起來，讀題目想一想，想不到再移動滑鼠看答案

document.querySelectorAll('pre.language-js').forEach(el => {
  if (el.nextSibling.nodeName === 'LABEL') {
    el.style.opacity = 0.03;
    el.onmouseenter = function() { this.style.opacity = 1; }
    el.onmouseleave = function() { this.style.opacity = 0.03; }
}})

aszx87410 commented 6 years ago

Hi, 沒想到有人會看到這個 repo XDD 首先，感謝你的推薦，這是個很實用的資源，而且你附上的兩段 script 都很不錯。

但現階段我不會推薦我之後的學生用這個，我認為現在還不是時機雖然你的第二段 script 有把答案先藏起來，但畢竟這個 repo 就是一個蒐集各種 JS code 的地方舉例來說，有點像是把 lodash 的所有 function 列出來，並且附上簡短版的原始碼

我會選用 codewar 的原因在於，他必須要你動手實作實作一個 different function、實作一個 sortBy function... 你看不到答案，你必須自己想出來，必須自己解答

最大的差異在於 30 seconds of code 可以看解答，看完解答你再想為什麼要這樣寫但我認為比較好的方法是你先想，想完再開始動手做，做不出來再去看解答，我認為會比較有幫助思考的過程很重要（我知道可以把答案遮起來，這樣也能思考，但我希望能再思考久一點）

所以我認為對新手來說，看這些 code 他能夠知道很多用法，但他可能看過就忘記了我覺得比較適合的時機是有一定經驗之後再來看這些，這時候目的就不一樣了這時候應該具備幾乎任何一個 function 都能夠寫出來的能力而看這個的目的就是為了得到更好的寫法，更優雅的寫法、更酷炫的寫法

最後還是非常謝謝你的推薦，如果有什麼資源都可以再分享，感謝

liuderchi commented 6 years ago

@aszx87410

...比較適合的時機是有一定經驗之後再來看這些，這時候目的就不一樣了

我其實完全贊同以初學者的角度出發，codewar 適合的多。（難易度有分級 => 不會讓初學者太沮喪。答題互動性高 => 能刺激思考，答對了還有點數回饋。）

想推薦這個其實是因為常受到你文章的分享激勵 XD。藉這個機會也來分享一些作為回饋。

aszx87410 commented 6 years ago

十分感謝你的分享，如果有什麼推薦的，都可以再分享給我！

Lidemy / mentor-program

推薦其他『自我練習』資源：30 Seconds of Code #1