Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`cpx`
npm	`eslint-config-standard-with-typescript`
npm	`eslint-loader`
npm	`eslint-plugin-node`
npm	`eslint-plugin-standard`

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

fix(deps): update dependency polished to v4

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm

package.json

@next/bundle-analyzer 9.5.5

clsx 1.1.1

date-fns 2.23.0

gray-matter 4.0.3

he 1.2.0

lodash 4.17.21

next 10.0.0

normalize.css 8.0.1

polished 3.7.2

react 16.14.0

react-dom 16.14.0

remark 13.0.0

remark-footnotes 2.0.0

remark-highlight.js 6.0.0

remark-html 13.0.2

sass 1.36.0

styled-components 5.1.1

@babel/core 7.11.6

@storybook/addon-actions 6.3.6

@storybook/addon-links 6.3.6

@storybook/addons 6.3.6

@storybook/react 6.3.6

@types/jest 26.0.24

@types/lodash 4.14.171

@types/node 14.10.1

@types/react 16.14.11

@types/react-test-renderer 16.9.5

@types/styled-components 5.1.3

@typescript-eslint/eslint-plugin 4.28.5

@typescript-eslint/parser 4.28.5

babel-jest 26.6.3

babel-loader 8.1.0

babel-plugin-styled-components 1.13.2

chromatic 5.6.1

cpx 1.5.0

cpy-cli 3.1.1

eslint 7.31.0

eslint-config-standard-with-typescript 19.0.1

eslint-loader 4.0.2

eslint-plugin-import 2.23.4

eslint-plugin-node 11.1.0

eslint-plugin-promise 4.3.1

eslint-plugin-react 7.20.6

eslint-plugin-react-hooks 4.2.0

eslint-plugin-standard 4.1.0

http-server 0.12.3

jest 26.6.3

jest-styled-components 7.0.5

make-dir-cli 2.0.0

react-test-renderer 16.14.0

reg-cli 0.17.0

reg-keygen-git-hash-plugin 0.10.16

reg-notify-github-plugin 0.10.16

reg-publish-s3-plugin 0.10.16

reg-suit 0.10.16

storycap 3.0.4

trash-cli 3.1.0

typescript 4.0.2

Check this box to trigger a request for Renovate to run again on this repository

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

2013-09-25-continuous-deployment-to-heroku-from-travis-ci.md

Travis CIを使ってHerokuへのデプロイを自動化する

継続的インテグレーションができるようになったのなら、あとは継続的デプロイメントまでやっていただきたいし、大切なのは倍返しじゃなくて繰り返しだねってことで表題の通り。

前にやろうとして調べた時は、HerokuのAPIキーを暗号化して自前でデプロイ用スクリプトを用意して…てな感じでややこしそうだったけど、今はTravis CIで正式に対応していて、コマンド一発で設定できてしまう簡単さで、驚きのあまり出向しそうになった。

The Travis CI Blog: Introducing Continuous Deployment to Heroku

HipChatに通知を送る時にも使ったtravis gemからその設定を行える。

$ travis setup heroku
Deploy only from ruedap/daplog? |yes| yes
Encrypt API key? |yes| yes

travis setup herokuを実行すると色々質問されるので適当に答えておけば設定が完了する。設定が追加されて更新された.travis.ymlをプッシュするだけでデプロイまで行ってくれるようになる。さらに複雑な設定を行いたい場合は以下のドキュメントに色々と書かれている。

Travis CI: Heroku Deployment

自分の場合は、このブログもHerokuで運用していて、実際に上記の継続的デプロイな方法を使っているんだけど、デフォルトの設定から少し付け足して、以下のように2つのブランチを使って本番環境とステージング環境それぞれに自動でデプロイするように設定している。

stagingブランチからPull Requestを送った時は、Herokuのステージング環境にデプロイする
masterブランチにマージ（コミット）した時は、Herokuの本番環境にデプロイする
上記以外のブランチをリモートにプッシュした時は、デプロイは行わない
デプロイを行った時は、その後に指定のRakeタスクを実行する

上記の方針を設定した.travis.ymlのデプロイ部分は以下のような感じ。

deploy:
  provider: heroku
  api_key:
    secure: (snip)
  app:
    master: daplog
    staging: daplog-staging
  on:
    rvm: 2.0.0
  run:
  - rake redis:rebuild

このYAMLファイルの全体はここにあるけど、このように設定することで、ヒューマンによる手動オペレーションは基本的にはリモート(GitHub)にPull Requestを送る部分だけで、あとはTravis CIが自動でテストと、ブランチがstagingならステージング環境へのデプロイもやってくれる。そのステージング環境を目視でひと通りチェックして問題が無ければ、GitHub上のマージボタンをポチッと押してmasterにマージすれば再度テストが走り、無事に通過すればそのまま本番環境へのデプロイまでが自動で行われる。Oh..fantastic!

個人レベルのアプリ開発で、こんなハイテクな環境を無料でしかも超簡単な設定だけで使わせてもらえるとは、うっかり土下座しちゃいそうな嬉しさですね。

環境変数

そんな感じでとても未来感を味わえるTravis & Herokuの素敵な継続的デプロイ機能なんだけど、まだよく分かってないところがあっていくつかハマり中。

