promise
promise是一個根據你給的callback function回傳的物件 ．callback在目前的promise沒跑完前，絕對不會執行 ．在then()裡的callback，不管promise有沒有成功，絕對會執行 參考文章： Using Promises...
Read more文章 - 第 19 頁
slick react jest
在react裡使用slick.js雖然簡單又方便，可是加入Jest snapshot test就錯誤百出了，亂試了一下解決方法。第一個錯誤解決了之後又有其它的錯誤。 第一個錯誤可以從issue看到有人也有一樣問題 Testing with Jest causes error #472 Jest te...
Read moreJest手把手教學
首先開啟一個資料夾，乃做做Jest的測試。 mkdir jest-try 開啟好資料夾，在裡面開新專案 npm init -y 接下來就可以安裝Jest yarn add --dev jest 安裝好之後要幹麻？寫一個JavaScript檔案囉！ 開一個檔案叫 double.js function ...
Read more
storybook
利用storybook可以更直觀的知道元件在各種UI互動狀態下應該怎麼呈現！ 下面的那些就是stories啦！ 下面這三個就是它的test cases title（螢光筆劃線的地方）不能重複 title在這裡定義(export default是寫metadata的地方) Task.stories.j...
Read moreJavaScript var v.s let
const arr1 = []; for(var i = 0; i < 3; ++i) { arr1.push(() => i); } const arr2 = arr1.map(x => x()); const arr3 = []; for(let i = 0; i < 3; ++i) { arr...
Read more2020面試心得
《華奧科技有限公司》 一開始先簡單的自我介紹一下，我覺得我在講工作的部份應該再講仔細一點， 例如前幾年比較多工作在切版、做特效，用jQuery維護網站， 這幾年用的是前端框架，學習它的ecosystem，也會不時上網查看新知 應該說明一下我除了工作之外還會多上網看有出什麼新東西… 1. React....
Read morereact-addons-update
react-addons-update 這個套件legacy嘍，要做新專案可以改用 immutability-helper 可以解決深淺拷𢭲的問題，這本書有寫一個應用例子： ReactJS by Example – Building Modern Web Applications wi...
Read moredeep copy & shallow copy
A deep copy means that all of the values of the new variable are copied and disconnected from the original variable. A shallow copy means that certain...
Read moremoment.js
const yes = moment().subtract(3, 'days').startOf('day'); const no = moment().subtract(1, 'days').endOf('day'); 最後面沒加 .format() 的話，出來的是物件，想要有字串或時間，要加上 ...
Read moretelegram 機器人使用
@Customize_Captcha_Bot 自訂型入群驗證 加入群組之後，記得輸入 /switch 機器人才會切換到你目前的群組 接下來新增問題，在機器人那邊打 / new 1.先輸入問題： 你是什麼？ 2.輸入選項： 天才 白痴 3.輸入答案: 白痴...
Read morewebstorm 怎麼看git
https://www.jetbrains.com/help/idea/adding-files-to-version-control.html 按 Alt + 9 或是按下面的Version Control 看Git版本控制的提示顏色不喜歡，也可以按快捷鍵 Ctrl + Alt + S 來修改… ...
Read more讀書的小小心得
最近覺得一直狂寫代碼，也是會進步，但是也是應該要多讀點書。因為讀書是吸收，而寫代碼是把已吸收的實現出來…或者是邊讀書邊實作，但一般開發除非專案時程不急，不然不太能這樣做。讀書跟實作是應該相輔相成的。有空可以抽空出來多讀書，反省自己寫的好不好，能做些什麼樣的修改、下次可以試試哪種方式等等。...
Read moreReact Tips
要設中斷點的時候，發現選第一個不對，要選第二個才行… 要挖洞的時候一定要記得開洞（例如傳 dots={true} 給 Slider的時候 <Slider {...settings} autoplay={autoplay} dots={dots}>...
Read more面試心得
工作覺得遇到最難的地方是？ 我回答一些業務上的邏輯。 感覺可以再說些其它東西 1. 不同的手機會有不同的渲染，有時候顧客反應的問題，其實有可能是手機本身的問題，當然沒有那麼多的手機能去測試，可能需要估狗看看這個手機 2. 在網站跟在手機上的程式需求會不太一樣，例如有一次我負責開發web端，同事開發手...
Read morereact常見bug
ReactJS: Warning: setState(…): Cannot update during an existing state transition 在把function當props傳給子元件的時候，子元件要呼喚此function是要這樣叫：() => this.props.onHand...
Read more
Visual Studio Code tab縮排問題
發現縮排很大，在這邊調設定： Tab Size 改成想要的數字，我這邊改成２。然後點進去Editor: Detect indentation 假設它有打勾的話，把它勾掉，就可以嘍！ 再回頭來看看我的代碼…好，很好，很完美。...
Read more
Imperative Pattern vs Declarative Pattern
在讀JavaScript的時候，這兩個Pattern常常被提到，做了一下筆記。 假設我們要做一個包含很多人物的物件。 const characters= [ {name:'Curapica', age:15}, {name:'Killua', age:13}, {name:'Gon', age:12...
Read more#100DaysOfCode react專案
Day 1, Dec 12 2019 目前不支援直接用create react app指令來創專案，前面要加個npx 詳見 https://create-react-app.dev/docs/getting-started/ A template was not provided. This is ...
Read moreNode with React 課程筆記
進度：3-17 Dec.5.2019 首先看教學說要新增一個資料夾，叫server，還要創一個package.json， 使用npm init -y來創造出package.json檔案。 這個指令就是 npm init –yes 的意思，可以省去按Enter的步驟。 參考閱讀： The ...
Read moreJavaScript sort()
const numbers = [1, 2, 4, 3]; numbers.sort(); // 1, 2, 3, 4 sort是一個不錯的方法，可以排順序，例如排商品的價錢、時間的遠近，又或是誰快生日了、誰的年紀最大…等等。另外也可以自己寫一個陣列order，處理中文字串的排序。 例如 const...
Read more
更新Node.js
Photo by Brett Sayles from Pexels 一開始是因為create-react-app這個指令不能跑，才來重新安裝一下node.js 首先確認node的版本，需要更新一下惹。 接著啟動魔法指令 npm install -g node 然後再檢查一次版本 噹噹～更新完成！！（...
Read moreReact Patterns
來解析一個奇怪的pattern…我只能說我很少看過，所以覺得很怪。 const Width = ( { children } ) => children( 500 ); 這裡表示 width是一個function 這個function的參數也是一個function 就是children，...
Read more
潮到出水不得不用的My JSON Server
Photo by Krisztina Papp on Unsplash 如果後端一直拖著不給api…最好的方法就是 肛爆他們 自己做一個假的api！ My JSON Server 使用方法敲級簡單： 1.在自己的git repo上面新增一個檔案叫db.json 內容可以隨意自訂，一開始要測試就直接複...
Read morereact router 更新
本來想更新但發現出現錯誤訊息， 好像是eslint的關係 發現安裝eslint也會出現一樣的提示 查了一下eslint-config-airbnb@15.1.0這個關鍵字，找到它的官網 https://www.npmjs.com/package/eslint-config-airbnb 隨意爬了一下...
Read more
如何計算rem
Photo by Jan Piatkowski on Unsplash 首先呢，假如是負責既有的專案的話，就找它的html 的 font-size是什麼 現在負責的專案是10vw，所以就看目前的視窗大小（右鍵F12點body，會在左下顯示大小） 看了一下是1920，所以1920 / 10 = 192...
Read moreJavaScript 實用代碼段
concat也可以concat物件 ．提取特定的物件資料，例如 var array1 = [ { name: 'Luna', age: 99 }, { name: 'Baby', age: 1 }, { name: 'Curapica', age: 18 } ]; var found = array...
Read moreReact Playground
一些線上測試react的平台 Repl.it – Online React Editor and IDE – Fast, Powerful, Free The online code editor for web apps. Powered by Visual Studio ...
Read moregit push前的checklist
有沒有多餘的代碼（可以優化、簡潔的地方）例如重複的地方太多，可以讓它變成一個function來調用。 各模版/各品牌 有沒有 debugger Network的XHR正不正常（接口調用） 避免hardcore寫法 （if ( id === 1396 ) { ….. }） 能整合的comp...
Read moreArray.from
Array.from([1, 2, 3], ( x , y ) => x + y); // 1, 3, 5 這裡的arrow function是map function，y就是index const nestedArray = [['😉'],{kind: "🐦"},['😇']] const a...
Read moreES6 Practice
看到一些不錯的寫法給它抄下來 "1|2|3|4|5|6|".split('|').reduce((result, val) => (`${result}${result && val ? ' | ' : ''}${val}`), '') onClick={() => this.setState({ ...
Read more