はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
第6回 イベントハンドラから脱却しよう
この記事は会員登録で続きをご覧いただけます申込は簡単3分！ 今すぐ会員登録（無料） 会員の方はこちら 有料会員（月額プラン）は初月無料！ 詳しくはこちら ▼日経クロステック有料会員になると… オリジナル記事がすべて読める 専門雑誌7誌の記事も読み放題 雑誌PDFを月100ページダウンロードできる
第3回 Command Line APIとその活用、各タブからのデバッグ方法 | gihyo.jp
Firefox 3とFirebugで始めるJavaScript開発 第3回Command Line APIとその活用、各タブからのデバッグ方法 さて、前回はConsole APIの解説とそれを利用してのデバッグについて簡単な解説を行いました。 今回は、Firebugに実装されているもう1つのAPIである、Command Line APIや、各タブの機能を利用してのデバッグ方法について解説をしていきたいと思います。 Command Line API Command Line APIはFirebugのConsoleタブから利用することができます。ただし、グローバルですでに利用されている名前については利用できません。例えばPrototypeやjQueryが利用されているページのConsoleでは$()関数はそれらのライブラリのものが実行されます。 利用できるAPIは以下の通りです。 $(id
Firebug の monitorEvents unmonitorEvents がバグってる件とそのバグ修正方法 - IT戦記
以下のエントリーを見て FirebugのmonitorEventsが動かない - Enjoy*Study で、実際はどうなんだろうと試してみた。 ちなみに monitorEvents とは Firebug のコンソールで >>> monitorEvents(document.body) と打ち込むと document.body にあがってきた全てのイベントをモニタリングできる >>> monitorEvents(document.body, 'click') と打ち込むと document.body にあがってきたクリックイベントをモニタリングできる >>> monitorEvents($('target')) もちろん document.body 以外もできる そんな機能 たしかに、現在の Firebug 1系 ではこれがバグっててまったく機能してない！ なんで今まで気がつかなかったんだ
7 Go – 7 Go’s Guide to Practical Positivity
Let’s Start with a Little About Me Hello readers! My name is Rimora Kalen, a 21yearold Content Creator from Nashville, Tennessee. As someone who is a true logo enthusiast, I spend a lot of time exploring how design can shape the way we see the world. I enjoy giving realworld examples to bring design theories to life, and today I…
Styling File Inputs with CSS and the DOM // ShaunInman.com
The Last Rocket An 8-bit game for iPhone, iPad and iPod touch Minted of course. In partnership with File inputs (<input type="file" />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. Bef
outofhanwell.com
We’re getting things ready Loading your experience… This won’t take long.
DOM オブジェクトとメモリリーク: Days on the Moon
IE でのメモリリーク ちょこちょこと紹介されているので知っている人も多いと思うが、IE には DOM ノードに絡んだメモリリークの問題がある。これに関しては Microsoft 自身の記事である「Understanding and Solving Internet Explorer Leak Patterns」に詳しいが、簡単にいえば DOM ノードオブジェクトに関する循環参照を作ると、IE を終了させるまでそのオブジェクトが解放されないというものだ。記事によればメモリリークには以下のようなパターンがあるという。 1. 単純な循環参照 ある DOM ノードオブジェクトのプロパティをたどっていくと自分自身に行き着く場合。以下のようなパターンが考えられる。 element.property == element element1.property1 == element2, element2
[JS]MicrosoftからJavaScriptのメモリリーク検出ツール
MicrosoftのヨーロッパチームからJavaScriptのメモリリークを検出するツール「JavaScript Memory Leak Detector」のベータ版がリリースしました。 JavaScript Memory Leak Detector JavaScript Memory Leak Detectorは、Windows+IE専用のツールで、ダウンロード・インストールは以下の手順になります。 下記の「download link」からファイルをダウンロード。 Installation ファイルを解凍して、「JSLeaksDetector.msi」をダブルクリックして、インストール。 インストール時は、IEは終了しておく。 インストールが完了したら、IEを起動。 IE7の設定方法 [表示] - [エクスプローラ バー」 -[js memory leak detector]をチェック。
jQueryのテスティングフレームワークQUnit (でぃべろっぱーず・さいど)
jQueryのSubversionリポジトリにtestフォルダがあって、jQuery自身のテストが納められていたのですが、そこで使われているテスティングフレームワークがQUnitとしてトップレベルのプロジェクトになったようです。 QUnit - jQuery JavaScript Library これを使うと簡単にjQueryプラグインのテストコードが書けちゃいます。 使い方は以下の通り。 提供されているメソッド test( name, test ) : nameにテストの名称、testには実行するテストを関数の形で渡します。 module( name ) : テストの途中で、テスト対象のモジュールや関数の目印を付けたいときに使います。nameにはモジュールの名称を渡します。 ok( state, message ) : stateがtrueならOK、falseならNGという判定になります
getBoundingClientRect()を使って要素の絶対座標を求める - 素人がプログラミングを勉強していたブログ
追記：どうやらnowa サービス終了のお知らせで既出だった模様。 ページが見つかりません | Mozilla Developer Networkを使って簡単に、絶対座標を得ることができる。 offsetParent辿っていってoffsetWidth足したりしなくていいので手軽。 function getElementPosition(elem){ var position=elem.getBoundingClientRect(); return { left:Math.round(window.scrollX+position.left), top:Math.round(window.scrollY+position.top) } } getElementPosition(document.links[5]) getBoundingClientRect()で返ってくるプロパティは、小数にな
Mike asks the CSS Guy about a scrolling trick with background images (Ask the CSS Guy)
Mike asks the CSS Guy about a scrolling trick with background images Mike writes: Check this out: http://econsultancy.com/reports.Scroll up/down... whaaaaat? :) How was this done? Answer: fixed background images. Let's look at some examples. Images For the basic effect, start with two same sized images, with a slight difference. For my example, I chose this color image and made second version of i
[JS]button, span, anchorをスタイリングするチュートリアル
jQuery UIを使用して、button, span, anchorをスタイリングするチュートリアルをFilament Groupから紹介します。
Scroll your HTML with jquery.scrollable.js
05/22/2008 - Tero Piirainen, download version 0.11 Features I want to take a bunch of HTML nodes and do following things with them make those items scrollable horizotally or vertically decide how many items are visible at once scroll elements with mouse, arrow keys and mousewheel (requires mousewheel.js) make navigational buttons without programming have programmatic actions: next, prev, nextPag
JavaScript differences in Firefox and Internet Explorer
Blog of Adrian Anttila, containing my thoughts, comments and questions. While working on the Vertigo.com redesign, I had the opportunity to work with some of the new ASP.NET AJAX controls. We decided to use a richer interface than static HTML, which gave me the opportunity (read: frustration) to support Firefox and Internet Explorer clients. Over the last several years, most of my web develop
JsDoc Toolkit メモ
JsDoc ToolkitはJavaScriptソースに記述されたJavaDoc風なDOCコメントを収集しHTML化するツールである（perlで記述されているJsDocとは別物であることに注意；こちらはRhinoで記述され、必然的にJavaにもアクセスしている。Rhinoなのでこれ自体があらかたJavaScriptで記述されており、ソース自体の解読もより容易である）。 DOCコメント DOCコメントは「/**」で始まり「*/」で終わる；途中の行頭の「*」および空白系文字は無視される。DOCコメントは最初の行の説明文（省略可）と以降１つ又は複数続く、「@」で始まる「タグ」、とで構成され（各ブロックは次のタグまで又はDOCコメント末尾まで、途中の連続する空白系文字は空白１字にまとめられ、またHTMLタグの記述も可）、JsDoc Toolkitはこれらを回収分類しHTML化関数（テンプレートとも
教科書に載らないWebアプリケーションセキュリティ 第1回 ［これはひどい］IEの引用符の解釈 − ＠IT
XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます（編集部） 小さな話題が面白い 皆さん、はじめまして。はせがわようすけと申します。 「教科書に載らないWebアプリケーションセキュリティ」ということで、Webアプリケーションのセキュリティに関連する、普段あまり見掛けないような小さな話題を取り上げていきたいと思います。 セキュアなWebアプリケーションを実現するために、開発者の方だけでなく、Webアプリケーションの脆弱性検査を行う方々にも読んでいただきたいと思っています。重箱の隅を楊枝でほじくるような小さな話題ばかりですが、皆さんよろしくお願いします。 さて第1回は、Internet ExplorerがHTMLを解釈する際の引用
GoogleがホスティングしてるjQueryなどのJavaScriptライブラリを使う方法 - F.Ko-Jiの「一秒後は未来」
そういえばGoogleがjQueryをホスティングしてたよなぁということを思い出して調べたのでメモ。 2009年1月14日時点でGoogleがホスティングしているライブラリは以下の8種類です。 jQuery (1.2.3, 1.2.6) jQuery UI (1.5.2, 1.5.3) Prototype (1.6.0.2, 1.6.0.3) script.aculo.us (1.8.1, 1.8.2) MooTools (1.11, 1.2.1) Dojo (1.1.1, 1.2.0, 1.2.3) SWFObject (2.1) Yahoo! User Interface Library (YUI) (2.6.0) YUIもホスティングされてます。 それぞれのライブラリは直接 script タグで読み込むこともできますし、GoogleのAJAX API Loaderを利用して読み込むこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Yahoo! UI Library
