# Rails / Ruby
- [rubocop-factory_bot](https://techracho.bpsinc.jp/hachi8833/2023_06_14/131154#2-4)
- [rails_i18n_manager: 国際化の管理画面](https://techracho.bpsinc.jp/hachi8833/2023_06_08/130776#2-4)
- [has_one relation start deleting existing record even when new record failed passing validation](https://github.com/rails/rails/issues/48330)
	- 影響大きそう

# Docker

- [docker init](https://techracho.bpsinc.jp/hachi8833/2023_05_31/130528#7)
	- セットアップ系のコマンドは勉強にもなるので嬉しい

2023年6月のブックマーク

## HTML / js

- [HTMLにsearch要素が追加されたぞ！](https://coliss.com/articles/build-websites/operation/work/add-the-seach-element.html)
- [URL からクエリ文字列を取り出す／辞書オブジェクトからクエリ文字列を生成する (window.location.search, URLSearchParams)](https://maku77.github.io/js/web/search-params.html)
	- ページネーションで利用した
- [Popover API - JavaScript不要、HTMLのみでポップオーバーUI](https://zenn.dev/yusukehirao/articles/popover-api-and-attributes)
	- 地味にここ重要な気がする。これからはPopoverの方を使っていこうと思う。 `名前がPopoverなのかPopupなのか紆余曲折の末`

## Ruby / Rails

- [activestorage-validator: Active Storageのバリデーションgem](https://techracho.bpsinc.jp/hachi8833/2023_04_27/129588#2-4)
- [Rails 7: クエリ結果を任意の順序にできるActiveRecord::QueryMethods#in_order_of](https://techracho.bpsinc.jp/hachi8833/2021_10_28/113117)

2023年4月＆5月のブックマーク

参考：[Chakra UIの再利用コンポーネント拡張の方法あれこれ](https://zenn.dev/terrierscript/articles/2021-05-11-chakra-ui-component-extends)

中央揃え汎用スピナーをこのように作った。

```
import {
  Center,
  Spinner as ChakraSpinner,
  SpinnerProps,
} from "@chakra-ui/react";
import { FC } from "react";

const Spinner: FC<SpinnerProps> = (props) => {
  return (
    <Center p="2rem">
      <ChakraSpinner {...props} />
    </Center>
  );
};
export default Spinner;
```

ChakraUIのコンポーネントを拡張する

- BaseConnectionで`node_nullable(false)`としておくと、ノードをnull不許可にできる
	- 参考：https://github.com/rmosolgo/graphql-ruby/issues/1217#issuecomment-825196905

graphql-rubyでページネーションを実装したときのメモ

# Ruby / Rails

- [複数ジョブを一度にエンキューするperform_all_laterが追加](https://techracho.bpsinc.jp/hachi8833/2023_03_14/128066#1-1)

# js

- [keypressイベントが非推奨になってた](https://developer.mozilla.org/ja/docs/Web/API/Element/keypress_event)

# アクセシビリティ

- [総務所アクセシビリティ　使いやすくわかりやすいリンクの提供](https://www.soumu.go.jp/soutsu/tokai/siensaku/accessibility/L5_link_text.html)
	- `ポイント2　リンクテキストだけでリンク先の内容を予想できるようにする　こちら、ここをクリック、リンク、詳細情報といった言葉だけをリンクとして用いているケースが頻繁に見受けられますが、これらは一部のユーザーにとって好ましいものではありません。`

2023年3月のブックマーク

参考：
https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-Git-%E3%83%95%E3%83%83%E3%82%AF

「pushされたら○○する」「pullしたら○○する」ができる。
実行権限が必要。（[参考](https://github.com/typicode/husky/issues/1177#issuecomment-1212831091)）

git hook

# Rails

- [RailsにデフォルトでHealthControllerが追加されるようになる](https://techracho.bpsinc.jp/hachi8833/2023_02_07/126734#1-8)
- [evil-seed: productionデータを加工してダンプするツール](https://techracho.bpsinc.jp/hachi8833/2023_02_08/126768#2-2)
- [DragonRuby](https://dragonruby.org/)
	- `DragonRuby is a zero dependency, cross platform, Ruby runtime built on top of mRuby, libSDL, and LLVM.`
- [Rubyアプリからデッドコードを消し去る4つの戦略](https://techracho.bpsinc.jp/hachi8833/2023_02_15/127043#3-3)
- [DeviseがTurboをサポート](https://github.com/heartcombo/devise/blob/v4.9.0/CHANGELOG.md)
- [resource_policy](https://dev.to/povilasjurcys/protect-your-graphql-data-with-resourcepolicy-1pef)
	- `a Ruby gem for attribute-level authorization, to create fine-grained access control for your API`
- [スライド『GraphQLスキーマ設計の勘所』](https://techracho.bpsinc.jp/hachi8833/2023_02_08/126768#6-1)
	- グローバルIDを付与し、nodeクエリで取得できるようにする：よく見るけどまだやったことがない（ApolloClientの場合は無理してやらなくて良いらしい）
	- ビジネスロジックをフィールドで表現する：フィールドとリゾルバで表現することにより、「クエリで指定されたときだけ計算」が可能になる。これはRESTとは大きく違うところ。
	- 参考文献
		- Production Ready GraphQL
		- Yelp Schema Design GuidelinesのGraphQL Styleguide
		- Shopify GraphQL Design Tutorial

# js / React / Next.js
- [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/react/)
- [Next.js 13.2](https://nextjs.org/blog/next-13-2)
	- `Built-in SEO support with new Metadata API`

# リモートワーク

- [リモートワークにおけるファシリテーションの方法論_COPILOT](https://speakerdeck.com/copilot/remote-facilitation)
	- ファシリを気にかけている自分が考えていることがもう全部書いてあった。今後これを参考資料として配布していきたい。

# その他

- [最新のユーザーエージェント対応はどうするべきか？](https://ics.media/entry/200729/)
- [【テックコラム】Chrome開発者ツール「Recorder」パネルを使ってみた](https://www.datacurrent.co.jp/column/chrome-devtools-recorder_20220421/)
- [イマドキのVPSでUbuntuをセキュアに保つ](https://gihyo.jp/admin/serial/01/ubuntu-recipe/0751)
- [iOS/iPadOS 16.4 Beta 1リリース、Webアプリから通知機能が利用可能に](https://gihyo.jp/article/2023/02/ios-webpush)
- [docker-compose.ymlではなくcompose.yamlが推奨されている](https://docs.docker.com/compose/compose-file/)
- [履歴書作成ツール](https://www.hop-job.com/resume/)

2023年2月のブックマーク

# 目的
Railsにデフォルトで入っているTurboの理解を深める

# 前提
- 記事＝Memoモデル
- タグ＝ActsAsTaggableOn::Tagモデル
- このブログの管理画面にタグの追加/解除機能はもともと存在していて、追加/削除のたびに画面遷移していた
- タグの追加/解除はシンプルにcreate/destroyアクションで行っている

# やったこと
このブログの管理画面で、記事に対するタグの追加/解除を画面遷移無しでできるようにする

## Viewの変更
タグの追加/削除ボタンのまわりを `turbo_frame_tag` ヘルパーで囲う

app/views/admin/memos/_tag.html.erb

```jsx
<%= turbo_frame_tag tag do %>
<% if memo.tag_list.include?(tag.name) %>
<%= button_to tag.name, admin_memo_tags_path(memo, name: tag.name), method: :delete, class: "Label color-bg-accent-emphasis color-fg-on-emphasis m-1" %>
<% else %>
<%= button_to tag.name, admin_memo_tags_path(memo, name: tag.name), method: :post, class: "Label m-1" %>
<% end %>
<% end %>
```

create.turbo_stream.erbを追加

app/views/admin/memo_tags/create.turbo_stream.erb

```jsx
<%= turbo_stream.replace @tag do %>
  <%= render "admin/memos/tag", memo: @memo, tag: @tag %>
<% end %>
```

destroy.turbo_stream.erbを追加（今のところcreate.turbo_stream.erbと同じ）

app/views/admin/memo_tags/destroy.turbo_stream.erb

```jsx
<%= turbo_stream.replace @tag do %>
  <%= render "admin/memos/tag", memo: @memo, tag: @tag %>
<% end %>
```

## Controllerの変更
createアクションで、turbo_streamのリクエストに対してcreate.turbo_stream.erbを返せるようにする

```jsx
def create
	
	respond_to do |format|
    format.turbo_stream
    format.html { redirect_to(admin_memo_url(@memo), notice: "Tag added.") }
  end
end
```

destroyアクションで、turbo_streamのリクエストに対してdestroy.turbo_stream.erbを返せるようにする

```jsx
def destroy
	
	respond_to do |format|
    format.turbo_stream
    format.html { redirect_to(admin_memo_url(@memo), notice: "Tag removed.") }
  end
end
```

これで画面遷移無しでタグの追加/解除ができるようになる。

![現在のこのブログのタグ一覧](https://storage.googleapis.com/my-cms-29e56.appspot.com/3jdmtbjabcc3udun82xjnrr36tuh)

# 所感
- Turbo Streamsのメソッドのうちreplaceは取り入れやすいと思う
- appendやafterなどは画面構成を変えた方が良いことが多そう

# 参考
- [猫でもわかるHotwire入門 Turbo編 Chapter08 Turbo Streams（Fetch）](https://zenn.dev/shita1112/books/cat-hotwire-turbo/viewer/turbo-streams-fetch)

【Rails】Turbo Streamsを小さく使う(タグの追加/解除機能)

# Rails

- [Add default Dockerfiles](https://github.com/rails/rails/pull/46762)
	- RailsにデフォルトでDockerfileが追加されるようになった。ActiveStorage使ってたらlibvipsが入ったり、RAILS_SERVE_STATIC_FILESがtrueになってたり色々気が利いている。
- [productionでPumaのワーカー数をプロセッサ数と同じになるようにする](https://techracho.bpsinc.jp/hachi8833/2023_01_31/126528#1-2)
- [Action Mailerのよい書き方](https://techracho.bpsinc.jp/hachi8833/2023_01_31/126528#2-4)
  - `ActionMailer::Base.email_address_with_name`知らなかった…普通に`"test <test@example.com>"`と書いてた
- [Evil Martiansが使っているgem](https://techracho.bpsinc.jp/hachi8833/2023_01_31/126528#2-2)
  - 確かに仕事（コンテナを使う）ではcrondを使うものは使ってない…昔はwheneverを使っていた
- [\[Ruby\]配列を使用する際に便利なメソッドのあれこれ](https://qiita.com/Jwataru/items/923a11f9e97a84c7982f#transpose%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89)
  - 説明書きの行が存在するCSV（悲しいがよくある）で、本来のデータの部分だけを抽出した後ハッシュを作りたいとき、transposeメソッドが便利だった
- [graphql-rubyのTracerとしてNew Relicを使う例](https://graphql-ruby.org/queries/tracing.html#new-relic)
  - コメントアウトされてて最初は気づかなかったが、`use(GraphQL::Tracing::NewRelicTracing, set_transaction_name: true)`が大事 

# js

- [2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！](https://coliss.com/articles/build-websites/operation/css/css-trigonometric-functions.html)
- [console.log()だけのデバッグはやめよう](https://zenn.dev/fujiyama/articles/b2638ac38a3d05)
	- 使ってみようと思いつつ業務中はすっかり忘れてconsole.logしかしない…tableは本当に便利そう
- [Tailwind Play](https://play.tailwindcss.com/)
	- CodePenのようにTailwind cssを試せる
- [yarnのresolutionsで全ての依存関係をコントロールする](https://soudai-s.com/use-yarn-resolutions-to-control-nested-dependencies)
  - 記事にも書いてある通りあまり使わない方が良い。頭の片隅に置いておく。

#- [jest-previewとTesting Playgroundを活用してJestのDOMテストを簡単に書けるようにしてみた](https://tech.torana.co.jp/entry/2023/01/11/120000)

# AWS
- [ECSで通常時とスパイク時のオートスケールを運用する](https://tech.timee.co.jp/entry/2020/08/31/191612)
- [爆速でFargateをスケールさせる「aws-fargate-fast-autoscaler」を試してみた](https://dev.classmethod.jp/articles/afargate-fast-autoscaler/)
  - 引用：`CloudWatchメトリクスからアラーム発報までにどうしてもタイムラグが有り、数秒単位でのスケーリングが難しく基本は分単位でのスケーリングとなっていました。`
  - 引用：`この「aws-fargate-fast-autoscaler」では、Step Functionsを利用して３秒毎にFargateタスクへのコネクション数を取得し、その結果に応じて即ecs service updateでタスク数の上限を引き上げる`
- [JAWS-UG コンテナ支部 #15 - Amazon ECSの開発環境を動的に管理するツールを作ってみました](https://www.slideshare.net/TamerlanTorgayev/jawsug-15-amazon-ecs)
  - 古めの記事（2019年）。課題にとても共感できる（特に、後片付けは忘れがち…）。PRを消すと環境も消えるというのが運用のことまで考えられてて良い。

# その他
- [Webサーバー「Apache」にアメリカ先住民から名称変更の要請](https://gigazine.net/news/20230112-apache-appropriation/)
	- 名前の由来知らなかった。`ロマンティック`扱いするのは良くないし、変えるべきだと思う。「褒めてるのに」的意見を見かけたのがきつい。
- [WAI-ARIAを学ぶときに整理しておきたいこと](https://zenn.dev/yusukehirao/articles/e3512a58df58fd)

2023年1月のブックマーク

作業漏れ防止として書く。思いついたら加筆する。

## 追加

### アプリケーションコード

* 他のモデルとの関連を追加した場合は、associationも追加する

### migration

- （DBがMySQLのとき）afterオプションを指定する
- migrateした後rollbackして、差分がなくなることを確認する

### テスト

- FactoryBotの属性を追加する

## 削除

### アプリケーションコード

- ignored_columnsを使ってカラムがキャッシュされないようにする

### migration

- remove_columnで型を指定する
- migrateした後rollbackして、差分がなくなることを確認する

### テスト

- FactoryBotの属性を追加する

モデルに属性追加/削除するときに気をつけていること

クリップだけして放置していたものを整理したので、量が多い。

# Ruby / Rails

- [IRB v1.5.0リリース](https://techracho.bpsinc.jp/hachi8833/2022_12_07/124890#3-0)
  - irbでeditを使える
- [【Ruby】- [rails stats コマンドで app 以下のディレクリを全て計測できるようにする](https://daido.hatenablog.jp/entry/2020/09/05/231917)
- [Rails6〜7で追加された便利メソッド11選](https://zenn.dev/mybest/articles/973c927f3931ce)
	- ComparisonValidatorが便利そう。end_dateがnilの場合どうなるか調べる。->allow_blank: trueと組み合わせることができた。
	- compact_blankも便利。

# GraqhQL

- [Rails+Next.jsでGraphQLを導入する時に考えたこと](https://tech.timee.co.jp/entry/2022/09/29/110000)
- [GraphQL Code Generator(graphql-codegen) おすすめ設定 for TypeScript](https://zenn.dev/izumin/articles/ffc84c1b4310be)

# JS / React / Next

- [フロントエンド(React)の技術質問](https://qiita.com/KNR109/items/e13a5c5b8b461e846902)
* [axios は v1.0.0 でどう変わるのか](https://zenn.dev/sa2knight/articles/axios-major-version)
* [本気で考えるReactのベストプラクティス！bulletproof-react2022](https://zenn.dev/t_keshi/articles/bulletproof-react-2022)
* [Next.jsディレクトリ構成・設計再考（featuresが何を解決するか）](https://zenn.dev/yodaka/articles/eca2d4bf552aeb)
* [フロントエンド刷新プロジェクトを成功に導くためのテスト手法の紹介](https://blog.cybozu.io/entry/2022/10/17/110000)
* [Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版）](https://qiita.com/uhyo/items/6be96c278c71b0ddb39b)
	* `useTransitionフックは、冒頭で述べたように今の画面を残しつつ次の画面を裏でレンダリングすることを可能にするフックです。`
	* ページネーションで使える

# フロントテスト

- [@shopify/react-testing](https://github.com/Shopify/quilt/tree/main/packages/react-testing)
  - [Managing React Form State Using the React-Form Library](https://shopify.engineering/managing-react-form-state-using-react-form-library)
- [決済チームがテストコードを書く際に気を付けていること](https://tech.up-sider.com/entry/2022/09/14/123659)
- [【入門】フロントエンドのテスト手法まとめ](https://qiita.com/KNR109/items/7cf6b24bed318dab5715)
- [Jest Mock 集](https://zenn.dev/seya/scraps/b3ae0dcc6bed06)
- [リーダブルなテストのための、jest モックファクトリー関数](https://zenn.dev/takepepe/articles/readable-jest-mocking)
- [実装例から見る React のテストの書き方](https://blog.cybozu.io/entry/2022/08/29/110000)
- [フロントエンドの"ちょうどいい"自動テストのはじめかた](https://atraetech.hatenablog.com/entry/2022/09/30/105747)
- [Storybook でインタラクションテストを作成して Jest で再利用する](https://zenn.dev/azukiazusa/articles/df307292037265)
- [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-librar)
- [ぼくたちがかんがえたさいきょうのStorybook 〜より高品質なコンポーネントを求めて〜](https://zenn.dev/moneyforward/articles/2d7f3ece1a1b93)
	- 開発環境としてのStorybook
	- 品質検査としてのStorybook
	- コミュニケーションツールとしてのStorybook

# デザイン

- [Checklist Design](https://www.checklist.design/)
  - `A collection of the best design practices.`
- [ベクターシェルフ](https://vectorshelf.com/)
  - イラスト素材
- [Doodle Icons](https://khushmeen.com/icons.html)
  - イラスト素材
- [ちょうどいいWebデザインギャラリー](https://choooodoii.com/)
- [RESOS](https://uud.io/resos.php)
  - `デザイン作業に便利なリソースを集めています。`
- [Designing A Better Back Button UX](https://www.smashingmagazine.com/2022/08/back-button-ux-design/)
	- もどるボタンのUXについての記事。「フォームのもどるボタンを、フォーム上部に設置する」「もどるボタンとすすむボタンを離す」などが提案されている。
- [the component gallery](https://component.gallery/)

# AWS

- [Amazon ECS Exec Checker](https://github.com/aws-containers/amazon-ecs-exec-checker)
- [AWS ソリューションライブラリ](https://aws.amazon.com/jp/solutions/)

# ドキュメント作成

- [技術文書の書き方](https://gist.github.com/ymmt2005/d2c152bb7179d07015f336b1a0582679)
- [初めてのpull requestのその前に聞いてほしい話](https://zenn.dev/chot/articles/a28ee73d60fd1e)

# HTML/CSS

- [Learn HTML](https://web.dev/learn/html/)
- [Patterns](https://web.dev/patterns/)
  - `A collection of code snippets to help you optimize your web projects.`
  - ヘッダ、メイン、フッタから成るレイアウトを「Pancake stack」、サイトをナビゲートするコンポーネントを「Breadcrumbs」と紹介したり、実装例を出したりしている。
* [\<wbr\>タグ](https://html-coding.co.jp/annex/dictionary/html/wbr/)
	* `「WBR」とは「Word Break」の略で、改行をしてもよい箇所を指定するタグです。`
- [朗報！ CSSの新しい単位（lvh, svh, dvh)がChromeに実装、100vhがビューポートの高さいっぱいにならない問題を解決](https://coliss.com/articles/build-websites/operation/css/large-small-dynamic-viewport-sizes.html)
  - url入力バーの有無でスマホの縦サイズががくっと終わってしまうことへの対策

# コラボレーション

- [Lark 次世代型コラボレーションスイート](https://www.larksuite.com/ja_jp/)
  - ByteDance社
- [相手の労力を最小化するコミュニケーション](https://dev.classmethod.jp/articles/minimize-understanding-time/)
	- 自分が気をつけてることがまとまっていた。「相手に探し回らせない」というのが大事だと思う。
- [Kyashミーティングガイドラインを公開しました](https://blog.kyash.co/entry/2022/12/07/112550)

# 運用

- [バッチ処理 プラクティス](https://www.yamarkz.com/blog/implementation-practices-for-batch-processing)
- [秘密情報には出どころも書いてくれ！頼む！](https://techblog.kayac.com/do-you-know-these-secrets-came-from)
	- 自分も出どころ調査で沢山時間を使ってきたので、他人にはそうさせないように出どころを書くようにしている。昔「実は退職者の個人アカウントで発行しているトークンだった」みたいなこともあったり…。

# キャリア

* [job tag](https://shigoto.mhlw.go.jp/User/)
  * `職業について、内容、就労する方法、求められる知識・スキルや、どのような人が向いているかなどが総合的にわかるサイトです`
* [Reverse interview](https://github.com/viraptor/reverse-interview)
	* `This is a list of questions which may be interesting to a tech job applicant.`
* [ビジネス現場でよく見聞きする ｢0 → 1｣ ｢1 → 10｣ ｢10 → 100｣ の違いを言語化](https://www.countand1.com/2019/05/zero-to-one-vs-one-to-ten-vs-ten-to-one-hundred.html?m=1)

# その他

* [GitHub Actions ジョブサマリー機能を使う](https://developer.mamezou-tech.com/blogs/2022/05/14/github-actions-job-summaries/)
* [Microsoft PowerToys](https://apps.microsoft.com/store/detail/microsoft-powertoys/XP89DCGQ3K6VLD)
* [Slackの次世代プラットフォームを試してみた](https://tech.travelbook.co.jp/posts/slack-deno-api/)
* [WebのフロントエンドでもDockerで開発環境を構築する理由。（余談としての脱node依存開発）](https://qiita.com/SFITB/items/27cb917945fa9e721f34)
* [テック企業の技術スタックデータベース](https://whatweuse.dev/)
* [APIbank](https://www.apibank.jp/ApiBank/main)
* [HTTPヘッダーのX-は非推奨と言うけれど・・・](https://zenn.dev/ys/articles/a58b02e3cbc2f839f7f1)
* [AI for Pull Requests](https://githubnext.com/projects/ai-for-pull-requests/)
* [セキュリティーチェックシートという闇への防衛術](https://qiita.com/nfujita55a/items/5899156268951c10787f)
* [技術系イベントにおけるアンチハラスメントポリシーの効果について](https://takahashim.hatenablog.com/entry/2019/12/22/145034)
* [amazon musicは音楽だけじゃなくてフロントエンドのソースコードも気軽に見れる優れたサービスだぞ!!!!](https://twitter.com/takeokunn/status/1587804625851121666)

2022年12月のブックマーク

差別的、排除的な単語の言い換え。よく使われる「dummy」が差別的用語というのは知らなかったです。

- [Inclusive Naming Initiative](https://inclusivenaming.org/)
- [GoogleのWrite inclusive documentation](https://developers.google.com/style/inclusive-documentation)
- [Airbnbのinclusionドキュメント](https://github.com/airbnb/inclusion)
- [UNREAL ENGINE 5 コーディング規約インクルーシブな言葉の選択](https://docs.unrealengine.com/5.0/ja/epic-cplusplus-coding-standard-for-unreal-engine/#%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%BC%E3%82%B7%E3%83%96%E3%81%AA%E8%A8%80%E8%91%89%E3%81%AE%E9%81%B8%E6%8A%9E)

記事一覧