uu59のメモ | 「槍があればやり直せる」をQを使って表現する
槍があればやり直せるんだ ヱヴァンゲリヲン新劇場版：Q / EVANGELION 3.0 YOU CAN (NOT) REDO. エヴァQ面白かったですね。 槍があればやり直せるし、槍がなければやり直せない。これをQ.jsを使って書くとこんな感じになります。 function 槍ゲット() { // 重い処理 // 失敗する可能性もある } var 槍 = Q.fcall(槍ゲット); Q.when(槍).then( function(){ alert("やり直せる"); }, function(){ alert("やり直せない"); } ); 2012-12-27Railsとは 2012-12-22今年作ったものたち 2012-12-14遠隔操作事件の各警察による検証結果が出揃ったのでまとめた 2012-12-12vimでファイル名をData URIに置換する 2012-12-09Git
jQueryで既存サイトの画像を「なんちゃって遅延ロード」する方法
jQueryを使って、既存サイトの画像を遅延ロードっぽく見せる方法、いわゆる「なんちゃって遅延ロード」について紹介します。 昨日エントリーした「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。 とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧れます。 ということで、既存サイトの画像を遅延ロードっぽく表示させる方法を考えてみました。 １．「なんちゃって遅延ロード」と称する理由 「なんちゃって遅延ロード」と称する理由は、ページをスクロールしたときの表示は遅延ロードされたようにみえますが、最初から遅延ロードの設定をしていないimg要素はページロード時に画像が先に読み込まれてしまうためです。 下のスクリーンショットは、遅延ロードの設定有無によ
javascript - めんどうな作業がわずか1クリックに!新人プログラマーが知らないと一生後悔するブラウザーを使ったHTML生成 : 404 Blog Not Found
2011年12月14日15:34 カテゴリTipsLightweight Languages javascript - めんどうな作業がわずか1クリックに!新人プログラマーが知らないと一生後悔するブラウザーを使ったHTML生成 いいえ、使いません。 めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成 | Webロケッツマガジン 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ 僕たちプログラマーは、ちょっとしたHTML生成にDHTMLを使います。 DEMO TSV JSON JSON to HTML function (json){ var tbody = $('<tbody>'); $.map(json, function(row){ var tr = $('<tr>'); $.map(row, function(c
:visitedセレクタを使わない閲覧履歴の抽出方 - karasuyamatenguの日記
このタイトル見ると抽象的でピンとこないがこれを見てほしい： これ見たときはビビった。全部的中。 これはたった30行のJavaScriptで実装されている。 http://oxplot.github.com/visipisi/visipisi.html このリンク先のページの下の「Do the magic」というボタンを押すと自分の履歴が見れる。 各サイトの画像がブラウザにキャッシュされているかどうかをロード所要時間から推測している。 :visitedセレクタによる訪問履歴漏れはブラウザベンダーが対応しているようだけど、画像のロードスピードはユーザの体感スピードを損わずに隠すことはできないような気がする。画面には素早く見せて、JavaScriptのAPIにはゆっくり見せるなんてことしたら、何が壊れるかわからないし。 もしかしてブラウザの訪問履歴漏れの阻止ってのは不可能なのかもしれない。
やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト
やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト2011.11.14 14:00 mayumine ｢One Milionth Tower｣は高層建築が社会に与えてきたストーリーをミニドキュメンタリーとして紹介するプロジェクト。 ｢One Milionth Tower ｣の注目すべきところは、世界初の、完全にHTML 5と WebGL、Javascriptだけで作られた、高度なインタラクティブなサイトになっているところです。 3Dのビルや写真（そして音も）のドキュメンタリーグラフィックスは、すべてWeb GL（2D/3Dグラフィックスをウェブブラウザだけで表現できるAPI）で表現されています。 さらに｢One Milionth Tower｣では、｢Popcorn｣と呼ばれる、WebのAPIとHTMLのビデオ属性を統合する特殊なJavascriptツール
PhantomJSからCSS Lintを使う
CSS LintのCLIはNodeやRhinoから使うようになっているので、Windowsだとちゃんと動くようにするまで結構面倒です(勿論ちゃんと動かせるようにはなります)。また、僕の場合はそもそもCSS Lintしか必要としていないので、Nodeを入れるのはちょっと大げさな気もします。そこでPhantomJSからCSS Lintを使うスクリプトを書いてみました。 var fs = require("fs"), f = phantom.args[0], css = fs.read(f); if (phantom.injectJs("csslint.js")) { var i, r = CSSLint.verify(css), l = r.messages.length; if (l > 0) { for (i = 0; i < l; i++) { var e = r.messages[i]
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
JavaScriptの文字列を反転する１０の方法とそのパフォーマンス - 風と宇宙とプログラム
はじめに JavaScriptで文字列を反転する１０の方法を（無理矢理？）思いついたので、ちょっと簡単に紹介したい。また、それぞれについて、各ブラウザでパフォーマンスを測定してみたので、その結果も合わせて載せる。 文字列のStringオブジェクトには、部分切り出し(substring, slice)や置換(replace)、連結(concat)など豊富な機能があるのに、反転(reverse)機能はない。Arrayのreverseはあるのに、Stringのreverseがないのはどうしてなのだろうか。 各ブラウザとそのバージョンは以下の通り： Chrome Firefox Opera Safari IE 13.0.782.112 m 6.0 11.50 5.1(7534.50) 8.0.7600.16335 rev01: C言語的発想 空の配列を作って、そこに元の文字列の後ろから１文字つづ入
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
[JS]画像はそのままで、カラートーンや不透明度のアニメーションを加えるスクリプト -MyFadeOverImage
画像自体をPhotoshopなどでレタッチする必要なく、カラートーンや不透明度の変更をフェードのアニメーションで加えるjQueryのプラグインを紹介します。 My Fade Over Image デモページ [ad#ad-2] My Fade Over Imageの実装 カラートーンや不透明度は、簡単に設定できます。 MyFadeOverImageの基本書式 $("#demo1 img").MyFadeOverImage({ normalAlpha:0.9, hoverAlpha: 1, normalToneColor:"#000" }); normalAlpha 通常時の不透明度 hoverAlpha ホバー時の不透明度 normalToneColor 通常時のカラートーン 実装も簡単で、「jquery.js」と当スクリプトを外部ファイルとし、jQueryのセレクタで画像を指定し、不透明
インストールされてる全てのパッチを一括でアップデートできるTomblooパッチ | 圧縮電子精神音楽浮遊構造体
2011年7月29日金曜日 インストールされてる全てのパッチを一括でアップデートできるTomblooパッチ Firefox アドオン Tombloo のパッチです。 概要Tombloo にインストールされている数々のパッチの アップデート状況を調べて更新という作業がめんどくさいので、 ボタン一発でできないかと作ってみたパッチです。 更新するために最初は raw リンクの URL を登録する必要がありますが、 それが済めば、ボタン押すだけで すべてのパッチのアップデートを一括で済ませられます。 パッチ (Download):tombloo.extension.update.patches.js インストール:上のパッチリンクを 右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール。 ※直接右クリックからインストールできない場合: できない場合
Seamless Responsive Photo Grid | CSS-Tricks
Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. You don’t care if they are resized, but they should maintain their aspect ratio. Like this: Nice and seamless Ideally we keep it pretty chill on the markup, like: <section id="photos"> <img
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/
ネットマネーラボ
PageSpeed Insights
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
Schweizer Radio und Fernsehen (SRF)
HTML5 Boilerplate: The web’s most popular front-end template
Tombloo-patches/models.register.bitly.js at 7d2906f7d21d0f1161a9c50994a8717f3a75f99b · asiamoth/Tombloo-patches