しがないエンジニア頑張る

弱々だけどこの界隈でなんとか食らいついていきたい人

動かないアーカイブ系のライブラリに絶望中。。神「コマンドを直接叩けばいいんだよ！」←衝撃

普段フロント側が多くてバックエンドならではの発想に衝撃を覚えました。

衝撃の一言

バックエンド実装中の私は、ある拡張子を解凍する必要がありました。
しかし、有用そうなアーカイブライブラリは一種類のみ、しかもバグで動かないしメンテもされていない。。途方に暮れてました。
そんな気持ちをTLにツイートしたら有識者がある一言「大抵はコマンドを直接叩いた方がうまくいく。」
目から鱗です。
あらかじめアーカイブツールをインストールしておいて、nodeならexecコマンドなどで直接叩く。非常に助かりました。

react-i18nextで一部だけ文字を装飾したい

やりたいこと

用意したTranslationの一部をboldにしたかった。
useTranslationのtだけじゃ無理だった。

答え

<Trans>を利用して、react-i18nextで一部許されているタグで装飾する。

translation.json

"hey":  "Hey <strong>{{name}}</strong> !"

example.tsx

const {t} = useTranslation("translation")
const name = "Name"

<Trans t={t} i18nKey={"hey"} values={{name}} />

translation.jsonでは装飾したい箇所にタグで囲っておき、<Trans>にt i18nKey valuesを指定する。
これに気づくのに半日以上溶かした。

おまけ：span タグなどを適応できるようにする

i18next instance - react-i18next documentation

ここにあるように、デフォルトだとbrとかしか使えない。
そのため、next-i18next.config.js に transKeepBasicHtmlNodesForを追加する。

module.exports = {
  i18n: {
    // ...
    react: {
      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'span'],
    }  
  }
}

これでspanなどが使えるようになるが、classとかの属性はつけられないっぽい。（そこまでちゃんと調べてない。）

感想

なんてわかりにくいライブラリなんだ・・

MSWのハンドラーの取得を取り回ししやすくする

ハンドラを設定する際にステータスコードやエンドポイントってあんまり変えないし、変えたとしてもStory毎ですよね。
毎回設定するのも億劫だったので、あんまり労力かけずに取り回ししやすくするようにしています。

こんな感じ

type StatusParams = Parameters<RestContext['status']>;
const defaultMyApiResponse: MyApiResponse = {
  hoge: 'hoge'
}

export const getHandleMyApi = (
  params: Partial<MyApiResponse> = {},
  status: StatusParams = [200, undefiend],
  endpoint: `/endpoint`
) => {
  const responseResolver = ResponseResolver<MockedRequest, typeof restContext, MyApiResponse> = (
    _,
    res,
    ctx
  ) => {
    const [statusCode, statusText] = status;
    return res(ctx.status(statusCode, statusText), ctx.json({ ...defaultMyApiResponse, ...params}));
  }
  return rest.get(endpoint, responseResolver)
}

これをPreviewで定義しておいて、Story毎に設定したい場合は必要な値を変えるだけですむ感じです。

export const MyStory1: Story = {
  parameters: {
    msw: {
      handlers: [getHandleMyApi({hoge: "fuga"})]
    }
  }
}

export const MyErrorStory: Story = {
  parameters: {
    msw: {
      handlers: [getHandleMyApi({}, [404])]
    }
  }
}

おまけ：ResponseResolverを柔軟に取得する案

export const getResponseResolver =
<T>(
  params: Partial<T> = {},
  status: StatusParams = [200, undefiend],
): ResponseResolver<MockedRequest, typeof restContext, Partial<T>> =>
(_, res, ctx) => (
  const [statusCode, statusText] = status;
  return res(ctx.status(statusCode, statusText), ctx.json(params));
);

const responseResolver = getResponseResolver<MyApiResponse>({hoge: "hoge", [202]});

どこかで使えるかもしれない。

Tailwind CSSのコンテナクエリにMax-width来てくれ〜！

これです。

PRがあったがマージされていない　涙（投稿日現在）

github.com

これがないと例えばこれがめんどい

例えば、テーブルっぽいレイアウトがあったとしてその幅に応じてカラム数を減らすみたいなのやりたい時、現状こう書くことになる

<div className="@container/parent">
  <div className="hidden @[1024px]/parent:block">消えるよ</div>
</div>

早く来てくれ〜

参考

tailwindcss.com

Tailwind CSS で overflow-wrap:anywhere を指定したい

探してもない！

overflow-wrap:anywhere を指定しようと探したけど、、ない、、
どうやらサポートされていない模様（投稿日現在）
https://tailwindcss.com/docs/word-break

これでOKだった

<div className="[overflow-wrap:anywhere]">...</div>

これでとりあえずはことなきを得た

参考

https://github.com/tailwindlabs/tailwindcss/discussions/2213

DockerでAmazon Linux2にnode16を入れる

Amazon Linux 2 には現状16まで*1しか入れられないので決め打ちで入れる

例

FROM amazonlinux:2

RUN curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - \
&& yum install -y nodejs

*1:https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html#setting-up-node-on-ec2-instance-procedure