Month: September 2018

前端技術：前端相關Youtube頻道

The Net Ninja

還不錯，教程都還蠻新的，還有一個還沒播完的剛好是我很有興趣的（React, Redux & Firebase App Tutorial #1 – Introduction）不過就是腔調上有點聽不太慣。
有React、Vue、Node.js、REST API 、GraphQL的教學，而且都蠻新的。

 

Traversy Media

教學很多元！Vue、Angular、Node.js、MongoDB、Docker、MERN、Laravel…
還有很新的教學，我也很有興趣（Lyric Search App With React & Context API）

 

LearnCode.academy

 

 

Code Realm

影片都還蠻新的，有React.js、ES6的教學，竟然還有GraphQL


Mostly a front-end dev out of Montreal, QC seeking to spread love and knowledge out there. Interested in JS, React, NodeJS, or NoSQL? Then we might have a few things in common 😉

 

Programming with Mosh

這個光頭仔的聲音還蠻好聽的，發音也好懂，音質也好。

 

Codemy School

影片有點舊了。有React.js教學、Rails API、Git、Docker
覺得git branch的教學還不錯

JavaScript Closure Sample

閉包的解釋：
1. 外面讀不到裡面，裡面讀得到外面
2. 每個函式可以有自己的私有變數，跟其它的函式名子可以一樣（會有容易搞混的缺點
3. 閉包：它本來抓得到什麼值，就能抓到什麼值，不論它是在哪裡執行的（可能return 給外層的函式了）

參考文章：
A Simple Explanation of JavaScript Closures
⭐️⭐️⭐️⭐️⭐️
超推薦，簡單好懂，排版也好看
How to explain JavaScript Closure to a 5 years old kid
⭐️⭐️⭐️⭐️⭐️
這篇也超好懂的啦
Javascript Closure tutorial ( Closures Explained )
這篇講得比較多些

計算總和的代碼

這是ES6版的

const numbers = [10, 20, 30, 40] // sums to 100
// function for adding two numbers. Easy!
const add = (a, b) =>
  a + b
// use reduce to sum our array
const sum = numbers.reduce(add)

也可以這樣寫

var numbers = [65, 44, 12, 4];

function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

比較古早的ES5寫法：

var numbers = [10, 20, 30, 40] // sums to 100
var sum = 0;
for (var i = 0; i < numbers.length; i++) {
  sum += numbers[i]
}

參考文章：

Rewriting JavaScript: Sum an Array
JavaScript Array reduce() Method

Visual Studio Code

  1. 需要把畫面放大就按【ctrl + 】
  2. 在react裡面沒有emmet (例如打p.lunacute 按tab會自動產生)的話把 .js 改成 .jsx
  3. Ctrl + P 可喚出任意門，輸入檔名到達想到達的檔案。（範圍會限制當前專案資料夾，很方便）
  4. stop multi cursor editing – Esc
  5. multi cursor editing : ctrl + D
  推薦安裝套件： Prettier
存檔之後的變化↑ Lyric Search App With React & Context API 影片有推薦這個插件 Programming with Mosh的影片推薦這個插件