anti scroll

ブラウザと小説の新しい関係を模索する

programming

jingoo 1.4.0 をリリースしました

jingoo 1.4.0をリリースしました。 github.com 新しくなった点 Jg_templateモジュールを部分的に改良したJg_template2というモジュールが追加されました。 サンプル これまでJg_templateモジュールは、次のようにmodelsに連想リストを与えていました。 open …

nehan7をリリース

nehan6からnehan7にバージョンアップしました。 インストール npm install --save nehan 変更点 組版速度が約20%向上しました。 コードサイズが約10%削減されました。 nehan.cssが不要になりました。 行内に置換要素、画像、ルビ、圏点傍点、複数サイズの文…

Angular(<=8)でnehanを使っている方への注意

結論だけ先に述べておきます。 Angular8以下では、nehan(<=6.0.38)までしか使えません。 ただしTypescript3.6.3以降を使える環境では、なんの問題もなくnehan(>=6.0.40)を使用できます。 以下に理由を書きますが、非常にしょうもないことです。 package.json…

Angular + Ngrx所感

先月から試験的にAngular+Ngrxを使って縦書き文庫を作り直してみる、ということをしていたんですけど、パソコンが壊れバックアップも取ってなかったので、全て消え去りました(この記事はChromebookで書いてます)。 真面目にやると一年ぐらいかかる作業なの…

Typescriptのアレコレ覚え書き

書いておかないと忘れちゃいそうなので、残しておきます(たまに追記するかも)。 戻り値がbooleanであると同時に、引数が特定の型であることをコンパイラに教えることができる これが便利なのは、こういう感じのコードにおいてです。 class Foo { say(){ co…

switchが買えないらしいので、どのぐらい買えないのか試してみました

マリオ発売の直前に変えたら凄い、と思ってチャレンジしてみました。 まずは値動きをチェックする巡回プログラムを書きます。 #!/usr/bin/python3 # -*- coding: utf-8 -*- from pyquery import PyQuery as pq import os def notify(subject, message, email…

クロスドメインで子フレームから親ドキュメントのwidth:100%を取得する方法

ひょんなことからviewportのdevice-widthがbodyタグから適用される事を知りました。 別の言い方をすれば「bodyより上位のタグには適用されない」ということみたいです。 例えば次のようなページ(parent.html)をiPhone5(device-width = 320px)で開き、ifr…

Googleの検索結果でリダイレクトとトラッキングを無効化する

Googleの検索結果からリンクをコピーして貼り付けたら、めちゃくちゃ長いリダイレクト用のリンクになっていて「ふぁ??」となることがあります。 なので、それをなんとかしてくれる拡張機能を探したのですが、しっくり来るのがなかったので自作することに。…

10秒でわかるpseudo-classとpseudo-elementの違い

pseudo-class pseudo-classは、左側のセレクターに続けて「〜が」と読みます。 /* liが最初の子だった場合 */ li:first-child{ margin-top:0; } 「〜が」だから、左側がマッチする要素です(上の例ではli)。 pseudo-element pseudo-elementは、左側のセレク…

直感的に素直な感じでカスタムなリストマーカーを作りたい

例えば標準で用意されていないリストマーカーをUnicodeなんかで作りたいとき、以下のようにli::beforeにcontentを設定してマイナスのマージンをセットする、みたいなやり方がよく知られています。 ol li:nth-child(1)::before{ content:'\2460'; /* CIRCLED …

Unicode Hyphen覚え書き

例えばHTMLで「F-15」のような「-」(ハイフン)を含むboxを90度回転して表示させようとすると、ハイフンの後で改行されてしまいます。 なぜこんなことが起きてしまうのでしょうか。 理由 フォントサイズが16と仮定して「F-15」という横書きのwordを囲むサイ…

CSSとDOMの境界、あるいはリスト組版がテーブル組版の親戚である件について

http://tb.antiscroll.com/static/nehan-demo#list このデモですけど、ブラウザの大きさを変えると、リフローすることに気付いた人はいるでしょうか。 こういうデモで、テーブル組版や回り込み処理を見せると「おお」となる人が多いんですけど、リスト組版を…

いつの間にかFileAPIのreadAsBinaryStringがオワコンになっていた。今後はreadAsArrayBufferで。

タイトルで全てを言い尽くしてしまいましたが、経緯をば。 不具合報告で「IEで画像のアップロードができない」ってのがあったので調査してみたら、readAsBinaryStringでコケてました。 調べてみると、どうもIE系列ではreadAsBinaryStringそのものが存在しな…

RxJSとvirtual-domで、拡張可能なreactiveアプリケーションを作るリアクティブ・アダプター - inga

inga(因果)は、軽量で拡張可能なリアクティブ・アダプターです。RxJSとvirtual-domを使っています。 github.com よくあるTodo-MVCは100行ぐらいです。 inga/todo-mvc.js 特徴 軽量なこと。全ソース合わせても100行ちょっとしかないです。 プラグインで拡張…

nehan.jsのセレクターマッチング処理を高速化

nehan.jsのセレクタのマッチング処理を高速化しました。 先日サポートした行末揃えは、有効にすると20%ほど遅くなりましたが、今回の修正によって15%ほど速くできたので、少し戻すことができました。 前々から、機会があったらやっておこうと思っていた処理…

Chrome Extensionのmanifest.json内version値を更新するスクリプト

手作業でやるのが面倒になってきたので書きました。 事前にnpm install minimistが必要です。 // update-manifest-version.js var fs = require("fs"); var args = require("minimist")(process.argv.slice(2)); var update_version = function(version, tar…

Rx(Reactive Extensions)とVirtual DOMで作るリアクティブなUI、およびMVARアーキテクチャについて

元ネタはReactive MVC and the Virtual DOMなのですが、MVIという言葉がしっくりこなかったので、自分なりに消化した結果、こういう枠組みになりました、という話しです。 MVARアーキテクチャ概要 まず頭文字の意味についてですが、 M = Model V = View A = …

Prepared Statementを少し使いやすくするeps(Extended Prepared Statement)

通常のPrepared Statementを少し使いやすくする処理系 eps を作りました。 epsはExtended Prepared Statementの略です。 tategakibunko/epsgithub.com 簡単に言うと、こんな感じでPrepared Statementを記述したくて作ったものです。 prepare foo(age:int, na…

Kefir.jsを使ってnehan.jsなビューアーをReactiveに作る

Kefir.jsを使ったのは、ドキュメントがわかりやすくて綺麗だったからです。 ビューアーの要件 NEXTクリックでページを進める。 PREVクリックでページを戻す。 $(“#page-count”)に、現在の総ページ数を表示する(非同期で増える)。 $(“#page-no”)に、現在の…

単純なマッチで複数回replaceするのと、文字クラスを使って一回replaceするのでは、どちらが速いか

qiitaでこんな記事がありました。 innerText(textContent)/innerHTMLを使わずJavaScriptでHTMLエスケープ - Qiita で、思い出したのですが「文字クラスでreplaceを一度で済ますより、単純なマッチを直列で繰り返したほうが速い」って話しをどこかで聞いた覚…

jingoo v1.2.5 release

jingooのv1.2.5をリリースしました。 ひょんなことからjingoov1.2.4にバグ(割りとでかい)を見つけてしまい…緊急でリリースしました。 旧バージョンを使用中の方は、アップデートすることをおすすめします。 バグの詳細 具体的なバグは何かというと、オブジ…