前端开发 – Page 2 – 庭喵的出包星球

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

還不錯，教程都還蠻新的，還有一個還沒播完的剛好是我很有興趣的（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的教學還不錯

React複習懶人包

記錄一些看教學時覺得應該特別記下來的咚咚。

import { render } from "react-dom";

加上這一行，要在網頁上render只要直接打這樣即可：

render(<p>Hi<p>, document.querySelector('#main'));

要寫comment要這樣寫：

class StorePicker extends React.Component {
    render(){
        return (
            // asdfasdfasdf
        <from className="store-selector">
        {/* asdfasdfasdfasdf */}
            <h2>Please Enter A Store</h2>
        </from>
            )

    }
}

下面這個可以縮寫成這樣（ES6）記得第二行，key和value一樣的話才能這樣寫

import的時候，假如是default export的，就不用{}括起來 create-react-app之後，進入專案資料夾，打yarn，再打yarn start才會正常。 (可用import 一個jsx來測試) 只有 class based component 才要打 render method 用脚手架建專案不成功的時候，有錯誤訊息

error Received malformed response from registry for undefined. The registry may be down

試試npm install create-react-app -g

Protected: 面試心得

Default Parameters

Default Parameters:

If you are familiar with other programming languages like Ruby, Python then default parameters isn’t new to you.

Default parameters are parameters which are given by default while declaring a function. But it’s value can be changed when calling the function.

Example

let Func = (a, b = 10) => {
 return a + b; 
}
Func(20); // 20 + 10 = 30

In the above example, we are passing only one parameter. The function makes use of the default parameter and executes the function.

Consider another example:

Func(20, 50); // 20 + 50 = 70

In the above example, the function takes two parameters and the second parameter replaces the default parameter.

来源：https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be

JavaScript基础

JavaScript Logical Operators

!
除了一个惊叹号之外
还有双惊叹号

What is the !! (not not) operator in JavaScript?
会把它的true or false再反转

So !! is not an operator, it’s just the ! operator twice.

前端杂货

JavaScript Array map() Method

jQuery Misc index() Method

parents() 和 parent() 的差别，在于 parent() 是上一个元素，而 parents() 是所有祖先元素。除非有加参数，例如parents(“ul”)，不然会一直跑到最上面。但是假如是这样选择parents(“ul”)，它会传回所有的娘亲ul们。所以建议参数用class还是id之类的。

The parent() method returns the direct parent element of the selected element.
The parents() method returns all ancestor elements of the selected element.

Vue.js笔记本

Vue.js 測試的pen：

要給Vue的component一些動態資料的話，就給它挖個洞，讓它能接受自己定義的屬性（props）

【directive】
Directives are prefixed with v- to indicate that they are special attributes provided by Vue.

v-for
used for displaying a list of items using the data from an Array

v-if=”seen”
如果seen是true的話，這個元件就是可見的

v-bind:xxx=”xxxx”
可以綁定為vue裡的資料，例如

v-bind:title="message"

v-on:click=”methodName”
绑定点击功能

v-model
感覺就像是一個model，原型，資料的來源，大家要跟從牠（因為是model，偶像，可以查查這個英文單字，它也有模範的意思。）可以綁在input上。

v-once
值是固定的，以後不會再變了，例：

<span v-once>This will never change: {{ msg }}</span>

v-html=”xxxx”
若要打html的時候，可以利用這個引擎
xxxx是自己定義的html

前端工程師點擊技能

GIT
React
Vue.js
GA
Chrome Devtools
Webstorm
Laragon
GitKraken
npm
webpack
gulp
Node.js

後端PHP &Laravel
熟悉ES6, ES7語法
IoT相關經驗
Docker Container(AWS ECS)

Chrome DevTools
https://developers.google.com/web/tools/chrome-devtools/

GitKraken
https://www.gitkraken.com/
官方教学

Atlassian Git Tutorial
https://www.atlassian.com/git/tutorials

React
Hello World – React

Meet WebStorm
https://www.jetbrains.com/help/webstorm/meet-webstorm.html

Webstorm教學

針對分頁連續按兩下，左邊會彈出資料夾目錄
縮排／減少縮排的方法：按 Tab 或是 Shift + Tab

對正在編輯的地方按F11，就是BOOKMARK，再按一次會取消。

Ctrl + Shift + ↑ ↓ 可以移动程式码，就不用贴来贴去。
Alt + Shift + ↑ ↓ 是移動括起來的程式碼，更精確。

檔案tab的顏色修改新增檔案：在想要新增的目錄按右鍵叫出命令列： Alt + F123. 修改eslint的警告配色我少了一個分號，它的配色提示太不明顯了，調成紅色的看看。減少縮排的方法：這邊記得也要把它勾掉想要記Code snippets的話這裡找想要prettier的話看這裡把Terminal改成可以用一些指令（ls、rm -rf…. 注意這裡的shell path原本是 cmd.exe 改成 “C:\Program Files\Git\bin\sh.exe” -login -i 參考文章How to open a terminal on WebStorm?把資料夾排除在搜尋範圍

把修改過的地方改成高亮色調（老人家需求）

prettier ESLint plugin for Prettier formatting 使用prettier幫代碼自動format

看commit的diff

在webStorm裡定義自己需要的live template，還蠻簡單的，把一些常用到的都寫進去加速工作流程！搜尋在寫的js檔案是按double shift，記得不是按 ctrl + shift + N ，那是找檔案。想要自動補完要import的component的時候，記得那個component要是export default的，webStorm才會作用。

修改編輯器字型：