2012年4月24日のブックマーク (9件)

  • 可愛いツールチップを実装したjQuery&CSS3のデモ「Sweet Tooltip」:phpspot開発日誌

    Sweet Tooltip a jQuery & CSS3 Tooltips ? Webstuffshare ? Learn and share. The simplest harmony. 可愛いツールチップを実装したjQuery&CSS3のデモ「Sweet Tooltip」 次のような可愛いモダンなデザインのツールチップの実装デモが公開されています。 目立たせたい時や注目してもらいたい場合に使うと効果的ですね。通常のデザインも入っているようなので使い分けられそうです ファイルをDLすればデモのHTMLCSS, JSが入っているので変更して容易に利用できます 関連エントリ もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 簡単コードで実装&カスタマイズできるツールチップ実装jQueryプラグイン「Poshy Tip」 シンプルなツールチップ実装ができるj

    kkeisuke
    kkeisuke 2012/04/24
  • ページ内のアイテムのピクセル数をメジャーで測れるChrome拡張「MeasureIt!」:phpspot開発日誌

    ページ内のアイテムのピクセル数をメジャーで測れるChrome拡張「MeasureIt!」 2012年04月23日- Chrome ウェブストア - MeasureIt! ページ内のアイテムのピクセル数をメジャーで測れるChrome拡張「MeasureIt!」 画面上のアイテムをドラッグ&ドロップで大体の幅、高さについて測ることが出来ます 具体的な画像のピクセル数はインスペクタに頼るとして、これ大体どのぐらいだろうっていうところを計測する際にちょっと便利ですね ツールバーからワンクリックで気軽に測れるところがお手軽でよいです WEBデベロッパーな方はいれておくと便利な拡張かも 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeiPhoneシミュレーター

    kkeisuke
    kkeisuke 2012/04/24
  • [AS3.0] フリックする | にゃあプロジェクト

    ひよこちゃん :piyo: をフリックしてみるよ。 :bouzu: なんちゃってフリックだけどな! :beer: :caution: 要 Flash Player 9 以上 package { import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Point; import character.Piyo; [SWF(backgroundColor="#EEEEEE", width="600", height="200", frameRate="30")] public class Main extends Sprite { // プロパティ private var piyo:Piyo; private var clickPoint:P

    [AS3.0] フリックする | にゃあプロジェクト
    kkeisuke
    kkeisuke 2012/04/24
  • http://matsu4512.jp/blog/2012/04/23/easeljs03/

    kkeisuke
    kkeisuke 2012/04/24
  • Meteor.js - naoyaのはてなダイアリー

    http://www.meteor.com/ で公開された Meteor.js を少し触ってみました。TechCrunch なんかでも話題になっていましたね。 Meteor.js は JavaScript によるウェブアプリケーションフレームワークですが、クライアントサイドでもサーバーサイドでもない、"Isomorphic" なフレームワークです。 コンセプトとしていくつか特徴があるのですが、その最たるものは "Reactive Programming" で、モデルやセッションなどのストレージを更新するとその更新内容がリアルタイムに、そのアプリケーションを開いている全クライアントに伝わるようなアプリケーションを簡単に作ることができます。 この辺は実例を見るのが早いです。 http://www.meteor.com/examples/leaderboard ここにある動画では、あるブラウザで

    Meteor.js - naoyaのはてなダイアリー
    kkeisuke
    kkeisuke 2012/04/24
  • フロントエンドがやっておかなきゃいけない、iPhone(スマホ)向けサイトを軽量化・高速化するための必須項目をメモ。 | Mnemoniqs Web Designer Blog

    Webサイトの待ち時間の80%はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C

    kkeisuke
    kkeisuke 2012/04/24
  • 【JavaScript】~~ で小数の切り捨て(ビット演算子 ~2つで0方向へ切り捨て) at softelメモ

    問題 これ、なんですか。この、にょろにょろ。 var y = ~~(x/2); 答え ビット否定演算子(Bitwise NOT Operator)を2つ~~使うと、小数の切り捨てができる。 >>> ~~(0.8) 0 >>> ~~(1) 1 >>> ~~(1.2) 1 >>> ~~(1.5) 1 >>> ~~(1.9) 1 >>> ~~(123.456) 123 便利なのが、0へ向かって切り捨ててくれるところ(絶対値で切り捨て)。 >>> ~~(-123.456) -123 >>> ~~(-456.789) -456 素直に正負を見て関数を使い分けるとこうなるところ。長くて嫌になりますね。 //xが数値の前提で x = (x > 0) ? Math.floor(x) : Math.ceil(x); それが、~~なら、ほら!このとおり。 //xは何でもいいですよ♪ x = ~~x; 括弧をつ

    【JavaScript】~~ で小数の切り捨て(ビット演算子 ~2つで0方向へ切り捨て) at softelメモ
    kkeisuke
    kkeisuke 2012/04/24
  • JavaScript圧縮・難読化の定番ツール「/packer/」

    JavaScript圧縮・難読化の定番ツール「/packer/」を紹介します。直感的で動作も軽量です。 /packer/ 「定番」と書いた理由は、はてなブックマークでブレイクこそしていないものの、コンスタントにブクマされているためです(2012年4月22日現在で310ブックマーク)。 使い方は、圧縮・難読化したいソースコードを上のテキストエリアにペーストして、「Pack」をクリックするだけです。 圧縮・難読化されました。 圧縮率は下のテキストエリアの右下に表示されます。 オプションは「Base62 encode(英数字のみのエンコード)」と「Shrink variables(変数名の圧縮)」の2つが用意されています。このオプションを利用しないと空白・改行を除去するだけの動作になるので、圧縮率を上げたい場合はオプションを利用しましょう。 jQuery1.7.2.js(262285バイト)で2

    JavaScript圧縮・難読化の定番ツール「/packer/」
    kkeisuke
    kkeisuke 2012/04/24
  • MortonOrder+八分木による衝突判定ライブラリ | Blog in a well

    ご無沙汰しております、F22愛好会です。前回の更新から2ヶ月近く経ってしまいましたが、なんとか生きています。 最近ちょこっとThree.jsというライブラリを使ったWebGLに手を出しています。どんなものを作っているかというと、特にゲームなどの形にはなっていないのですが、こんな感じです。 サンプル1:指定空間内を球体がランダムに移動して跳ね返ったりする(座標[0,0,0]から[99,99,99]までの空間内の球体はマテリアルが黒色に変化) サンプル2:指定空間内を球体が重力の影響を受けながら移動して跳ね返ったりする。(Spaceキーで球体追加、Enterキーで球体をランダム加速) 見ての通り、まだThree.jsの基を確認しているといった段階です。 ところで、この手の大量のオブジェクトの当たり判定を行う時、総当たりで距離を確認するともの凄い処理量が要求されるようになってしまいます。100

    kkeisuke
    kkeisuke 2012/04/24