14. フロントエンド試し場としてのsoussune
2017年06月30日
内容紹介
trkwとmiyaokaの2人で、emoji問答、フロント技術を使ったポッドキャストサイト、Static Site Generator、フロント技術が混沌としていた時代などについて話しました。
Show Notes
emoji 問答
-
アウトプットとして Podcast だけでなくブログもやっていきたい
-
日報として業務報告風だとアウトプットしやすい
-
👀 絵文字コンセンサス問題
-
これからコードレビューするよって時に一言でもコメントしてあげると、見始めたんだなと安心してもらえるのでオススメです pic.twitter.com/PZ3zTmA8Mn
— やっていき世代 (@cutmail) 2017年6月23日 -
この絵文字なー。これから見るのか、見てるのか、見終わったのか、意味が曖昧すぎてコンセンサスとるのも維持するのもコスト高すぎて好きじゃないんだよなあ…😥 https://t.co/ZV5RVyAP7Y
— hagiyat (@hagiyat) 2017年6月23日
-
-
絵文字リアクション
-
好きな絵文字
- 😇 innocent
- 👀 eyes
- 🙏 pray
- 🍣 sushi
- 👿 imp
- 😈 smiling_imp
- 👽 alien
- 💩 poo
- 🤔 thinking_face
-
間違っていても指摘されない。そもそも学ぶ機会が無い問題
- 指摘されないと分からない。だって分かるだろって思ってたから
- 伝えるために正しく怒ることの大事さ
-
絵文字コミット
- イニシャルコミットに 💥 や 🌱
- けもフレリポジトリではパークの掟としてコミットに絵文字縛りを要求した
- 絵文字入ってるとtigでコミットメッセージが出ない問題
フロント技術を使ったポッドキャストサイト作り
- soussune 開発ブログ
- soussune サイトの技術スタック選定
- GitHub + Phenomic + Netlify(ビルドあり) + CloudFlare
- GitHub + Nuxt SSR + Heroku(ビルドあり) + CloudFlare
- GitHub + Nuxt (nuxt generate) + Travis CI(ビルドあり) + GitHub Pages + CloudFlare
- GitHub + Jekyll(yattecast) + GitHub Pages(ビルドなし) + CloudFlare
- Static Site Generator の CMS 化
- 再生プレイヤーをフロント的にもっとモダンにしたい
- 例）Podlove Web Player
- 再生ボタンは重要なんだからでかく
- シークは画面幅全体使うべき
- 共有用に再生秒数での URL
twitter:playerに埋め込みプレイヤー Player Card — Twitter Developers
- 集計
- Show Notes のリンクに target を指定したい
- Jekyll GitHub でやるには js が手っ取り早い
- Rebuild の処理見てたら集計もしてた
$('.post a')
.not('.internal')
.each(function(i, el) {
$(el).attr('target', '_blank')
})
$('.post a').on('click', function(e) {
_gaq.push(['_trackEvent', 'Link', 'click', $(this).attr('href')])
})
- 学び先
- Rebuild だけでなく、その先の海外ポッドキャスター勢も参考にしたい
- 脱 Jekyll にすることでフロント技術だけでも Rebuild フォロワーから脱却
Static Site Generator
-
いろんな言語で Static Site Generator
-
Podcast サイトを作るための Podcast になってきた
-
いろんな言語を学ぶための Static Site Generator
- 言ってみればTodoMVC
-
GitBook
-
本を作るためのものでドキュメントツールじゃない
-
Phenomic で GitBook 風レイアウト作成
- ドキュメントのフォルダ構造をそのまま目次として出す実装
- 表示順の制御のためにプライオリティのメタ情報をつけたが、BASIC の行番号的でこれはダメだと思った
-
古い BASIC でのプログラムの入力
各行の最初についている数字が行番号です。10 からはじめて 10 ずつ増やしていくのが一般的です。こうすれば、後から簡単に行を挿入することができます(ただし 9 行まで)。
-
フロント技術が混沌としていた 2014 年
- Virtual DOM が出始め
- CoffeeScript
- 最近の勉強会で苦笑が起きた
- Angular 2.0 が AngularJS 1.3 おじさんを淡々と葬り去っていく小芝居会場
- 笑いと拍手で controller などにさようなら
- Angular 2 Core - Google スライド
- MEAN Stack
- home - Mongo Express Angular Node
- MongoDB
- Express
- AngularJS
- Node.js
- 死の臭いに慣れてきた
- 普段からいろんなところを見ることで早めに死を悟ろう
- Backbone.js + React v0.10 + TypeScript v1 → 死
- フロント技術勉強するのに webpack.config からやっていく問題
- フロント 3 大ライブラリ
- Atom、Sublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦！
- HTML5 Conference 2016 行ってきたよ - やまろぐはてな
- GUI エディタ論争が流行ってたのは 2015 年までで、もはや差が無いので盛り上がれなかった
- VSCode が最後発だから一番強い。便利な機能はすぐに移植される
- Vue も後発だから Angular と React のいいとこどり
- Isuue が特に少ない