前提

• fish shell をセットアップ済み
• plugin 管理ツールとして fisher をインストールしている

jethrokuan/z

• z インストール後、過去移動したディレクトリであれば、パスの一部のワードを渡すことで部分一致したディレクトリに移動する
• cd と異なり、移動先のパスをフルに指定しなくていいので、タイプ数が減って便利

# 例えば過去に ~/foo/bar ディレクトリに移動していた場合
$ z bar # 実行することで、zが保有している履歴を部分一致で検索し ~/foo/bar ディレクトリに移動する

franciscolourenco/done

• ターミナルでコマンド実行している時に、ターミナルがバックグラウンド状態であれば、OSの通知で実行終了をお知らせしてくれる
• 実行時間が長いコマンドを実行した時に、ターミナルを都度都度見に行かなくてよくなった

oh-my-fish/plugin-peco

• history 検索を peco にバインディングする
• fish function を自分で書くことで実現することもできるが、導入がお手軽なのでこちらで入れている

evanlucas/fish-kubectl-completions

• kubectl の fish shell 用コマンド補完
• kubectl 本体に搭載されていないため入れている

ちなみに plugin の探し方

• 検索サイトなど無いのでやや探しづらい
• 自分は GitHub 上で以下リポジトリやトピックを見て探している
• https://github.com/jorgebucaran/awsm.fish
• https://github.com/topics/oh-my-fish
• https://github.com/topics/fisher
• https://github.com/topics/fish-plugins
• https://github.com/orgs/oh-my-fish/repositories?q=plugin&type=all&language=&sort=

https://zenn.dev/qnighy/articles/345aa9cae02d9d

JavaScriptにおける非同期処理の仕組みについて。

普段Promiseなどを使っているが、実際仕組みまで把握できていないので、読んでおきたいと思った。連載物になっている。

Link と ISR が引き起こす Next.js の過負荷

https://zenn.dev/takepepe/articles/nextjs-isr-prefetch

このサイトにISRを入れようと思った時に見つけた記事。

Next.jsのLinkコンポーネントがファーストビューに収まっていると実はデフォルトではリンク先をprefetchする。

リンク先がISRでrevalidateが短時間の場合意図せず過剰にページの再生成が走ってしまうので注意。

Deno v1.15で導入されたNode.js互換モードについて

https://zenn.dev/uki00a/articles/node-compat-mode-introduced-in-deno-v1-15

Denoの動向を最近追えていないが、v1.15からNode.jsの組み込みモジュールを利用できるようになるらしい。

実行時に--compatオプションを指定するよう。

UIデザインは奥が深い、CSSで美しいシャドウを実装する方法

https://coliss.com/articles/build-websites/operation/css/designing-beautiful-shadows-in-css.html

よりリアリティを与えるためのshadowのかけ方。パっと見の雰囲気で決めがちなので、この記事を見ながら設定してみたいと思う。

Railsのパターンとアンチパターン1: 概要編（翻訳）

https://techracho.bpsinc.jp/hachi8833/2021_01_04/101446

Railsで起きがちなアンチパターンとそれに対する解。

漠然とRailsに触れた時に感じていたり、仕事で学んだことが言語化されたように感じた。

知らないことも多かった。

連載物になっている。

Announcing Parcel v2!

https://parceljs.org/blog/v2/

v1を少し触ってみたぐらいの経験しか無いが、v2が出たらしい。この機会に改めて触ろう。

• 個人のフロントエンド開発する時に入れるライブラリが大体同じだけど毎回何入れてたっけとなるので残しておく
• 詳しい使い方とかは今回言及しない

Formatter

• Prettier
• https://prettier.io/
• linterとの共存方法は以下に記載
• https://prettier.io/docs/en/integrating-with-linters.html

Lint

• ESLint
• https://eslint.org/
• stylelint
• https://stylelint.io/

Test

• Jest
• https://jestjs.io/
• Testing Library
• https://testing-library.com/

Alt xx

• TypeScript
• https://www.typescriptlang.org/
• Sass
• https://sass-lang.com/
• scss記法が好み

Git hooks

• husky
• https://typicode.github.io/husky/#/
• lint-staged
• https://github.com/okonet/lint-staged

このシルバーウィークで何度か挫折していた自分のサイトとブログを作った。

モチベーションとしては自分の実験場になるものが欲しかったのと、カジュアルに書く場が欲しかった。

採用技術は以下

• Next.js
• Material UI
• Vercel
• microCMS

今まで何度かサイトとブログ自体は作ろうとしてきたが、デザインを頑張ろうとしたり、変にフルスクラッチしようとして挫折してきたので、今回は巨人の肩に極力乗るのと、まずは最小限で完成させることを意識した。

コード自体は以下で公開している。

https://github.com/hakshu25/hakshu.dev

ブログ環境

はじめはNotion APIを使ってNotionで書く環境を作ろうと思っていたが、beta版ということもあり、code blockなどが対応していないので、諦めた。正式リリースに期待している。

※ NotionのCMS化について詳しくは以下に記載

https://zenn.dev/5t111111/articles/80934cdda55328

セルフホスティングできるstrapiも見ていたが、エディタが自分にとってはハマらなそうだったので、こちらも候補止まりとなった。

https://strapi.io/

最終的にはmicroCMSに決めた。日本製のサービスでもあるし、エディタも十分で、組み込み情報なども多かったので。

https://microcms.io/

組み込むにあたっては以下公式のチュートリアルが参考になる。30分ぐらいでサイト上でブログ記事が見れるところまで持っていくことができ、その速さに感動した。

https://blog.microcms.io/microcms-next-jamstack-blog/

最後に

CIや表示など不足しているものは多いのでこれから少しずつ入れていく予定。

飽きっぽく3日坊主になりがちなので改善も少しずつ続けていきたい。