メモを揉め

お勉強の覚書。

npm

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

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

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

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

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')してみたら、自分が作ったと思っていたものと随分設計が違くてび…

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

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

StylusでスキューモーフィックなCSS3ジェネレータを作った(続き)

前回のエントリー githubにアップしました。 github: all-user/stylus-skeuomorphic npm: @alluser/stylus-skeuomorphic Demo: Cassette Deck Controls 各ボタンの記号はFont Awesomeです。 このブログでも使用しています。 PlayとRecのボタンは<input type="checkbox" style="display: none;">と<label>を組み合わ</label>…

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のがどうにもつ…