Webアプリケーションで 60fpsを(極力)目指すKMC 春合宿2017で発表したトークです。
『フロントチューニンガソン 最速を目指すには』
11:10～ 課題ページの確認＆PageSpeed Insightsの実行目的：チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20～ 画像ファイルの最適化目的：画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
DOMContentLoadedとスタイルシートの読込み - ぶれすとつーる
DOMContentLoadedの発火とスタイルシートの読み込みは間接的に関係あるらしい MDNのDOMContentLoadedのページみてたら The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page). Note: Stylesheet loads block script execution, so if you have a <script> after a <link rel="styleshe
Flipboardのレイアウトエンジン - ワザノバ | wazanova
http://engineering.flipboard.com/2014/03/web-layouts/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Flipboardのレイアウトエンジンについては以前から興味はあったのですが、最近のネット企業にしては珍しくエンジニアブログがなかったのでわからずじまい。けど、今週からやっとエンジニアブログを始めたようです。 最初のレイアウトエンジンFlipboard Pagesは、各コンテンツ記事にあわせて、CSS3 + SVG + JavaScriptで平均90Kのサイズのレイアウトを自動生成。この時点ではレイアウトは20種でしたが、最新のエンジンDuploでは、2,000-6,000種あるとのこと。 サンプルページ（ブラウザで開いてサイズを変えるとレイアウト
WAH LAU! CSS CAN BE TESTED TOO!
This is a talk presented on 18 May 2012 at RedDotRubyConf, SG. ----- Your stylesheets are always in a mess. How can you fix this? The answer: TEST YOUR CSS! Then you will be able to refactor your CSS with confidence! Also presenting a Proof of Concept CSS Testing Framework, Cactus, which I have created - http://www.github.com/winston/cactus.
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
Web Components普及の夜明け！？Polymerを試してみた。 | OpenWeb
今、Google I/Oに来ています！ そこで参加したWeb Components in Actionというセッションで、以前から注目していたWeb Componentsについて、大きな動きがあったことを知りました。 Polymer.jsというライブラリにより、Web Components仕様の大部分が動作させられるだけではなく、様々なカスタムコンポーネントを既に利用可能とのことなのです！ ちなみに、Web Components仕様について多少詳しく知りたい方は、昔白石が書いたこちらの記事を参考にするといいんじゃないでしょうか。 Polymerのコードを取得 PolymerはGitHubでコードが公開されています。まずは適当な空ディレクトリに移動し、そのコードを手元にクローンします。 このコマンドを実行すると、Polymer本体だけではなく、依存しているいくつかのモジュールも同時にクローン
ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
CSSファイルをJSから非同期読込する方法
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 （iOS, Androidで動作を確認） (fun
input fileをCSSでキレイにしたい
この記事は12年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。結構この壁にぶつかってる人はいると思います。 textとかsubmitをキレイにしたのに、fileの参照ボタンが…！という思いをした人は多いでしょう。 というか僕がぶつかったので記事を書いているわけですが。 というわけで早速調べてみました。 一番参考になったのはこちらのサイト。 CSS2/DOM – Styling an input type=”file” 英語です。 なので、大事なとこだけ簡単に要約します。 ＜CSS＞ １．<input type=”file” />を「position:relative」で配置した要素（divとか）の中に配置する。 ２．「position:relative」で配置した要素（divとか）の中に子要素（divとか）を配置して、そこに<input />と<img />（実際表示され
消費者金融借り入りが有りでも住宅ローンは組めますか
近い将来、夢のマイホームを考えているのですが、その際にローンを組む予定です。私は過去に消費者金融から借入をした経緯があるのですが、そういったことがあっても住宅ローンは組めますでしょうか。 消費者金融を利用したからローンが絶対に組めないということはありません 確かに消費者金融の借入の情報は住宅ローンを組む際には有利には働きません。しかしこの借入情報は5年後に自動的に削除されるので、5年以上前に消費者金融を利用していただけで完済も済んでいるのでしたら特に問題はないです。 しかし、過去に消費者金融からの融資の返済に延滞があったことや、今も借入を行っている場合は住宅ローンの審査は難しい場合が多いですね。そもそも住宅ローン審査でチェックされることとしては、住宅ローンの借入が現状の収入の何倍の金額に該当するのかという点、収入に対しての返済比率がどうであるか。というところが見られます。そこをクリアしてい
jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dynamics.js
CodePen - Front End Developer Playground & Code Editor in the Browser
CSSに死を！これはJSerの叫び！ #kbkz_tech
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
https://qiita.com/nyarla/items/10f0f3e3c2116417df59
IDEA * IDEA
HTML5 Coding assessment test - jsdo.it - Share JavaScript, HTML5 and CSS
