読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Releasedの概要

まだアルファですが、みんな大好きjQueryのバージョンがついに`3`に! 公式からリリースノートが出てたので、いわゆるメジャーな変更の部分をかいつまんで訳しておきます。ちなみに、 jquery@3.0.0-alpha1: IE9以降などモダンブラウザ向け jquery-compat@3.0…

たまに気になるjQueryセレクタの記法

jQueryとSizzleの関係について - console.lealog(); って記事をこないだ書きました。 予想以上にはてブされてて、みんなjQueryのこと大好きなんやなって思いました。で、そのときにメモってたやつをまとめたら、それなりの長さになったのでついでに。 // こ…

jQueryとSizzleの関係について

事の発端。 jQueryの使わない機能があまりに多いのでカスタムビルドすることにした Sizzleも外せることを知る(容量がgzipで20KB分くらい減る) 外すと何が変わるか気になる ってなモチベーションで調べた一連の内容です。

jQuery, GSAP, Velocity.jsのfadeIn/fadeOutの記法を比べる

fadeInって聞くと、あぁjQueryねってなるくらいには浸透してると思うのですが、 あれはパフォーマンスがよろしくないとのこと。であれば代替に何があるの?ってことで、 その代替ライブラリたちとその書き方のご紹介。

jQueryでadd/removeClassする前にhasClassすべきか

ちょうど気になってたので調べてみました。結論からいうと、しなくて良いみたい。

$.fn.fadeIn(fn)をCSSアニメでやる

最初は便利かなーと思ったのですが、使い勝手はイマイチでした・・。 まあ一応書いたので、メモっとこうと。

HTML5のdata属性をキャメルケースで定義するとどうなるか

jsでは変数名をキャメルケースにしてて、どうせなら目につくとこ統一したいなーと思ったんです。 で、そういえばdata属性って最初からキャメルケースにしたらどうなるんやろー?って。 まあ結論からいうと、ダメですw

jQuery Plugin Design Patterns

って検索したのにコレだ!って情報が出てこなかったので、自分でメモしておく。 jQueryのプラグインを書くにあたり、そもそもどういうやり方があるのか 気をつけるべきポイントはどこなのか みたいなことのメモ。 イマサラ感は気にしない。

いまさらBackbone.jsでSPAぽいものを作ったので

反省と学びをメモしておきます。リポジトリは、 参考:leader22/simple-pokedex ご参考まで。 2014/04/24現在、Backbone.Marionetteで作りなおしました。

Require.js とか jQueryはリクエストをキャッシュする

