CircleCIが憎いという話/headless chromeについて #152
今日やったこと
CircleCI
CircleCI使ってますか。まぁ個人規模のコードで使うことのほうが珍しいですよね。僕もバイト先で初めて触りました。
CI上でNightwatchを用いたE2Eテストをやっているのですが、手元で動かしたときとCIで動かしたときの結果が違って発狂しました。現場からは以上です。
…一個だけ。何かの間違いでこの記事に迷い込んだ人が助けられるかもしれない情報を書いておくと、Chromeのヘッドレス使ってる人はなんか挙動がおかしいと思ったらchromedriverのバージョンを確認してみると幸せになれるかもしれない。僕はそれで2時間とかした。
headlessのChromeについてもうひとつ
Macだと
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless
で起動できる。--dump-domとやると表示されているページのレンダリング済みのDOMが吐き出されるのですが、404とかのページを吐き出すと、エラーを吐くわけでも、恐竜のページのDOMを吐くわけでもなく
<body></body>
って吐くからマジで気をつけたほうがいい。Nginxの設定ミスだと思って1時間位溶かした。
雑談
CIはつらみがある
ちなみにCircleCIはパブリックなリポジトリならタダで使える、らしい。
lessがシアワセ #151
今日やったこと
ポートフォリオサイトのコーディングをひたすら
やってました。昨晩、webpackと戦って、無事お友達になれたのでlessのloaderを入れてlessで書いてみることにしました。
ミックスインは一箇所しか使ってないですが、入れ子はマジで便利ですね。今までのCSSなんだったんだと思うレベルのシアワセさ。
構造を見やすくするためについつい入れ子にする必要のないところまで入れ子にしてしまう癖が発動してるのはちょっと良くないかも。（パフォーマンス的に）という話をしました。
自己紹介、流石に個人情報満載でここには載せられないので一部のスクリーンショットをば。
ちょいとこだわったポイント。かわいくできた。
lessとは関係ないけどflexboxも幸せな気分にさせてくれます。良い。
雑談
md記法でメモ取れて、マルチプラットフォームで画像とかも添付できて……みたいなサービスを探し求めてinkdropを契約しそう。
webpackつらいのだ #150
つらいのだ…
今日やったこと
webpackがつらいのだ
使ってますか？webpack
SPAとかを作るときにJSX->JSとかES6->ES5みたいな変換を行うもの…みたいなイメージでいました。
それもそれで正解なのですが、それだけに留まらずCSSやら画像やらを全部一個のJSにしちゃおうぜ、というのがwebpackの思想のようです。
webをpackするわけですね、なるほど。
それで今回、研究室のタスクとして自己紹介のサイトを作る必要が出てきたので、触ったことないwebpackを使ってみようと思い、configをひたすら書いてたのですがよくわからない。
なにがわからんくてつらいのか
そもそも、今回制作しているサイトはSPAではなくペライチの静的サイトです。
静的サイトを作成するときに使うものなのこれ、というところもよくわからない。調べてみた感じ、静的サイトを吐き出す用途に使っているひともいるみたいなので間違ってない…？もやもやしてつらいのだ。
gulpはまぁまぁ使えるのでそれでやれば一瞬で終わるのになぁと思いながら我慢してやってます。あ、あと英語力がないの辛いね。つらいのだ。
雑談
つらいのだ。
もろもろ引っかかったところは研究室の先輩に助けてもらいつつで少しづつ突破したんですが、つらい。
CircleCIと戦った一日でした #149
今日やったこと
CircleCIと戦った一日でした
バイトでした。
CircleCIとひたすら格闘してました。Ver2.0にしてから、一回の実行時間がかなり削減されたとは言え、設定を書き直してはPushの繰り返しで無駄に時間を消費してしまいました。
結局一日のタスク終わらず…。残念。
詳しい内容は言えない（というか説明すると長くなる）のですが、アレはいろいろとコツとかが必要な作業のような気がします。
雑談
今日はこれからサイトづくりします。
lessやらsassやら #148
今日やったこと
lessとかsassについて
普通にHTMLとCSSバリバリコーディングするのだと面白くないなぁと思ったので、lessとかsassとかのコンパイルするCSS（語彙力…）を使ってやろう、と思ったのですがどっちがどういいのかわからなかったので調べました。
まず、一個大前提として
JSで使うならLESSでRuby系入ってるならSASS
— namazu (@namazu510) 2017年10月10日
教えてもらいました。sassはRuby実装だったんですね。Web系の技術だし当然JS実装だと思っていました。ただ、まぁwebpackにもsassのloaderはあるみたいなので、環境さえ整えてしまえば特に困ることもなさそうかな？という印象でした。docker-composeとか使ってホットリロードとかできるようにしてまとめておいたりするとなおよろしいのかもしれないななんて思いました。
対する?lessはJS実装なので、スクリプトタグで読み込んでクライアントサイドで解釈させるような使い方もできるようです。調べてないけど事前に変換してやったほうがパフォーマンス的にはいいと思うのであくまでデバック用なんでしょう、きっと。
設計思想というか達成したいことは両者同じような感じに見えたのですがそのへんはどうなんでしょうか…？
とりあえず今回はlessを使って書いていきたいと思います。
雑談
めっちゃ腹痛いなにこれ。
デザインしたり工事中作ったり #147
今日やったこと
デザインやった
研究室で作らされているプロフィールサイトのデザインをSketchでやりました。
Symbol機能、まさにWeb制作のための機能って感じですごいいいなぁと思いました。
工事中作った
プロフィールサイトが完成するまで表示させておこうと思って「工事中」ページを作りました。
工事中って表現が完全に2000年代インターネットって感じがしますね…w
できたのはこんな感じ
ちょっと現代っぽく…？なってるといいけどw
flexbox超便利だなぁと思った。
ここにおいてある
GitHub - uutarou10/construction-page: 工事中的なページ
雑談
眠い！
ギリギリ滑り込み更新…！！！！
