Corder's High 2017 「コーダーの前仕事、後仕事」 レポート
2017年11月4日
東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。
セッション1つめはイー・ネットワークスの前川さん。
セッションを聴いて思ったこと・感想
エンジニアとしてのスキルはコーディングだけじゃないってことを改めて思ったセッションでした。
ブラウザの選定、技術の選定、仕様の確認、ほかメンバーとの意思疎通などなど、前仕事は主にコミュニケーション的な要素から開発環境周りまでのノウハウを多くご紹介されていました。
後仕事はチェック作業、GAタグの挿入作業(何故か最後の工程に回されることが多いというネタにあるある〜ってなりましたw)などなど。
「前仕事」「後仕事」がしっかりできるようなエンジニアがこの先生き残っていくんだろうなーと感じました。
以下はその場で書き起こしたメモです。
対応ブラウザとか
- IE11以降
- Android 4.4以降
事前の使用の確認として
- Flexbox使えるか?
- レスポンシブWebデザインで大丈夫か?
- ファイルの命名規則は大丈夫か?(@など)
- ファイルのパスのルール
- JSライブラリの仕様可否・バージョンなど
黒い画面が苦手な人向けに
バッチファイルを作成し社内で共有している。
→誰でもダブルクリックで実行できるように
Node.jsの管理
nodenv/nodistを使って管理。.node-version
ファイルを共有してマシン間のバージョンの違いをなくす
ローカルサーバー
BrowserSync
- 単独でも使える
- PHPが動かない
- Shift_JISなどが使えない
XAMPP/MAMP
VirtualHostX
Local (wordpress)
- これ便利
画像の書き出し
Photoshopアセット書き出し
- defaultレイヤーの活用
- 最小の記述? : default 100% + 200% @2x
- 余白が必要な場合
- レイヤーマスクを活用する
Photoshop乗算問題
- スクリプトを使う
Illustratorにもアセット書き出しはある
- 書き出されるデータは思い
- AjustItemsを利用する
デザインとの整合性
PerfectPixel
- Chrome拡張機能、位置や透過度を指定できる
Fluid Browser
- 透過できるBrowser
ChromeのDevTool
- スクショ機能とか標準でついた
エミュレータの動作確認
iOS
- iOSシミュレータ
Androidのエミュレータ
- Genymotion
Browserstack
GAタグ
- 複数あるonclickタグをdata属性に入れてJSで処理してしまう
- コードを見通しよく