tmuxでpowerlineフォントがうまく表示されない時

Alacritty入れてみたけど、tmuxでpowerlineフォントが表示されなくて困ってた。

alacritty.ymlの設定で対応する方法で悩んでたけど、tmux側の問題だった。

github.com

全体でlocale的にUTF-8を使うようになっていない状態だったけど、tmuxなしの状態ではよしなに判定してくれてたけど、tmuxに入るとUTF-8使ってくれない状態だったようで。

rcファイルにきちんと LANG=ja_JP.UTF-8 LC_TYPE=ja_JP.UTF-8 を設定して解決した。

Jestで非公開関数をテストする方法がイマイチだった

前回の続き。

結論:const を上書きできないっぽいのでrewire以外の方法を探すのが良さそう…

(追記に上げたように、Jestで動かす時にできないという条件付き)

前提

検証した時のバージョン

{
  "dependencies": {
    "jest": "^23.6.0",
    "rewire": "^4.0.1"
  }
}

モック前

テスト対象

const fs = require("fs");

const read = cb => {
  return fs.readFile("./text.txt", "utf-8", cb);
};

module.exports = read;

テストコード

const read = require("./read.js");

test("read", done => {
  return read((err, text) => {
    expect(text).toMatch("foobar");
    done();
  });
});

モックしてみる(失敗)

fs.readFile の結果をモックしたいので、こう書いてみる

テストコード2

const rewire = require("rewire");
const read = rewire("./read.js");

test("read", done => {
  read.__set__("fs", {
    readFile: (path, enc, cb) => cb(null, "foobar")
  });

  return read((err, text) => {
    expect(text).toMatch("foobar");
    done();
  });
});

けれど結果はモック前と変わらない…

Issue当たってみると、同じ悩みを抱えてる人がいたよう。「Rewiring const is supported since 3.0.0」って言ってるけどReopenされてる。そしてReopenした人の「TypeError: Assignment to constant variable」とも違う状況なので不思議な気持ち。

github.com

モックしてみる(とりあえず成功)

Issueへの返信にもあった let 使ってみる方法を試す。テストコードは2の状態のまま。

テスト対象2

let fs = require("fs");

const read = cb => {
  return fs.readFile("./text.txt", "utf-8", cb);
};

module.exports = read;

これでテストはPassした。でもテストのために let にするのっておかしいし、そんな制限ある中でコード書きたくないのでrewireは使えないかな…


追記

どうやらJestとの組み合わせが良くないらしい。

github.com

リンク先ではMochaで試してるけどnodeでもMock成功した。

// run.js
const rewire = require("rewire");
const read = rewire("./read.js");

read.__set__("fs", {
  readFile: (path, enc, cb) => cb(null, "foobar")
});

return read((error, text) => {
  console.log({ error, text });
});

node run.js として呼び出したらモック成功した。まあJestとの組み合わせが良くないなら選択できないんだけど、ライブラリ自体は問題ないようだったので訂正。

Jestで非公開関数をテストしたい

rewire を使うと簡単にできた。

github.com

前提

Jest入ってる。Babel入れてない。

インストール

npm install --save-dev rewire

準備

通常なら require(path) とするところを rewire(path) にする

const rewire = require('rewire')
const myModule = rewire('./myModule')

テスト対象の関数を取り出してテストする

const myPrivateFunc = myModule.__get__('myPrivateFunc');
expect(myPrivateFunc()).toEqual({})

CSSのみでスクロールできそうな雰囲気を出す

HTMLでElement内でスクロールさせるUIが必要になったけれど、Macスマホだとスクロールバーは消えるスクロールできるの気づきにくい。という問題があったので、CSSのみでできる方法を考えていた。

解決方法そのものが出てきてしまったけど、すぐに理解するにはCSS力が足りなかったので、分解しつつ理解したメモです。

元ネタ

http://lea.verou.me/2012/04/background-attachment-local/

元ネタの人が本出してて評判良いので読んでみたい。翻訳版ないけど…

CSS Secrets: Better Solutions to Everyday Web Design Problems

CSS Secrets: Better Solutions to Everyday Web Design Problems

分解してみた

codepen.io

本来は背景色が白だけど、影を隠す要素を見やすくするために色付けしてる。

背景の設定

元のCSSの定義順に、背景1〜4とすると、

  • 背景3,4
    • 影っぽい見た目の背景
    • background-attachment: scroll で、Elementのスクロール位置ではなく、ページ内のElementの位置に追従する
  • 背景1, 2
    • 影を隠すための背景
      • background の重ねがけは、定義順で上位レイヤーになる仕組みを利用
    • background-attachment: local で、Elementのスクロールに追従する
    • 重なりと追従のおかげで、スクロール位置がトップかボトムにあると影が隠れる

background-attachment

について、知らなかったので読んでみた。

CSS Backgrounds and Borders Module Level 3

fixed

fixed with respect to the page box

Note that there is only one viewport per view

Viewportに対して固定されるので、もし背景3,4に設定してしまうと、Viewportのボトムにない限り影が見えないことになる

scroll

fixed with regard to the element itself and does not scroll with its contents

Elementの背景として表示されて、内包するElementがスクロール可能でも追従しない

local

the background scrolls with the element’s contents

