快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久
今日は、Webページを素早く表示するために、lazyloadやスプライトで使うblank.gif画像をdata URI化する手法に関して。モダンブラウザで表示に問題のない最短文字数とデコード処理にかかる時間を調査してみました。ちょっと技術的です。 blank.gifというと、古い人には「スペーサーかよ！」と思われるかもしれませんが、今でも画像のlazyloadに使ったり、スプライト画像のベースに使ったりと、意外と使うものです。 このblank.gifを「data URI化」するとページ表示が早くなるんじゃないかと思い、調査したりテストしたりしてみました。結論としては、次のようなものでした。 モダンブラウザで正しく表示されるblank.gifのdata URIは最短74文字の次の表現：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAA
Convert a Menu to a Dropdown for Small Screens | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you’re on a small screen (iPhone shown here) and click the dropdown, you get an interface to sele
はてなダイアリーに任意のiframeを貼り付ける - monthly gimite
2011/3/2追記: 2011/3/2以前にこのコンバータで変換されたガジェットが正しく表示されない不具合が起きていました。現在は修正済みです。→詳細 最近はiframeを使ったブログパーツがいろいろありますが、はてなダイアリーではiframeが使えません。 Google Gadgetを使えば任意のiframeを埋め込めるのですが、めんどくさいので、iframeを自動でGoogle Gadgetに変換するものを作ってみました。 iframe → Google Gadgetコンバータ ためしにGoogleドキュメントのプレゼンテーションを貼り付けてみました。 ニコニコ動画のサムネイルもこれを使って埋め込めますが、ニコニコ動画のGoogle Gadgetもあります。
自分的HTMLテンプレートの組み方 | Takazudo Clipping*
自分的HTMLテンプレートの組み方と例です。 まぁ、やるたびにちょこちょこ変えてるんですけど、2009年7月版ってことでざっくり説明。 空テンプレ モジュール一覧 サンプル ダウンロード用 エリアとモジュール 繰り返し使用される要素の塊をモジュールと呼び、エリアの中にこれを並べてページを作成するのを基本とする。 モジュールの開始要素には、「mod_moduleName」のようにclass（もしくはid）をつける。 モジュールやエリアのclass/idを起点に全てのスタイルを指定する。p、h1～h6、blockquote、table等、要素自体に直にスタイルを指定してはいけない。（グローバル変数を使っているような状態になってしまうため、以降考慮するのが面倒。リセット程度に済ます。） モジュールにスタイルを指定する際には、mod_moduleNameを起点としてスタイルを指定し、カプセル化を
jQuery でテキストエリア内の文字はどのメソッドで取得する？ | JavaScript | かたつむりくんのWWW
「jQuery でテキストエリア内の文字はどのメソッドで取得する？」と、ちょっと疑問に思ったので実験した備忘録です。 jQuery では、指定した要素の中の文字列は「 .text() 」、指定した要素の中のHTML は「 .html() 」で取得できます。また、input 要素（ type="text" ）の value については「 .val() 」で取得できます。 さて、では textarea 要素の中の文字列については、上記のすべてのメソッドで取得できそうなのですが、実際のところどうなの？というのが今回の疑問です。 問題 ここにテキストエリアとボタンが一つずつあります。 テキストエリアの初期値は「かたつむりくん」です。ボタンをクリックすると、「 .text() 」「 .html() 」「 .val() 」の三つのメソッドでテキストエリア内の文字列を取得し、下の定義リストの項目名の下の
簡単に引用マークアップ(<code>blockquote</code>要素)を生成できる-javascript-WEBデザイン BLOG
最近エントリーの更新を怠っているのは、javascript勉強中でなかなか時間が作れないでいるから（時間を作ろうとしていないのが本音）。何とかしてモノにしたいのだが、これまた思うように理解できていなく毎日振り出し状態。自分にはとても難しすぎる感じがしてきた今日この頃。把握するのにも本に記載されていることやWEBで紹介されていることなどを読んでもイマイチ。 やはり、簡単なスクリプトから理解しながら手打ちでタグを打ち込んで表示処理を経験していかないとダメっぽい。36歳には、なかなか手ごわすぎる。 最近凝っているものは、引用タグの<blockquote></blockquote>もの。 引用を簡単にできるjavascriptを作ろうかと思っていたら、やはり先駆者がいて、その方のスクリプトがスゴく、それを把握するのにも時間がかかっていたのもある。 今回はその方のjavascriptを紹介。 引用マ
Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTML、CSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptやCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 Windows、Macintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:
d.aql - scriptタグの中にJavaScriptを書く正しい方法
XHTMLでCDATA区間を使う。以上。 経緯 HTML4のscriptタグでJavaScriptをちょろっと書く時、中にHTMLタグがあるとダメという話が発端である。例えば、以下のようなのがダメだ。 <script type="text/javascript"> document.write('<p><a href="http://www.hikoboshi.org">hikoboshi.org</a></p>'); </script>ちなみに、ブラウザで動かせば多分動く。（試してないけど。）じゃあ何がダメかというと、HTMLの仕様的に。ちなみにこういう書き方をすると、多分HTML4でもXHTML1でもダメだと思われ。 そんな話をきっかけに、いろいろ調べた。 何故ダメか まずはHTML4のDTDを調べる。（別にstrictを選ばなくても良いんだけどとりあえず。） http://www.w
ポップアップウィンドウ用のスクリプト｜JavaScript::Bookmarklet Blog
ポップアップウィンドウ用のスクリプト 別ウィンドウでリンク先ページを開くときよく書くJavaScriptは以下のようなものです。 <a href="page.html" onclick="window.open(this.href)">リンク</a> でもこれだとメンテナンス性があまりよくありません。 そこでCSSを利用したページデザインのメンテナンスのような方法でこうしたリンク先を指定する方法です。ページのロードの終了時にJavaScriptでDOMを操作します。 まず、適当にpage1.htmlといったファイルを作っておいて、以下のHTMLを試して見てください。 <HTML><HEAD><TITLE>TEST</TITLE> <script language="JavaScript" type="text/JavaScript"> <!-- function doPopup() { i
登録は無料！広告無し！ブログにも最適なアクセス解析 | Research Artisan - リサーチアルチザン
簡単で分かりやすい高機能アクセス解析ツール 訪問者追跡、ヒートマップ、インサイト、セッションリプレイ、AI分析、チャットボット リサーチアルチザンプロは、簡単で分かりやすい高機能なアクセス解析ツールです。 初心者でも扱いやすく、サイトの訪問状況が視覚的に把握できるため、サイト改善の手がかりが得られます。 2010年にサービス開始、リサーチアルチザンプロはサイト運営に欠かせないサービスとして、あなたのサイトを強力にサポートします！
フォームに入力を促すメッセージを出力する JavaScript
■ フォームに入力を促すメッセージを出力する JavaScript input type="text" なフォームに最初から「ここに入力して下さい」みたいなメッセージを薄い色で表示させておいて入力を促すようなのありますよね。なんか、あれを、現実逃避気味に書いたので。 function inputDefault(elm, msg) { this.elm = elm; this.msg = msg; this.color = '#999999'; this.bgColor = '#F9FFF9'; } inputDefault.prototype.set = function() { this._cleared = false; this._defColor = this.elm.style.color; this._defBGColor = this.elm.style.background
最速インターフェース研究会 :: テンプレートエディタを作ってみた
こんなのを作ってみました。 http://la.ma.la/misc/tmpledit/ HTMLソースを貼り付けて、ページの構造をダンプすることが出来ます。 とりあえずどんな感じかわかるように、このBlogのアドレスを入れてあるので取得ボタンを押すと出て来る様になってます。XMLHTTPでソース受信してるので外部ドメインのソース取得は無理です。ローカル保存+IEの場合は外部ドメインのソースも解析できます。 こういう感じの作るやつ、と言えばわかりやすいかも。 http://d.hatena.ne.jp/kamioka/20050609/1118324980 まあ、これがやりたかっただけなのですが、ついでにCSSの編集もできるようにしてみました。CSS編集モードに切り替えると、タグ名とクラス名とIDを確認しながらプレビューしつつその場でCSSを編集できます。 CSS適用ルーチンはこれの丸パク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Time Series 2: Typographic Clock
http://xworks.org/blog/2007/01/01/000089
Styling <abbr> in IE
TinyMCE Javascript Content Editor by Moxiecode Systems AB
http://cefa.sakura.ne.jp/archives/2005/05/171713.php