https://azu.github.io/voting-badge を作った話を書く。

• GitHubに投票機能がない
• shield.ioを使えば低コストでバッチを作れるんじゃないかと
• key : valueだけのシンプルな保存するバックエンド
• leveldbが気になってたから使った
• deployする場所を考えてなかった
• HerokuならNodeが動く
• データの永続化ができない - 再起動で消える
• redisなど特定のデータベースは使える
• redisとleveldb両方のバックエンドを作成
• 動いた！
• しかしGitHubがアグレッシブなキャシュをする
• 投票しても全然更新されない…
• キャッシュを無効にするヘッダが必要
• shieldの画像はcacheが設定してある-> コントロールできない…
• shieldのバッチ生成はcairoを使ったもの
• 同じものをherokuで動かしてバッチを生成するようにした
• キャッシュをコントロール出来るようになった！？

今後

• Herokuの無料なのでちゃんと耐えられるのか不安
• まだGitHubのキャッシュが影響してる気がする

• Markdownプロセッサ
• ページネーション
• 動作確認
  #126 でCircle CIからデプロイするようになったので、GitHubのJekyll制約は受けなくなった。

書いた => テストできないコードをE2Eテストを使ってリファクタリングしよう | Web Scratch

coding-kataというorganizationを使ってE2Eテスト + リファクタリングという写経的な事をやっていた話について。

E2Eテストとtestium

E2Eテストにはtestiumを使った。

testiumはMochaでうごかすことが出来るためpower-assertなど既存のものがそのまま使える。

PhantomJS/Chrome/Firefoxで動かせる(WebDriver)ようになっていて、PhantomJSとか使うとユニットテストと気持ちはそんな変わらない感じになって手を出しやすい。

また、testiumは同期的なWebDriver APIのラッパを持っているため、以下のようにコールバックなしに書くことが出来る。

var inputNew = browser.getElement('input');
inputNew.click();// クリックの処理が同期的になってる
assert(inputNew.get("value"), "expected value");

他のテストフレームワークは非同期を前提にしているためDSL的なものを導入していたり or 特定のフレームワークに依存が結構強い。

• Nightwatch
• Nightmare
• Protractor

testiumがmochaと連携するのはinjectBrowserという関数を最初にinjectするだけで、この処理はmochaのイベントにhookしたり、this.browserを生やすだけなので自分で書くことも出来る程度の内容で済んでる。

https://github.com/groupon-testium/testium/blob/master/src/mocha/index.coffee

var injectBrowser = require('testium/mocha');
var assert = require("power-assert");
var browser;
function addTodo(text) {
    browser.setValue('.todoText', text);
    browser.click('.todoBtn');
}
describe("app-test", function () {
    var text = 'todo text';
    before(injectBrowser());
    beforeEach(function () {
        browser = this.browser;
        this.browser.navigateTo("/");
    });
    context("when テキストボックスに文字を入れて送信した時", function () {
        beforeEach(function () {
            addTodo(text)
        });
        it("should li要素が作成されている", function () {
            var list = browser.getElements('.todoList li');
            assert(list.length > 0); // assertが普通に利用できる
        });
        it("should リストアイテムのテキストは送信したものと一致している", function () {
            browser.assert.elementHasText('.todoList li', text)
        });
    });
});

面白いところとして、デフォルトでテストが失敗した時にスクリーンショットが保存されてるようになっている。また、スクリーンショット同士の比較してのassertも可能になってる。

後、Protractorに比べると設定ファイルや実行するために覚える必要があるコマンドが少なくていい。

実行はportを設定で合わせておいて、普通にmochaを実行すればE2Eテストできるので、ユニットテストと混ぜて書ける。

• npm startの活用
• port あわせ

E2Eテストとリファクタリング

coding-kataで数個リファクタリングを写経していたけど、jQueryベタ書きだとユニットテストを入れるのが結構難しい。

E2Eテストの場合は現状を壊してないかのテストは比較的カンタンに書くことが出来る(そこから継続して機能追加するとコストが生まれてきそうだけど)

ユニットテストは機能で取り出せないとテスト難しいけど、E2Eテストは面で切り取りできるので既存のものへテスト置きやすい。
-- https://twitter.com/azu_re/status/557904943957688320

