letter_opener_web で開発中のメールを確認する
こんにちは、CTOの高橋(jtakahashi64)です。
「映画大好きポンポさん」を書籍でも買って読みました、よかったです。
さて、今日はメール送信についてです。
例えば BallooMe ではいくつかの機能にメールを利用していますが、
開発作業の中で実際にメールを送信し開封し確認という作業がつらい……となることがあります。
そんな時に利用できるのが letter_opener_web です。
letter_opener_web
https://github.com/fgrehm/letter_opener_web
letter_opener_web は Action Mailer で送信したメールを tmp 上にストックし下記のように画面上で確認できる素敵な Gem です。
公式サイトのマニュアルに沿えば簡単に導入することが出来ます。
おわりに
ものをつくるのって楽しいですが、
つらい……ってなることも多いですよね。
チームやツール(ツールをつくってくださっている方に感謝です……!)に頼ることで少しでも「楽しい」が増えるといいですね。
Prettier で CSS の書き方をチームであわせる
こんにちは、CTOの高橋(jtakahashi64)です。
週末に「僕らのミライへ逆回転」を見たんですが、ものを作ることのよさを思い出せる素敵な作品でした。
さて、今日の話題は CSS の書き方をチームであわせることについてです。
Balloon では BallooMe のスタイルシートの実装をエンジニア、デザイナーの全員で行っており、 コーディングスタイルは airbnb に準拠しています。
しかしながら、エンジニアもデザイナーも人間ですから、コーディングスタイルに準拠しないコードを書いてしまうことは、まあ、よくあります。
.block{ } .block { margin:10px; } .one,.two,.three { }
コーディングスタイルに準拠しない例
これらを PR 上で確認/変更するのは、
レビューアとレビューイの双方にとって、なかなかの負荷がかかるため、避けたいものですね。
そこで便利なのが、今日ご紹介するコードフォーマッタの Prettier です。
Prettier
Prettier は JavaScript や CSS などの言語で利用するできるコードフォーマッタで、上記のようなコーディングスタイルの揺れを統一することができます。
Yarn で簡単に導入ができます。
yarn add prettier --dev --exact
実行も簡単です。
yarn run prettier -- --write ~/path/to/example.scss
下記のようにコードがフォーマットされました。
@@ -1,9 +1,11 @@ -.block{ +.block { } .block { - margin:10px; + margin: 10px; } -.one,.two,.three { +.one, +.two, +.three { }
おわりに
コーディングのスタイルは人によってそれぞれで、そこに絶対的な正しさはありません。
例えば、インデントはスペースかタブか、スペースならスペースの数は2つか4つか……などなど。
チーム開発では各々の「正しさ」がぶつかり、パワーを使ってしまうことがあります。
しかしながらパワーをスタイルの「正しさ」を決めることに使ってしまうのはもったいない。
開発者のパワーは、もっとサービスや社会を成長させるために使うべきものです。
コーディングスタイルを決め、コードフォーマッタを通すことによって、
チームの「正しさ」を決めておくことにより、
よりよい毎日を過ごせるといいですね。