JavaScript
ものすごい久しぶりのブログ更新になってしまいましたが、今回はJavaScriptの非同期処理について書いてみたいと思います。 このテーマはうまく説明できない部分が毎回ちょいちょいあるのですが、こうしてまとめることで頭の中が整理されていくということもあ…
結構な数のつまづきがあったのでメモしておきます。 なお、Flow は現在も活発に開発中のため、そこそこカジュアルにBreaking Changeする可能性があります。 この記事はあくまでつまづきやすかったポイントを残すにとどめているので、基本は公式のドキュメン…
先日 foovar という Stylus のライブラリを公開しました。 Stylus の変数を JS ファイルにエクスポートするためのライブラリです。 memowomome.hatenablog.com その時に調べた Stylus JavaScript API の詳細や、プラグイン作成の方法です。 仕様の変更などに…
transition 、animationが使えるようになり、擬似セレクタの種類も増えてきたことで、スタイル周りの多くのことがCSSだけ(あるいはclassListのadd、remove程度の操作)で書けるようになってきた気がする。 それでも、どうしても JavaScript で操作したい時…
flexboxのプロパティの組み合わせを比較できるカタログが欲しいなーと思ったので作ってみました。 各プロパティーの値がどのように解釈されるか、ブラウザ間での違いなどが分かります。 あれもこれもと入れていたら無駄に長くなりました。 2017年8月17日追記…
CSS3のtransition。 一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。 このtransitionを使っていていつも悩ましいのが、widthやheight…
というより、自分が最近知った機能。 ハッシュをCSSのプロパティ名と値に展開できる Stylusではハッシュが使えます。 シンタックスはJSのオブジェクトリテラルとほぼ同じですが、Stylusのnodeをそのまま値に使用できる点が違います。 以下のように、値に10px…
Riot.jsの話。 カスタムタグが増えるにつれ、Riot CLIによるコンパイル時間がバカにならなくなってきた。 特にwatchの立ち上げ時に時間がかかる。 コンパイルオプションとしてBabelとStylusを使用しているので、最初これらを疑ったが、buildのみだとさほどか…
前の投稿で作ったデモをElectronで包んでアプリにしてみた。 memowomome.hatenablog.com Circle CIとGithub Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。 (超優秀な同僚が組んだ物を流用している) アカベコマ…
GWはこれを作ってました。 時計と世界各地のライブカメラの映像を組み合わせたものです。 YouTubeのiframe APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。 以下の操作が行えます。 時刻を表す文字のシルエットをShift+Kで…
npmにappend-cssというパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。 たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')してみたら、自分が作ったと思っていたものと随分設計が違くてび…
XML, DOM, JSON, APIなどの略称を変数の命名等で使う時のフォーマット統一したい(して欲しい)。 XMLHttpRequest XML、 Extensible Markup Language(エクステンシブル マークアップ ランゲージ) ウィキペディア: Extensible Markup Language Http、 Hyperte…
今日もよく燃えてますね。 しかしそういった話は一切合切横に置かせてもらいまして、私はCSSで動かしたくなったので動かしてみることにします。 単純な図形とルール このエンブレムは非常に単純な図形とルールで出来ています。 大抵のタイポグラフィは一貫す…
JavaScriptによるアニメーションの制御について調べていたところ、本筋から離れてしまいそうだったのでここに。 ここまでの流れをおおまかに書くと、 JavaScriptにはタスクのキューがあり、頭から順に登録されたタスクが処理される。 ここで言うタスクとはほ…
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>…
htmlの中の任意の要素のdata-eval属性の値をJavaScriptとして実行するだけのモジュールです。 npm: evaluable-tag インストール Nodeがあってnpmが使える場合は、 npm install evaluable-tag npmがない場合はgithub: evaluable-tagからダウンロード。 使い方…
RoomMirrorとは Markdownから生成したHTMLの中のコードブロックにCodeMirrorでシンタックスハイライトを行うために作ったもの。 npm: RoomMirror RoomMirror: ドキュメント この記事はドキュメントの内容に修正を加えつつまとめたものです。 インストール No…
はてなブログのコードの表示に個人的になんとなく違和感があって、特にモバイル環境で見た時の折り返しが見難い。 どうにもこういうものは見た目をカスタマイズしたい願望があって、はてなブログはモバイルのデザインをカスタマイズできない*1のがどうにもつ…
初Greasemonkey、初Tampermonkey、初ブックマークレット触ってみました。 生DOMいっぱいさわりました。 ブラウザで検索・置換 いくつかサンプルコードを見ているとDocument.body.innerHTMLを正規表現で検索・置換するものが多かった、 というのはつまり以下…
Light Table使ってます。 Light Tableってどのくらい使われてるんだろう? twitterのタイムラインを見てるとSublime TextとかAtom関連のつぶやきは良く見かけるけど、Light Tableの事はほぼ見ない印象。 なのでLight Tableのいいところを紹介します。 Evalua…
もろもろはじめました。 何を書いていいのか分からなくなるので、メモはこまめに取らないとダメですね。 ザクッとした感想(雑感) あれこれ悩んでいるより、とにかく触ってみるのが一番だなと思いました。 新しかったり、自分の知らない技術の紹介とかを見…
MVC、MVVMに関する記事を色々読んでいると、 それなりに理解したつもりになっても、いざ具体的な事になるといまいちピンと来ない。 今感じている事、 大規模な開発を経験したことが無いから、必要性が実感できてない サンプルを見てもいまいちメリットが分か…
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を使用し始めてもうだいぶ立ちます。 最近になってMacBook Pro Retinaを購入してからも同じようにEclipseを導入したのですが、その移行作業中につまずいたのでメモ。 つまずいたところ JSDTではあらかじめ読み込んでおきたいラ…
オライリーの書籍「javascriptグラフィックス」第2章「DHTML」より、CSSスプライトというテクニックを学んだ。 ダイナミックHTML - Wikipedia javascriptグラフィックス - デモページ HTML5Canvas、Adobe Flashを使わないので互換性が高いのもさることながら…
このブログにコードを載せる際のシンタックスハイライトの為に作った。 基本的にはキーワードを正規表現で拾ってきて<span>タグで囲むだけのもの。 正規表現リテラルと文字列リテラルは複雑になったので分けて処理。 結局思い通りに動くまで2日か3日ぐらいかかっ</span>…
[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はそのまま…
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…
javascriptではビット演算をすると、自動的に整数に変換されるよ なので、 var x = 5, a = 3.98; とした時 Math.floor()を使うと、 x - Math.floor(a); // 2 となるところを x - (a | 0); // 2 と、ビット演算を使って短く書ける。(正確にはMath.floor()と…