#261 Testing JavaScript with Jasmine - RailsCasts
Railsデベロッパーの多くはアプリケーションのRubyコードをテストすることの重要性を理解しています。しかし多くの場合JavaScriptについてはブラウザでアプリケーションを実行してエラーを確認するだけの手動テストで済まされてしまいます。ウェブアプリケーションがますます複雑化しクライアント側に多くの機能を持つようになる中で、JavaScriptコードを自動的にテストする方法を持つことが望まれます。今回のエピソードでは、そのための一つの方法を見ていきます。 対象のアプリケーションを以下に示します。標準的な注文フォームで、クレジットカード番号を入力するテキストフィールドを持っています。このフィールドにクライアント側で動作する検証機能を追加して、フィールドがフォーカスを失うときに入力された番号が検証されるようにしようと思います。 完全なクレジットカード番号の入力検証機能を追加するわけではあり
javascript - でデータを圧縮/伸張する : 404 Blog Not Found
2009年03月02日09:00 カテゴリLightweight Languages javascript - でデータを圧縮/伸張する これでもまだ税率が高かったので。 404 Blog Not Found:javascript - Yet Another Base64 transcoder Base64の利点は、なんといっても「固定税率」、それも比較的「税率が低い」ことにあります。Paddingなしなら、3バイトが4バイトにencodeされるので、33%ということになります。これに対してencodeURIComponentの税率は、UTF-8基準で最高で3倍、UTF-16基準で最高で4.5倍にも達します。 ついに負の税率、すなわち税還付を実現しました! まずはデモを。 Inflated + Base64-Decoded (Original): chars / bytes Deflate
Kanasan.JS jQuery コードリーディング #2 に参加したので復習とコードの解説をする - mollifier delta blog
2010/09/26(日) に京都で Kanasan.JS jQuery コードリーディング #2 が行われた(告知ページ)。みんなで jQuery のソースコードを読む勉強会で、僕は初めての参加。事前に前回分も読んでおいたので準備万端、気合いを入れて参加した。 で、今回の内容なんだけど、642行目から1205行目まで読み終えた。全部で6240行なので全体の5分の1ぐらい終わったかな。今回は普段外部から使うものじゃなくて、jQuery 内部で使う関数のところが多かった。あとは jQuery マニアしか使わないようなメソッドとか。そんなわけで使い方がイメージしにくいところもあったので、その中でわかりにくかったとこを復習して挙げておく。 あと、今回読んだ jQuery のバージョンは 1.4.2。 前提 こんな感じでメソッドを追加してるところがある。 jQuery.extend({ queue
javascript のチルダ, indexOfの時に使えるよ〜とか - コンドルが飛んでいる。
チルダはビット反転演算子らしく, 整数をビット反転させると符号を反転させて1引いた数になるらしい. よって, -1 -> 1 -> 0 で, indexOf の返り値が if文で普通に使えるじゃん〜 みたいなコードをどっかで見かけた. 今日急に思い出して, 忘れそうなのでメモ. if (!~str.indexOf("foo")) {}
JavaScriptの"Lazy Loading"とレンダリング時間を検証する | ゆっくりと…
先日、YSlow が 2.1.0 にバージョンアップされました。リリースノートを見ると、主に次の2つが目に付きます。 img、link、script、iframe タグ、あるいは JavaScript の Image() オブジェクト等において、空の src や href 属性をチェックし減点する新たなルール 「画像に対する空の src は避けよ」 を追加した。 head タグ内に動的に script タグを挿入する Deferred Script は、レンダリングを妨げず、ページ内の他要素と平行にダウンロードされるため、ルール 「JavaScript はページの最後に」 の減点対象としないロジックを追加した。 1. は、空の src があった場合、ブラウザがこれを現在のページと解釈し再度リクエストしてしまう結果、トラフィックが倍になってしまうという問題に対するペナルティーとして追加されま
新参の超軽量JavaScript非同期ローダー3種を徹底比較 | ゆっくりと…
JavaScriptの読み込み・実行は、それより下にある画像など外部リソースの読み込みと表示をブロックするため、「ページ読み込み時間を短縮するJavaScriptローダー：LABjs」 や 「CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議」 で紹介したように、多数の JavaScript ローダーが開発されてきました。 これらのローダーは、「非同期スニペットのスタート ガイド – Google Analytics」 に代表される、script 要素を直接 DOM に挿入する方法が主流となっています。またそのタイプは、単一のスクリプト・ファイルを対象とした小規模なものと、Head JS、LABjs、ControlJS などに代表される、複数ファイルの依存関係をハンドリングする機能をもつものに大別されるかと思います。 後者のタイプは最小でも3KBytes
CoffeeScript基礎文法最速マスター｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
CoffeeScript基礎文法最速マスター はじめまして。新人のtek_kocです。 今回は巷で話題のCoffeeScriptの文法をまとめてみました。 1年近く前に流行った基礎文法マスターシリーズにCoffeeScriptがなかったので、勉強も兼ねて同形式で書いてます 。 JavaScriptを使っている方はこれをざっくり眺めてCoffeeScriptへの移行を検討してくれればなと思います。 まだ網羅しきれていないですが、これを読めばCoffeeScriptに乗り換えることができるはずです。 間違いや、足りない箇所などがあれば、是非コメント等で指摘してください！ バージョン 現時点で最新の1.0.1を対象にします。 ０．概要 CoffeeScriptとはJavaSciprtにコンパイル可能な言語です。 RubyやPythonなどに近い記述が可能で、JavaScriptの開発をより効率的
今日から始めるCoffeeScript - KAYAC Engineers' Blog
こんにちは。毎年花粉症になりかけている飯塚です。 最近のNode.jsの普及などによってサーバサイドJavaScript界隈が盛り上がっています。 そんなホットなJavaScriptをラクにかつエレガントに書くためのCoffeeScriptという言語をチュートリアル風に紹介します。 何かしらのライブラリを自分で書く程度にJavaScriptで開発している人は絶対に使ったほうがいいと思います。 JavaScriptを知っていれば1-2時間程度で十分駆使できるようになります。 （2011/6/28：@m_satyr様にご指摘頂いた箇所を修正しました。） 目次 CoffeeScriptとは？ インストール Hello World 構文 関数 変数展開 Objectの生成 ループ 存在チェック ヒアドキュメント thisのバインド クラス 無名関数 {var} Tips ?の使い分け 存在チェック
Jcrop - Deep Liquid
Jcrop » the jQuery Image Cropping Plugin Jcrop Home • Download • Manual • Examples Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Feature Overview Attaches unobtrusively to images or blo
jQuery File Upload Demo
jQuery File Upload Demo File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads. Pintura
JSDay Italy - Backbone.js
The document defines a Comment model and CommentCollection in Backbone.js. The Comment model stores individual comments with attributes like name, email, text, and date. It uses localStorage to save models. The CommentCollection manages multiple Comment models and also uses localStorage. New comments can be added to the collection after saving individual models. Models trigger events like 'change'
JavaScriptのコーディング規約を気軽にチェック
こんにちは、中川です。 今回は「Google JavaScript Style Guide」を気軽にチェックできるClosure Linterをご紹介したいと思います。 http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml Google JavaScript Style Guideのいいところですが、 規約だけでなく、しっかりしたツールも揃っているところが素晴らしいと思います。 コーディング規約はあったとしても、それに従っているか定期的に簡単にチェックする方法がないと、 いつしか守られないまま開発されてしまうことになりますね。 ※今回の内容はMacにて動作確認を行なっています。
javascriptのカスタムイベントを作ろう！ - tumblr
デフォルトで用意されているイベントは、基本的にはブラウザがfireすることで要素に登録されたイベントリスナーが呼ばれるわけなんですが、このイベントのfireを開発者側でも行えるワケです。これはテスト用途での使われることが多いみたいです。 というわけでそのイベントのエミュレートと独自イベントの合成を学んだので覚書。サイ本じゃ合成イベントなんて言われてるけど、googleで検索するとカスタムイベントって言われるほうが多いみたい。 おおまかな流れ(IE除く) イベントオブジェクトの作成 イベントオブジェクトの初期化 イベントのディスパッチ（発火） という感じ。発火の前にはaddEventListenerで任意の要素に、イベントハンドラを登録する必要があります。 イベントオブジェクトの作成 var event = document.createEvent(type); 引数のtypeはイベントタイ
ブラックホールサーバーによるフロントエンドSPOF分析のすすめ | ゆっくりと…
SPOF と聞いて、すぐに 「あぁ、Single Point of Failure （単一障害点） のことネ」 と分かる人は、まじめにシステム工学を勉強した人か、ハードウェアを含む情報システム設計に知見のある人だと思います。 では、「フロントエンド」 が付くと、いったい何を指すのでしょうか？ 現代の Web サイトの多くは、自分が管理する （あるいは借りている） サーバーで全てのサービスを賄うのは、Yahoo や Google などの超大手以外ではほとんどないんじゃないかと思うほど、サードパーティが提供するサービスを取り込んでいると思います。Facebook、Twitter、flickr、YouTube はもちろん、jQuery などのライブラリ CDN、WebFont、アクセス解析なんかもありますネ。 もしこういったサービスを提供するサードパーティのサーバーがダウンした時、あなたのサイト
Masato Kinugawa Security Blog: UTF-16によるContent Security Policyの迂回
UTF-16をContent Security Policy(以下CSP)の迂回に使ってみようという記事です。ほとんどの場合で問題になりませんが場合によってはこうもできるかもしれないよね、ということを示すために書きます。真面目に読まないでください。 シンプルな迂回方法 やろうとしていることを理解しやすくするために、先にシンプルな迂回方法を示します。 CSPで選択的に外部ドメインのJavaScriptの読み込みを許可しているような場合、読み込みを許可したドメインにscriptタグのsrcとしてエラーのないように悪意のあるスクリプトを書けてしまう箇所があれば、当然XSSがあった時にCSPを迂回して攻撃することができてしまいます。 僕が攻撃しようと思ったら真っ先に狙いに行くのはJSONPのcallback関数名です。具体的に例を示すと、 CSPを導入したサイトで、外部サイトのcsp.exampl
Javascript essential-pattern
- JavaScript patterns like custom events, deferreds, and pub/sub can help manage asynchronous processes in the browser environment. Custom events allow defining and triggering custom events. Deferreds help manage callbacks and caching of asynchronous results. Pub/sub implements a publisher/subscriber pattern for loose coupling between modules. These patterns help modularize applications and decoup
Home - JavaScript Enlightenment
It's time to turn your ideas into realityJavaScript is one of the most popular and cross-platform programming languages that allows you to work with both web interfaces and server-side and mobile clients
jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方 - y-kawazの日記
jQueryのイベント記述方法はいくつかあり、大雑把におさらいしたのが以下の3パターンです。 まず一番基本的なのが $("a").click(fn) や $("a").bind('click', fn) です。click(fn)はbind('click', fn)の省略形です。 次にjQuery1.3で $("a").live("click", fn) という機能が出来ました。liveの良いところはDOM操作で出たり消えたりするエレメントに対して再バインド無しでイベント定義ができる利便性と、内部的にはbind個所がdocumentの1か所になり複数個所へのbindが無くなることによるメモリ効率と実効速度の向上です。 更にjQuery1.4.2で $("#foo").delegate("a", "click", fn) という書き方が出来るようになりました。これは特定要素以下に限定するliv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google
GitHub - summatix/notepad-coffeescript: Notepad++ syntax highlighting for CoffeeScript files