フロントエンドパフォーマンス向上ルール - Speaker Deck
Transcript Leading Edge Development 勉強会 フロントエンドパフォーマンス向上ルール はじめに ▪Webサイト⾼高速化 / パフォーマンス改善の重要性 【Aberdeen Group Report】 ・Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンする。 ・Googleのページ反応が0.5秒遅くなると、アクセス数が20%ダウンする。 ・⼀一般的に表⽰示スピードが1秒遅くなると、 PVは11%、コンバージョンは7%、顧客満⾜足度度は16%ダウンする。 【Jakob Nielsen】 ３つの重要限界 ・⼼心理理的・感情的な違和感を感じないのは0.1秒まで ・思考の流流れが妨げられないのは1秒まで ・注意⼒力力を維持する限界の時間は10秒まで はじめに ▪パフォーマンス改善の⼿手段 【改善箇所】 ・パフォーマ
Webアニメーションを高速化するために知っておくべき10のこと（前編）
Webアニメーションを高速化するために知っておくべき10のこと（前編） 斉藤 祐也（株式会社リッチメディア） アニメーション／トランジションは身の回りに当たり前にあるものです。 むしろ普段の生活では「0」が「1」に変化するものの方が珍しいでしょう。 アニメーション／トランジションはデジタルなWebに対して自然な変化を提供する大切なツールです。 今回はそんなアニメーション／トランジションをより自然にスムーズに動作させるために知っておきたいことを前・後編の2回に分けて紹介していきます。 アニメーションを高速化する理由 アニメーションは先ほど書いたように普段の生活にも存在しています。だからこそ、我々はスムーズではないアニメーションを見つけるのが得意です。 アニメーションに限定した話ではありませんが、FacebookのShane O’Sullivan氏が、ページロード後のレンダリングパフォーマンス
javascript - CSSをいじくる : 404 Blog Not Found
2007年03月12日02:00 カテゴリLightweight LanguagesiTech javascript - CSSをいじくる JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっているサイトの例は徳保さん趣味のWebデザインぐらいしか見かけません。 というわけで、習作を兼ねて、style属性ではなくCSSをまるごと書き換える関数を作ってみました。 CSS Manipulation via JavaScript http://www.dan.co.jp/~dankogai/css/css_handlers.html 解説 動作確認はFirefox 2, Opera 9, Safari, Mac IE5で行っています。Safariでのみ
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』 2006年10月01日- Transcorners ? Cornerus Pride is there *scared* Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn. CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。 mootoolsをフレームワークとして使用しています。 次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。 大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。 この
CSSとJavaScriptで影付きの角丸ボックス要素を作る:phpspot開発日誌
Transparent custom corners and borders, version 2 | 456 Berea Street It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. CSSとJavaScriptで影付きの角丸ボックス要素を作る。 次のような２重線と影がついたボックスのサンプルが公開されています。 HTMLは次のようにシンプルな形に出来るようです。 <div class="cbb"> <h1>Transparent custom corners and borders, v
JavaScriptとCSSを使ったクールなメッセージBOX:phpspot開発日誌
Crossfade DIV Demo For a long time, people looking to introduce animations to their website needed to resort to a third-party plugin such as Flash or Java applets to get the job done. JavaScriptとCSSを使ったクールなメッセージBOXのデモ。 ライブラリはscriptaculousを使用。 スクリプト自体は非常にシンプルで、単純にsetIntervalでタイマーをまわしてscriptaculousのEffect.fade / Effect.appear で各DIVを切り替えているだけのようです。 デモサイト上のソースをみれば、プログラミングの知識がない方でも実装できそうです。 WEBデザイン時のちょ
Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTML、CSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptやCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 Windows、Macintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:
ブログへ簡単に追加できるJavaScript製サイドノート
付箋紙のような感じのサイドノートをブログの本文中に追加できます。背景色の変更なども自由自在で、非表示にするのも再表示させるのも簡単。JavaScriptとCSSを使っています。 ダウンロードと使い方や例は以下のサイトから。 arc90 lab : tools : Unobtrusive Sidenotes ダウンロードはこちらから http://lab.arc90.com/tools/sidenote.zip 上記サイトの「How Do I Use It?」に使い方が詳しく書いてあります。 実際の例はこちら。 arc90 lab | tools: Sidenote Demo http://lab.arc90.com/tools/sidenote/ 左上の「Hide Sidenotes」をクリックするとサブノートを非表示にできます。本文中に、脚注やちょっとした豆知識みたいなのを入れておきたい
Niceformでエレガントなフォーム生成:phpspot開発日誌
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip
川o・-・）＜2nd life - JavaScript や CSS の query に自動で最終更新時間をつける Rails Plugin
最近いろいろなサイトで <script src="/javascripts/foo.js?1142509269" type="text/javascript"></script>や <script src="/javascripts/bar.js?v=2.3" type="text/javascript"></script>の記述を見るようになってきました。また CSS でも <link href="/stylesheets/foo.css?1142509300" media="screen" rel="Stylesheet" type="text/css" />といった記述もちらほら見かけます。 これは JavaScript や CSS を更新しても、ブラウザキャッシュが読み込まれているため、更新された JS ファイルなどがロードされない場合への対策です。上記のような最終更新時刻やバージ
S5: A Simple Standards-Based Slide Show System
S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well. The markup used for the slides is very simple, highly semantic, and completely accessible. Anyone with even a smidgen of familiarity with HTML or XHTML can look at the markup and figure out how to adapt it to their particular needs. A
Drag & Drop Sortable Lists with JavaScript and CSS
Update 4/26: tested and working as expected in IE6, Firefox 1.0, and Safari 1.3, unless otherwise noted. In Web applications I've seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. The most heinous require server roundtrips for each modification...boo. T
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.
25 Code Snippets for Web Designers (Part2)
https://www.snap.com/about/spa1B.php?source=pub-2311827-www.wordpress.com&campaign=spa_bsblogo!dapper.wordpress.com
CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
ACCESS R - HTML,DHTML,CSS,JavaScript,CGI,アクセス