React Patterns
來解析一個奇怪的pattern…我只能說我很少看過，所以覺得很怪。 const Width = ( { children } ) => children( 500 ); 這裡表示 width是一個function 這個function的參數也是一個function 就是children，...
科技
潮到出水不得不用的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...
ES6 Practice
看到一些不錯的寫法給它抄下來 "1|2|3|4|5|6|".split('|').reduce((result, val) => (`${result}${result && val ? ' | ' : ''}${val}`), '') onClick={() => this.setState({ ...
lodash常用方法
其實不是常用方法，是我在專案上看到過的方法。 _.sortBy(collection, [iteratees=[_.identity]]) https://lodash.com/docs/4.17.11#sortBy _.uniq(array) https://lodash.com/docs/4.1...
react debug时的问题
在react的debug时，如果遇到像这种 ` ` 的地方，会造成下面的程式码没有高亮提示…这时候如果在大括号旁边加上双引号的话就可以了 原因应该是因为单引号会造成HTML判断结束在这边 ( >> HWD C.M Chen ) 但這樣寫又有可能造成其它問題 所以還是換firefox吧… 這是chro...
提靈女王
看好久終於看完三集，看完覺得有種如釋重負的感覺，不過…這結局實在讓人有點傻眼就是了。看完雖然有部份覺得感動，但也有些哀傷。感動的是凱爾希的媽媽到最後竟然變成一個正常的媽媽了，然後卡琳還活著…哀傷的是凱爾希原本的夥伴都不記得她了。等於完全的改寫歷史了… 所以花了三本的時間寫了一堆人物，這些人物的結局呢...
React 的state更新延遲
我發現react的state更新，假如在setState之後馬上console.log() 那個state，它還是舊的state，但是在render的時候就是新的了。從上面這個可以測試… 不過如果是要靠著state印出畫面的話就沒關係，畢竟在render上能拿到新的state…....
動畫名單
灰與幻想的格林姆迦爾 青春豬頭少年不會夢到兔女郎 工作細胞 果然我的青春戀愛喜劇搞錯了 遊戲 3 人娘 女神異聞錄 4 Fate/zero 刀劍神域外傳 Gun Gale Online 博多豚骨拉麵團 龍王的工作！ Guilty Crown 罪惡王冠 Just Because！ 歡迎來到實力至上主義...
刪除Array中重複的值
最簡單的方法： const uniq = [...new Set(array)]; 本文參考這一篇文章 https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array...
array方法
pure的 Array.from() reduce map concat slice ※slice不包含最後一個 impure的 splice sort copyWithin pop 回傳的不是array的： entries 回傳boolean的 some (提供callback includes ...
git常用指令
修改上次的commit訊息 git commit --amend -m "xxxxxxxxx" git 刪除本地分支 git branch -D feature/TP-999 參考來源 Git: Delete a branch (local or remote) 清空目前修改的檔案 git rest...
肥宅也要談戀愛（三
阿肥腦袋好像進入debug模式，想要找出被這麼稱呼的原因－ 她怎麼會知道我是魔法師，而且還包莖？我們之前才見過一次面欸…而且… 這時，女神的手在他的臉前面左右晃，「唷呼，回神喔，怎麼了呢魔法師？」 「喔喔喔！好，妳好妳好，請問…怎麼稱呼呢？」阿肥馬上回過神來。 「叫我羽心就好了」 「喔喔羽心嗎，好，...
在chrome上模擬JavaScript的hover
方法一： var event = new MouseEvent('mouseover', { 'view': window, 'bubbles':true, 'cancelable':true }); document.querySelector('.luna-cute').dispatchEven...
rem計算方式
先看root size。 查看到html的 font-size是 10vw。 大小以iphone5為基準 因為iphone5的寬為320 故320 / 10 = 32。 可以利用線上工具來換算。在photoshop上的字型若是14，就在Pixels中輸入14 photoshop最好調整成320寬，得...
ios開發相關
https://km.nicetypo.com/doc/bc76185c203a5334e9daadf725af3be9 https://hk.saowen.com/a/ba965995919b5f04ed8bcb7ccc5b4af1e95792e9769fd92a8d36881d1fad8683...
Destructuring assignment
const name = 'cute'; const surname = 'luna'; var sayHello = function({ name, surname }) { var cute = 'fuck you'; var fuck = 'fuck your dick'; console....
用react寫的網站好多呀
歡迎補充~ https://www.businesstoday.com.tw/ https://popchart.co/ https://www.easyname.com/en https://www.axios.com/...
React Life Cycle
constructors Do create any fields (variables starting with this.) initialize state based on props received set initial state if not using class proper...
JavaScript 一些小咚咚
記得看不懂的都丟到babel上面試試 任何數字加上 undefined 都會是 NaN 空字串是falsey. （The values false , null , 0 , "" , undefined , and NaN are falsey） 驗證是否為空字串 Tips to Level Up ...
學英文的Youtube頻道
Anglophenia 英國腔很好聽 English with Lucy 推，英文標準而且講得速度應該算慢的。 Vanessa Van Edwards 各種主題 Learn ENGLISH with SPEECHES (English Subtitles) – YouTube...
前端技術：前端相關Youtube頻道
The Net Ninja 還不錯，教程都還蠻新的，還有一個還沒播完的剛好是我很有興趣的（React, Redux & Firebase App Tutorial #1 – Introduction）不過就是腔調上有點聽不太慣。 有React、Vue、Node.js、REST API 、...
JavaScript Closure Sample
閉包的解釋： 1. 外面讀不到裡面，裡面讀得到外面 2. 每個函式可以有自己的私有變數，跟其它的函式名子可以一樣（會有容易搞混的缺點 3. 閉包：它本來抓得到什麼值，就能抓到什麼值，不論它是在哪裡執行的（可能return 給外層的函式了） 參考文章： A Simple Explanation of ...
計算總和的代碼
這是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...
Visual Studio Code
需要把畫面放大就按【ctrl + 】 在react裡面沒有emmet (例如打p.lunacute 按tab會自動產生)的話把 .js 改成 .jsx Ctrl + P 可喚出任意門，輸入檔名到達想到達的檔案。（範圍會限制當前專案資料夾，很方便） stop multi cursor editing ...