June 29, 2017

14. フロントエンド試し場としてのsoussune

2 hours

trkwとmiyaokaの2人で、emoji問答、フロント技術を使ったポッドキャストサイト、Static Site Generator、フロント技術が混沌としていた時代などについて話しました。## Show Notes

emoji 問答

アウトプットとして Podcast だけでなくブログもやっていきたい

日報として業務報告風だとアウトプットしやすい

Wikihub 日報

WikiHub の開発意外と続いてる - ✘╹◡╹✘

👀 絵文字コンセンサス問題

これからコードレビューするよって時に一言でもコメントしてあげると、見始めたんだなと安心してもらえるのでオススメです pic.twitter.com/PZ3zTmA8Mn

— やっていき世代 (@cutmail) 2017年6月23日

この絵文字なー。これから見るのか、見てるのか、見終わったのか、意味が曖昧すぎてコンセンサスとるのも維持するのもコスト高すぎて好きじゃないんだよなあ…😥 https://t.co/ZV5RVyAP7Y

— hagiyat (@hagiyat) 2017年6月23日

絵文字リアクション

使える絵文字が少し増えました - WikiHub Meta

Add Reactions to Pull Requests, Issues, and Comments

好きな絵文字

😇 innocent

👀 eyes

🙏 pray

🍣 sushi

👿 imp

😈 smiling_imp

👽 alien

💩 poo

🤔 thinking_face

間違っていても指摘されない。そもそも学ぶ機会が無い問題

指摘されないと分からない。だって分かるだろって思ってたから

伝えるために正しく怒ることの大事さ

絵文字コミット

イニシャルコミットに 💥 や 🌱

phenomic/phenomic: Modular website compiler ⚡️

けもフレリポジトリではパークの掟としてコミットに絵文字縛りを要求した

miyaoka/japari-pedia: Welcome to youkoso japari-park! 🌴💥🚕🐈😧

絵文字入ってるとtigでコミットメッセージが出ない問題

フロント技術を使ったポッドキャストサイト作り

soussune 開発ブログ

soussune – Medium

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

Top Open-Source Static Site Generators - StaticGen

GitBook (JavaScript)

Hexo (JavaScript)

Hakyll (Haskell)

Hugo (Go)

Phenomic (JavaScript / React)

Podcast サイトを作るための Podcast になってきた

いろんな言語を学ぶための Static Site Generator

言ってみればTodoMVC

GitBook

本を作るためのものでドキュメントツールじゃない

Phenomic で GitBook 風レイアウト作成

ドキュメントのフォルダ構造をそのまま目次として出す実装

表示順の制御のためにプライオリティのメタ情報をつけたが、BASIC の行番号的でこれはダメだと思った

古い BASIC でのプログラムの入力

BASIC - Wikibooks

各行の最初についている数字が行番号です。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 大ライブラリ

react vs angular vs vue - npm trends

Atom、Sublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦！

HTML5 Conference 2016 行ってきたよ - やまろぐはてな

GUI エディタ論争が流行ってたのは 2015 年までで、もはや差が無いので盛り上がれなかった

VSCode が最後発だから一番強い。便利な機能はすぐに移植される

Vue も後発だから Angular と React のいいとこどり

Isuue が特に少ない

今は安定しているがこれから先どうしていくか。対アプリなどの戦場へ

フロントに求められること

UI 表現に凝る人とアプリとしての技術スタックを突き詰める人って同じフロントでも方向性が違う

フロントエンド試し場としての soussune

PWA、AMP 対応

genba.fmは AMP 対応してる

求められる障害対応力：お名前.com の email 認証きれた問題 1 時間くらいで解決した

ドメイン情報認証メールの承認は忘れずに！

💬おたより募集中

soussuneでは感想や質問などリスナーからのご意見をお待ちしています。

Twitter

感想フォーム

からお気軽にコメントをお寄せください

...more

View all episodes

By そうっすね制作委員会

June 29, 2017

14. フロントエンド試し場としてのsoussune

2 hours

emoji 問答

アウトプットとして Podcast だけでなくブログもやっていきたい

日報として業務報告風だとアウトプットしやすい

Wikihub 日報

WikiHub の開発意外と続いてる - ✘╹◡╹✘

👀 絵文字コンセンサス問題

これからコードレビューするよって時に一言でもコメントしてあげると、見始めたんだなと安心してもらえるのでオススメです pic.twitter.com/PZ3zTmA8Mn

— やっていき世代 (@cutmail) 2017年6月23日

— hagiyat (@hagiyat) 2017年6月23日

絵文字リアクション

使える絵文字が少し増えました - WikiHub Meta

Add Reactions to Pull Requests, Issues, and Comments

好きな絵文字

😇 innocent

👀 eyes

🙏 pray

🍣 sushi

👿 imp

😈 smiling_imp

👽 alien

💩 poo

🤔 thinking_face

間違っていても指摘されない。そもそも学ぶ機会が無い問題

指摘されないと分からない。だって分かるだろって思ってたから

伝えるために正しく怒ることの大事さ

絵文字コミット

イニシャルコミットに 💥 や 🌱

phenomic/phenomic: Modular website compiler ⚡️

けもフレリポジトリではパークの掟としてコミットに絵文字縛りを要求した

miyaoka/japari-pedia: Welcome to youkoso japari-park! 🌴💥🚕🐈😧

絵文字入ってるとtigでコミットメッセージが出ない問題

フロント技術を使ったポッドキャストサイト作り

soussune 開発ブログ

soussune – Medium

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

Top Open-Source Static Site Generators - StaticGen

GitBook (JavaScript)

Hexo (JavaScript)

Hakyll (Haskell)

Hugo (Go)

Phenomic (JavaScript / React)

Podcast サイトを作るための Podcast になってきた

いろんな言語を学ぶための Static Site Generator

言ってみればTodoMVC

GitBook

本を作るためのものでドキュメントツールじゃない

Phenomic で GitBook 風レイアウト作成

ドキュメントのフォルダ構造をそのまま目次として出す実装

表示順の制御のためにプライオリティのメタ情報をつけたが、BASIC の行番号的でこれはダメだと思った

古い BASIC でのプログラムの入力

BASIC - Wikibooks

フロント技術が混沌としていた 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 大ライブラリ

react vs angular vs vue - npm trends

Atom、Sublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦！

HTML5 Conference 2016 行ってきたよ - やまろぐはてな

GUI エディタ論争が流行ってたのは 2015 年までで、もはや差が無いので盛り上がれなかった

VSCode が最後発だから一番強い。便利な機能はすぐに移植される

Vue も後発だから Angular と React のいいとこどり

Isuue が特に少ない

今は安定しているがこれから先どうしていくか。対アプリなどの戦場へ

フロントに求められること

UI 表現に凝る人とアプリとしての技術スタックを突き詰める人って同じフロントでも方向性が違う

フロントエンド試し場としての soussune

PWA、AMP 対応

genba.fmは AMP 対応してる

求められる障害対応力：お名前.com の email 認証きれた問題 1 時間くらいで解決した

ドメイン情報認証メールの承認は忘れずに！

💬おたより募集中

soussuneでは感想や質問などリスナーからのご意見をお待ちしています。

Twitter

感想フォーム

からお気軽にコメントをお寄せください

...more

Share 14. フロントエンド試し場としてのsoussune

Sign up to save your podcasts

14. フロントエンド試し場としてのsoussune

14. フロントエンド試し場としてのsoussune