@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

JavaScript

文章中のサンプルコードが壊れていませんか?

ドキュメントにサンプルコードを書くことがありますが、しばしば壊れていることがあります。 読む方からすると、ちゃんとチェックして欲しいと思いますが、 書く方からすると、文章のどこにスクリプトがあるか探すのも大変だし、それをいちいち動かして確認…

sprockets-css-purgerのAPIを考えるために、tailwindcssとPurgeCSSの境界を考える

sprockets-css-purgerの姿を想像する - @ledsun blogの続きです。 tailwindcssからPurgeCSSを呼び出している箇所 https://github.com/tailwindlabs/tailwindcss/blob/v2.2.15/src/lib/purgeUnusedStyles.js#L188-L220 const purgeCSS = new PurgeCSS() purge…

sprockets-css-purgerの姿を想像する

DHHはsprockets-css-purgerというCSSをパージするための汎用的なGemが欲しいようです。 github.com This is btw and open invitation to anyone who'd like to work on this とありますので、誰がやっても良いようです。ところで、このbtwってどういう意味…

npm auditは有益なのか?

体感として、npm auditが出してくる警告は、利益より手間の方が多いように感じてはいます。 とはいえセキュリティに関わることなので、手間でも対応しなきゃなあと、頑張って対応しています。 僕自身は、主にアプリケーションのメンテナンスだけなので、それ…

echoするAngularJSアプリケーションを新Angularの環境で動かす

Angularには、AngularJSからの移行を支援するための@angular/upgrade/staticがあります。これを使ってみましょう。 まず、Angular CLIで新Angularの環境を作ります。 次のように簡単なAngularJSアプリケーションを組み込みます。 <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> </base></meta></head></html>

PPLサマースクール2021

ss2021 - 日本ソフトウェア科学会 プログラミング論研究会 (JSSST-SIGPPL) (Special Interest Group on Programming and Programming Languages) に参加というか、視聴しました。 例えば、あるHTML要素の上にマウスカーソルがあるときに マウスの左ボタンを…

Angular CLI

Angularの開発環境はRuby on Railsと同じくらい複雑です。 最小でindex.htmlファイル1つで動かせるAngularJSと比べると驚きです。 このような環境を手動で作るのは大変なので、自動的に作成してくれるコマンドがあります。 これがAngular CLIです。 Ruby on …

echoするAngularJSアプリケーション

See the Pen とてもシンプルなAngularJSアプリケーション by shigeru.nakajima (@ledsun) on CodePen. AngularJSはng-app属性が付いたHTML要素に対して機能を追加していきます。 ng-app属性をつける代わりに、次のようにangular'bootstarp関数に対象のHTML要…

AngularのplatformBrowserとplatformBrowserBynamicの違い

stackoverflow.com チェックが付いているAnswerは嘘情報です。 その下が正解です。 platform-browser-dynamicとplatform-browserの違いは、angularアプリのコンパイル方法です。 dynamic platform を使用すると、angular は Just-in-Time コンパイラをアプリ…

AngularJSとAngularの歴史の整理

現Angular、当時Angular2ってずっと最近になって出たと思っていました。 調べたら、Angular2は結構前に出ていたことを知りました。 日付 AngularJS Angular 2015/01/13 AngularJS 1.4 開発始まる *1 2015/03/24 Angular2 開発始まる *2 2015/05/26 AngularJS…

importmapのサンプル

Google Chorme、Firefox、Safariのような、現代的なブラウザは、<script type="module">を使ってESMモジュールが読み込めます。 さらに、import文を使って依存モジュールを解決できます。 例えば、次のHTMLではvueが動きます。 <html> <body> <div id="container"> The Planet Wercury was formed {{ age }} age. </div> <script type="module"> </body></html>…

引数13万個の関数呼び出し

Rubyのバッチ処理でFile.deleteでたくさんのファイルを消していたらSystemStackError: stack level too deepという見慣れないエラーが起きました。 再帰などしていないのに、スタックを使い切るのはなぜでしょう? File.delete(*to_delete) こんな感じで呼び…

RubyのdelegateみたいなことをJavaScriptでやる