• Angularみたいな初期化が特殊なやつはbrowser.waitForElementExistみたいので待つかbrowser.evaluateでjsをinjectできるのでそれで待ち合わせ?

リファクタリングプロジェクト紹介

• 構成
• ライブラリ
• ビルド
• Travis

とかの紹介する感じ。

記事候補の草案文です。
ここはどうするの?とかの疑問や意見等は適当にコメントを書いたりしてくれると書くときに反映できるかもしれないです。
👍

https://gist.github.com/azu/fb3ec88231235511858a
の紹介

npm publishする時に、どういうツールを使うかの話。

# npm
## 元ネタ: https://github.com/maxogden/maintenance-modules#maintenance-bash-scripts
## denpendency : https://github.com/azu/scoped-modules-checker
function _npm-message(){
  echo -n "npm publish to \033[036m$1\033[0m. OK? "
  read INPUT
  echo "\033[31m=>\033[0m \033[036m$1\033[0m"
}
alias npm-patch='_npm-message "Public" && pre-version && npm version patch && post-version && npm publish'
alias npm-minor='_npm-message "Public" && pre-version && npm version minor && post-version && npm publish'
alias npm-major='_npm-message "Public" && pre-version && npm version major && post-version && npm publish'
alias private-npm-patch='_npm-message "Private" && scoped-modules-checker && npm-patch'
alias private-npm-minor='_npm-message "Private" && scoped-modules-checker && npm-minor'
alias private-npm-major='_npm-message "Private" && scoped-modules-checker && npm-major'
alias pre-version='git diff --exit-code && npm prune && npm install -q && npm test'
alias post-version='npm run --if-present build && git diff --exit-code && git push && git push --tags'

• 以前は https://github.com/webpro/release-it 使ってた
• 大体Y押してた
• scoped module扱うようになったので、何かもうちょっと安全な方法が欲しかった

Online Study TokyoBouldering.js – Lingr の次の本

概要

https://github.com/azu/read-all-later というアプリを作った。
JavaScript Weeklyみたいなメルマガ購読したはいいけど、一度に見え量ではないのでまとめてPocketに突っ込んで、ちらっと見ていく感じの事をやればいいのでは思った。

最初はPocketみたいなアプリ自体をつくろうかと思ったけどだるいので、
Fav -> IFTTT -> RSSというルートを持たせてる

記事候補:

Deprecating esprima-fb · Issue #111 · facebook/esprima

Facebookがesprima-fb(JavaScriptパーサ)の新規開発は止めて、
acorn&Babel(Babelはacornベースのパーサ)を使っていくようになるとのこと。
具体的にはreact-toolsとかがこれ使っている。

Babel だけじゃなくて、ESTreeというASTのコミュニティ標準が揃ってきたのも乗り換えが簡単になった要因になってる。
パーサはESTreeという仕様レベルでの互換性は持っているので、好きなパーサを使える or 乗り換えが簡単になったという背景がある。

• https://github.com/estree/estree

ESTree登場の流れはこの辺でまとめたので、そのときに色々増えたパーサが収束していってる雰囲気について書いておきたい

https://support.google.com/webmasters/answer/6073543?hl=ja

PubSubHubbubしたい
PubSubHubbub

azu/pdf-markdown-annotatorというアプリを作った話。

• ES5の仕様書を読みたくなった
• メモ付けないと一瞬で忘れる
• HTMLページにメモ付けるタイプはサービスに依存する
• PDFにアノテーションを付ける => PDFのアノテーションを使う習慣がない
• メモはMarkdownで書きたい
• Highlights App for Mac というアプリを見つけた
• 悪くない使い心地
• 発想が面白い PDF + Markdownメモ
• pdf.jsとCodeMirrorで普通に実現できそう -> azu/pdf-markdown-annotator 作った
• このアーキテクチャならブラウザ上でも動かせそう -> https://github.com/azu/annotation-memo/ できた

われわれは、いかにして変更点を追うか

の記事版が欲しい。
どういうストーリーだと読みやすいんだろ

Latest redcarpet is broken.

• vmg/redcarpet#538

will do downgrade...

書いた => ライブラリをES6で書いて公開する所から始めよう | Web Scratch

ライブラリをES6で書く所から始めよう

目的

