OSS Gate Workshop: online: 2023-09-09: orangeman7201: pretty-ts-errors: Work log

[orangeman7201]

This is a work log of a "OSS Gate workshop".
"OSS Gate workshop" is an activity to increase OSS developers.
Here's been discussed in Japanese. Thanks.

作業ログ作成時の説明

以下のテンプレートを埋めてタイトルに設定します。埋め方例はスクロールすると見えてきます。

OSS Gate Workshop: ${LOCATION}: ${YEAR}-${MONTH}-${DAY}: ${ACCOUNT_NAME}: ${OSS_NAME}: Work log

タイトル例↓：

OSS Gate Workshop: Tokyo: 2017-01-16: kou: Rabbit: Work log

OSS Gateワークショップ関連情報

• スライド：ワークショップの進行に使っているスライドがあります。
• チャット：OSS開発に関することならなんでも相談できます。ワークショップが終わった後もオンラインで相談しながら継続的にOSSの開発に参加しましょう！
• シナリオ：ワークショップの目的・内容・進め方の詳細が書いています。
• 過去のビギナーの作業ログ：他の人の作業ログから学べることがいろいろあるはずです。

[daipom]

iTerm2: https://github.com/gnachman/iTerm2

なぜかissue欄がない。。。

[orangeman7201]

気になるOSSメモ

• iTerm2
• Chromeの拡張機能のVue devtools https://github.com/vuejs/devtools

[orangeman7201]

一旦ITerm2のドキュメントを見てみる。

[orangeman7201]

ライブラリも選択してはありだったので、gem,package.jsonも見てみる

[orangeman7201]

gem のライブラリでよく使っているもの

• active_model_serializers
• kaminari
• grape
• cancancan
• jwt
• simplecov

js関連

• vue-infinite-loading
• chart.js
• dayjs
• Pretty Typescript Errors(VScode の拡張)

[orangeman7201]

上記の中から良さそうなものを選ぶ

[orangeman7201]

Pretty Typescript Errors

最近できた拡張機能だが、starの数が11kを超えていて手を出しにくそう。。

pretty-ts-errors

dayjs

巨大。英語、日本語以外の翻訳のdocもあった、、
https://github.com/iamkun/dayjs

chart.js

これもdayjsと同じくらい巨大、、
https://github.com/chartjs/Chart.js

vue-infinite-loading

メンテナンスが終わっていて、vue2→3にアップデートをするときに少し格闘した記憶
最終更新2017年、、、

https://github.com/ElemeFE/vue-infinite-scroll

simplecov

比較的規模も小さくて、issueも立っている。
gemならこれにするか。

https://github.com/simplecov-ruby/simplecov

jwt

こちらもsimplecovと同様比較的規模が小さそう
https://github.com/jwt/ruby-jwt

kaminari

きぼでかい、、MITライセンス
https://github.com/kaminari/kaminari

[orangeman7201]

一旦興味があるのでPretty Typescript Errorsで進めてみる。

リポジトリ
pretty-ts-errors

[orangeman7201]

Pretty Typescript Errorsのライセンス情報は？
→ MIT License

https://github.com/yoavbls/pretty-ts-errors/blob/main/LICENSE

[orangeman7201]

ドキュメントを探す！

→ readme
https://github.com/yoavbls/pretty-ts-errors#readme

→ vscodeの拡張のdocがあった
https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

[orangeman7201]

📝
結構OSS活動支援してそう。

Sponsorship
Every penny will be invested in other contributors to the project, especially ones that work
on things that I can't be doing myself like adding support to the extension for other IDEs 🫂

Contribution
Help by upvoting or commenting on issues we need to be resolved yoavbls/pretty-ts-errors#43
Any other contribution is welcome. Feel free to open any issue / PR you think.

[orangeman7201]

read meに沿って動かしてみる。
→ 動かし方ではなく、なぜ開発したかみたいな背景が書かれていた。

vscodeの拡張のdocに沿って動かしてみる。
→ Installationでコマンドライン上でインストールするか、vscodeからインストールしてくれ、以外に記述がない。
インストールする以外の作業が必要ないな〜〜〜！！便利！！

