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

メモを揉め

お勉強の覚書。

JavaScript

Stylus JavaScript API とプラグインの仕組みについて

先日 foovar という Stylus のライブラリを公開しました。 Stylus の変数を JS ファイルにエクスポートするためのライブラリです。 memowomome.hatenablog.com その時に調べた Stylus JavaScript API の詳細や、プラグイン作成の方法です。 仕様の変更などに…

Stylus の変数に JS からアクセスする方法を考える

transition 、animationが使えるようになり、擬似セレクタの種類も増えてきたことで、スタイル周りの多くのことがCSSだけ(あるいはclassListのadd、remove程度の操作)で書けるようになってきた気がする。 それでも、どうしても JavaScript で操作したい時…

Case Studies in Flexbox - flex-grow, flex-shrink, flex-basis

flexboxのプロパティの組み合わせを比較できるカタログが欲しいなーと思ったので作ってみました。 各プロパティーの値がどのように解釈されるか、ブラウザ間での違いなどが分かります。 あれもこれもと入れていたら無駄に長くなりました。 See the Pen Case …

width、heightがautoの要素にtransitionを適用する

CSS3のtransition。 一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。 このtransitionを使っていていつも悩ましいのが、widthやheight…

Stylusのあまり知られていない機能

というより、自分が最近知った機能。 ハッシュをCSSのプロパティ名と値に展開できる Stylusではハッシュが使えます。 シンタックスはJSのオブジェクトリテラルとほぼ同じですが、Stylusのnodeをそのまま値に使用できる点が違います。 以下のように、値に10px…

chokidarを使ってファイルの変更をwatchする

Riot.jsの話。 カスタムタグが増えるにつれ、Riot CLIによるコンパイル時間がバカにならなくなってきた。 特にwatchの立ち上げ時に時間がかかる。 コンパイルオプションとしてBabelとStylusを使用しているので、最初これらを疑ったが、buildのみだとさほどか…

ライブカメラと時計のやつをElectronアプリにした

前の投稿で作ったデモをElectronで包んでアプリにしてみた。 memowomome.hatenablog.com Circle CIとGithub Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。 (超優秀な同僚が組んだ物を流用している) アカベコマ…

時計と世界各地のライブカメラの映像を組み合わせた何か

GWはこれを作ってました。 時計と世界各地のライブカメラの映像を組み合わせたものです。 YouTubeのiframe APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。 以下の操作が行えます。 時刻を表す文字のシルエットをShift+Kで…

decafjsを使ってappend-cssをアップデートしました

npmにappend-cssというパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。 たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')してみたら、自分が作ったと思っていたものと随分設計が違くてび…

プログラミングにおける略称のベストプラクティス(を誰か教えてください)

XML, DOM, JSON, APIなどの略称を変数の命名等で使う時のフォーマット統一したい(して欲しい)。 XMLHttpRequest XML、 Extensible Markup Language(エクステンシブル マークアップ ランゲージ) ウィキペディア: Extensible Markup Language Http、 Hyperte…

話題の五輪エンブレムをCSSで動かしてみた

今日もよく燃えてますね。 しかしそういった話は一切合切横に置かせてもらいまして、私はCSSで動かしたくなったので動かしてみることにします。 単純な図形とルール このエンブレムは非常に単純な図形とルールで出来ています。 大抵のタイポグラフィは一貫す…

setTimeoutの挙動について

JavaScriptによるアニメーションの制御について調べていたところ、本筋から離れてしまいそうだったのでここに。 ここまでの流れをおおまかに書くと、 JavaScriptにはタスクのキューがあり、頭から順に登録されたタスクが処理される。 ここで言うタスクとはほ…

append-cssというnpmモジュールを作った

CSSルールを追加するだけのモジュールです。 npm: append-css インストール Nodeがあってnpmが使える場合は、 npm install append-css npmがない場合はgithub: append-cssからダウンロード。 使い方 ブラウザの場合 browser/build.jsを読み込む。 <script src="browser/build.js"></script> <script> var appe</script>…

evaluable-tagというnpmモジュールを作った

htmlの中の任意の要素のdata-eval属性の値をJavaScriptとして実行するだけのモジュールです。 npm: evaluable-tag インストール Nodeがあってnpmが使える場合は、 npm install evaluable-tag npmがない場合はgithub: evaluable-tagからダウンロード。 使い方…

RoomMirrorというnpmモジュールを作った

RoomMirrorとは Markdownから生成したHTMLの中のコードブロックにCodeMirrorでシンタックスハイライトを行うために作ったもの。 npm: RoomMirror RoomMirror: ドキュメント この記事はドキュメントの内容に修正を加えつつまとめたものです。 インストール No…

はてなブログのシンタックスハイライトにCodeMirrorを使う

