PlayBackTech2017
https://gyazo.com/baf0bffa88a384d25b672d4f9cecaa62
アニメーション案件で使用してみました。
これまでCSS3アニメーションなりで無理やり動かしていたところをぬるぬるアニメーションさせたい用に検討。jQueryと親和性があるのでバリバリ使えました。 公式がドキュメント更新してなかったので知らなかったけど調べたらpauseとresumeというのがあった。
付随して、GPUでの処理（position要素の廃止、transformの使用）、will-changeの存在などパフォーマンスは出来る限り高められるような設定などもしました。 マークアップ案件とかだとなかなかwebpackもバベる機会もないので個人的に変換しつつ勉強しています。 実際のコードをここで変換してみてどう置き換わるかなどの検証や勉強に使ってます。
個人リポジトリのJSもES6対応しつつあります。
https://gyazo.com/69af6f1b89ec88b2af36e7988f45af44 https://gyazo.com/2e2cbb5e6bc6f1531149f12f0d43c31d
社内案件でDockerを使っていたので個人的にもなんか使えないかと画策。
WordPressを動かすのがちょうどチュートリアルとして良さそうでした。
内製アプリで使えるようになるだろうか、色々試作してみたい（機会があるのか？）。
去年よりもレイアウトのためにバリバリ使うようになりました。clearfixはそろそろ卒業。 むしろclearfixといった疑似要素があるとjustify-contentのときに邪魔になる場合も…
均等割付した折り返しFlexboxの最後の行
orderやflex-growとかflex-shrinkには地味にお世話になったかも。
あとcolumn-reverseとか。
いままでスクロールをさせてイベントを発火させていたところを、ウィンドウやエレメント・コンポーネント同士が交差するときを監視してイベント発火させるようなものに変更してみた感じです。
inview.jsほかscrollイベント動作といった負荷がかかったり、管理が煩わしかった部分を解消してくれた気がします。 <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
今年、個人的にはマークアップエンジニアとして、意識的に取り組んでみた内容かもしれない。
div要素で作ったパンくずやナビゲーションには、aria属性付与するようにしてみた。（ページのカレント状態など）
<div aria-label="current page">カレントページ</div>
注釈ほかrole要素、フォーカスのあたらないdiv要素へのtabindexの設定など、少しずつではありますがユーザビリティを蔑ろにせず、アクセシビリティもじんわりと改善しています。
結局のところ、WAI-ARIAに頼らずともちゃんとしたマークアップが出来ていればだいぶ機能的にかつアクセシビリティ面でも評価されるとのことなのでちゃんと書こうとなってます。
HTMLもデザイン通りの組みとしてよりかは「マシンリーダブル」らへんを意識して順番を変えるなどしてみました。
業務でやってみたいというエンジニアに合わせて体験してみた感じ。
正直な所「すごく便利」という認識まで個人的においつけなかったのが反省点。
とはいえ型定義しておくことのメリット・重要性みたいなのは理解した。
とりあえず覚えたのはanyで宣言しとけばなんとかなるということです（雑）
Storybookも活かしきれるまでには至らず、また、React.js v16にて互換性がなかったため見送り。 関係ないですけど、React16.2からのFragment用の新しいシンタックスが出てdivで括らなくなったのすごくいいですね
code:example.jsx
render() {
return (
<>
<h1>React v16.2 has been released!</h1>
<h2>Introduces a new syntax for fragments!</h2>
Thanks to all our collaborators!
</>
);
}
https://gyazo.com/2599c040c415d83db1ebc75e021bfd45
社内的にはStylusをこれまで使用していたが、更新があまりない（2~4年前の）CSSプリプロセッサだったので、改めて一体どういうオプションだけが必要なのか・PostCSS自体も業務に導入すべきかなどあった上で自分の方で試してみた感じです。 感想としてはcss単体で使うよりもsassやlessなどに付随させて必要なものを動かすのがてっとり早いという感じ。 プリプロセッサのオプションじゃまかない切れないものを継ぎ足すイメージ。
これはすごくて感動しました。
社内でGitHubでの開発がスタート。１案件＋社内ツールプロジェクトなどでジョイン中。 メリットとしてはGitHub用のツールとの連携とかで、いままでbacklogのリポジトリ内管理だったので、いろんなことが出来ることが知れてよかった。 自動化ツールのCircleCIほかCodeClimateについても体験。やはり間違いを減らす・機械的に判定してもらうというのは良い。
ただ一時期開発中にエラーばかり吐いてバツマークが付きすぎてたのでci skipを多用していた時期がありました。
CSS周りの設定でstylelintを使用してみてます。
ターミナルでエラーがでるようになってそれを直す矯正マシーンみたいな感じですが、逐一ルールも確認せずとも教えてくれるので便利。
弊社はECSSの設計思想でCSS書いてますが、それに付随したstylelintもドキュメント内にあったので、内容を少し更新してそれを派生させて動かすようにやってます。
あとcsscombもコンフィグ化してみた。以下自分用ですが。
共通で使えるパッケージ、モジュールを作ってパブリックでいつか公開します。
https://gyazo.com/3a2a2919e156d721277ae29ebc7a9eae https://gyazo.com/ad0755fc9babcc4f48c7080944f04ac4
去年、個人的に動かしてみて理解につなげてみてましたが、実は社内案件でこっそり使い始めています。
やっぱり素として使うにはそれなりにコストがでてくる（モジュールやプラグインを使いたい時とか）ので、やっぱりwebpackとかでビルドできるような動かした方が必要に感じました。 この辺見たんですけど1000行のnew Vue()が気になってしょうがない。
vw,vh
calc()とは相性が悪いみたいです。
社内のQiita OrganizationをやろうかとMTGで検討していたのをついに始動しました。
個人のScrapboxにて個人的にコツコツやってる（スローペースですが）。
ほかにも公式でまとめられている抽象的表現が多いドキュメントとかもまとめて分かりやすくしたのを社内で配布するなどしてみたいです。
なんか今更みたいなのもあるかもしれませんが、誰もやっていないところで生まれる価値や仕事というものを見出していくようなことをしていきたいです。
デザインツールではあるが弊社デザイナーが取り入れてみた上記２点も体験してみました。
CSSコード自動生成がすごい。100％希望通りのこととはならないが、画像化されているもののCSS判定の精度の高さに感動しました。
https://gyazo.com/8eaefa123b187ebcb3ef3e03f469b67d
と当時書いてみたがどうやら微妙にpxが違う問題があるらしい yamanoku.icon
自分用RSSリーダーを作ろうとした
SlackのチャンネルにURLをなげたらRSSリーダーとして機能するというのを導入してみた。 そもそもiOSアプリのはてなブックマークが使いづらくなったのでなんとかしようと試していたのですが気がついたら使いづらい部分が直ってました。 自作RSSのは中途半端に頓挫しました。機会があったら復帰させたい。
Wrote: 2017-12-01