Named parameters with flow.js
```js const constructOAuthAPIUrl = ( { path, redirectUri, state, scopes, }: { path: string, redirectUri: str...
React hook use useEffect as useState callback
`useState` doesn't have callback function and it's asynchronous, so if we need to monitor when the state got changed, we need to combine ...
How to replace moment.js
Found this repo: https://github.com/you-dont-need/You-Dont-Need-Momentjs Replacement: - [date-fns](https://github.com/date-fns/date-fns...
How to add self-hosted fonts in Gatsby
This note is copied from https://dev.to/iangloude/4-steps-to-self-hosted-fonts-in-gatsby-aj2 1 - place your font files in `src/static/fo...
Fix marked.js and highlight.js
## Story My blog had some highlighting issue when rendering Ruby class. I finally found a time to fix it. The problem is I was useing o...
Rails 用 webpacker 時 compile 很慢而且很吃 memory？You're probably a over-packer lol
長話短說，就是 webpacker 會 compile **所有** 在 `japascripts/packs` 資料夾底下的東西，所以只要沒有要在 layout 裡面 include 的 file 就不要放在 packs 下面，這樣就會變快了。 Copy paste f...
Implement algolia autocomplete with rails
```js // app/javascripts/application.js const algoliasearch = require('algoliasearch/lite') const autocomplete = require('autocomplete....
Integrate Uppy with Rails and ActiveStorage and use google drive direct upload
We're going to integrate Uppy with "upload from Google Drive" feature with rails backend and ActiveStorage, in this case we are going to ...
Using marked.js with hightlight.js in rails to provide github flavored markdown to github style html
In this example, I'll use webpacker to import highlight js and marked js and css file, you can use cdn as well. `app/javascripts/appli...
Import css from npm module in rails with webpacker
I use highlight.js In `app/javascripts/styles.js` ```js import 'highlight.js/styles/github.css'; ``` And then add to layout ```erb <...
Vue computed v.s. methods
computed 會 cached methods 不會 computed 回傳一個值，methods 不一定 https://cn.vuejs.org/v2/guide/computed.html
deploy vue to github page
兩個不錯的方式： 1. 用 push-dir + webpack 做 https://medium.com/@codetheorist/vue-up-your-github-pages-the-right-way-955486220418 2. 用直接寫好的 plug...
JS 處理 number 和一些簡單的 helpers
這一陣子開發前端比較多，少了很多 rails 的 helper 可以用，光是要簡單的 floor 一個 number 到特定的 precision 就得自己寫 function 實作，實作時就還得考慮各種 edge case (WTF...)，最後還是偷懶用了 lodash...
React native layout with flexbox
flex 基本上就是填充 https://facebook.github.io/react-native/docs/height-and-width.html#content flexDirection 就是主要的方向，如果是橫向就是 row 縱向就是 column, ...
React stateless component
幾個重點 1. 可以不用使用 ES6 的 class 2. State 不存在 presentational component 裡面，變成 pure function，沒有 react lifecycle 3. 沒有 react lifecycle 代表不能快速 ha...