Turbolinks再考 - nisshieeのブログ
この記事はnisshiee.orgに移設しました。 自動でリダイレクトします。 この記事は、「Speee Advent Calendar 2016」の4日目です。 3日目は、@Kosaku_Hidaより、「Google Spread Sheetに記載した複数URLのPage Speed Insightsの点数をGoogle Apps Scriptで取得する方法*1」です。 今日は、Turbolinksを考え直してみます。 みなさん、Turbolinks好きですか？ Rails使ってる人には、結構嫌われてる印象ですが、いかがでしょう？ Railsエンジニアに嫌われるTurbolinksの図 なんで嫌われたかというと理由はいたってシンプルで、既存の資産が動かなくなったからです。 という、なかなか悲しい歴史を持ったTurbolinksですが、改めて考え直してみようということで、まずはTurbol
jQuery でなんか書くときのちょっとした規約 - 犬ターネット
規約ってほどでもないけど、jQuery でコード書くときは以下みたいな感じで書くことが多くなった。 どう書こうが好みだろうけど、jQuery オブジェクトに $ を付けるくらいはしといたほうがよい。
jQuery最高の教科書｜株式会社シフトブレイン 著
「ゼロからjQueryを学びたい人たち」が効率的に理解できるように、 1章から順に難易度が上がるステップアップ形式の解説を行っています。 また、jQuery初心者のデザイナーの視点を加えることで、 プログラミング未経験者の「つまずきやすいポイント」を押さえた内容になっています。 通常、サンプルコードは全て出来上がった状態で配布されますが、 本書ではあえて途中までのみを記載しています。 コードに余白を残すことで、サンプルをただなぞるだけではなく、 読み手の工夫次第で様々な表現を生み出すことができるようにしています。 最終章では、実際の仕事でデザイナーやエンジニアが手がけるWebサイトと同等のクオリティのページを制作します。 単なる技術の理解に終始せず、実際のサイトを制作する上でのポイントを習得することで、 Web制作における実践的な力が身につきます。 シフトブレインの取締役、テクニカルディレ
jQuery UI 1.10 日本語リファレンス | js STUDIO
このサイトについて jQuery UIの日本語リファレンスです。 jQuery UIの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 このリファレンスではjQuery UIのバージョンは1.8以上を対象としていますので、それ以前のバージョンについては当てはまらない 箇所もあると思いますので注意してください。 また、1.8以降のバージョンによる違いについて、なるべく記述しているようにはしていますが、内部処理やclass名の変更等、全ては書ききれてはいないので、 詳細について知りたい場合は公式サイトでの確認をお願いします。 jQuery UI 1.9アップグレードガイド(英文) jQuery UI 1.10アップグレードガイド(英文)
jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化
HTML5のマークアップだけでモバイル対応のWebアプリが構築できるJavaScriptフレームワークのjQuery Mobile。レスポンシブWebデザインにフォーカスし大幅に強化された新バージョンjQuery Mobile 1.3βが公開されました。 jQuery Mobile 1.3では、表示幅に対応して自動的にフォーマットが変化する「Responsive tables」や「Responsive grids」、1つのスライダーで値を2つ設定できる「Range Slider」、新しいウィジェットの「Panel」をはじめ、多くの機能追加が行われています。 ブログでは、今回のバージョンでレスポンシブWebデザインにフォーカスする経緯について、以下のように説明しています。 We’ve seen the question “What should I use: RWD or jQuery Mo
HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく | DevelopersIO
僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪（ゝω・）vｷｬﾋﾟ はじめに - jQuery プラグインの構成 細かい差はあれど、基本的にjQueryプラグインは以下のような構成で成り立っています。 // 匿名関数で全体をラップ - (5) (function($) { // このプラグインの名前 - (1) $.fn.name_space = function() { //要素を退避 - (2) var elements = this; // 要素をひとつずつ処理 - (3) elements.each(function() { // 具体的な処理をここに記述 }); // method chain
jQuery Deferredのpipeにおける返り値の扱い
pipeは返す値で繋ぐ処理のパラメーターが変わるのだけど、たまにしか使わないので毎回動作を忘れてソースを見ている。バージョン1.7.2での動き。 deferred.pipe(function(data) { ... return ?; }); 以降の処理で引数が不要なら何も返さなくていい。引数が1つの場合は return foo; のようにそのまま返せばいい。複数の引数を送る場合はDeferredオブジェクトを返さないといけない（引数が1つの場合は同じ処理を裏でやってくれている）。 return $.Deferred().resolve(foo, bar); // コンテキストどうでもいい return $.Deferred().resolveWith(this, [foo, bar]); // どうでもよくない 何もせずにそのまま値を引き継ぐ場合は（引き継ぎたいパラメーターでresolv
jQuery 1.8β1登場。モジュール機能によるカスタマイズ、ベンダープレフィックスサポート、XSS対策など
jQuery 1.8β1登場。モジュール機能によるカスタマイズ、ベンダープレフィックスサポート、XSS対策など jQuery 1.8では、新機能としてモジュール化、ベンダープレフィクス付きCSS属性のサポート、アニメーション、XSSプロテクションなどが含まれています。 モジュール化 1つ目のモジュール化は、以下のように説明されています。 As of jQuery 1.8, you can build a custom version of jQuery that excludes one or more modules if you do not need their functionality. jQuery 1.8においては、1つ以上の不要な機能とされるモジュールを外すことができ、カスタムバージョンのjQueryをビルド可能です。 このカスタムバージョンは新しく採用されたビルドツールの
jQueryのeachの仕組みを徹底的にわかりやすく解説してみた。 · DQNEO日記
eachのキホン：要素を１個ずつ処理する まずおさらい。 このようなHTMLがあるとします。 <ul> <li>foo</li> <li>bar</li> </ul> eachを使うと、要素１個ずつに対して順繰りに処理を行うことができます。 <script> $(function(){ $('li').each(function(){ alert( $(this).text() ); // 'foo', 'bar'と表示 }); }); </script> これがキホンです。 変形してみる 上のeach式は、下のように変形できます。 (一番外側のブロック$(function(){....})は省略します) $.each( $('li'), function(){ alert($(this).text()); }); さらに変形してみます。 グローバル変数 "$" はグローバル変数 "jQu
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
jQueryとも組み合わせて使える汎用的ユーティリティライブラリ·Pot.js MOONGIFT
Pot.jsはJavaScriptで感じる物足りなさを補完する汎用的ユーティリティです。 JavaScriptを素のままで使うケースは減っています。jQueryやMootoolsをいったライブラリを使うケースが多いのですが、そうしたライブラリとも組み合わせて使える汎用的ユーティリティライブラリがPot.jsです。 デモはこのコンソールに出ているものになります。 そのコード。 Pot.jsは実に数多くの機能があります。まずforEach、filter、map、reduce、zip、repeat、someといったイテレートがあります。動作はチェインで可能です。また非同期処理中における例外処理をキャッチできます。speedメソッドによって処理速度を遅くしたりもできます。 ループ処理におけるCPU負荷を軽減させることができ、既存の負荷が高いループ処理をPot.jsを使って置き換えることで負荷を軽減
円形で回転するタイマーを実装できるjQueryサンプル:phpspot開発日誌
Animated Circle Timer | jQuery Plugins 円形で回転するタイマーを実装できるjQueryサンプル。 １〜１０秒の間で指定して指定秒数をかけてタイマーを回すようなものが作れます。 CSS3を使っているので非対応ブラウザでは動きませんが、なかなか面白いサンプルだったのでご紹介です デモページはこちら プラグイン形式ではないのでブラッシュアップの余地はありますが、実験や勉強用にソースを見てみてもよいかも。 タイマー秒数はソースに直接書く感じのようです 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」 ファンシーなデザインのカウントダウンタイマー実装jQueryプラグイン「Fancy Countdown」 シャレオツなカウントダウンタイマーが実装できるjQueryプラグイン「The Final Countdown」
必殺の .apply()フックを打つべし！ 打つべし！（JavaScript おれおれ Advent Calendar 2011 – 17日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 17日目 .apply()で成り済ましができたり仕事をスルーして丸投げしたりする事ができますが、さらにもうひとつ、フックを行う事ができます。 フック(hook)というのはフック船長のフック、鉤爪の事で、処理を「ひっかける」ような事です。ある関数が実行される際に、独自のコードを実行させる事ができます。 フック (プログラミング) – Wikipedia フック（Hook）は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。 あの処理がどこで呼ばれてるかわからないときに 具体例をひとつ。例えばjQueryで「どこかのタイミングで勝手にクラス名が追加されてしまって困っている」という場合を考えます。その場合は .add
JSコードTips
// 任意の連続した文字列生成 (new Array(10)).join(‘a’); // 任意の内容で初期化された配列生成（要Underscore.js） _(_.range(100)).map(function(n) { return ‘hoge’ }); // 高速なepoch秒生成 +(Date.now ? Date.now() : new Date()) // event throttle（scrollイベントの発生を100msに1回以下に抑える） var timer; $(window).on(‘scroll’, function (e) { if (timer) { return; }; /* hoge */ timer = setTimeout(function () { timer = undefined; }, 100); }); // 最初に一回実行するsetInte
萌え萌えcss - お前の血は何色だ!! 4
http://rtilabs.net/files/2010_12_24/moemoe_css/ jquery 1.4.3 から搭載された cssHooks を利用して遊んでみました。 cssHooksを利用すると、新しい css のカスタムプロパティを作成できます。 いままで jquery で width 属性などのように、実在しない cssのプロパティを拡張したければ、動的に jqueryのメソッド書き換えるモンキーパッチを行うしかありませんでした。 クロスブラウザの回転は、 まさに jquery のメソッドを動的に置き換えで実装しています。 ところが、 jquery 1.4.3 から、 cssHooks という機能が実装され、 jqueryを経由して安全に css のカスタムプロパティを作成できるようになりました。 このことを教えてもらったので、 cssHooks を利用して まったく
FuncUnitを試してみた - Reports
FuncUnitって？ WEBアプリケーションの単体テストフレームワークです． 公式ページ: FuncUnit 基本的にはjQuery風の記法でユーザのアクションを定義し，JavaScriptの単体テストフレームワーク QUnitでアサートするだけでユーザのアクション（テキスト入力，クリック，ドラッグアンドドロップなど）に対するアプリの動作をテストすることができます． なので，jQueryとQUnitを使ったことがある人であれば比較的簡単にテストコードを書くことができます．また，どちらも使ったことがなくても使う分にはそれほど難しいものでもないので，使ってみることをオススメします． 一回書けば延々ブラウザでポチポチする作業とはおさらばです． また，もう一つ重要な点としてコマンドラインからテストが実行できるという点です（実行中にFirefoxやIEが立ち上がったりしますが）．ということはHud
クライアントサイドJSでもサーバーサイドJSでもうごくテストを書く - Articles Advent Calendar 2011 Amon2
こんにちは! tokuhirom です。日曜日ですね! 今日は Test トラックにかこうとしたけど Perl 関係なさすぎて自重したネタをかこうかとおもいます。 さて、Amon2 の重要なパーツといえる strftime.js ですが、こちらもちゃんとテストしなくてはなりません。strftime とかいちばんテストしやすいうえにバグりやすいのに、テストしてないライブラリがおおくてなさけなくなる今日この頃ですからね。 テストライブラリの選定 さて、Perl ならば Test::More をとりあえずつかっておけばいいのですが、JS の場合はどれをつかうべきかなやむところです。JS の場合、いろんな人がオレオレなテストフレームワークをだしててややこしいことこの上ありません。 こういう場合、Perl でも JavaScript でもライブラリの選定方法はかわりません。譲れない機能、ライブラリの
qunit-tapを使ってnode.jsのテストをproveで行う - すぎゃーんメモ
Shibuya.js テクニカルトーク Test.jsでid:t-wadaさんの話がとても興味深く、 js テスト放浪記 qunit-tapというのが魅力的に感じたのでnode.jsのテストで使ってみました。 GitHub - twada/qunit-tap: A TAP Output Producer Plugin for QUnit quinit-tapとは まずQUnitについて。 QUnit QUnit自体は全然使ったことなくて詳しくは知らないのですが、もともとjQueryのテスト用に作られたテスティングフレームワークで、今はjQueryに関係なく色々な場面でのJavaScriptのテストに使えるようになっている、とのこと。 QUnit is a powerful, easy-to-use, JavaScript test suite. It's used by the jQuer
jQueryをダイエット。サイズをぎゅっと減らした·jQuery in parts（jquip） MOONGIFT
jquipはjQueryの肥大化を懸念し、機能を維持しつつサイズを減らそうとするソフトウェアです。 jQueryは便利なJavaScriptライブラリである一方、ふくれあがった機能によってライブラリサイズが巨大になりつつあります。そこでjQueryを再度見直し、より機能を絞り込んでいこうと試みているのがjquipです。 デモプログラムです。 ボタンを押すたびに背景色が変わります。 ボタンを押すとデータを出力していきます。 実際のコードです。jQueryと変わらない書き方で実装できます。 jquipはjQueryをモジュールベースに分解し、コアを軽量に維持しつつ必要に応じて機能を追加できるようになっています。機能としてはjQueryの90%を実装しつつ、サイズは13KB程度となっています。現状ではモジュールとしてdocready、css、event、ajaxに分かれています。 jquipはJ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JQuery Mobile 1.0がリリースされ、様々な反応が返ってきている
