常見command意思
What does the -p flag do in “mkdir -p”?...
科技
webstorm 怎麼看git
https://www.jetbrains.com/help/idea/adding-files-to-version-control.html 按 Alt + 9 或是按下面的Version Control 看Git版本控制的提示顏色不喜歡，也可以按快捷鍵 Ctrl + Alt + S 來修改… ...
手帳
...
api相關資源
收藏一些好用的api，拿來東玩玩西玩玩～ SWAPI – The Star Wars API RapidAPI...
讀書的小小心得
最近覺得一直狂寫代碼，也是會進步，但是也是應該要多讀點書。因為讀書是吸收，而寫代碼是把已吸收的實現出來…或者是邊讀書邊實作，但一般開發除非專案時程不急，不然不太能這樣做。讀書跟實作是應該相輔相成的。有空可以抽空出來多讀書，反省自己寫的好不好，能做些什麼樣的修改、下次可以試試哪種方式等等。...
React Tips
要設中斷點的時候，發現選第一個不對，要選第二個才行… 要挖洞的時候一定要記得開洞（例如傳 dots={true} 給 Slider的時候 <Slider {...settings} autoplay={autoplay} dots={dots}>...
面試心得
工作覺得遇到最難的地方是？ 我回答一些業務上的邏輯。 感覺可以再說些其它東西 1. 不同的手機會有不同的渲染，有時候顧客反應的問題，其實有可能是手機本身的問題，當然沒有那麼多的手機能去測試，可能需要估狗看看這個手機 2. 在網站跟在手機上的程式需求會不太一樣，例如有一次我負責開發web端，同事開發手...
react 踩踩雷
若在Promise.all裡面直接調用這個component的方法，會有異常 錯誤示範： 正確示範： 當然如果它需要什麼參數，就放在Promise.all的上面也可以...
react常見bug
ReactJS: Warning: setState(…): Cannot update during an existing state transition 在把function當props傳給子元件的時候，子元件要呼喚此function是要這樣叫：() => this.props.onHand...
Visual Studio Code tab縮排問題
發現縮排很大，在這邊調設定： Tab Size 改成想要的數字，我這邊改成２。然後點進去Editor: Detect indentation 假設它有打勾的話，把它勾掉，就可以嘍！ 再回頭來看看我的代碼…好，很好，很完美。...
Imperative Pattern vs Declarative Pattern
在讀JavaScript的時候，這兩個Pattern常常被提到，做了一下筆記。 假設我們要做一個包含很多人物的物件。 const characters= [ {name:'Curapica', age:15}, {name:'Killua', age:13}, {name:'Gon', age:12...
護唇膏
買了eos護唇膏，雖然香味還蠻好聞的，可是對我來說感覺有點硬，不好推勻，要省時間的話還是想要軟一點的護唇膏。不知道用久了會不會變不一樣？🙄...
越來越奇怪的chrome
我發現打開F12的時候，在頁面上面點擊，連結會有奇怪的白邊。 https://create-react-app.dev/ 像這個網站就會這樣，把F12關掉就不會了…...
#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 ...
網頁開發不思議
在用rem的情況下，用font-weight: bold; 跟用font-weight:bolder; 竟然是有差的，而且差別可大了。真神奇…...
Node with React 課程筆記
進度：3-17 Dec.5.2019 首先看教學說要新增一個資料夾，叫server，還要創一個package.json， 使用npm init -y來創造出package.json檔案。 這個指令就是 npm init –yes 的意思，可以省去按Enter的步驟。 參考閱讀： The ...
React.js 常見錯誤
當用到 class component的時候，記得它是沒有括號的@@...
JavaScript sort()
const numbers = [1, 2, 4, 3]; numbers.sort(); // 1, 2, 3, 4 sort是一個不錯的方法，可以排順序，例如排商品的價錢、時間的遠近，又或是誰快生日了、誰的年紀最大…等等。另外也可以自己寫一個陣列order，處理中文字串的排序。 例如 const...
React.js 注意事項
...
更新Node.js
Photo by Brett Sayles from Pexels 一開始是因為create-react-app這個指令不能跑，才來重新安裝一下node.js 首先確認node的版本，需要更新一下惹。 接著啟動魔法指令 npm install -g node 然後再檢查一次版本 噹噹～更新完成！！（...
十月初爬山烤肉
十月初的時候去山上覺得很舒服。幽靜又冷，十分適合我這陰沉肥宅。 （照片朋友幫拍的）...
React Patterns
來解析一個奇怪的pattern…我只能說我很少看過，所以覺得很怪。 const Width = ( { children } ) => children( 500 ); 這裡表示 width是一個function 這個function的參數也是一個function 就是children，...
react lifecycle
詳細圖表： http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/...
潮到出水不得不用的My JSON Server
Photo by Krisztina Papp on Unsplash 如果後端一直拖著不給api…最好的方法就是 肛爆他們 自己做一個假的api！ My JSON Server 使用方法敲級簡單： 1.在自己的git repo上面新增一個檔案叫db.json 內容可以隨意自訂，一開始要測試就直接複...
react router 更新
本來想更新但發現出現錯誤訊息， 好像是eslint的關係 發現安裝eslint也會出現一樣的提示 查了一下eslint-config-airbnb@15.1.0這個關鍵字，找到它的官網 https://www.npmjs.com/package/eslint-config-airbnb 隨意爬了一下...
如何計算rem
Photo by Jan Piatkowski on Unsplash 首先呢，假如是負責既有的專案的話，就找它的html 的 font-size是什麼 現在負責的專案是10vw，所以就看目前的視窗大小（右鍵F12點body，會在左下顯示大小） 看了一下是1920，所以1920 / 10 = 192...
JavaScript 實用代碼段
concat也可以concat物件 ．提取特定的物件資料，例如 var array1 = [ { name: 'Luna', age: 99 }, { name: 'Baby', age: 1 }, { name: 'Curapica', age: 18 } ]; var found = array...
React Playground
一些線上測試react的平台 Repl.it – Online React Editor and IDE – Fast, Powerful, Free The online code editor for web apps. Powered by Visual Studio ...
git push前的checklist
有沒有多餘的代碼（可以優化、簡潔的地方）例如重複的地方太多，可以讓它變成一個function來調用。 各模版/各品牌 有沒有 debugger Network的XHR正不正常（接口調用） 避免hardcore寫法 （if ( id === 1396 ) { ….. }） 能整合的comp...
Array.from
Array.from([1, 2, 3], ( x , y ) => x + y); // 1, 3, 5 這裡的arrow function是map function，y就是index const nestedArray = [['😉'],{kind: "🐦"},['😇']] const a...