Rubyのdelegate Rubyにはdelegateというメソッドがあります。 docs.ruby-lang.org あるクラスのメソッドを、依存するインスタンスに委譲するメソッドです。 次のように使います。 delegate [:first, :last] => :@arr ぱっと見不思議ですが、ハッシュ { [:fir…

jQueryUIダイアログの上に自作モーダルダイアログをつくって要素をフォーカスするときの注意

次のようにjQueryUIダイアログの上にさらに、自作のモーダルダイアログを開く時の話です。 jQueryUIダイアログの上に自作モーダルダイアログを開く 「すでにjQueryUIダイアログを使っているのだから、自作のモーダルダイアログは要らないだろう?」という疑…

TextAEのリレーション描画を独自SVGに置き換えた

お仕事の話です。 長年GitHub - pubannotation/textaeの改修に携わっています。 リレーション(下の図の矢印)の描画にjsPlumb Toolkit - build connectivity quicklyというコネクション描画用のライブラリを使っていました。 汎用ライブラリですので、少し…

OSSライブラリからの学びかた npmからJavaScriptのライブラリを探してソースコードを見つける編

はじまり blog.magnolia.tech CPANに上がってるモジュール、一つ一つの粒度が小さいから読みやすいし、ドキュメントもテストもしっかり揃ってて挙動を把握しやすくて、自分にとっては最高の教科書だった OSSで公開されているソースコードは、最高の教科書で…

イベントハンドラーAの処理があるときはイベントハンドラーBの処理を止めたいです

ブラウザのJavaScriptの話です。 イベントハンドラーAの処理があるときはイベントハンドラーBの処理を止めたいです。 イベントハンドラーAは新しいNodeを作って選択します。 イベントハンドラーBは選択を解除します。 期待する動作は、新しいNodeができて選…

今週の作業メモ

JavaScripting runコマンドのバグ https://github.com/workshopper/javascripting/issues/218 javascripting run hogohoge.jsを実行するとたしかに[object Object]が表示されます。 javascriptingではrunコマンドは使っていません。 https://github.com/work…

今週の作業メモ

spring Rails 5.2.3でrails consoleを実行すると、プロンプトが出る前で止まります。 ~ bundle exec rails --version Rails 5.2.3 ~ bundle exec rails c ^CTraceback (most recent call last): 15: from bin/rails:3:in `<main>' 14: from bin/rails:3:in `load' </main>…

アルゴリズムとデータ構造をたどるWebサーフィン

#rustfestの発表 yoshが #rustfest の発表が、すごい面白かったとツイートしているのを見ました。 Reading list:- https://t.co/CSO8OCB3jM- https://t.co/Zr6BBRa1yeAnd more, linked in the slides: pic.twitter.com/eafHj3oTDj— yosh at rustfest (@yoshu…

「有名な統計力学ゲーム」をcanvasで表示してみる

今回のテーマ 前回の ledsun.hatenablog.com では、やり取りの結果をSVGのレーダーチャートで表示しました。 SVGではやり取りが1000回を超えると快適に表示できませんでした。 今回は、canvasのレーダーチャートに表示します。 チャート See the Pen statist…

「有名な統計力学ゲーム」をレーダーチャートで表示してみる

今回のテーマ 前回の ledsun.hatenablog.com では、分配アルゴリズムの実装と結果を数値で表示しました。 今回は、アルゴリズムには変更を加えずに結果をレーダーチャートで表示します。 チャート See the Pen statistical_mechanism_on_chart by shigeru.na…

「有名な統計力学ゲーム」を実際に試してみる

有名な統計力学ゲーム 有名な統計力学ゲーム。6人が均等にコインを持つとする。サイコロを二つ振り、一つ目の出目の人はコインを中央に、二つ目の出目の人はそのコインを貰う。無い人は出さない(借金なし)。これを繰り返すと少数の金持ちと多数の貧乏人がで…

DOM更新アルゴリズムを実装しました

github.com 動機 virtual-domの良さ Reactに代表されるようにGitHub - Matt-Esch/virtual-dom: A Virtual DOM and diffing algorithmを使うと、デザイン変更時に、JavaScriptのロジックを考えずに、HTMLとCSSを考えるだけよくなることがわかっています。 一…

はてなブックマーカによる「アニメ史上に残るオリジナル展開」

集計対象 コメント数 全コメント プラネテス 鋼の錬金術師 喰霊 ドラゴンボール 攻殻機動隊 蒼き鋼のアルペジオ うる星やつら こどものおもちゃ みなみけ アイドルマスター セーラームーン 幽遊白書 くまみこ ぼくらの サザエさん デビルマン ミスター味っ子…

はてなブックマーカによる「日本史上で優れた思想家って誰?」

anond.hatelabo.jpに対する はてなブックマークコメント b.hatena.ne.jp を集計しました。 10人 お題どおりに10人挙げます。 西田幾多郎 福沢諭吉 本居宣長 丸山眞男 道元 鈴木大拙 夏目漱石 安藤昌益 平田篤胤 荻生徂徠 私は門外漢です。結果が妥当かどうか…

はてなブックマーカによる「凄い面白いファンタジー小説」

ベスト3 十二国記 守り人シリーズ ゲド戦記 4位以下 ドラゴンランス 魔法の国ザンス 本好きの下剋上 はてしない物語 ナルニア国物語 勾玉シリーズ グイン・サーガ 〈卵王子〉カイルロッドの苦難 以下票数のみ 集計方法 データ取得 集計 anond.hatelabo.jp に…

Node.jsでつくるNode.js その2

ledsun.hatenablog.com の続きです。四則演算の対応するオペレーター(演算子)を増やします。 オペレーターを増やす 前回+に対応しました。 次に、-, *,/,%に対応します。 実装 switch文に演算子ごとの分岐を追加するだけです。 const esprima = require('e…

Node.jsでつくるNode.js その1

ledsun.hatenablog.com の続きです。Node.jsで動くJavaScriptインタプリタを実装しようとする試みです。 作戦 パーサにはEsprimaを使う TDD的なスモールスタート戦略で進める(最初はセルフホスティングを意識しない) 下調べ EsprimaがどのようなASTを返す…

RubyでつくるRuby 読書感想文

どんな本? RubyでつくるRuby ゼロから学びなおすプログラミング言語入門(紙書籍)www.lambdanote.com 言語処理系の実装を体験するための本。 言語処理系の実装はパーサの実装が面倒臭くて、大抵の人はそこで力尽きます。 そこで、パーサは著者の方が用意し…