• 6to5の紹介
• Node.jsライブラリをES6で書いて公開するのは無理なくて良い
• 逆にfilesなどnpm公開のベストな手法を選択がセットとなる
• 現在のES6変換器に求めるべきは構文であって機能じゃない(機能はpolyfillが持つ)
  • letとか変換でどうやっても結果が見えてるので無理に使う必要はないと思う。
  • Template StingsとかSpread operatorとかCompute property nameとかclassはコード自体がシンプルになるので使っていくといい

今ES6で書く手段

今ES6でコードを書く方法は色々ある。

• 6to5
• Traceur
• TypeScript

Compare · 6to5

ライブラリをES6でnpmで公開してみよう

メインのコードは大きくなるからコンパイルしたくない人も多いはず。
でも、ライブラリなら結構気軽にES6で書いて公開することができる。

• 例: azu/textlint-rule-helper

上記にリポジトリをみてもらうと、ES5のコードやgulp等の設定ファイルも存在しない事がわかる。(ブラウザ向けのコードだと必要になる可能性が高いけど、Node.js向けならなくてもいけるという事を示す)

ライブラリの構成は以下のようになっている

• src/ : ES6で書かれたコード
• lib/ : 6to5でsrc/以下のコードを変換したES5のコード
  • lib/: このディレクトリは.gitignoreでリポジトリには含めない
  • 変換後のソースは見えないほうがリポジトリがキレイ(Pull Requestしやすい)
  • 逆にpackage.jsonのfilesフィールドでは "files" : ["lib"]のみとする
  • npmが軽量になるし、npmで使う時はES5のコードのみにできる
  • 細かすぎて伝わらない package.json 小ネタ三選 - t-wadaのブログ
• test/: mocha + power-assertでテストを書く
  • azu/espower-6to5を使うことで、--compilers js:espower-6to5/guess と指定するだけでオンザフライの変換ができ、テストもES6で書ける
• npm run-script: 6to5を使いbuild,watch,test を加える
• ドキュメント: APIにはドキュメントは必要。いくら良いコードでもドキュメントがないならゴミ
  • JSDocでドキュメントを書き、jsdoc-to-markdownでREADMEに追加出来るように自動化する
  • jsdoc-to-markdownを使うことで、README自体がテンプレートとなってJSDocを変更する度にREADMEをいじる必要がなくなる
  • npm run docsでREADMEが更新できる
  • JSDocのHTMLって誰も見ないと思ってる。jsdoc-to-markdownも何か微妙な感じがあるけど…
  • 逆の考えでREADME駆動的にドキュメントをコードに落とすという考え方もある
  • 理想的にはd.tsかWebIDLでインターフェースを書いてドキュメント化できるといいけど、今のところツールがない。

ここはどうするの?とかの疑問や意見等は適当にコメントを書いたりして下さい。

👍

古くは ブックマークレットを作る環境 · Issue #6 · azu/azu で立てていたIssueのものを作った。

azu/where-page-in-slide というブックマークレット作るにあたって欲しくなったのでazu/bookmarkletterを書いたけど、書いてからGitHubにはjavascript:を埋め込めないという制限があることに気づいた。

そのため、GitHub Pagesにリンクを置いて自動的に読み込ませる azu/embed-bookmarklets というものも作った

• azu/bookmarkletter
• azu/embed-bookmarklets

完全にPOCのつもりで書いて放置してたけど、Release v0.9.0: Release 0.9.0 (2014-09-02) multi-stage sourcemaps · twada/power-assertに入ったので、
azu/multi-stage-sourcemap について書く

azu/wait-for-element.js の紹介

azu/wait-for-element.js はある要素が表示されるまで待つPromiseを返す関数

用途

• Greasemonkeyやユーザースクリプトで使う要素が多いと思う
• MutationObserverとポーリングの実装を持ってる
• テストはTestem + power-assert + Mocha + browserifyでやってる

npm 1.xの時はローカルにあるディレクトリをdependencyで指定できなかった

• Better local require() paths for Node.js
• avoiding ../../../../../../..
• How I Work Around The require(“../../../../../../../”) Problem In NodeJS | ThoughtStream.new :derick_bailey

なので微妙なハックがひつようだった。

だけど npm 2.0.0でLocal Pathsがサポートされたので、ローカルに置いたディレクトリをモジュールとして使えるので、require("local-library"); みたいな書き方で使える。

