Frontrend Conference The Finalに参加
Frontrend Conference - A conference for front-end developer(2015年2月21日開催)に参加してきたので自分用メモ
[Keynote] Pragmatic Front-end Developer: From Artisan to Expert
斉藤さんによるエモい話。フロントエンドは無くならないどころか、これからより一層面白くなってくると思う。
資料(ドラフト)
リンク
- JavaScriptのいろいろなコーディングルールをまとめてみた | Web Scratch
- Filament Group, Inc. | User Interface Design & Development | Boston, MA | Filament Group, Inc., Boston, MA
JavaScript
- idiomatic.js, jquery core style guideline, airbnb javascript style guide
CSS
html
- code guide by mark otto
tools
- editorconfig, jscs, csscomb
styleguide
style generator
- KSS, KSS-node, HOLOGRAM
Tips
- BrowserSyncは複数ブラウザの動機とれるのね
- プリプロセッサデフォルトのwatch機能より、こっち使った方がいいのかも
- BrowserSync - 複数ブラウザ/端末をまとめてテストする - Qiita
- LiveReload から BrowserSync に乗り換えてる|Web Design KOJIKA17
[JavaScript] Reactive Programming in JavaScript
あほむさんによるRFP入門。いままで見たFRP入門の中で一番分かりやすかった。
いろいろ触ってみよう。Bacon.js押しだったけど、このタイミングだとReact.js使うかな
資料
リンク
[JavaScript] Introduction to React
外村さんのReact話。
一つ前の記事を受けて、いろいろさわる際の参考にする
資料
リンク
[CSS] Web Components/Polymer, Styling Shadow DOM
谷さんによるWeb Compornents話。おさらいから設計的な。
この辺りが普通に使えるようになるとフロントエンド本気で面白くなる。
リンク
専用セレクタ
:host()
:host-context()
::shadow
::contents
- /deep combinator(
>>>
)
設計のヒント
Tweet
videoタグやaudioタグの中身はShadow DOM #frontrend
— sho otani (@ozu_syo) February 21, 2015
コンポーネント提供側のセレクタは属性、利用側のセレクタはクラスを使う事で、セレクタ資源を奪い合わなくて済む #frontrend
— sho otani (@ozu_syo) February 21, 2015
Web Compornentsとアクセシビリティ->カスタムエレメント #frontrend [Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks](http://t.co/Ddamj9n6M0)
— sho otani (@ozu_syo) February 21, 2015
ライトニングトーク
- 5分で分るFlexbox
- filter.css
- jpn-filter.css - The Japanese-styled CSS Filters
- Myth - CSS the way it was imagined.
- morishitter/YACP
- API Test with Service Worker // Speaker Deck
Tweet
スマホでposition:fixed;使うと拡大時に酷い事になりがちなので、使わないという選択肢を常に考えたい #frontrend
— sho otani (@ozu_syo) February 21, 2015
カスケーディング禁止!!!!? #frontrend
— sho otani (@ozu_syo) February 21, 2015
YACPおもしろいなー。アンチパターンとして刺激になる #frontrend [ morishitter blog](http://t.co/1PjIiEgCTy)
— sho otani (@ozu_syo) February 21, 2015
[JavaScript] Introduction to ServiceWorker
1000chさんにによるServiceWorker話。
実際に使えるのはずいぶん先だろうけど、5〜10年後のウェブがどうなるのかって視点で見てた。
ここまで考えてウェブを作るべきなのか?という話もあると思うけど。
資料
リンク
- High Performance Web Frontend // Speaker Deck
- coonsta/cache-polyfill
- Service WorkerとHTTP/2が切り開く新しいWeb Pushの世界 - ぼちぼち日記
- todo
キーワード
offline first
navigator.onLine
- on.online, on,offline
- FileSystem API
- ブラウザ実装されていない
- Web Storage API
- indexedDB API
- Application Cache
- Service Worker
- 高機能なローカルプロキシ
- リクエスト検知
- リクエスト改ざん
- on.fetch
- Fetch API
- Cache API
- 要polyfill
- coonsta/cache-polyfill
- background Sync API
- Sync Event
- Sync Manager
- Web Push API
- サービスワーカーをプッシュサーバに登録してプッシュを受け取る
- push manager
[CSS] Inline layout
づどさんのInline Layoutの話。面白そうだったけど聞けず。
しっかり理解って意味でためになる資料。Tweetで保管しつつ
資料
[JavaScript] JavaScriptテストの疑問、お答えします。
kyo_agoさんのTestエモ話
資料
リンク
- Test the Web Forward
- Protractor - end to end testing for AngularJS
- 【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18(後編) : アシアルブログ
- 【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18(前編) : アシアルブログ
test
- ユニットテスト
- mocha
- jasmine
- (QUnit)
- SinonJS
- Promiseパターンのテストどうする?
- faketimer系を使わなくなった
- powerAssert
- E2E
- Protractor
- testeam
- test runnner
- karma
- testem
- Isomorphicだとテスト楽
- Phantomは結構レガシー
Tweet
不安を解消するためにテストする->意識高い人だけ不安な状況は辛くなるよね #frontrend
— sho otani (@ozu_syo) February 21, 2015
社内のガイドラインで高速化のためにApplication Cache使えって書かれそうになって蒼白になった記憶がよみがえる #frontale
— sho otani (@ozu_syo) February 21, 2015
[CSS] Styling Atom (Editor)
atom使ってないし、ちょっと色々話が飛んでてどう聞けば良いのだろう…って感じだった。
プレゼンにエディタ使ってるのが印象的
SUIT CSSの事を知ることができたのはよかったかな
リンク
Tweet
よくわからなくてドキュメント読んでたけどWeb Compornents指向のCSSフレームワーク全部入りって事で良いのかな? #frontrend [SUIT CSS: style tools for UI components](https://t.co/ogfagDDyor)
— sho otani (@ozu_syo) February 21, 2015