[orangeman7201]

before	after

[orangeman7201]

FBポイントを探す。

• サンプルコードがコピーできる場所にない(youtube上で動作デモがある)
  • どんな動作をするかをイメージしやすくするためにyoutubeの動画あるし、そもそもこのライブラリを使う人の環境内だと型エラーにするなど容易いので必要ない？

[daipom]

すでにあったissue

yoavbls/pretty-ts-errors#3

[orangeman7201]

FBポイント

githubのissues上部に表示されるcontributing guidelinesに遷移すると、Contribute good stuffとだけ記入されているファイルに遷移する。

遷移前の画面

https://github.com/yoavbls/pretty-ts-errors/issues

遷移先のファイル

https://github.com/yoavbls/pretty-ts-errors/blob/e31e3dae263adf1f8a6c64aabf447e5228387714/CONTRIBUTING.md

[orangeman7201]

あ〜readmeに書いていたContributionのリンクはこの拡張を作った人がvscodeにPRを積んだから応援してねという案内やったんか。。

↑
これはcontributing guidelinesに記述する感じではなさそうやな。。。

[orangeman7201]

お、この内容をガイドラインのところに入れるだけでも良さそう。。

https://github.com/yoavbls/pretty-ts-errors/blob/main/.github/ISSUE_TEMPLATE/bug_report.md

[orangeman7201]

NA 「ここ変やで〜^^。ワイ直そうか？」のissue作る

• actual result
• expexct result

[orangeman7201]

まずは日本語で書いてみる

タイトル : githubのcontributing guidelinesの内容が変なので変えませんか？

現状

現状CONTRIBUTING.mdの中身は以下の1行だけで、内容が少なくガイドラインとしてあまり機能していません。

Contribute good stuff

しかもこのファイルへのリンクが以下のページでガイドラインとして表示されています。

• issuesの上部
• Pull Requestsの上部
• issue記入画面

こんな感じです。

issuesの上部	Pull Requestsの上部	issue記入画面

期待する動作

CONTRIBUTING.mdの中身を以下に変えませんか？
( 内容はbug_report.mdと同じです。)

**Describe the bug**
A clear and concise description of what the bug is.

**Expected behavior**
A clear and concise description of what you expected to happen.

**Original error**
If this bug is related to an error that is not formatting well, please
attach the original error in a code block:
<code>
Type 'number' is not assignable to type 'string'.ts(2322)
</code>

**Screenshots**
If applicable, add screenshots to help explain your problem.

[orangeman7201]

レビュー

• 内容自体はだいたい良さそう。
• なぜガイドラインとして機能していないかを追記する。
• 英語版を作成してみる！

[orangeman7201]

The contributing guidelines on github are strange, why don't you change them?

Now

CONTRIBUTING.md contains only the following one line, which has little content and does not function well as a guideline.

Contribute good stuff

Moreover, a link to this file is shown as a guideline on the following page.

• Top of issues
• Top of Pull Requests
• Screen for filling out an issue

This is a capture of the current screen

Top of issues	Top of Pull Requests	Screen for filling out an issue

Expected

Would you change the content of CONTRIBUTING.md to the following?

* Any other contribution is welcome. Feel free to open any issue / PR you think.
* Bug reports should be filed in accordance with the bug report template.

[orangeman7201]

レビュー
Expectedの中で contentsを単数形に

[orangeman7201]

CONTRIBUTING.mdにはガチガチに書くことはなくて少し抽象的にする。
バグレポートは、テンプレートに沿って書いてください。という内容にする！

[daipom]

Expectedの方は

「バグレポートは、バグレポートのテンプレートに即して報告してください」

のような一文にするくらいがよいかもしれません！

[orangeman7201]

issueを投稿してみました！

yoavbls/pretty-ts-errors#78

[github-actions]

おつかれさまでした！

ワークショップの終了にともないissueを閉じますが、このまま作業メモとして使っても構いません 👌

ワークショップの感想を集めています！

ブログなどに書かれた際は、このページへリンクの追加をお願いします 🙏

またの参加をお待ちしています！