はてなブログにおけるページ表示速度改善の取り組みについて - Hatena Developer Blog
こんにちは、id:hakobe932です。はてなブログではユーザ体験の改善のために、ページ表示速度を向上させるための様々な取り組みを行っています。このエントリーでは、はてなブログで行っている、ブラウザキャッシュの活用、JavaScriptのページ最下部での読み込み、JavaScriptの圧縮、という3つの取り組みについて解説します。 ブラウザキャッシュの活用 同じ内容のJavaScriptやCSSを、ページを表示するたびにダウンロードすると、余分なHTTPリクエストが発生しますし、読み込み時間がかかります。 ブラウザのキャッシュを利用できれば、余分なリクエストを減らすことができます。はてなブログでは、なるべく長い間ブラウザにキャッシュを保存するために、JavaScriptなどの一部の種類のファイルのレスポンスに、以下のようなヘッダを指定しています。 $ curl -I http://hat
Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ - ふろしき Blog
「HTML5 Advent Calendar 2013」の24日目の記事です。 Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようというアイデアが存在感を持ち始めています。それは「Web標準」です。 そこで今回、Web標準側でできるWebアプリのパフォーマンス改善について、掻い摘んで紹介します。全てを説明となるとキリがないので、キーワードを中心とさせて頂きます。最近になって、結構実用化が進んできているので、悩んだ時には試してみる価値はあるでしょう。 1. リソースを先に読み込む linkタグにてURLなどを指定することで、これから先に読み込ませる可能性が高いWebページのリソースを予め読み込むWeb標準があります。ニュースサイトでは次のページ
すごい便利になった！javascript入門の基礎知識と小技まとめ
作成：2013/12/24 更新：2014/11/01 Web制作 > サイト構築中にちょっとした動きをのせたいとき、どうすれば良かったのか何度も調べ直さないといけないことがあります。今回はJavaScript で初心者の方でもすぐ活用できるように、使用頻度の高いリファレンスと基本知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ できること １．リファレンス スクリプトの書き方／基礎知識 ２．スクリプトの記述 ３．文字列／特殊文字 ４．演算子 ５．オブジェクト ６．プロトタイプ ７．イベント ８．変数 ９．if文 １０．配列 １１．連想配列 １２．正規表現 １３．デバッグ できること １．リファレンス JavaScriptは開発環境の準備がほぼ不要で、コピー＆ペーストだけで、動くものができてしまいます。他の言語だとそう簡単にはいきません。サ
IPアドレス・クッキー・JavaScript・UAなどを使わずユーザーを個別に追跡する方法
by Vernon Swanepoel ウェブサイトのユーザーがどれぐらいページを見てくれているのか、訪問頻度はどれぐらいなのかといった情報を追跡するのにはクッキー(Cookie)やJavaScriptなどが使用されますが、そうやって追跡されるのがイヤだということでCookieを受け入れないように設定したり、JavaScriptをオフにしているという人もいるはず。しかし、それでもユーザーを個別に追跡する方法があります。 Lucb1e.com :: Cookieless Cookies http://lucb1e.com/rp/cookielesscookies/ これはオランダ在住でコード・セキュリティ・ネットワークを愛しているというlucb1eさんが明らかにしたもの。手法としては新しいものではなく、多数のサイトで使われているにもかかわらず、そのことを認識している人はほとんどいないというも
JavaScriptでアニメーションを書く初歩の初歩
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
マイクロテンプレートエンジン jQuery Tempura | それなりブログ
jQuery Tempura は jQuery 依存の簡単な Templating Engine です。 この記事のものや jQeury Plugin Registry などを調べたのですが、 自分の要望を満たすものが無いので、オレオレにしちゃいました。 普通のHTMLファイルの上から、正しいHTMLを維持したまま使える {{foo}} や <%= foo %> といったテンプレ変数を埋め込まなくて良い。AngularJS のようにHTML属性値でテンプレ変数とリンクする。 これは一言で言えば「HTMLがまんま残るのは良いことだ」という利点であるが、「別のテンプレートエンジンと併用が可能」という側面もある。 必要な部分だけを更新する 更新の度に、テンプレ全体を再生成しない。 テンプレ変数が足りなくても空白になったりしない、前の状態が残る。 なので、イベントハンドラを生かし易い。大体のケース
Learn from heatmap.js examples
Example that demonstrates on-point radius configuration so you can visualize points with different impact radi. Basics Get Visitor Heatmaps. No coding required. Our awesome partners offer out of the box visitor heatmaps so you don't have to reinvent the wheel! ( plus, there's always a FREE plan to start with!)
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方Read less
JavaScriptベースのEPUB 3リーダーが相次いで公開「Readium.js」と「Epub.js」。いずれもオープンソースで
JavaScriptベースのEPUB 3リーダーが相次いで公開「Readium.js」と「Epub.js」。いずれもオープンソースで Webブラウザを用いJavaScriptで実装をしたEPUB 3リーダーが相次いで公開されました。1つはEPUB 3を策定したIDPF（International Digital Publishing Forum、国際電子出版フォーラム）が後押しするEPUB 3リーダーのリファレンス実装開発プロジェクトのReadiumが発表した「Readium.js」、もう1つは、米Berkeley大学による「Epub.js」です。 どちらもgithubでオープンソースとして公開されています。 電子書籍のフォーマットとして策定されたEPUB 3は、HTML5/CSS3などのWeb標準がベースになっています。そのため、EPUB 3リーダーはWebKitなどのWebブラウザのレ
Webアプリケーション開発に使えるJavaScriptフレームワーク·ComponentJS MOONGIFT
ComponentJSはWebアプリケーション開発用のMVC対応JavaScriptフレームワークです。 ここ数年JavaScriptのフレームワークが幾つも登場していますが、今回紹介するのはComponentJS、HTML5のリッチWebアプリケーション開発用のJavaScriptフレームワークです。 デモのログイン機能。 ビジュアルデバッガーが売りの一つです。 ComponentJSは階層化されたコンポーネント、MVC、イベント駆動型、状態管理などが特徴になっています。他のライブラリへの依存がなく、jQuery UIやSencha Touchなどとも連携できます。さらにビジュアルデバッガーという強力なライブラリが提供されています。 ComponentJSはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS – @attrip
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
JavaScriptでうっかりやってしまいそうなこと色々
こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか？ String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
Groovy + SWT + WebKit + jQuery Mobile でデスクトップアプリケーションをつくる | hiromasa.another :o)
最近のいわゆる OS 上で直接動作するデスクトップアプリも、iPhone の影響かぴょこぴょこ動くのが多くなってきた気がします。 Linux のアプリでもこの手のがありますが、だいたいは WebKit + Python でやっている模様。 じゃー、Groovy でもやってやろうじゃないかというのがこの企画でありまして、でもって結果 SWT + WebKit はなかなか強力な感じな気がします。 🙂 どういう風にするかというと、まずウインドを作成して WebKit のコンポーネントをぺたっと張ります。 でもって、Groovy 側から処理したいタイミングがあれば、JavaScript 経由で処理結果を WebKit の HTML に描画。 WebKit 側から Groovy を呼びたければ、これまた JavaScript を経由して処理をして値をもらう、みたいな感じです。 Groovy 側では
[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
東京Node学園2012
2012年11月18日(日) 10:30-17:30(予定) 後夜祭18:00- 法政大学 市ヶ谷キャンパス 外濠校舎 東京Node学園祭について スマートフォンの増加により現実になりつつあるC10K問題や、WebSocketにより実現されつつあるリアルタイムWeb。これらへのソリューションとして世界中から注目されているのが、サーバサイドJavaScriptプラットフォームのNode.jsです。 このたびNode.js日本ユーザグループは、npmの作者であり、かつNode.jsの新たなゲートキーパーであるIsaac Schlueter氏、NodeConfの主催者であるMikeal Rogers氏、NodeJitsuのCharlie Robbins氏、最も多くのnpmモジュールを提供する開発者であるJames Halliday氏を招聘し、2回目の「東京Node学園祭」を開催します。
中年コーダーが教える本当にクリーンなコードの作り方 - 「リーダブルコード」の書評に代えて : 404 Blog Not Found
2012年09月18日15:00 カテゴリ書評/画評/品評Art 中年コーダーが教える本当にクリーンなコードの作り方 - 「リーダブルコード」の書評に代えて リーダブルコード Dustin Boswell / Trevor Foucher 須藤功平・ 角征典 訳 [原著:The Art of Readable Code] 遅まきながら出版社より献本御礼。 基本的に、以下のスライドを一冊の本にすると本書になる。 クリアなコードの作り方 - How to make clear code なのに「リーダブルコード」を読了した時の気持ちと、共訳者による以上のスライドを見た時の気持ちは180度違った。前者ではとても嬉しくなったのに、後者ではとても悲しくなったのだ。 なぜそうなったかを書くことで、本書に何が書かれているのかを紹介することにする。 クリアって cat /dev/null > dirty.
リアルタイム描画に対応したJavaScriptテンプレートエンジン·Tmpltr MOONGIFT
TmpltrはHTML/JSON/CSSを組み合わせたJavaScriptのテンプレートエンジンです。 Webアプリケーションを作る際にテンプレートエンジンとしてチェックしたいのがTmpltrです。HTMLだけでなく、スタイルシートにも考慮されているのが特徴です。 左上がJSON、中央がHTMLテンプレート、下がCSSになります。それらを組み合わせた結果が右側の表示になります。 フッターです。{{#fotter}}〜{{/footer}}といった区切りを設けています。 スタイルや構造を変更すればリアルタイムに右側のコンテンツが変更されます。 スタイルの内容はheaderタグの中にstyleとして出力されています。 Tmpltrは単純な文字列出力の他、配列やハッシュでの表示にも対応しています。元データの内容が書き変わると同時にレンダリング結果がリアルタイムに修正されるのが特徴です。 Tmpl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
zeroclipboard - Google Code
remora.cx