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

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

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

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

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

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

小さいんですが、1年に1回くらい同じことでハマっている気がするのでメモ。 よくテキストボックスを全選択させるためにJSでこんなコードを書いたりする。 var content = document.getElementById('content'); content.focus(); content.selectionStart = 0; …

E2Eのテストを走らせて手元だと通るけど、CIだと通らない、みたいなことがあって、原因を調べたら、cookieまわりが原因だった。 cookie や LocalStorage を利用しているアプリで、事前に「ページのcookieが発行されているか」「LocalStorageにデータが書き込…

柿の種を食べています。きたけーです。 社内で OSS版Drone.io が使われており(refs: OSS版 Drone.io を社内で使い始めてる話 - Qiita )、SauceLabs 、Protractorと連携させてE2Eテストを走らせてみました。 これによりPullReqがでたタイミングで、各種OS、ブ…

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