プロジェクトに依存したUtilとかを定義するのに便利という話。

azu/github-reader とかnode-webkitアプリを.app的なバイナリで配布する知見について。

Travis+GitHub Releaseを利用すれば、nwを配布するより楽な感じにできるので設定方法について書く。

GitHub側がアップデートされたので、確認する

• update lock

https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-

追記:

Sorry for the trouble and thank you for the pointer to that issue - we can't make any promises about support for different Markdown engines, but we'll definitely share your feedback with our Pages team as they consider everything we hear about the Jekyll 3.0 update.

他のMarkdownプロセッサを使えるようにする予定はないと返事をもらった

Kramdownのリンクをテーブルと解釈する問題があり、GitHubのJekyllは無理そう。

とりあえず、Circle CI + Jekyll 2(現状)へ移行する。

• Circle CIのSSH Key https://github.com/nielsenramon/kickster/blob/master/README.md#automated-deployment-with-circle-ci
• https://github.com/jirutka/rake-jekyll の導入
• master -> developへの書き方

その後Jekyll3へ移行する。

azu/textlint
の紹介記事を書く

node-webkit 0.10の変更点について簡単に書く

• Web Notification
• Fullscreen API
• ネイティブメニューの変更
• Chrome 35
• nwsnapshot

どうやってECMAScript 6を学び始めるかの記事版欲しい

最近気になったJavaScript AST周りの動き | Web Scratch の 定期。

ネタが溜まったら書く感じな気がする

ネタ募集中

Acorn

• 最近はRReverserさんが色々と動いてる
• aster
• Added ES6 support to Acorn

CSS Parser

cssとかNV/CSSOMとかあるけど、CSS Syntax Module Level 3をかなり意識してるので気になる。

JavaScript ASTと違ってCSS ASTみたいなやつは抽象層なのに互換がないからまとまるとよさそう。

• ezequiel/cssprima

ライブラリ

• twada/escallmatch
• michaelficarra/esvalid
• twada/espurify
• michaelficarra/everything.js

ツール

• JavaScript AST visualizer

Meta ECMAScript
を作った話

• meta-ecmascript/es6-to-text-diff
• meta-ecmascript/download-es6-spec
• meta-ecmascript/es6-spec-changelog

という感じで、ダウンロード、変換、ES6ドラフトの一つのファイルのgit履歴に落とすツールを作った。

• meta-ecmascript/es6-draft-revision

元の考えはES6 仕様のDiff検索システム · Issue #46 · azu/azuで書いてるように、

git log -S "if the argument to object.keys is not an object" -i

みたいな感じでgitに入れたドラフトのリビジョン毎の差分を簡単に検索出来るような仕組みを作って、どのリビジョンでその変更が入ったのかを追跡したいために作った。

データとかはそれぞれリポジトリにあるので、他の人がもっと便利な仕組みを作って欲しい感じ

近年、(GitHub) Issueを読む機会が凄く増えている。

[2015-02] 最近のJavaScript AST標準化の動き | Web Scratch みたいな記事は、そもそもIssueを読まないと追うことが無理だったり、underscore.js 1.8.0問題みたいなものもIssueとPull Requestをちゃんと見ないと正しい現状を把握するのが難しい。

世界のJavaScriptを読もう @ 2014で話したように、最近のライブラリや仕様などはGitHubに比重があるので、現在と少し先を知ろうと思ったらコードだけではなくIssue等を見ていく必要があると思う。

多分感覚的には誰しもが何らかの手段でIssueを読んでいるはずなんだけど、そういう"Issueを読む/追う技術"みたいなのが文章としてあると便利だと思うのでそういう記事が欲しい。

JavaScriptみたいな枯れきってない感じのものを探す場合、探した結果も大事だけど、
結果はすぐに古くなったりしやすいので、探し方とかも共有できるとより良いんじゃないかなと思う。
-- 最近のJavaScript情報の探し方 · Issue #2 · jser/jser.info

のアプローチの一種。

他の人はどうしてるんだろうか？

https://twitter.com/azu_re/status/500922235704463360 これを作った感じで、
ファイルの中身をそのまま貼り付けるという単純な感じのもの。

