yamaScrapboxPlayBackTech2017https://gyazo.com/baf0bffa88a384d25b672d4f9cecaa62Velocity.jsアニメーション案件で使用してみました。これまでCSS3アニメーションなりで無理やり動かしていたところをぬるぬるアニメーションさせたい用に検討。jQueryと親和性があるのでバリバリ使えました。公式がドキュメント更新してなかったので知らなかったけど調べたらpauseとresumeというのがあった。ついて付随して、GPUでの処理(position要素の廃止、transformの使用)、will-changeの存在などパフォーマンスは出来る限り高められるような設定などもしました。ES6対応マークアップ案件とかだとなかなかwebpackもバベる機会もないので個人的に変換しつつ勉強しています。https://lebab.io/実際のコードをここで変換してみてどう置き換わるかなどの検証や勉強に使ってます。個人リポジトリのJSもES6対応しつつあります。https://github.com/yamanoku/birthday-countdown-js/releases/tag/v2.0.0jQueryとアロー関数は最悪の組み合わせとのことで、jQueryを捨てる1つの材料となりそう。https://gyazo.com/2e2cbb5e6bc6f1531149f12f0d43c31d社内案件でDockerを使っていたので個人的にもなんか使えないかと画策。WordPressを動かすのがちょうどチュートリアルとして良さそうでした。テーマ開発環境を構築しようdocker-composeを覚えた。以下自作WPテーマを公開してるリポジトリで使えます。https://github.com/yamanoku/malachite内製アプリで使えるようになるだろうか、色々試作してみたい(機会があるのか?)。Flexbox去年よりもレイアウトのためにバリバリ使うようになりました。clearfixはそろそろ卒業。clearfixといった疑似要素があるとjustify-contentのときに邪魔になる場合も...均等割付した折り返しFlexboxの最後の行orderやflex-growとかflex-shrinkには地味にお世話になったかも。あとcolumn-reverseとか。Layoutも考えていきたい。Observerがもたらすスクロールイベントにおける革命いままでスクロールをさせてイベントを発火させていたところを、ウィンドウやエレメント・コンポーネント同士が交差するときを監視してイベント発火させるようなものに変更してみた感じです。良さそうなので試してみたinview.jsほかscrollイベント動作といった負荷がかかったり、管理が煩わしかった部分を解消してくれた気がします。polyfillでなんとかなってるので今後も積極的に対応していきたいです。src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>きれいなマークアップ、WAI-ARIA、アクセシビリティについて今年、個人的にはマークアップエンジニアとして、意識的に取り組んでみた内容かもしれない。div要素で作ったパンくずやナビゲーションには、aria属性付与するようにしてみた。page">カレントページ</div>https://www.w3.org/TR/wai-aria/注釈ほかrole要素、フォーカスのあたらないdiv要素へのtabindexの設定など、少しずつではありますがユーザビリティを蔑ろにせず、アクセシビリティもじんわりと改善しています。結局のところ、WAI-ARIAに頼らずともちゃんとしたマークアップが出来ていればだいぶ機能的にかつアクセシビリティ面でも評価されるとのことなのでちゃんと書こうとなってます。HTMLもデザイン通りの組みとしてよりかは「マシンリーダブル」らへんを意識して順番を変えるなどしてみました。TypeScript、Storybook業務でやってみたいというエンジニアに合わせて体験してみた感じ。https://www.typescriptlang.org/正直な所「すごく便利」という認識まで個人的においつけなかったのが反省点。いえ型定義しておくことのメリット・重要性みたいなのは理解した。v16にて互換性がなかったため見送り。collaborators!</>);}PostCSShttps://gyazo.com/2599c040c415d83db1ebc75e021bfd45社内的にはStylusをこれまで使用していたが、更新があまりない(2~4年前の)CSSプリプロセッサだったので、改めて一体どういうオプションだけが必要なのか・PostCSS自体も業務に導入すべきかなどあった上で自分の方で試してみた感じです。感想としてはcss単体で使うよりもsassやlessなどに付随させて必要なものを動かすのがてっとり早いという感じ。プリプロセッサのオプションじゃまかない切れないものを継ぎ足すイメージ。https://github.com/luisrudge/postcss-flexbugs-fixesこれはすごくて感動しました。GitHub開発、CircleCI、CodeClimate社内でGitHubでの開発がスタート。1案件+社内ツールプロジェクトなどでジョイン中。https://github.com/geekcojpメリットとしてはGitHub用のツールとの連携とかで、いままでbacklogのリポジトリ内管理だったので、いろんなことが出来ることが知れてよかった。自動化ツールのCircleCIほかCodeClimateについても体験。間違いを減らす・機械的に判定してもらうというのは良い。skipを多用していた時期がありました。stylelint、csscombCSS周りの設定でstylelintを使用してみてます。ターミナルでエラーがでるようになってそれを直す矯正マシーンみたいな感じですが、逐一ルールも確認せずとも教えてくれるので便利。弊社はECSSの設計思想でCSS書いてますが、それに付随したstylelintもドキュメント内にあったので、内容を少し更新してそれを派生させて動かすようにやってます。http://ecss.io/chapter9.html#stylelintあとcsscombもコンフィグ化してみた。https://www.npmjs.com/package/@yamanoku/stylelint-confighttps://www.npmjs.com/package/@yamanoku/csscomb-config共通で使えるパッケージ、モジュールを作ってパブリックでいつか公開します。TSLintやESLintとかも使ってます。htmllintやtextlintも今後導入しようとかいう感じです。https://gyazo.com/ad0755fc9babcc4f48c7080944f04ac4去年、個人的に動かしてみて理解につなげてみてましたが、実は社内案件でこっそり使い始めています。Nuxt.jsは興味湧いたので個人的に触ってみてます。SPA、SSRほか静的ジェネレータとしても使えるようなのでマークアップ案件で活かせないかと検討中。Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発やっぱり素として使うにはそれなりにコストがでてくる(モジュールやプラグインを使いたい時とか)ので、やっぱりwebpackとかでビルドできるような動かした方が必要に感じました。Vue()が気になってしょうがない。unitsという概念を取り入れてみました。calc()とは相性が悪いみたいです。OrganizationをやろうかとMTGで検討していたのをついに始動しました。個人のScrapboxにて個人的にコツコツやってる(スローペースですが)。非公式翻訳ほかにも公式でまとめられている抽象的表現が多いドキュメントとかもまとめて分かりやすくしたのを社内で配布するなどしてみたいです。なんか今更みたいなのもあるかもしれませんが、誰もやっていないところで生まれる価値や仕事というものを見出していくようなことをしていきたいです。Zeppelin、Avocode体験デザインツールではあるが弊社デザイナーが取り入れてみた上記2点も体験してみました。CSSコード自動生成がすごい。100%希望通りのこととはならないが、画像化されているもののCSS判定の精度の高さに感動しました。yamanoku.iconあとSketchも案件によっては触れる機会がありました。https://yamanoku.github.io/LT/lt04/SlackのチャンネルにURLをなげたらRSSリーダーとして機能するというのを導入してみた。https://elements.heroku.com/buttons/gozman/slack-rssそもそもiOSアプリのはてなブックマークが使いづらくなったのでなんとかしようと試していたのですが気がついたら使いづらい部分が直ってました。自作RSSのは中途半端に頓挫しました。機会があったら復帰させたい。