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...

Wayne

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...

Wayne

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...

Wayne

Rails 用 webpacker 時 compile 很慢而且很吃 memory?You're probably a over-packer lol

長話短說,就是 webpacker 會 compile **所有** 在 `japascripts/packs` 資料夾底下的東西,所以只要沒有要在 layout 裡面 include 的 file 就不要放在 packs 下面,這樣就會變快了。 Copy paste f...

Wayne

Implement algolia autocomplete with rails

```js // app/javascripts/application.js const algoliasearch = require('algoliasearch/lite') const autocomplete = require('autocomplete....

Wayne

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 ...

Wayne

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...

Wayne

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 <...

Wayne

Vue computed v.s. methods

computed 會 cached methods 不會 computed 回傳一個值,methods 不一定 https://cn.vuejs.org/v2/guide/computed.html

Wayne

deploy vue to github page

兩個不錯的方式: 1. 用 push-dir + webpack 做 https://medium.com/@codetheorist/vue-up-your-github-pages-the-right-way-955486220418 2. 用直接寫好的 plug...

Wayne

JS 處理 number 和一些簡單的 helpers

這一陣子開發前端比較多,少了很多 rails 的 helper 可以用,光是要簡單的 floor 一個 number 到特定的 precision 就得自己寫 function 實作,實作時就還得考慮各種 edge case (WTF...),最後還是偷懶用了 lodash...

Wayne

在網站上加上音效

```js var sound = document.getElementById("msgSound"); if (sound) { sound.play(); } `...

Wayne

React native layout with flexbox

flex 基本上就是填充 https://facebook.github.io/react-native/docs/height-and-width.html#content flexDirection 就是主要的方向,如果是橫向就是 row 縱向就是 column, ...

Wayne

React stateless component

幾個重點 1. 可以不用使用 ES6 的 class 2. State 不存在 presentational component 裡面,變成 pure function,沒有 react lifecycle 3. 沒有 react lifecycle 代表不能快速 ha...

Wayne