standardとsnazzyでjsのlint結果をeslint風にする

eslint入れようとする →semistandardってgetting startに書いてあるのを目にする →standard（JavaScript Standard Style）を思い出す →面倒だしstandardでいいやと思ってinstallする というのを2回ぐらいやった気がするので、いい加減思い出せるようにメモに…

esbuildでお手軽にbookmarkletを作る

bookmarkletをnpm scriptで簡単に作成できないか検討してみました。 前提 即時関数化 メインの話とはずれますが、 bookmarkletはglobal汚染してしまうので、即時関数化が必要です。 これはJS側に書いておくことにします。 （※即時関数もbookmarklet生成時に…

Bootstrap5のPopoversが微妙なので少し頑張った

Popovers (ポップオーバー) · Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/components/popovers/ を使おうとしていたのですが、期待する動作にならずに少し困っていました。 具体的には data-bs-trigger というオプションが用意されていて、 click、ho…

速習ECMAScript6 良いです

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター！作者: 山田祥寛出版社/メーカー: WINGSプロジェクト発売日: 2015/08/28メディア: Kindle版この商品を含むブログを見る 1年前に購入して放置してしまっていました。 実例と使い所を整理して記載し…

atom-test-switcher という packageを作ってみました

久しぶりにatomのpackageを書いてみました。開発時にはpackageの auto reload 欲しいなぁ。ショートカットのreload遅すぎる。 atom-test-switcher rochefort/atom-test-switcher: Switch between source and test files. こんなの option - t で テストコー…

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…

npm code reading

rake --tasks (-T) のようにpackage.jsonのタスクを一覧で見たかったのですが 用意されていないと思い込んでしまい、じゃ作るかと思い立ってコードを書いてみました。 まずはnpm code reading bin/npm まずは実行ファイル。npm-cli.js を実行しているだけの…

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でのみ確認済） #"https://b.hatena.ne.jp/entry/s/rochefort.hatenablog.com/entry/20080202/p1">