今まで手動で直接Herokuに向けてgit push heroku masterしていた時は動いていたのに、Travisからの自動デプロイに切り替えたら動かなくなった部分がチラホラあって、そのほとんどがassets precompile時の環境変数がらみっぽい。

まず、Sentryというアプリのエラーを検知して通知してくれるサービスがあって、Herokuのアドオンにもなっていてこれを利用してて、導入すると環境変数SENTRY_DSNにURLが入って、initializerでそれを参照して設定するようになっているんだけど、Travis CI上ではこれが空になってることによってデプロイが失敗する模様。

このあたりのTravisのログが該当部分で、じゃあ同じ環境変数をTravis上でも設定してあげればいいのかなと、travis encryptコマンドを使って前述の環境変数とその値を暗号化した上で.travis.ymlに設定してみたけど、ここで設定した環境変数はテスト実行時は参照できるけど、デプロイ時はできない(?)みたいで、何度か設定の仕方を変えてやってみたけどうまく受け渡せなくてこの方法では改善できなかった。かといって、他にどうすればいいか思いつかなくて、剣道をしながら考え中。

似たような問題として、precompile時に環境変数RAILS_ENVを参照して分岐する処理を書いている部分があって、デプロイ時はテスト時と違ってこの値にはproductionが入っているようで（当たり前か）、前述のように自分はstaging環境にもデプロイしているので、その時はこの環境変数にはstagingが入ってて欲しくて、どうにかしようとしたんだけど、これもちょっと試行錯誤してみたけど同じようにうまく出来なかったので剣道(ry

今はどちらも、Travisからデプロイするようになってからはうまく動作させれてないので外してあるけど、このあたりの設定や対応方法がわかれば元に戻したいところ。もしこれについて何か知ってる人がいればぜひ情報求む、大和田常務。

Renovate

https://renovate.whitesourcesoftware.com/

2013-10-01-vim-sass-convert.md

VimでSassのコードを変換したり整形したり

うまい話とジェットコースターには乗るなって言ってたばあちゃんの知恵袋だけど、Sassに含まれているsass-convertコマンドを使うと.sass形式と.scss形式を相互に変換できる。

$ gem i sass
$ sass -v
Sass 3.2.11 (Media Mark)
$ sass-convert --help
Usage: sass-convert [options] [INPUT] [OUTPUT]

(snip)

これを使って、以下は現在のフォルダの.sassを.scssに一括で変換する場合。自分の好みで普段書いているのは.sass形式なんだけど、納品物やチームで使っているのは.scss形式ってことがままあるため、そういう時に使う。

$ sass-convert -F sass -T scss . -R
$ rm *.sass

自分の場合、今開いてるファイルを.sass形式から.scss形式に変換するというのも必要で、その時はVimのコマンドモードからバッファに対して以下のコマンドを実行する。

:%!sass-convert -F sass -T scss

これらのコマンド一発でサクッと変換できちゃうのでとても重宝している。さらに応用で、今書いている.sass/.scssのコードを機械的にカチッと整形したい時にもこれを利用する。オプションのFromとToを同じにしてあげればよい。これでフォーマットされる。ただし、これはあくまで変換の流用で、コード整形のための機能ではないので注意されたし。

:%!sass-convert -F sass -T sass

これはこまめに実行するコマンドなので.vimrcに書いてすぐ呼び出せるようにしている。末尾に<CR>を付けてないのは、オプションを手動で変えたい時にも対応するために。

nnoremap <Leader>sass :<C-u>%!sass-convert -F sass -T sass

変換の挙動

sass-convertコマンドの変換は優秀な感じで、これらを使っていて困ったことはあまりないんだけど、例えば以下のような挙動をするので場合によっては使えないかもしれない。

カラーコードがカラーネームに変わる #000000 → black
カラーコードに含まれるアルファベットが小文字になる #EEEEEE → #eeeeee
3桁のカラーコードが6桁に変わる #9cf → #99ccff
シングルクォートがダブルクォートに変わる 'hoge' → "hoge"
演算での省略できるカッコは削除される -(1) → -1
省略できる小数点は削除される 1.0 → 1
でもゼロを省略した少数はゼロが追加される .1 → 0.1
2行以上の空行が1行にまとめられる
最後に記述された行より下にある空行は削除される

中でも、カラーコード#000000がカラーネームblackに変わってしまうのは、自分でも使っていてちょっと微妙だとは感じていて、Sass 3.2以降だとその対象は147種類もあって、例えば#fafad2はlightgoldenrodyellowに変換される。わかりづらい使いづらい長い。

なのではじめのうちは、変換前後のdiffを毎回見てどういう挙動をしているのかをチェックしたほうが良さそう。Sassのバージョン間でも違いがあるかもしれない。

ちなみに前述のカラーネームの仕様などは、Sass入門という書籍を読んでいた時に知った。買ったのはSass 3.1の頃だったんだけど、その後にリリースされた3.2に対して1章分の加筆をするなど、電子書籍らしい粋なアップデートをしてくれたので好感度が高い。今度出るSass 3.3の対応まで望むのはちょっと厳しいかもしれないけど、内容はわかりやすかった。

ってばっちゃが言ってた。

ruedap / daplog Goto Github PK

daplog's Introduction

daplog

daplog's People

Contributors

Stargazers

Watchers

Forkers

daplog's Issues