frontend

2016年に使った&来年使いそうな JavaScript 関連のものと所感

2016年に使った&来年使いそうな JavaScript 関連のもの 以下のカテゴリでなんとなく書いてみます。去年と比べて大きく変わらないかんじです。動きの早かった 2, 3年前から、年々、動きはゆっくりになってきているというのが個人的な印象。 トランスパイラ ビ…

Vue.js 2.0+Spring Bootでサーバーサイドレンダリングを実現するサンプルを書いた

Vue.js 2.0+Spring Bootでサーバーサイドレンダリングを実現するサンプルを書いた github.com Vue.js 2.0がサーバーサイドレンダリングに対応した話は Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした - kitak blog に書いた通り…

既存のコードの理解が捗るChrome DevToolsの使い方

jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れよ…

Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした

数日前に、Vue.js 2.0 が発表された ( Announcing Vue.js 2.0 – The Vue Point – Medium )。Server Side Renderingに対応するそうなので、pre-alphaではあるけれど、単純なサンプルを動かしつつ、軽くコードリーディングした。対象のVue.jsはこの記事を書い…

ウェブフロントエンドのパフォーマンス改善のひとつの日常

ひとつの日常 この間、仕事でちょっとしたハイブリッドアプリ(ネイティブアプリのWebViewの上で動くWebアプリ、とここでは定義しておく)をリリースした。 そのアプリにはタブがあって、(当たり前だが)タブでコンテンツが切り替わる。 リリースして3日くらい…

高頻度で発生するブラウザイベントのイベントリスナー呼び出し最適化

ページのスクロールやウィンドウのリサイズによって、JavaScriptで表示を変える、という話はちょくちょくある。例えば、パララックスみたいなやつをイメージしてもらえばいいだろう。 ウェブフロントエンドエンジニアが「ううっ...」となる瞬間だ。スクロー…

Chrome DevTools でコストの高い描画処理を探す流れ

先日、Chrome DevTools の「Enable paint flashing」を使う - kitak.blog で、Chrome DevTools の「Enable paint flashing」を使って不要な描画処理を検知する方法を紹介しました。 不要な描画処理は行わないほうがいいに決まっていますが、必要と思われる描…

Chrome DevTools の「Enable paint flashing」を使う

Chrome DevToolsに「Enable paint flashing」という機能があって、画面で描画が行われた箇所をハイライト表示してくれます。 DevTools を立ち上げて、下のペインの「Rendering」タブを選択するとあります。下にペインがない場合、右上の「︙」から「Show con…

クリティカルCSS 雑感

t32kさんの Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL の記事を読んで、クリティカルCSSが気になったので少し調べてみました。それの雑感。 クリティカルCSSとは 一言でいうと、ページのATF(Adove The Fold)の表示に必要なスタイルシ…

jQuery非依存の画像の遅延読み込みライブラリまとめ

画像の遅延読み込みといえば、jQueryプラグインのjquery.lazyloadが有名だが、最近はプロジェクトでjQueryやjQuery互換のライブラリを使わないことが多い。 そういったプロジェクトで使うためにjQuery非依存のライブラリをいくつか見つけたのでまとめておく…

script要素のdefer属性周辺のBlink(Chromium)の実装の調査

script要素にdefer属性を設定すると、ドキュメントのパース完了後にスクリプトが実行される。スクリプトの実行によってパーサがブロックされないので最初の表示が早くなるという利点がある(いまだったら、パース完了後ではなく、その都度非同期で実行するasy…

img要素のsrcset属性周辺のBlink(Chromium)の実装の調査

仕事で、高解像度デバイス対応、いわゆるRetina対応のためにimg要素のsrcset属性をつかおうとして、細かい仕様が気になって調査しました。 例えば、以下のように記述した場合、デバイスピクセル比が1のときはbnr_1x.png, 2のときはbnr_2x.pngが取得・表示さ…

JavaScriptのプロパティの上書きを検知する

必要になった状況の説明は割愛するのだが、オブジェクトのプロパティの上書きを検知したくなった。 コードで説明すると、事前に次のように書いておいたものが window.Foo = { alpha: function () { } }; 後からこうされる。 window.Foo = { beta: function (…

npm run-script のお供に parallelshell

最近関わっているプロジェクトでは タスク・ランナーをnpm run-scriptでラップ - Weblog - Hail2u.net に書かれているように、npm run-script でタスクを呼び出し、実際のビルドは gulp でおこなう、という形にしている。 そうなると、プロセスを同時に動か…

現場のプロが教えるHTML+CSSコーディングの最新常識 を読んだ

「現場のプロが教えるHTML+CSSコーディングの最新常識」を読んだ。 現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4作者: 大竹孔明,小川裕之,高梨ギンペイ,中江亮,株式会社まぼろし出版社/メーカー: エムディエヌ…

とあるプロジェクトでGruntからGulpに乗り換えた

とあるプロジェクトでGruntからGulpに乗り換えたので、雑にまとめておく。 主観もけっこうあるので、そんなもんなのかくらいで読んでください。 乗り換えの理由 Gruntのメンテナー行方不明問題をあちこちで耳にするようになった。 プロジェクトのGruntの設定…

wiredepで依存しているファイル一覧を取得する

こんにちは。鍋をたべました、きたけーです。 wiredepというツールがあって、プロジェクトで使っているbowerパッケージのメインに指定されているファイルの一覧を取得できます。 gruntやgulpのプラグインとしてHTMLのhead要素に自動でscript要素を埋め込むた…

chrome-remote-interface を試してみた

こんにちは。昨日はボウモアを呑みました。きたけーです。 node-webkitで作ったアプリのデバッグのためにchrome-remote-interfaceを試してみたのでメモ。 chrome-remote-interface cyrus-and/chrome-remote-interface · GitHub は、Remote Debugging Protoco…

node-webkitでデスクトップ通知を表示する

こんにちは。明日は給料日です。きたけーです。 node-webkitでデスクトップ通知を表示する術を知ったのでメモ(というかドキュメントに普通に書いてあります)。 仕様はブラウザのWebNotification http://www.w3.org/TR/notifications/ のAPIに近いです。 Noti…

bower.jsonで各パッケージのmainプロパティを上書きする

こんにちは。うどんを食べました。きたけーです。 taptapship/wiredep · GitHub とかを使うとbowerでいれたパッケージのbower.jsonから、HTMLにscript要素を追記してくれるので便利です(この場合、各script要素のsrc属性はbower.jsonのmainプロパティで指定…

<input type="file">で選択できるファイルをディレクトリのみに制限させる術

こんにちは。レバニラ炒めを食べました。きたけーです。 HTMLのファイルを選択するフォーム部品で、選択できるファイルをディレクトリのみに制限させる方法を知ったのでメモ。 こんなかんじでdirectory属性をつけます。 <input type="file" name="dirname" webkitdirectory directory /> フォームで送信するときは、ディレク…