Grunt.jsの紹介スライドです。package.jsonの扱いや、grunt自身の0.4.0対応が弱い部分が残りますが、数ヶ月前というところでご容赦くだされば、おおまかな概要を示しています。
ビルドプロセスの自動化で効率アップ
Grunt.jsの紹介スライドです。package.jsonの扱いや、grunt自身の0.4.0対応が弱い部分が残りますが、数ヶ月前というところでご容赦くだされば、おおまかな概要を示しています。
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
Sinatra っぽく簡単に JS で Dispatch できる micro_dispatcher.js のご紹介 - tokuhirom's blog
Sinatra っぽく簡単に JS で Dispatch できる micro_dispatcher.js のご紹介 https://github.com/tokuhirom/micro_dispatcher.js javascript 用のシンプルな Dispatcher にはいくつかあるが、どうも満足いくシンプルな実装がなかったのでつくった(というか Caym というオレオレ JS Framework の中にうまっていたものをとりだした)。 特徴としては、 Dispatcher だけのシンプルな実装(本体はやや冗長にかいていて、40行程度) sinatra 的なシンプルな記法 といったところでしょうか。 使い方は以下のとおり。 var dispatcher = new MicroDispatcher() dispatcher.register('/', function () { })
CBCNET | Topic » HTML5でのジェネラティブ・アート［Processing、JavaScript、チュートリアル］ （『ジェネラティブ・アート』の未刊の章）
HTML5でのジェネラティブ・アート［Processing、JavaScript、チュートリアル］ （『ジェネラティブ・アート』の未刊の章） 本記事はビー・エヌ・エヌ新社より刊行された「ジェネラティブ・アート」をスケッチするための解説書『ジェネラティブ・アート―Processingによる実践ガイド』の著者であるマット・ピアソン氏がCreativeApplications.Netでのスピンオフ企画として寄稿した原稿の翻訳版となります。「ジェネラティブ・アート」に興味がある方はぜひ本と合わせて御覧ください。 「ジェネラティブ・アート Processingによる実践ガイド」についてはこちらから。 This article is a Japanese translation of Matt Pearson’s Tutorial at CreativeApplications.Net, thanks
Gruntの概要と導入手順とメリット | 1000ch.net
2012/12/08 Gruntとは grunt: a task-based command line build tool for JavaScript projects もはや説明不要の可能性もありますが、 gruntがgrunt-cliへの移行(?)をしたこともあり、まとめてみました。 コマンドラインで使用するビルドタスクのツールです。 js(ほぼjson)の設定ファイル上に、concatやminifyといったようなタスクを定義し、 コマンドラインから実行します。言葉だけだとイメージ湧きにくいと思いますので、 使ってもらうのが一番と言い張って導入手順の説明に入ります。 npmからgrunt-cliをインストールする （nodeとnpmはインストール済み・・・よね？） npm install -g grunt-cli これで核となるCLIのインストールは完了です。 ターミ
Example of using Coffeescript classes and RequireJS (or Curljs or similar) for client side browser library
We want to develop a browser (client side only) library using Coffeescript, and in particular, we tend to use the "class" capability of Coffeescript quite a bit, in addition to pure functions. The library will be relatively large, so we want to start out using a well defined module pattern, but not to the point where we want a single coffee file for every coffeescript "class". We don't want to com
RequireJSにてBackbone.jsとMustache.jsを読み込む - 断章10100
RequireJS の2.0 から導入された shim を利用して簡単に読み込めたのでメモ。 最初にまとめを書く RequireJS で読み込めた html ファイルで script が一つで済むので嬉しい。 ディレクトリ構成 $ tree . ├── index.html ├── js │   ├── libs │   │   ├── backbone-min.js │   │   ├── mustache.js │   │   ├── require.js │   │   ├── underscore-min.js │   │   └── zepto.min.js │&
JavaScriptのテストツール「testem」が素晴らしいぞ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） JavaScriptユニットテスト一年生の私が、Nettuts+ のチュートリアルで知ったテストツール 「testem」のお陰で大変捗ったので是非お勧めしたく、ここで紹介してみます。 testem ってなに testem via GitHub : airportyh/testem Unit testing in Javascript can be tedious and painful, but Testem makes it so easy that you will actually want to write tests. 要するに、面倒なJSのユニットテストをより快適にしてみんなでハッピーにテスト書こうよ！というツールです。 testem自体はnode.jsベースで動作し、Jasmine/QUnit/Mochaに対応して
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
[JS]ページ全体やコンテンツ（画像や動画）をフルスクリーンで表示するだけのシンプルなスクリプト -BigScreen
指定したエレメントをクリックすると、ページ全体をフルスクリーンで表示したり、画像や動画をフルスクリーンで表示するシンプルで超軽量（1KB）のスクリプトを紹介します。 BigScreen BigScreenの特徴 BigScreenのデモ BigScreenの使い方 BigScreenの特徴 BigScreenはページ全体やコンテンツをフルスクリーンで表示するシンプルで軽量（minified:1KB）のスクリプトです。 対応ブラウザ Chrome 15+ Firefox 10+ Safari 5.1+ 動画コンテンツの表示は下記もサポートします。 Safari 5.0 iOS 4.2+ BigScreenのデモ デモはサイトのタイトル（BigScreen）のテキストをはじめ、画像や動画などをクリックすると、フルスクリーンで表示します。 BigScreenのデモ：動画 動画は右下のボタンをクリ
最後のscript tagの取得方法 - KAYAC Engineers' Blog
ブログパーツを作成する場合自身のscript tagを取得したい場合が多く、そのときの手法としては次の手法が使われることが多いと思います。IT戦記 とてもシンプルに自分自身が属する script 要素を取得 ただ、この手法は読み込んでいる別script内でappendChildしていると、自身のscript tagがうまく取得できない場合があるようです。 サンプル（IE7,FF2,safari3.1で動作確認） コードとしては単純に末尾のscript tagを取得しているだけですが、本来出力されるべき「second_script」ではなく、一つ前のscript内で追加している「append_script」が出力されてしまっています。 ここではコードを単純にするためsetTimeoutで検証していますが、XHR(XMLHttpRequest)やwindow.onload等の処理の流れを変える
micro-location.js がいかす - tokuhirom's blog
https://github.com/cho45/micro-location.js URL のクエリをいいかんじに書きかえる処理を JS でするためにいいかんじのライブラリをさがしていたのだが、URI.js はなんか大仰なかんじなので micro-location.js をつかってみた。 jQuery#extend と組みあわせることで、目的の処理は達成された模様。 l = Location.parse("http://example.com/?foo=bar&baz=boz"); # → Location l = l.params($.extend(l.params(), {lat: 4, foo: "hoge"})) # → Location l.href # → "http://example.com/?foo=hoge&baz=boz&lat=4"
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
テストやモックアップに。ダミーのHTMLソースを生成する·Fixie MOONGIFT
Fixieは自動的にWebコンテンツを生成するモックアップアプリ用ライブラリです。 Webデザインをしていたり、デザインやライブラリのデモサイトを作る際に必要になるのがダミーのコンテンツです。適当な文字でも良いですが、より本物らしいコンテンツを使ってみたいならばFixieを利用してみましょう。 それっぽいコンテンツが表示されているのが分かります。 実際のソースです。コンテンツがないのが分かります。 読み込むたびに記述が変わります。 Fixieはコンテンツ生成時に使ってほしいタグを用いて利用します。例えば「 」といった具合です。さらに他のタグを使う場合には中に「 」といった具合に記述していきます。そうすれば自動的にそのタグを使ったコンテンツが生成され、文字も適当に作成してくれます。 FixieはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIF
リストで画像と文字を縦中心に表示するjQueryプラグイン「jQuery List Vertical Align」 – poyosi.com
しょうもないことがとっても気になる@poyosiです、こんにちは。 以下の画像のように、リストで画像と文字を縦中心に並べるのは1行だけなら簡単なのですが、複数行入るかもしれないとなると急にやっかいになるレイアウトです。 というわけで、どうしてもこのレイアウトを実装したいという超レアなケース向けに、簡単に設置することのできるプラグインを作りました。 こういうのを実装したい もじ文字 もじ文字 もじ文字 「jQuery List Vertical Align」プラグインのダウンロード プラグインはこちらからダウンロードできます。 jQueryとプラグインを設置しよう <head>タグの中にjQueryとプラグインを設置しましょう。 画像をCSSの背景で表示させたい場合 画像付きリストを作る場合、背景を<li>タグにbackground設定して表示させる方法があります。 それと同じようにHTML
ふつうのformをつかいたい - はまちや２ - ニコニコ超会議2012
こんにちはこんにちは！！ はまちや２ (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう？ プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 本日のテーマ： 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…（はいはい） フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた！) (これで送信、と…) ※エラー：住所を正しく入力してください (え、なんで！？) ※住所は全角で入力してく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地獄のJavaScriptセキュリティ
jquery - Clear Text Selection with JavaScript - Stack Overflow
jquery mobile require.js and backbone
globalオブジェクトを取得する - Qiita
