Backbone.jsでNode.jsとクライアントサイドのロジックをイケてる感じで共通化する - Webtech Walker
Backbone.js Advent Calendarの12日目です。 Backbone.jsを使ってNode.jsとクライアントサイドのJavaScriptでロジックを共有する方法について書いてみます。 Node.jsといえばチャット。チャットといえばSocket.IOということでSocket.IOを使ったチャットを例にしてみます。 例えばチャットの一回の文字列の上限を140文字にしたいとします。その場合クライアント側でもサーバー側でも同じバリデーションのロジックを実装するのは面倒ですし、上限値が変更になったときに2箇所変更するのはイケてないですね。そこでBackbone.jsを使ってその部分のロジックを共通化する方法を考えてみます。 Backbone.jsはnpmでインストールできるのでまずはBackbone.jsとSocket.IOをインストールします。 $ npm install
TechCrunch | Startup and Technology News
The 2024 election is likely to be the first in which faked audio and video of candidates is a serious factor. As campaigns warm up, voters should be aware: voice…
プログラマー面接時の技術的な質問事項(アプレッソ版) - 解答編 : 小野和俊のブログ
昨日、プログラマー面接時の技術的な質問事項(アプレッソ版)を書いたところ、「自分ならこう答える」というエントリを書いてくれた人が何人かいて、個別にコメントしようかとも思ったのだが、昨日のエントリだけだと質問の投げっぱなしになってしまうところもあるので、解答編を書くことにした。 なお、「面接の質問項目を公表しちゃっていいの？」という指摘もあったが、ブログに書いたのはあくまでも質問項目の一例だし、解法を検討する過程を見れば普段どんな風に開発しているのかはだいたいわかるので、特に問題ない。 for (int i = 0; i < list.getLength(); i++) {}の潜在的パフォーマンスボトルネック list.getLength()がlist.getLength()回評価されてしまう。具体例としては、JREに標準で付属するDOMのライブラリのNodeListの実装はlist.get
プログラマー面接時の技術的な質問事項(アプレッソ版) : 小野和俊のブログ
技術者・SE・プログラマ面接時の技術的な質問事項というエントリをはてブで見かけたのだが、私もjavaプログラマーの面接を割とよくやっているので、よく質問する内容をまとめてみた。 (ちなみに、基本的にコーディング面接の形態を取っている) プロジェクトの性質にもよると思うが、私の場合には、情報処理技術者試験的に基礎が満遍なく抑えられているかどうかよりも、 すぐ答えが見つからないような課題に対して、きちんと自分でやり方を考え、対応することができるか 「変な」コードをコミットしたりしないか(見つけにくいバグを混入させるとか、汚いとか、遅いとか)といった点を重視している。 まず、何を知っているかよりも、どんなものを作れるか、どんなことができるか、という質問。 ここで強烈な回答が来る人は、たいていここより下の質問は「あー、はいはい」という感じでサラッと答えてくることが多い。 これまでに携わってきた開発
【javascriptを使う人に知って貰いたい（エンジニア、デザイナ問わず）】karmaを使ったテスト駆動開発入門（ついでにJasmineも）
$ karma init Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want to use Require.js ? This will add Require.js adapter into files. Press tab to list possible options. Enter to move to the next question. > no Do you want to capture a browser automatically ? Press tab to list possible options. Enter empty string to
Backbone の View をテストする - present
以前 Konacha を導入してから、 Rails アプリの JavaScript コードをテストできるようになった。 Evergreen を導入したばかりだけど Konacha に移行した JavaScript コードの大半は、Backbone を使って実装した UI なんだけど、 困ったことに View のテストをほとんど書けていない。 比較的テストが書きやすい Model は、がっちりテスト書いてある。 なんとか View も単体テストできないものか。 View のテスト方法を模索している最中、Konacha を導入して使えるようになるアサーションライブラリ Chai の、 Chai jQuery というプラグインを知った。 Chai jQuery - Chai Chai jQuery プラグインを使えば View のテストが書けそうだな。早速試してみた。 <!DOCTYPE htm
[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックス
こんにちは、霙(@xxmiz0rexx)です。 漂う今更感の中、スマートフォンでタップしやすい形のラジオボタンとチェックボックスを作る機会があったのでメモとして残しておきます。 ON/OFFの画像も作ったので、もし使いたい人がいたらご自由にダウンロードしてくださいませ :) 今回目指したのはこんなイメージ。 デフォルトのチェックボックス＆ラジオボタンを使ってみた結果、タップ範囲が狭く選択しづらかったので iOSアプリのように押しやすいUIにしたいと思い、CSS＆画像で作ってみました。 これなら横一列がタップ範囲なので不器用なわたしでも押し間違いをしたり「何これ押せない…！」なんてことが発生しにくく、非常に快適に使うことが出来ました♪ html <form id="infoForm"> <fieldset> <legend>Pray for rain</legend> <ul class="
![[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/4114ba944fbc4ad7dce3f5e3929f4d782427892b/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Fe7be25fbc0824211d3f10797e07eeb33.png)
(* programming -> girl -> ? *) | 業務アプリ実装にFRP使ってみた
Bacon.jsという、Functional Reactive Programming のFrameworkを使ったJava Scriptライブラリを使って業務アプリを書いてみました。関数型の考え方をふんだんに使いつつも、GUIなどのユーザ入力を伴うような処理に柔軟に対応している、マイナーながら優れたライブラリです。 実際にBacon.jsを使って実装してみて、何が良かったかなってところを、 ちょっと素人なりに色々と考えてみました。 1. 出てくるワードが直感的であるBaconでは、EventStream, Propertyなどといった独自のワードがいくつか出てきます。 ライブラリを読んで色々と使うのは大変だなあと個人的にはよく思いますが、Baconに関しては、新しい概念を取り入れているのにも関わらず、非常に直感的且つイメージがつきやすいワードを選択しているので、頭の中に構造を描きやすい仕
document.body.scrollTopが常に0を返す謎を調べてみた - Qiita
という指定がしてあったからでした。 これは body の子要素で body からはみ出る部分は自動的にスクロールバーが表示されて、スクロールが出来るようになります。 詳しくはこう で、図にしてみるとわかりやすいのですが +------------------------------------------------------------- | html | +-------------------------------+←ーー ここがscrollTop = 常に0 | | body | ↑ | | +---------------------------+ | | | | | ↑ | | bodyではスクロールしないで | | | Scroll Area | | 子要素の中でスクロールする | | | ↓ | | | | | +---------------------------+
SVGをCSSを使ってHTMLで表現·svg2css MOONGIFT
svg2cssはPython製のオープンソース・ソフトウェア（MIT License）です。 SVGのベクター画像はもっと使われるべきだと思うのですが、レガシーなブラウザでは表示ができないのが躊躇させてしまう要因です。そこで試してみたいのがSVGをCSSで表現してしまうsvg2cssです。 使い方は簡単で、ターミナルでSVG画像を指定する程度です。 元のSVG画像です。半透明の部分があります。 こちらがHTML化されたものです。再現性はとても高いです。 ソースを見るとCSSのスタイルが数多く出力されているのが分かります。 日本語のテスト。ばっちり出力されています。 ぼかしを加えた版もあります。こちらも問題なさそうです。 複数のデータをスライド式にしたSVGのテストです。左右をクリックして切り替えられます。 こんな感じです。 画像のテスト。画像の形を変えたり、一部だけを表示したりする事もでき
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
