楔子 typescript 針對 javascript 有進行型別的補強，在 functional programming 的 lib 中，有 fp-ts 可以使用，不過個人覺的它有點複雜變的不太好用，它的型別有點太多了，先了解它的東西應該就飽了，那今天來試試改用小刀水平的 javascript 吧。 說明 先要熟悉一下 arrow function 的 typescript 有點不易閱讀(官網也這樣說) 這是一個取第一個值的簡單函數 let fst: (a: any, b: any) => any = (a, b) => a 如果套上括號(弄個特殊的括號 [ ] )，應該就可以比較好懂這個格式了。 let fst: [(a: any, b: any) => any] = (a, b) => a 比較容易理解的還是用純 function 來寫 function fst(a: any, b: any): any { return a } 如果再套上 Generic types 的表達格式 function fst<T,U>(a: T, b: U): T { return a } 接下來開始改造 lib 升級到 typescript 先從小的東西開始，如果原來的 javascript...

楔子 React 改成 functional component 最方便用的方式，在整個 code syntax 也是簡潔，不過當新舊交換時，常常難免會有一些使用上的規範。 rule of hook 直接用 Tyler 的範例來標示 rule function Counter () { // 👍 from the top level function component const [count, setCount] = React.useState(0) if (count % 2 === 0) { // 👎 not from the top level React.useEffect(() => {}) } const handleIncrement = () => { setCount((c) => c + 1) // 👎 not from the top level React.useEffect(() => {}) } } function useAuthed() { // 👍 from the top level of a custom Hook const [authed, setAuthed] = React....

楔子 最近小夥伴問了，React 的 jsx 基本的結構長如何，是如何轉換的之類的，順便記錄一下網路大神的資料摘錄。 React 有一個 createElement 的方法可以把資料轉成 react 特殊的結構 React.createElement('div', props={}) 收到特殊的結構之後再由 ReactDOM.render 來進行放在 html 上的位置 ReactDOM.render(jsDOM, document.getElementById('root')) React Basic React vs ReactDOM 摘錄一些 Kent 的示範 code 來演示一下，element 1 ~ 3 就是各種 jsDOM 的寫法，比較特別的是 React.createElement 可以有 2 ~3 個輸入參數 第一個參數指的是 HTML 的 DOM 種類(eg. div span …) 第二個參數輸入的是該 DOM 的 props 第三個參數輸入的是 children const element1 = React.createElement('div', {className: 'container'}) const element2 = React.createElement('div', {className: 'container'}, 'Hello', '', 'World') const element3 = React....

楔子 同樣的 javascript 針對所謂的 async 有其發生的歷史變革，有興趣的可以去找找影片了解一下。 callback 一開始採用的方式就是使用一個 callback function，因為 javascript 可以把 function 當參數丟入另一個 function，就有了最原始的模式，基本的概念就是 function executeFunc(callbackFun) { // some async function call callbackFun() } 題型: 請使用 setTimeout 來寫一個 1秒後 console.log(100) 的 callback function case // step 1. define function to run function go(){ // step 2. use setTimeout callback function to run after 1 sec setTimeout(()=> { // step 3. write console 100 }, sec) } // step 4. run the function go() 比對一下結果…...

楔子 Docker 是現在開發的基本工，除了不想污染本地的環境以外，更重要的是可以把執行環境標準化，不會因為不同的環境就有無法執行的狀況，來試著了解一下吧。 網路的 docker 說明介紹蠻多的，就不多做說明了，就比較用講解的方式來自已可以寫一個所屬的 dockerfile 的實做羅輯。 環境架構 自行參考相關安裝 MacOS linux windows 認識 images 與 tag 來試看看 ubuntu 的 base image 來看， (image name):(tag) 這是基本的格式，這個格式可以使用在 dockerfile 內。 ubuntu example 試題來試試 case I Hint: (為 dockerfile 指令) 基礎的影像 base image (FROM) 每個程式都會歷經 build test(optional) runtime 的過程 (RUN CMD) 把原來的程式碼 copy 到 docker 內的 workdir (COPY WORKDIR) 安裝相關程式(dependency) (RUN) 試著寫出一個 NodeApp Dockerfile 提示: 下方為 build & runtime 的 bash 指令 npm run build npm run start dockerfile 步驟...

楔子 原型鏈 (prototype chain) 應該是 javascript 新人入門最討厭的東西了。 在這個語言中其實只有幾大類別(number string boolean) Undefined (undefined), used for unintentionally missing values. Null (null), used for intentionally missing values. Booleans (true and false), used for logical operations. Numbers (-100, 3.14, and others), used for math calculations. BigInts (uncommon and new), used for math on big numbers. Strings (“hello”, “abracadabra”, and others), used for text. Symbols (uncommon), used to perform rituals and hide secrets. 比較特別的就是 Object 和 Function 了，先摘錄一些網路大神的圖解。...

楔子 如果平常在寫 OOP(物件導向)語言的人，應該就會很熟悉繼承(inheritance);如果有寫 ruby 的人，應該更熟悉鴨子型別(duck typing);如果在寫 FP(functional programming)的，就更熟悉組合(composition)。每個語言都有他的特性，端看怎使用而以，語言的熟悉度就在於這些手法的習性而以。 但在 javascript 中其實都可以實踐這些特性來讓不同的技術人來使用，今天就拿一些網站的 demo code 來分享。 code 先來看看標準的 es2015 的 classes & prototype Inheritance with Classes // case I prototype var Animal = function(name) { this.name = name } var Alligator = function(name) { Animal.apply(this, arguments); // Call parent constructor } Alligator.prototype = Object.create(Animal.prototype) Alligator.prototype.constructor = Alligator var jack = new Alligator("jack") // case II classes class Animal { constructor(name) { this.name = name } } class Alligator extends Animal {} const jack = new Alligator("jack") // extends class Alligator extends Animal { constructor(....

楔子 現在雲端化的產品服務這麼多，怎一開始入門來使用這些服務，這次來聊聊這個話題吧。 觀念 主要有幾個東西: kubernetes:負責 app 的擴展，穩定服務等等 helm:負責產生 kubernetes 的設定參數樣版文件 terraform:負責來設定雲端的資源環境 為了不讓東西討論到細節，就先簡單把 kubernetes 想像成可以使用的程式，而 helm 就想像成去設定程式的一些參數，而 terraform 想像成要用哪些資源。 當然可以去花點時間去官網看看詳細的介紹。 環境 為了在本地端使用開發測試，就本地安裝 minikube 來替代 kubernetes ，再簡化說明， helm 就是這些設定 kubernetes 的相關設定，至於 terraform 就當做設定這些程式所需要的相關資源(eg.多大的 cpu 和 ram) 示範 code 使用 terraform + kubernetes config terraform 要設定幾個東西 kubernetes mysql deployment & mysql service wordpress deployment & wordpress service provider "kubernetes" { config_context = "minikube" } locals { wordpress_labels = { App = "wordpress" Tier = "frontend" } mysql_labels = { App = "wordpress" Tier = "mysql" } } resource "kubernetes_secret" "mysql-pass" { metadata { name = "mysql-pass" } data = { password = "root" } } resource "kubernetes_deployment" "wordpress" { metadata { name = "wordpress" labels = local....

楔子 useContext 是 hook 系列很常使用的東西，通常就在「跨」 components 之間使用，有時加減也好用也有點濫用，說說比較常使用的情境吧.. 例如像 Global Theme 在所有的 component 都包上一層，像 Material UI 就採用這種模式.. 那像假設 firebase Oauth 的情況時，要用嗎?還是可以用 custom hook?其實這二種方式都有人用，看自已的習慣而以.. 一般式 這是比較正常的方式，最外層包一個 Provider 再利用 render prop 來操作 import React from 'react'; export const UserContext = React.createContext(); export default function App() { return ( <UserContext.Provider value="user"> <User /> </UserContext.Provider> ) } function User() { return ( <UserContext.Consumer> {value => <h1>{value}</h1>} </UserContext.Consumer> ) } Kent c dodds 但其實如果使用 Kent 的起手式，其實蠻優美的.. Kent useContext code...

楔子 JS 的 this 通常有所謂的 scope 問題，最近蠻常遇到小夥伴在問，就順便做一下整理，而且通常this會和class一起出現使用。 this 單獨使用 大概有幾種情況 默認綁定(default binding) 在 function 內的 this 為 function 上一層，strict模式為 undefined function main(){ console.log(this) // this = global } main() 隱式綁定(implicit binding) var person = { name: 'ac', getName: function() { console.log(this) // this = person } } person.getName() // 'ac' function click(cb){ cb() } var name = 'aac' click(person.getName) // 把 person.getName 丟到 click 的參數時 // 這時的 this = global，這時 global....