puppeteerはchromiumがインストールされる github.com Note: When you install Puppeteer, it downloads a recent version of Chromium (~170MB Mac, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API. 200MBくらい取られるので容量に余…

nuxtで初期データを非同期に取得する mountする前にasyncDataを発火して非同期にデータを取得したものをdataにマージされる。 export default { components: {}, validate({ params }) { return /^\d+$/.test(params.id); }, async asyncData({ app, route }…

HTML5 Conference 2018に少し参加した 11月25日（日）三連休三日目に、HTML5 Conferenceが開催された。 場所は北千住近くの東京電機大。総勢1000人を超える人が来てたんじゃないかと思うとかなりでかいカンファレンスだなと思う。 前日、前々日にNode学園祭…

Node学園祭2018が開催されました 11月23, 24日の連休で、Node学園祭2018が開催されました。 nodefest.jp 発表については、@hiroppyさんの資料リンク集から見てもらった方がはやそう。 blog.hiroppy.me 会場 会場となったYahoo!JAPANは2階にビル受付、18階に…

Safari/IEでwebpって使えるっけ？ と思った時に見るサイト。 Can I use... Support tables for HTML5, CSS3, etc 例えばwebpだったら上記の画像のようになる(2018年11月現在)。 Can I use... Support tables for HTML5, CSS3, etc 「safari/IEは壊滅状態だけ…

Node.jsのv6ってasync/await使えたっけ？ みたいなことを思ったときに見るサイト。 Node.js ES2015/ES6, ES2016 and ES2017 support 基本v8以降が使われているし、v10がLTSだけど、 たまにレガシーでv6で動いてる場合にぶつかって、 あれ？v6ってes2015使え…

redux-devtools-extension react/reduxを書いてる人だったらchromeに入れておいた方がいい拡張機能の１つ。 github.com reduxのstateがこんな感じで追えるので便利。 airbnbの例。 devToolsExtension is deprecated devToolsのExtensionを利用するには、redu…

formのsubmitはpreventDefaultで止まらない index.html <form method="POST" action="/"> <label for="fullname">氏名</label> <input type="text" name="fullname"/> <button type="submit" onclick="onClick()">送信</submit> </form> index.js function onClick(e){ e.preventDefault(); console.log("止まってくれない"); } return false;する…

workbox Service Workerをライトに使えるようにするためのもの。 developers.google.com PWA化も可能だし、簡単にhtmlや画像などのリソースをキャッシュさせることができる。 使い方 １. sw.jsを用意する。 /* global workbox */ workbox.precaching.precach…

現象 ansibleでvagrantで立てているvmにsshが繋がらない。 ➜ ansible git:(develop) ✗ ansible all -i hosts/local -m ping 192.168.99.100 | UNREACHABLE! => { "changed": false, "msg": "Failed to connect to the host via ssh: vagrant@192.168.99.100:…

現象 対策 font-sizeが1.2em以上だと拡大しない。 font-size: 1.2em; input formを小さいままにしておきたい 無理やりtransformして小さくしても問題なさそう。 transform: scale(0.9); もしくはそもそもページ全体で拡大させない。 user-scalable=no;

こういう感じの表示にする 画像をスライドしたら良いポイントでスナップさせる。 scroll-snapを使う <div class="slide-container"> <div class="slide"> <img src="/test1.jpg"> </div> <div class="slide"> <img src="/test2.jpg"> </div> <div class="slide"> <img src="/test3.jpg"> </div> <div class="slide"> <img src="/test4.jpg"> </div> </div>

概要 【LIG・エアークローゼット・DMM】3社のフロントエンド開発最新事情 dmm.connpass.com 聞きに行ったのでメモ。 グラフィック表現に関して、デザイン領域に踏み込んで開発を行える制作体制の魅力（LIG） フロントエンドエンジニアとデザイナーとの距離が…

WebP？ Googleが作ったjpgより強い画像圧縮。 こちらに詳しく書かれていたので参考にした。 developers.google.com blog.ideamans.com 対応ブラウザ chrome, androidはもちろん、firefox, edgeでも使われそうな感じ。 Can I use... Support tables for HTML5…

GAE？ Google App Engineのこと。Google Could Platformのサービスの１つ。 Google App Engineとは？ Google App Engine とは? | App Engine | Google Cloud この記事には書いてないけど、Node.jsも標準でサポートされている。 詳しいドキュメントはこちら。…

ログ収集も死活監視もない リリースしたことに満足して，ログも収集せず死活監視もしていなかった。そんなときに発生した502エラーに気づけずに、サービスを１日くらい止めてしまった。 少しでも原因がわかるようにクライアントのログをstackdriverで収集し…

GAEが落ちていた GAEでホスティングしてる趣味開発サービスが気がついたら落ちていた。原因不明でよくわからない。 これらと同じ現象かもしれないけど、原因はどれも不明っぽい。 uyamazak.hatenablog.com stackoverflow.com とりあえずやった対処だけメモし…

Mistel Barocco買った 左右分離型キーボード Mistel BarrocoのUS配列LEDつきの茶軸を、秋葉原で16800円で購入した。Mistel Keyboard | Keyboards なんでこれにしたか？ もともと会社ではErgodox ezを使ってるんだけど、$325くらいなので高い。バロッコはその…

概要 趣味で外向けに公開するようなWebサービスを作ったことがなかったので、一念発起して２ヶ月でinstagramの画像からランチを探せるサービスを作ってみた。 イメージgif らんらんランチ www.lun-lun-lunch.com なぜ作ったか？ ランチやディナーのお店を探…