ファイルの選択はAlfredが全てやってくれるので(全文検索もできて)、一応テンプレート的なものとしては${{}}の中身をシェルスクリプトとして実行するという仕組みをいれてだけのもの

---
title: ""
author: azu
layout: post
date : ${{ date +%FT%H:%M }}$
category: 
tags:
    - 

---

• Alfred workflowの公開方法がイマイチ…
  exportはメンテしにくそう…

master -> developに変更

GitHub Releaseを書いていく方法についてはgit tagとGitHub ReleasesとCHANGELOG.mdの自動化について | Web Scratchで書いたので、
今度はGitHub Relaseを見ていく方法についてを書く。

内容的には 最近のJavaScript情報の探し方 · Issue #2 · jser/jser.info の派生系で、今の自分のReleaseの追い方について。

主にGreasemonkeyの話になる

• リポジトリをWatchする
• 人をFollowする
• GitHub Releaseを購読する
• GitHub RelaseからCHANGELOGを見る
• CHANGELOGすらない場合にDiffを見る

投票ボタン

http://efcl.info/categories/#イベント

今まで参加して来たイベントはほぼ全てメモとって公開して来たので、たいしたノウハウはないけどどうやって書いてるかとかを書きたい。

需要あるのかな？

👍 or 👎

http://efcl.info/adiary/ のデータが見えなくなってる。

いいマイグレーション方法が分からなかったので、やってなかった

データはエクスポートして以下にある

• MT形式 http://take.ms/ljEfK
• はてな形式 http://take.ms/ebiRr

元からWordpressで使ったので、
コメントのインポートとしてしなくてもいいのかなー。

Browserifyを駄菓子屋さんで買おうとする人が良く見られるため、
もっと案内的なタイトルの記事が欲しい。

イメージとしては jser/jser.info#17 のようなリンク集的な記事。

• codylindley/frontend-tools
• addyosmani/es6-tools

等もちょっと近い。全て列挙というよりはもう少し絞った感じにしたい。

efcl.info は記事のリソースも全部Github上にあるので、更新等も自分以外がPull Requestできる。
変化が早いツールにも向いてるスタイルだと思う。
(JSer.infoでもいいけど、あっちはまだTumblrだからイマイチ)

このページは紹介した方がいいとかあったら教えてください。

• ベースとなる形の記事を書く
  • Browserifyはライブラリじゃなくてツール
  • substack/browserify-handbook
  • gulp/grunt
  • ビルドファースト Front End Ops Tooling // Speaker Deck

ある程度ジャンル分けした方がいいのかな?

azu/github-issue-teevについて

azu/reference-promises-spec

でまとめたので仕組みについて書く

今のW3CとかWHATWGにあるやつとか、ECMAScript、JavaScript(DOM)の仕様ってGithubでやってたりすること増えた。

簡単にどこでやってるものがあるのかとか紹介をする記事とかどうだろう？

後、http://discourse.specifiction.org/ や https://github.com/webcompat/web-bugs/ とかユーザーに近い層とかも増えたよ的なやつ。

仕様の議論に参加してるような人が「身近になってる仕様」的なこともっと書いてくれるのがベストな気がするけど(自分は議論にあんまり参加しないので)

クリックで投票 =>

各投稿にEdit on Githubボタンを付ける。

ついてでに、Qiita風のこの投稿に修正依頼をするボタンを下に入れる

azu/refute は assert.not* のエイリアスを持つモジュールです。
assert(true) に対して refute(false) という感じで利用できます。

もちろん power-assert とも互換性をもって使えます。

作った経緯は以下に書いてある。

mozilla/pdf.jsを使えばPDFをブラウザ上で表示出来るので、これを使ったプレゼンテーションツールとかあると面白そうな気がする。

Learningとか見る感じページめくり系のスライド表示を作るのは意外と簡単な気がする。

こういうのが欲しい理由としては以下のような感じ

SlideShareやSpeaker Deckにロックインされたくない
    そもそもSpeaker Deckは素のPDFを見たほうがましという状況がよくあるのが問題…
GitHub Pagesにスライドを置くという同じスタイルを取れる
    直接PDFだとはやっぱり避けられる所がある + ブラウザによって表示形態がスライドに適してない
PDFを吐けるアプリは多いので、意外と汎用的に対応できる気がする
    パワーポイント、KeyNote、DeckSet、Reveal.jsなど

