あるふぁべっとがおおすぎる

ITネタとか勉強会とか色々

SCRIPTY#3 | Advent Calendar 2015

IT系の勉強会行ってきた Advent Calendar 2015 - Adventarの10日目!

残り15日で完遂。またーりメモを投下

SCRIPTY#3 〜フロントエンド紳士・淑女のための勉強会〜

scripty.connpass.com

業務ではちょっとしかフロントエンドやれてないので勉強がてらに行ってきました。

 古き良きレガシー世界(HTML/CSS編)

全然良くねえから。古い=IE6対応で糞みたいなやつしか無いから

  • Tableレイアウト!
  • IE6:margin-left 2X ボックスにfloatかけると楽しい
  • 角丸が簡単に出来ないから画像で対応!

業務でどれも経験したことあるし今も残ってる気がするので笑えないです\(^o^)/

相続放棄〜レガシー世界を超えて〜(HTML/CSS編)

  • 担当者ごとに新しいCSSが追加される!
  • ドキュメントがない!
    →KSSを導入
  • BEMの粒度を事前にルール化
  • スタイルガイドやドキュメント等は絶対必要!

こわくない!レスポンシブサイトコーディング

  • 広告が大きな壁
    スマホにPCのでかい広告出していいの問題
    →地図から選択とか統一難しいものもある
  • IE8以降を意識して作成する。Aタグでブロックを囲うのはHTML5から
  • PCとスマホで最適なナビゲーションを考えてからレスポンシブ対応を採用

Service Workerとの戦い ~実装編~

  • ブラウザのバックグラウンドで動作!データをキャッシュ出来るよ!
  • スコープ定義気をつける。対象のページとJSやJSONとの関係
  • リクエストのキャッチが可能なのはロードタイミングで登録タイミングではない

真のIsomorphic Javascript

  • Isomorphic:同一構造、フロントもバックもJavaScriptみたいな
  • SPAはアプリケーション作りやすい
  • npmで両方で動くものが増えてきた

Ruby on RailsからNode(Express)への移行で気にしたこと

React.jsで広告テンプレートを作りたい

  • JSXとの相性よさそう
  • スクロールに合わせて背景にReact.jsを使用して広告を出すようなデモ
  • 単体テストしやすい!コードの見通しがいい
  • JSモジュールが大きめなのでモバイルだと要検討

 

最近のフロントエンドは古めかしいTableレイアウトやIE8以下のクソみたいなやつと、
モダンなCSS3,ES6,React等を利用した環境で大きく乖離が生まれつつあってカオス。

普段はバックエンドやってるけど設計クソなCSS見てるとホント滅びて欲しい。
!important祭りや無駄にdiv#idHogeみたいな指定のCSSな!!

以前のSCRIPTYで浜辺さんが超人ライブコーディングしてたから今回もやるのかと思いきやYahooから転職してた疑惑。