ブログを移転しました！

ネコメシが社員ブログを独立して始めたことに伴い、本ブログ、ダーシマ・ヱンヂニヤリングも移転しました。 ダーシマ・ヱンヂニヤリング 超絶おすすめブログです！！ 記事の移行はないため、このはてなブログはそのまま残していますが、フィード購読などの登…

実践 めんどうくさくない BEM

html css

この記事は BEM Advent Calendar 2013 の１２日めの記事です。 BEM は優れた方法論だと思うが、大変めんどうくさいことを強いてくることがある。この記事ではそんなめんどうくさい BEM を、少しでもめんどうくさくない BEM に変えられるかどうかを思索するも…

JavaScript でツイート文字列の文字数を正しくカウントする

javascript

2015/09/11 Gistのライブラリをアップデートしました。 2014/10/13 Gistのライブラリをアップデートしました。 JavaScript 経由で Twitter に投稿する処理を持つウェブアプリはよくあると思う。そのときに実装する必要がある機能のひとつに文字数カウントの…

Zepto.js の $.ajax にオブジェクトの配列を渡した時の不具合を直す

javascript jquery

Zepto.js は jQuery と同じように使えるように互換性を保ちつつ、機能削減や軽量化・高速化が図られているライブラリ。ホワイトスペースなどを除去すれば 20kB 強くらいのサイズになるので、読み込み容量がシビアなモバイル向けのウェブサイトを作るときには…

RequireJSをプロジェクトで使ってみての所感

javascript oop

JavaScriptのモジュール定義・読み込みをAMD (Asynchronous Module Definition) でできるライブラリであるRequireJSをプロジェクトで使ってみた。 プロジェクトの規模感を簡単に説明しておくと、まず単画面アプリケーションではなく、従来通りテンプレートが…

マウスオーバーすると親要素の高さが変化する IE のバグ

css internet explorer

a タグにマウスを重ねると、それを内包する要素の高さがベコッと広がったまま戻らなくなるバグは、古代より受け継がれてきた由緒ある IE のバグだ。「IE hover 高さ」などでググると、このバグに悩まされている人たちがたくさん引っかかる。このバグは、 IE …

input type="file" なやつを独自にデザインする方法

html css

デモ HTML <div class="file"> ファイルを選択 <input type="file"/> </div> CSS .file { display: inline-block; overflow: hidden; position: relative; padding: .5em; border: 1px solid #999; background-color: #eee; } .file input[type="file"] { opacity: 0; filter: progid:DXImageTransform.Mi…

Backbone.js で events とか defaults とかを親クラスから継承する方法

javascript backbone.js underscore.js oop

events とか default とは何か Backbone.js のクラス定義において、特殊なパラメーターがいくつか存在している。たとえば events や defaults は、 Backbone.js のチュートリアル的文書ではまっさきに触れられている特殊なパラメーターだ。 例えば、 default…

フロントエンド技術者が会社とどう関わっていけばいいのかという話

今日はフロントエンドの仕事について考えていることを書く。フロントエンドの人間としてどのように会社と関わればいいのか、あるいはフロントエンド以外の人達に何を求めるか、そのような人たちとどうコミュニケーションをとって行ったらいいのか、などとい…

グラデーションな背景に乗っているモノを比較的綺麗に切り抜く小技

photoshop

デザインカンプが上がってきたけど、 PSD じゃなくて PNG だった……。とか、 PSD だけど肝心のレイヤーが結合されてて……。みたいなことは、業務でマークアップに携わったことのある人ならば経験があるはず。常に時間のないマークアップエンジニアにとって、こ…

John Resig の忍者本（Secret of the JavaScript Ninja）に Kindle 版が追加された

electronic publishing jquery

jQuery を作った John Resig が執筆したJS本、 Secrets of JavaScript Ninja が今年あたまに発売しましたが、その Kindle 版（.mobiファイル）が本日（か昨日）出版された模様です。 JavaScript の書き方は時代によってトレンドのようなものがありますが、現…

コンストラクタ関数内では return する変数の型によって返るモノが変わる

javascript

JavaScript で、（便宜上の）コンストラクタ関数を new で呼ぶ時、関数内の途中で return があると、その値が帰ると思っていた。これは半分は正しいのだが、半分は間違っていた。 たとえば以下は undefined になるんで正しい。 var Hoge; Hoge = function ()…

jQuery の .animate() で普通のオブジェクトをアニメーションさせる

jquery javascript

説明するより見たほうが早かったりして。 $({ x:0, y:100 }) .animate({ x:100, y:50 }, { duration:5000, progress:function (anim, progress, fx) { console.log('x:' + anim.elem.x, 'y:' + anim.elem.y)); } }) このように、プリミティブなオブジェクト…

jQuery で複数の要素のアニメーションが全て終わったら何かを実行する

jquery javascript

jQuery でたくさんの要素をグリグリ動かしたいときに、完了時刻の違う複数の要素のアニメーションが両方終わった時に何かを実行する、というような処理をしたいと思うことがある。 完了時刻が遅い方のコールバックに処理を書けば、望みのことは出来る。ただ…

jQuery でアニメーションの前後に .css() とか .addClass() とかしたい時に .queue() を使う

jquery javascript

やりたいこと jQuery の animate メソッドを使って見た目を作っている時、アニメーションの完了後にクラスを付与したいとか、 CSS を変更したいというようなことはよくある。これをエレガントな感じに書きたい。 何も考えずに jQuery っぽく書いてみる $('.t…