-- PDFベースのプレゼンテーションツール · Issue #20 · azu/azu

mozilla/pdf.jsが主な構成要素

azu/pdf-slide-html はiframeでslide-pdf.jsを使ったビューアを埋め込むジェネレータ。

http://azu.github.io/slide/DOMQuery/ 埋め込み例

これMarkdownからレンダリングした内容を下にHTMLで入れるようにしてる。
SlideShareとかにある内容のテキスト出力をインスパイアしてつけた。

Decksetとか組み合わせると、
HTML自体もいい感じに読めるし検索性も高まるので便利な感じなった気がする。

• azu/pdf-slide-html
• azu/slide-pdf.js

デメリット

複雑な図形が多用されるとpdf.jsはまだレンダリングが苦手な感じがある
モバイルでpdf.js動くのか分からない(フェールバックとしてpdfを直接開かせる)

であげてたデメリットも、iOSとか普通に表示できたし思ったより現時点でよい感じがする。
ここ3年ぐらいスライドはHTMLで書いてて、色々なジェネレータやテーマを作ったりしたけど、スライドで求められるのレイアウトって大体固定である方が都合がいい感じになる気がする。

HTMLならではの実行が入るスライドは別だけど、大抵は固定レイアウトの方がモバイルとかで可変ならない方が見やすい。

後、これのツールについてpdf.jsについて色々書いたので、pdf.jsの紹介とかをやりたい。

長くなりそうなので、分割するかも。

azu/promises-book#182

Promise本で対応した話について

• docbookの挙動の違い ( https://github.com/asciidoctor/asciidoctor-fopub を使うケース)
• code の書き方の違い
• デフォルトテーマの違い

ので、もしよければ次回は呼んでほしいです！

peco + シェルスクリプトの単純なやつで、シェルスクリプトにセットアップ用のスクリプトを並べておくという単純なやつ。

function init-project() {
    local scriptDir="/Users/azu/Dropbox/local/init"
    local selectedFile="$(find "${scriptDir}" -maxdepth 1 -type f | peco)"
    if [ -e "$selectedFile" ]; then
        sh -e $selectedFile
    fi
}
zle -N init-project

pecoで選べるようにすれば、適当なファイル単位の管理で良いので意外と便利。

start at https://twitter.com/azu_re/status/508155852360933376

👍

Circle CIを使う理由がなくなったため無効化した。
Travis CIに移行する

• textlint + reviewdog

azu/portfolio#1 の内容をefcl.info以下に持ってくる。

• タイムラインはデータとして別にする(追記しやすくする
• 発表したスライドをまとめるページの作成
  • 株式会社wktk 参考
• React(またてんぷれ) + Fluxでメインの中身を動的に書き換えるSPA的な感じ
• 制作物とかもそのまま埋め込まないでMarkdownで書いてレンダリング出来るように

画像のアップロードとか細かい補助はAlfredで出来るようにしてる。

まだ、Jekyllで記事を書くエディタはまだ完全じゃないけど、とりあえず形は出来てきた感じがするので、軽く書きたい気がする。(けどパスとか大体汎用的じゃないから書き換え必須な感じなのがイマイチ)

後、alfred workflowってどう配布するのがいいんだろ。

azu/reftest-runnerの紹介記事

単純に紹介しても機能的に何かあれなので、ユースケースを中心にする

#14 とも関係あるけど、
JavaScript ASTを扱うツールの作り方って感じの記事とかちゃんとしたのを見たことない気がする。

• Building JavaScript Tools
• カジュアルJavaScript AST

とかそういうやつだけど、スライドなので作り方まではやってない。

小さい書籍的な、実際に作りながら学ぶサンプル的なものが欲しい気がする。
(JavaScriptに置ける基礎知識がある前提の)

👍

http://azu.github.io/slide/assistant-bucho/test-everything.html のExampleテストについて記事を書く

• https://github.com/azu/electron-zip-packager
• https://github.com/azu/nw-zip-builder

の紹介と http://efcl.info/2014/09/05/node-webkit-binary-release/ のアップデート

せっかく #7 みたいにIssueに対して記事を書いてるので、
Jekyllのメタ属性のissueのURLとかを入れたい。

カスタム属性とか入るのか調べる