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

masonry-rails で Pinterest風Webアプリを作る

※ mansory-rails で使用されている mansory の version が低いため現在は未使用。Responsive で利用する場合は、個別にmansoryを導入する必要があります。 Pinterest風のサイズの異なるグリッドをおしゃれに複数並べて ブラウザリサイズ時に再配置してくれる…

azu/promises-book を読んでいます(chapter3)

azuさんの「JavaScript Promiseの本」を読んでいます。 JavaScript Promiseの本 3. Chapter.3 - Promiseのテスト テストの回です。 Mochaの選択理由 著名なテストフレームワークであること Node.jsとブラウザ どちらのテストもサポートしている "Promiseのテ…

azu/promises-book を読んでいます(chapter1-2)

以前から読みたかった、JavaScript Promiseの本 を読んでいます。 以下、個人的なメモですが、文章は 文章は CC-BY-NC ライセンスだそうですので ライセンスを気にしてみます。 CC-BY-NC とは クリエイティブ・コモンズ・ライセンスとは | クリエイティブ・…

ESLint を試す

ES6をサポートしているjsのlinterです。 普段はJSHint を使っていましたが、 Chrome Extensionの開発にES6 が使えるということに気づいたので ES6で書き直す際に Linterも ESLint を利用してみました。 ご参考 ・ESLint 最初の一歩 - Qiita ・ES6 Install np…

jasmineのテストをKarmaで実行する

jasmineのテストはブラウザで実行する(SpecRunner.html)のですが慣れてくると面倒です。 コンソールで実行したくなってきます。 そこで、AngularJSチームにて開発されたKarma をテストランナーとして使ってみました。 導入も楽だし、今後も使っていきたいと…

jasmineでparameterizedテスト

Rubyには、RSpecのプラグインとしてinput/outputを配列(もしくはtable形式)で定義して テストすできる便利なものがあります。 テストがsimpleになりますし、境界地のテストなんかに便利ですね。 tomykaira/rspec-parameterized こんなやつ。 where(:a, :b,…

Chrome Extensionのテストにjasmineを使う

イライラ駆動開発として久しぶりにChrome Extensionを作成しました。 その際に testing frameworkとしてjasmineを使おうとしたのですが ググってみると「最新のjasmineをダウンロードしてアレとコレをコピーして使え」みたいな記事ばっかりで npmでinstallし…

google map v3 fitBounds 微調整

markerを動的に用意して、fitBounds()を呼んでやると、いい感じにmarkerが収まるように 自動で調整してくれる便利メソッドがあります。 Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers しかし、makerの件数が1…

jQueryが10周年とのこと

いやぁ、すごいですね。10年もJS界隈で生き残るなんて。 JSer.info を見ていたところ 10周年としてjQuery3.0のbeta版リリースの案内が記載されていました。 jQuery 3.0 Beta Released | Official jQuery Blog また、jQueryのversion表記ですが、以下のように…

jQueryを読み解く2(40〜90行目)

前回 は、コードリーディング速攻でやめてしまったので 今回はもう少し読んでみます。 変数定義 40〜62行目 よくわかりませんが、Array、Hashのmethodを切り出しています。Firefoxの対応のようです。 // Support: Firefox 18+ // Can't be in strict mode, s…

jQueryを読み解く1(〜38行目)

いろいろ整理中に、あとで読もうと思っていた以下の記事を久しぶりに目にしました。(7年ぶりくらい) jquery.jsを読み解く:特集|gihyo.jp … 技術評論社 jQueryはオワコンだとかよく聞きますが、単純なWebではまだまだ使われるでしょうし (脱jQueryするに…

JavascriptでRubyのRange#to_aのような配列を返す方法

20140115 ES6記法を追加(from jserさん) RubyではRangeオブジェクトは便利なのでよく使います。 >> (1..10).to_a => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] Javascriptだと Javascriptでも同じようなものが無いのか探してみると、いくつかありました。 1. forで回…

WEB+DB Press CasperJSの記事が面白い!

ヘッドレスブラウザCaperJSの記事が面白かったです。 PhantomJS(CasperJSはPhatomJSのラッパー)を触ろうと思ってはいましたが なかなか腰が重い状態で、これを機に掲載スクリプトを写経して入門してみました。 記事の内容 CasperJSの説明に始まり スクレイ…

Angular.jsが面白そう

Angular.jsのここがアツい!! こちらを写経。 記述量自体は少ないのですが、めちゃめちゃ強力です。

google short urlでqrコードを作成する

GoogleのURL短縮サービスgoo.glでQRコードを作成する方法(隠し機能・イースターエッグ) - MiuxMiu どうやら隠し機能らしいのですがURLの最後に.qrをつけるだけでokなようです。 試しにやってみると http://goo.gl/W8KDihttp://goo.gl/W8KDi.qrとすると 作成…

textmateでJSLint

JavaScript Lintっていう javascriptの文法チェックツールをtextmateから呼べないかと 試してたんだけど、既にpluginがあったのでそちらを使う事にしました。 subtleGradient/javascript-tools.tmbundle - GitHub 公式で紹介されてました。 Running from you…

画像の実サイズを表示するgreasemonkey

初めてgreasemonkey書いてみましたが、そんなに苦労せず書けました。 面白いなぁ。gist: 651402 - (gm)display real image size- GitHub // ==UserScript== // @name display real image size // @namespace http://www.rochefort8.com/ // @include * // ==…

Highchartsを試してみた

ちょうどrailsで使用可能なchartライブラリを探していたところ 先週のrailscastsで紹介されていたので、早速使ってみた。 Railscasts - Charts Highcharts - Interactive JavaScript charts for your webpage ライセンス Highcharts - License and Pricing …

角丸 curvycorners.js

javascript + css で実現可能な CurvyCorners - Beautiful rounded corners for your HTML boxesを試してみた。 install ダウンロードして curvycorners.js を public/javascripts以下に格納。 設定 javascriptを読み込み、 該当divにrounded をclass指定し…

firefoxで「はてブ」するとポップアップが背面になる

ブックマークレット使うと、背面にいっちゃうわけですよ。 なんか使いづらいなー、勉強がてら作ってみるか と思ったけど、 世の中にはいろんな人いるし 同じ事思った人いるかも と思い検索するとヒット。 ありがたく使わせていただきます。 はてブのブックマ…

タイトルとurlをはてな記法で取得するbookmarklet

Bookmarklet - パソコン遊戯 こちらを参考にしてちょっといじってみました。 ほとんどコピーで恐縮ですが。(safari3でのみ確認済) javascript:(function(){var t,u,p;u=top.document.URL.replace(/&/g,'&');t=top.document.title.replace(/&/g,'&')…