ほんとに注意してください!!!(自戒 他のコードが悪いんじゃないかとか 使ってるライブラリが古いんじゃないかとか サーバーのキャッシュの設定のせいじゃねとか ブラウザのキャッシュじゃねとか 色々勘ぐって調べる前にチェックしてくださいまし! requi…

jQueryをはじめたばかりのあなたへ

まぁ、うちの同僚なんですけど。 私も人にどうこう言えるほど大したスキルはないですが、それでも即実践できるお役立ちTipsをいくつかお届け。

display: noneはtransitionできないので

参考:css - Transitions on the display: property - Stack Overflow そのへんで拾ったアコーディオンのライブラリとかでよく見るやつ。 もはやマークアップあるあるですよね。displayじゃダメなので、他のプロパティで攻めましょう、っていう。 transition…

NodeとSocket.IOで作るルーム機能つきチャットのサンプル

というわけで、最近勉強してたSocket.IOでサンプルを作りました。 このソースをまるごと持って行ってIPなりポートなり調整すれば動くはずです。おかげでロジック自体はシンプルになったけど、使い勝手云々いじると必然的にクライアント側のコードが多く・・…

書評:Pro JavaScript Techniques

というわけで、以前もご紹介したPro Javascript Techniquesという本ですが、ひと通り読み終わったので書評という名のメモを。著者はjQueryのJohn Resigさん。 なによりはじめに まず最初にですが、この本は2006/12/11に第一版が出た本です。 2006年:6年前…

Handlebars.jsとTwitter Search APIを使ったサンプル

いま絶賛勉強中のHandlebars.jsを使って、TwitterのAPIを絡めたサンプルを。 Handlebars.jsについては、また備忘録を残そうかと思ってます。 概要 TwitterのSearch APIを叩く 取得したjsonを、Handlebarsのテンプレに流しこむ 簡単! ソース Html / Css <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title></meta></head></html>…

Css3のアニメーションを一時停止するには

jQueryとかJavaScriptじゃなく、Css3のアニメーションって何かをきっかけに動かすとか止めるとかできるんかな?と思い。 結論としては、できるみたい。 JavaScriptで (function(){ $('.box').on('click', function(){ var me = this; me.style.webkitAnimati…

また、はてな教科書のJavaScript課題をやってみた

昨日に引き続き。 参考:Hatena-Textbook/javascript-event-driven.md at master · hatena/Hatena-Textbook · GitHub 今回のお題は、 その場編集機能を作れ 要素の作成、追加、削除 こまめなフィードバックでストレスを感じさせないように その場編集用 API …

はてなブログで「続きを読む」を実現する

絶賛機能追加中のはてなブログなので、そのうち公式でできるようになるとは思いますが、一応。 はてな記法なりで「=====」を使って、続きを書いてることが条件です。 続き部分を隠す 最初に続きを隠します。 パフォーマンス的には隠すというよりかは出力しな…

I've just finished learning on "30 Days to Learn jQuery"

タイトル通り、"30 Days to Learn jQuery"というコースを1通り終えたので、記念にメモ。 参考:Tuts+ Premium Course: 30 Days to Learn jQuery メルアドを登録すると、jQueryについて学べる動画のURLが1日1回届きます。 各回は10〜30分で、jQueryについて学…

bind()よりlive()よりdelegate()が良いみたい

過去にこんな記事を書きました。 参考:[JavaScript][jQuery]onload後に構築した要素に対してイベントや関数が効かないときには 参考:[jQuery][JavaScript]jQuery.live()でhoverを実現したい場合は で、live()すげー!と思ってたのですが、この度↓の記事を…

jQuery.live()でhoverを実現したい場合は

備忘録メモ。 jQuery.live() こないだ紹介した、jQuery.live()メソッドですが、ホバーのイベントを取りたい時に、上手いこと動いてくれませんでした。 参考:[JavaScript][jQuery]onload後に構築した要素に対してイベントや関数が効かないときには hoverでの…

onload後に構築した要素に対してイベントや関数が効かないときには

いやー、ハマった! これは困ってた!ので、メモしておきます。 ハマったとこ こういう要素があったとして、 <ul id="list"> <li>hoge</li> <li>ioge</li> <li>joge</li> <li>koge</li> </ul> 例えばAjaxで、こうなったとします。 <ul id="list"> <li>hoge</li> <li>ioge</li> <li>joge</li> <li>koge</li> <li>loge</li> <li>moge</li> </ul> で、 $('#li…

jQuery.Twinkleを背景のアクセントとして使うコード

今までブログの背景にあててたのですが、やっぱりちょっと重いので外すことに。 このエフェクト好きやねんけどなぁ・・・。 jQuery.Twinkle DEMO - jsdo.it - share JavaScript, HTML5 and CSSこうやって埋めれるのは便利やね。 また使いたくなったらスグ使…

jQuery.ajaxでjsonがうまく取得できない時は

何回やっても取得できない! jsonの形式も間違ってないし、メソッドも間違えてないはずやのに、なんでや!そしてミスに気づいた・・その顛末を。とっても初歩的なミスなので、備忘録として! かなり古い記事なので、$.ajax().then()とか今風の書き方にはなっ…

jQuery.twinkleがとてもかわいい

jQueryもほんの少しですが書けるようになりました。 なにより、大抵のプラグインが自分のサイトに楽勝で導入できるようになった感動はひとしお!というわけで、日本語の解説がまったく見つからなかったこのjQuery.twinkleの使い方をこそっとメモ。 参考:jQu…