Element内でのスクロール位置に追従する

スクロール範囲とBorderの関係についても触れられてるけど、今回は省略

感想

CSSすげー

CSSで色々作れる人すげー

Scriptタグのリソース読み込み順序についてのメモ

ちょっとトラブってしまったので、反省しつつ整理。

リンク先の画像がすごいわかりやすいので、これ見たら解決するけど。

HTML Standard

パターン

<script>
<script defer>
<script async>
<script type="module">
<script type="module" async>

この5個がある。2018/01/29時点では module のサポート状況微妙だけど。

Can I use... Support tables for HTML5, CSS3, etc

Classic Scripts

module scriptsではない方を参照先ではこう読んでいたので倣っておく。

fetch evaluate
[default] HTMLのパースをブロックしてFetchする Fetch直後にJSの評価を開始する
async HTMLのパースをブロックせずにパラレルでFetchする Fetch完了直後にHTMLのパースをブロックしてJSの評価を開始する
defer HTMLのパースをブロックせずにパラレルでFetchする HTMLのパースが完了したらJSの評価を開始する

Module Scripts

fetch evaluate
[default] HTMLのパースをブロックせずにパラレルでFetch、依存先もFetchする HTMLのパースが完了したらJSの評価を開始する
async HTMLのパースをブロックせずにパラレルでFetch、依存先もFetchする 依存先も含めたFetch完了直後に、HTMLのパースをブロックしてJSの評価を開始する

module scriptsにはdeferつけてもデフォルトのまま。と説明あるけど、要はClassic Scriptsでのdefer属性付きと似たような動作がデフォルトということのよう。

昔読んだWebの基礎についての本にも載ってたのかもしれないけど、当時はそれを理解できるベースがなかったんだろうなと思うと感慨深い。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

CSSのみでラジオボタン+スライドバーなUIを作る

作ったサンプル

はこちら。アニメーションとかはもっと調整できそうだけど… jQueryを利用してますが、選択中の値を表示するためだけに使ってます。

codepen.io

radios-to-slider: jquery plugin to create a slider using a list of radio buttons. 見た目はこちらを参考にしてます。

ポイント

ラジオボタンの選択

ボタン自体は非表示にしていて、Psuedo ElementでUIを作るありがちな手法。 非表示に指定する時に display: none だとPsuedo Elementへのスタイルで打ち消せないので visibility: hidden を使うことを忘れずに。

スライドバー部分

デフォルトアクティブな色で、選択したラジオボタン以降を灰色にしてる。general sibling selectors使う都合。

.radio:checked ~ label
  background-color: gray

ところで ~ 使ったセレクタを general sibling selectors (一般兄弟セレクタ)と呼ぶの覚えにくい…

Adjacent sibling combinator - CSS | MDN

radial-gradientで枠付きの丸を描く

borderで十分だったことに後から気づいたけど、せっかく使い方覚えたので。

developer.mozilla.org

// メモ用に改行
background-image: radial-gradient(
  circle,              // 形と位置の指定 省略すると `ellipse`
  white 0.7rem, // 白で0.7remまで塗る
  black 0.7rem, // 0.7rem ~ 0.7rem で白->黒にグラデーション。要はグラデーションなし。
  black 1rem,     // 0.7rem ~ 1remは黒に塗る(省略可)
)

あとがき

最近CSSがちょっと楽しくなってきた。辛いことの方が多いけど。

もっとCSS力上げたいけど、やりたいことが先にある感じになってて、体系的に学習していきたさがある。

みんなどうやってCSS修行してんのかな。

CSS Secrets: Better Solutions to Everyday Web Design Problems

CSS Secrets: Better Solutions to Everyday Web Design Problems

RailsにWisper入れてみる

Wisperとは

github.com

Ruby on Railsで Pub-Subパターンを使うためのライブラリ。ビジネスロジックを分離して Hexagonal Architecture を実現するためや、ActiveRecord のCallbackの代わりに使ったりする。

サンプル

使い方はGitHubに載ってるので十分だったので省略。 気が向いたら追記するかも。

感想

巷で話題になるだけあって、コードがスッキリ書ける感じする。 .on { block } の記法だとJavaScriptのPromiseとにた感じがするのも良かった。 DDDとかCQSと組合わせるときに真価を発揮しそうだけど、部分的に使うだけで十分コードが整理される感じがして良かった。

背景

取り止めがなくなったので最後に…

仕事のRailsのコードベースが大きくなってるので、ツラみを解決したくて入れてみた。 まず1つ目は、Model間にまたがった処理をしたいとき。どこにコードを書こうか迷うし、後から読み返すときにどこで変更があるのかわかりにくい。大体は関連の強い気がするModelに入り口となるメソッド作ってる。 そして2つ目に、ログイン情報やリクエストの内容を処理に使うような場合。関心の分離的にはControllerに書くべきなのか?Controllerにコードたくさん書くのってイケてないのでは?とか思いつつ書いていた。 こういう場合、サービスクラスを導入するというのもよくあるけれど、最近はCommandという単位にするのが流行ってる雰囲気を感じる。

qiita.com

リファクタしたい気持ちをもちつつ、Wisper使ってみた経験が欲しかったので、とりあえずライトにできる範囲で試してみた。