はてなブログのコードの表示に個人的になんとなく違和感があって、特にモバイル環境で見た時の折り返しが見難い。 どうにもこういうものは見た目をカスタマイズしたい願望があって、はてなブログはモバイルのデザインをカスタマイズできない*1のがどうにもつ…

RealDOM再入門

初Greasemonkey、初Tampermonkey、初ブックマークレット触ってみました。 生DOMいっぱいさわりました。 ブラウザで検索・置換 いくつかサンプルコードを見ているとDocument.body.innerHTMLを正規表現で検索・置換するものが多かった、 というのはつまり以下…

Light Tableについて

Light Table使ってます。 Light Tableってどのくらい使われてるんだろう? twitterのタイムラインを見てるとSublime TextとかAtom関連のつぶやきは良く見かけるけど、Light Tableの事はほぼ見ない印象。 なのでLight Tableのいいところを紹介します。 Evalua…

Ruby, RSpec, CoffeeScript, Node.js, gulp, browserify

もろもろはじめました。 何を書いていいのか分からなくなるので、メモはこまめに取らないとダメですね。 ザクッとした感想(雑感) あれこれ悩んでいるより、とにかく触ってみるのが一番だなと思いました。 新しかったり、自分の知らない技術の紹介とかを見…

MVCとかMVVMの前の自分まとめ

MVC、MVVMに関する記事を色々読んでいると、 それなりに理解したつもりになっても、いざ具体的な事になるといまいちピンと来ない。 今感じている事、 大規模な開発を経験したことが無いから、必要性が実感できてない サンプルを見てもいまいちメリットが分か…

ビット演算でundefined、NaNを0に変換する

javascriptの算術演算子は(+が文字列連結の時を除いて)被演算子がundefined、NaNの時、結果はNaNになります。 undefined + 1 //NaN undefined - 1 //NaN undefined * 1 //NaN undefined / 1 //NaN undefined % 1 //NaN +undefined //NaN -undefined //NaN …

javascriptのオブジェクトリテラルは評価されるまでは、あくまでブロック文でしかない

よくよく考えたら普通のことでした。 評価せずに使われる場面も思いつかないのでわざわざ書くことでもないと思うのですが、何が役に立つか分からないこの世の中。 一応メモ。 そもそも何故気になったか 算術演算子の動作を調べるために色んな物同士を演算子…

EclipseのJSDTでユーザーライブラリを強制的に削除する方法

javascriptを書くときにEclipseを使用し始めてもうだいぶ立ちます。 最近になってMacBook Pro Retinaを購入してからも同じようにEclipseを導入したのですが、その移行作業中につまずいたのでメモ。 つまずいたところ JSDTではあらかじめ読み込んでおきたいラ…

CSSスプライトによるアニメーションでプログレスバーを作ってみた

オライリーの書籍「javascriptグラフィックス」第2章「DHTML」より、CSSスプライトというテクニックを学んだ。 ダイナミックHTML - Wikipedia javascriptグラフィックス - デモページ HTML5Canvas、Adobe Flashを使わないので互換性が高いのもさることながら…

javascriptでjavascriptのシンタックスハイライト

このブログにコードを載せる際のシンタックスハイライトの為に作った。 基本的にはキーワードを正規表現で拾ってきて<span>タグで囲むだけのもの。 正規表現リテラルと文字列リテラルは複雑になったので分けて処理。 結局思い通りに動くまで2日か3日ぐらいかかっ</span>…

undefinedを[ ]で囲んで+で連結すると空文字っぽくなる

[undefined] + [undefined] // "" 1 + [undefined] // "1" その他にも、 1 + [1]; // "11" 1 + ["1"]; // "11" 1 + [true]; // "1true" 1 + [0, 1, 2]; // "10,1,2" 1 + [undefined, false, NaN, null, 0]; // "1,false,NaN,,0" 数値、真偽値、NaNはそのまま…

1ずつ変化する数に/n&1すると、0と1をn回ずつトグルできる

0で初期化したaを1ずつ増やし、そのたびに割る2アンド1をする。 var a = 0; a / 2 & 1; // 0 a++; a / 2 & 1; // 0 a++; a / 2 & 1; // 1 a++; a / 2 & 1; // 1 a++; a / 2 & 1; // 0 a++; a / 2 & 1; // 0 a++; a / 2 & 1; // 1 a++; a / 2 & 1; // 1 0と1…

Math.floor()を短く書く

javascriptではビット演算をすると、自動的に整数に変換されるよ なので、 var x = 5, a = 3.98; とした時 Math.floor()を使うと、 x - Math.floor(a); // 2 となるところを x - (a | 0); // 2 と、ビット演算を使って短く書ける。(正確にはMath.floor()と…