宣言部分は共通化しない、つまり mixin を使わない。data, props などの「値」を mixin で共通化しない。ライフサイクルメソッドを mixin で共通化しない。computed, methods などの「関数」の宣言部分を mixin で共通化しない。「関数」の共通化が必要な場合は、その内部処理を単純な関数として(mixin を使わず)共通化する。「View のイベントハンドリング」は近しい View を持つ ViewModel 同士で共通化可能。「View 用のデータ成形」は近しい View を持つ ViewModel 同士で共通化可能。「Model の監視」は同じ Model に依存する ViewModel 同士で共通化可能。「ローカル State の管理」は共通化しないほうが良さそう。 -> Vanilla.js で Util、Helper、Service クラスなどを使って共通化。　-> どうしてもローカル State を共通化したければ component をラップする state を slot で流し込むようの component を定義する (高階関数的な)

Nuxt.js v2.4.0
- Nuxt.js v2.4.0 is out! TypeScript, Smart prefetching and more… - DEV Community 👩‍💻👨‍💻

TypeScript サポート始まる。次のページのリソースを先読みする Smart prefetching の機能が素敵。

Vue app Performanse
- [JavaScript/Vue.js アプリのパフォーマンス改善　一休.com スマートフォンサイトを高速化するためにやったこと - ログミー Tech](https://logmi.jp/tech/articles/320604)

Vue アプリケーションのチューニングの仕方、コンポーネントを作りすぎるとバンドルサイズが増えたり、js のサイズ管理を頑張っていこう。

Vue 2.6
- Vue 2.6 released! – The Vue Point – Medium

“Macross” v-slot のシンタックスなど v3 に向かうためのアップデート。

Vue slot
- Vue.js の mixin を slot で代用する - Qiita

mixin を代用するような slot の書き方。

WebGL

Distortion Slider
- WebGL Distortion Slider

さいきんよく見かける Distortion effect slider の作り方。

WebGL Advent Calendar 2018
- WebGL Advent Calendar 2018 - Qiita

2018 の WebGL アドベ。作ってみた系の記事がおもしろくて勉強になる。

Shaders Book
- The Book of Shaders

オープンソースの Shader バイブル

wgld.org
- WebGL 開発支援サイト wgld.org

WebGL を１から始めるならこのサイトのお世話になる。

website history
- 10 Year Challenge: How Popular Websites Have Changed

web デザイン 10 年の変革の歴史

CSS

Select CSS
- Styling a Select Like It’s 2019 | Filament Group, Inc., Boston, MA

いまどき 2019 年の(IE10+)セレクトボックスのスタイリング。

CSS loader
- 簡単で便利なのが揃ってる！CSS で実装されたローディング・スピナーのアニメーションのまとめ | コリス

CSS 縛りの loader 集。

gradient border in css
- Gradient Borders in CSS | CSS-Tricks

CSS gradient border の作り方。

CSS drawing with WebComponents
- css-doodle
- css-doodle gallery - a Collection by yuanchuan on CodePen

CSS でドローイングするための webComponents 。CodePen のギャラリーがかっこいい。

CSS keyframe editor
- Keyframes | Editor

CSS の @ketframe の GUI エディタ。transform とか text のプロパティを試せる。

CSS tips
- 30 Seconds of CSS

UI の実装によく使う、初歩的な CSS の tips 集。

CSS watch
- Pure CSS watch animation

CSS だけでできた腕時計。

CSS subgrid
- Why we need CSS subgrid - DEV Community 👩‍💻👨‍💻

CSS sub grid がいろいろ幸せにしてくれるはなし

away from Sass
- Stepping away from Sass

未来を想像して Sass を離れた CSS を書いてみるはなし。

Rendering Optimizations
- Browser Rendering Optimizations for Frontend Development ― Scotch.io

ブラウザのレンダリングパスを最適化するための知識、CSS が与える影響についてが多め。

CSS Triggers
- CSS Triggers
- Rendering Performance | Web Fundamentals | Google Developers

レンダリングパフォーマンスを最適化するための Layout / Paint / Composite パイプラインに与える CSS のプロパティ一覧。

SVG

SVG mask
- Interactive SVG mask w/full screen image

> マウスに追従するインタラクティブな svg mask のサンプル。

SVG polygon
- Low poly animals

SVG polygon を animation させて動物のモデルを作る。

SVG Filters
- SVG Filters 101 | Codrops

svg フィルタを導入するための覚書

SVG Blob element generater
- Blobmaker

GUI で Blob なオブジェクトを作るためのジェネレーター。

WordPress

WordPress REST API
- Wordpress REST API post orderby custom value – Tim Ross Web Development
- WordPress REST API order by meta_value – Tim Ross Web Development

Rest API を meta_value で並び替えて get したいとき。

Frontend

Clean Architecture x Frontend
- Clean Architecture in Web Frontend #mixleap - Speaker Deck

詳細>アダプター>方針というレイヤー構造で、詳細>アダプターは方針のプラグインとして機能する、方針(ビジネスロジック)は詳細に影響されない。アダプター(Redux や Vuex)は詳細を受け取り、UI と DB のデータを整形する。

UI animation deep dive
- Web フロントエンドでアニメーションを実装する時になにを考えるか - Qiita

UI アニメーションはユーザーの認知を助けるフィードバックを与える状態変化、React で実践していく考察。

sin cos tan
- 三角関数は何に使えるのか〜サイン・コサイン・タンジェントの活躍〜 - Qiita

三角関数は暗記するように。

grid layouts for vue
- Vue.js にも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid | コリス

Vue 製の grid layout system を実装する軽量プラグイン。

Top Pens 2018
- Top Pens of 2018 on CodePen

2018 年の codepen ランキング。

Public APIs
- Public APIs UI

mock 用とかに使いたい API まとめ

Git Explorer
- Git Explorer

git 逆引き的なツール

Email Signature Generator
- MySigMail - UI Email Signature Generator

HTML mail 署名のプレビューしながらジェネレートできる環境。

Chrome Dev Tools

- How to Use Chrome Dev Tools to Find Performance Bottlenecks ― Scotch.io

chrome dev tools や lighthouse を使ったパフォーマンスチューニング。

iOS Shortcuts and Netlify
- Blog Publishing Using iOS Shortcuts and Netlify | Gregory Schier

iPhone から web hook をうまく使って Netlify をビルドする方法。

数式画像生成
- Online LaTeX Equation Editor - create, integrate and download
- Qiita の数式チートシート - Qiita

数式の画像を生成したくて、いろいろ。

Image cdn

- imgix • Real-time image processing and image CDN
- API Reference | imgix Documentation
- Purging Images | imgix Documentation

画像 CDN、1000 枚ごとに 3 ドル、転送量 1GB ごとに 0.08 ドルがかかる。また、月の最低支払料金が 10 ドル、host- Amazon S3 / Google Cloud Storage / Web Folder / Web Proxy。オプティマイズやエフェクトかけたアセットを呼び出すことができる。

Sayonara Nikkei
- 日本経済新聞社を退職しました

emo 🎸⚡️

Shell tips
- シェルスクリプト入門者のためのチェックリスト

shell の細やかでツボを押さえた tips 集。

Design

design inspiration
- Gillde - Design Inspiration - Graphic - Design - Motion - Art - Inspirations - Graphicroozane
- UI/UX Inspiration Archives - Graphic - Design - Motion - Art - Inspirations - Graphicroozane

クオリティの高い様々な Design idea をキュレーションしてる。interaction design をよく見てる。

Motion graphic trend
- The 5 Major Motion Graphic Trends to Look Out For in 2019

2019 年のモーショングラフィックトレンドとサンプル５つ。

UX in Motion
- UX in Motion | Animation

UI アニメーションの種別まとめ。

Parallax Lacks
- What Parallax Lacks

パララックスの問題のいろいろ。よくないところはユーザーは制御が難しくパララックスなオブジェクトを見逃す、テキストの動きはめまいになる人もいる、パララックスなオブジェクトが ad と認識され意図的に無視される、もう見飽きていてそれほど印象的でない。効果的に使うなら、限定的な箇所に絞り、ユーザーにゆとりがありタスクのない場面で、１度表示されたオブジェクトはそのままにキープする。

Vector Mockups
- Vector Mockups Library