メモを揉め

お勉強の覚書。

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

CoffeeScript CSS HTML JavaScript npm Browserify Babel

npmにappend-cssというパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。

たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')してみたら、自分が作ったと思っていたものと随分設計が違くてびっくりしてしまった。
しかもcoffeeだし。

良い機会なので、今使いたいと思っている（自分がかつてそのように作ったと勘違いしていた）設計に書き直した。

decafjs

ライブラリ本体はものすごく小さいのでES2015でまるっと書き直せばよかったけど、テストコードは流用できそうな部分が多かったので、coffee -> ES2015の変換にdecafjsを使ってみた。

www.npmjs.com

使い方は変換したいcoffeeのソースがあるフォルダを指定するだけ。

$ npm install decafjs -g
$ decaf coffee-folder

変換後のコードは基本的に手直しが必要だけど、単純な変換作業は全てお任せできる感じでした。

append-css

HTMLのhead内に<style></style>要素を追加して、新しくCSSルールを定義することができます。
<style></style>要素に対する操作をラップしてくれます。

www.npmjs.com

const AppendCss = require('append-css');

// CSSルールの追加
let appendedRules = new AppendCss(`
  body {
    background: black;
  }
`);

// ルールの無効化
appendedRules.disable();

// ルールの変更
appendedRules.textContent = `
  body {
    width: 100%;
  }
`;

// ルールの有効化
appendedRules.enable();

// ルールの無効化と<style></style>要素の破棄
appendedRules.dispose();

prepend

<style></style>をhead要素の先頭に追加する、prependオプションもあります。

let prependedRules = new AppendChild('body { width: 100%; }', { prepend: true });

insert-css

browserifyで有名なsubstack製のinsert-cssというライブラリがある。

www.npmjs.com

npmのページを見る限り、append-cssは少ないながらもちょびちょびダウンロードされているらしかった。
もしかしたらというか多分ほぼ確実に上述のinsert-cssと間違えてる人がいるだろう。

以前append-cssを始めて公開した時はまだこのinsert-cssの存在を知らず、公開した直後に知った。
だから本当に誓って最初から間違いを狙って作ったわけではない、という言い訳をしてこのエントリーを終わりたいと思います。

CSSをStylusの構文にコンバートする

CSS Stylus Tips

CSSをStylusの構文にコンバートするオプションがStylusに用意されていることに今日気づいた。
既存のプロジェクトでCSSからStylusに移行したい時とかにはいいかもしれない。

-Cもしくは--cssオプションを使用する。

$ stylus -C path/to/source.css ./source.styl

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

HTML JavaScript Ruby プログラミング

XML, DOM, JSON, APIなどの略称を変数の命名等で使う時のフォーマット統一したい(して欲しい)。

XMLHttpRequest

XML、

Extensible Markup Language（エクステンシブル マークアップ ランゲージ）
ウィキペディア: Extensible Markup Language

Http、

Hypertext Transfer Protocol（ハイパーテキスト・トランスファー・プロトコル、略称 HTTP）
ウィキペディア: Hypertext Transfer Protocol

Request。

XMLだけ全部大文字、(略称)(略称)(単語)の組み合わせ。

DOMContentLoaded

そもそもイベントタイプって全部小文字やなかったんかいというツッコミを入れつつ。

DOM、

Document Object Model (DOM)
ウィキペディア: Document Object Model

Content、Loaded。

はいはいなるほど、頭文字の略称だけは全て大文字にするっていうパターンね、だんだん見えてきたよ。
組み合わせは(略称)(単語)(単語)。

jsonFlickerApi

flickrのAPIをJSONPで使うときに呼び出される関数の名前
なんと固定。
任意の名前を指定できない。

これは、メソッド名だから頭文字の略称はすべて小文字にするのか、ふむふむ。
Apiは略称だけど普通にキャメルケース。

toJSON

と思ったらそうでもないんだねえぇ〜、JSONは全部大文字なんだねえぇ〜。

こんな感じなので自分で命名する時も迷う。
ちゃんとした命名規則欲しい。

snake_caseだといいなと思ったけど、そういう問題じゃないっぽい。
railsにはActionModel::Serializers::Xmlというモジュールと、ActiveSupport::XmlMini_Nokogiri::Nokogiri::XMLというモジュールが存在する(Dashで見ただけですが)。
何か法則があるのかも知れないけど分からない。

個人的に略称は大文字か小文字どちらかに統一したいという欲求はある。 クラス、定数なら大文字、インスタンス、変数やメソッドなら小文字で全部書きたい。

結局どうするのがいいんでしょうね

みたいに書くのが一番規則性が保たれるような気がしている今日このごろ。