performance のいい DOM 操作をやってこう。 createDocumentFragment で createElement を１つにまとめて DOM に挿入する。DOM の深さを減らしたり、inline や不要なものを取り除いた Optimize CSS を心がけたり、 timeline 出ないものは CSS でアニメーションさせる。will-change を使い、absolute or fixed でレイアウトして only to transform and opacity であれば、すごく効率のいいアニメーションを実現できる。リフローが諸悪の根源なので抑えよう。js - style - layout - paint - composite というステップの中で、レイアウトは子孫や祖先に影響を与えてしまうのでコストが重い。

Scalable architecture
- Scalable architecture without magic (and how to build it if you’re not Google) - DEV Community 👩‍💻👨‍💻

Scalable architecture を真面目に考えてみる。ツール選定のための基礎知識。

instant.page
- instant.page

ユーザーがリンクをクリック・ホバー・タップのいずれかを行う直前にプリロードさせるスクリプト。

long-press-event
- GitHub - john-doherty/long-press-event: Adds `long-press` event to the DOM in 0.5k of pure JavaScript

ユーザーの長押しイベントを実装できるスクリプト。

Vue

design Vuex
- Vuex のルールと Component 設計 - SCOUTER 開発者ブログ

ようするに Nuxt 使っとけばいろいろ楽になるよ。

plugin Vue components
- Vue.js の単一ファイルコンポーネントをプラグインとして作る - Qiita

Vue components をプラグインかする方法。

絶対に結婚できない男
- 阿部寛を超えるための技術: はてなブログから Nuxt に移行した話 | Studio Andy
- GitHub - andoshin11/studio-andy: My personal blog.

Nuxt の基本的な機能を使いつつ、阿部寛に負けない performanse を達成するためのプロセス。blog サイトによく使う modules 群の解説があったり、コードはすべて GitHub で公開されてる。

React

React Hooks
- React Hooks だけでライブラリ使わずに google map を利用する(基礎編) - Qiita
- 更に React Hooks だけでライブラリ使わずに google map を利用する(応用編) - Qiita

React Hooks のお勉強。google maps API を使った実践的な内容なので実用的でいいかんじ。

React Hook recipes
- useHooks - Easy to understand React Hook recipes

React Hooks のレシピ集。

WebGL

WebGL distortion
- コピペで慣れる生 WebGL#01 ディストーションエフェクト｜斎藤健二｜ note

よくある WebGL distortion をライブラリなしで実装するサンプル。

CSS

remedy CSS
- GitHub - mozdevs/cssremedy: Start your project with a remedy for the technical debt of CSS.

Reset CSS の考察。ブラウザデフォルト CSS とかまとまってたり、新しい animation をオフにするメディアクエリ prefers-reduced-motion とかも同梱されていたり。

Frontend

Atomic design
- Atomic Design とフロントエンドのインピーダンスミスマッチ / Impedance mismatch in atomic design - Speaker Deck
- Atomic Design で意識したいこと inspired by FLOCSS - Speaker Deck

Atomic Design を導入段階の実践的考察。

docker-compose commands
- docker-compose でよく使うコマンド - Qiita

忘れたらよくググってるやつのまとめ。

gitmoji-cli
- itHub - carloscuesta/gitmoji-cli: A gitmoji interactive command line tool for using emojis on commits. 💻

git の commit message に絵文字を使っていこうということで。

jamstack
- WTF is JAMstack?

JAMstack とはなにか、始まりのわかりやすいガイド。

WorldWideWeb Rebuild
- CERN 2019 WorldWideWeb Rebuild

世界初のブラウザが React で復活 🙏🏻

javascript curse
- 第 2 回　 JavaScript の呪いから解き放たれて：at the front―前線にて

フロントエンドエンジニアとしての呪い。

Top Pens of 2018
- Top Pens of 2018 on CodePen

習作たち。

performance audit CLI
- GitHub - paulirish/pwmetrics: Progressive web metrics at your fingertipz

performance audit CLI 、簡単に使えて項目も絞られていていいかんじ。 pwmetrics https://google.com

Meta Tags
- Meta Tags — Preview, Edit and Generate

プレビューしながら social share 用の meta を生成する generator。

Git Explorer
- Git Explorer

対話形式で git command を探せるツール。

Priority Hints
- Get Ready for Priority Hints | Web | Google Developers

アセットの重要度をブラウザに伝えることができる。ビューポートに入っている画像を優先度高くしてみたり。importance=“low” って html の属性としてかけるし、fetch メソッドの第二引数のオブジェクトに渡すこともできる。確認するには、network panel in DevTools。

SVG

SVG Gradient
- SVG Gradient Map Filter

svg gradient filter を作るための generater。preview しながら Blend mode とか grayscale を切り替えたり、できるかんじが素敵。

SVG transform-origin
- SVG の transform-origin にハマった話（IE,safari,マルチブラウザ対応） | 株式会社エヴォワークス -EVOWORX-

SVG の transform は view-box 基準で動くのでうまくいかないことがあるしブラウザによって結構違う挙動になる。ので TweenMax とかに吸収させると楽だったりする。

UI

UI develop
- The Elements of UI Engineering — Overreacted

UI を開発するために必要な要素たち。一貫性 / 応答性 / 待ち時間 / ナビゲーション / 過去 / 拡がり / 優先度 / アクセシビリティ / 国際化 / 配信 / 回復力 / 抽象化

Design

Photo stock
- Moose - Photo Creator

素材を組み合わせてオリジナルの画像を作るツール。

Social image maker
- Free Image Resizer | Resize Your Images for Social Media | Promo

OG image だったり social で使用する画像をプレビューしながらリサイズできるサービス。

Design tools
- GitHub - LisaDziuba/Awesome-Design-Tools: The best design tools for everything.

随時更新されている Design tool bookmarks が素敵。

Mouse Interactions
- Tiny Trend: Mouse Interactions - Designmodo

マウストーカーとかマウスのインタラクションとかエフェクトとかのまとめ

Paper Sizes
- Paper Sizes | The best resource for International Paper Sizes, Dimensions & Formats

紙のサイズを調べるサイト。比較とかもできて便利。

remove.bg
- Remove Background from Image – remove.bg

人型に AI が背景を切り取ってくれるサービス。すごい。

awesome design systems
- 💅🏻 ⚒ A collection of awesome design systems

いけてるデザインシステムのまとめ。Components / Voice & Tone / Designers Kit / Source code に区分してリソースの有無を明示してる。

Color Harmonies
- CodePen - Der Bunt: Color Harmonies (Alpha 1.1)
- David A. on CodePen

美しい Vue 製の color Harmony tool。UI の使い心地がすごく気持ちよくてずっと触っていられる。

web-typography-glossary
- GitHub - fontplus/web-typography-glossary: Web タイポグラフィの基礎知識と実践

Web の日本語にも対応していくタイポグラフィのナレッジレポジトリ。

2019 Web Design Trends
- 10 Web Design Trends to Watch in 2019 | Design Shack

2019 年の Web Design トレンドの 10。web らしい動的な要素とエディトリアルの美しいレイアウトをミックスさせたような。So Many Serifs / Exaggerated White Space / Micro-Animations / Video Everything / Bubbles and Blob Shapes / Three-Dimensional Illustrations / Less Symmetry / Hints of AI / Streamlined Logos / Big Buttons

Free Stock Footage
- Mixkit - Extraordinary Free Stock Footage & HD Video Clips

フリー動画 DL サイト。

Free Premium Music
- Unminus | Free Premium Music 🍉

フリー音源 DL サイト。

Event

DIST.25 管理画面から考える UX
- DIST.25 「管理画面から考える UX」 - connpass
- 管理画面の画面設計方法について - Speaker Deck
- クライアントと作るプロダクト - Speaker Deck
- 管理画面をなくした話 DIST.25 LT 資料 - Speaker Deck
- 「みんなのデザイン」のために〜 EC-CUBE 4 の管理画面をデザインするにあたって考えたこと - Speaker Deck
- その親切心が仇になる。使いやすい管理画面をつくるためのペルソナ設定 - Speaker Deck

CSS Nite best session 2018
- CSS Nite ベスト・セッション 2018

NuxtMeetUp#7
- Nuxt Meetup #7 を開催しました！ - SCOUTER 開発者ブログ
- NuxtMeetUp#7 - yamaScrapbox

Fastly Meetup #1
- Fastly ヘルプガイド
- Yamagoya 2018: Tatsuhiko Miyagawa on Vimeo
- Yamagoya 2018: Kakeru Iwanaga, Cyber Agent on Vimeo
- オリジンシールド - パフォーマンス・チューニング | Fastly Help Guides
- キャッシュ設定ベストプラクティス - 基本的な設定 | Fastly Help Guides
- オリジンシールドサービスを利用したキャッシュ HIT および MISS ヘッダーの理解 - パフォーマンス・チューニング | Fastly Help Guides
- Purging | Fastly API Documentation
- 日経電子版のマイクロフロントエンドと PWA / devsum2019 - Speaker Deck

purge 150ms / config 5s ~ 10s で反映されるのでめっちゃ早い、fastly api integration 経由で、イベント駆動で管理することが多いみたい。nikkei では、それぞれのマイクロサービスのキャッシュを fastly に集約して、origin が死んでもキャッシュを返す、サービス同士が直接やりとりしないので障害があっても伝搬しない。cookie を fastly でデコードバリデートして同一 URL で異なるキャッシュをもつ。

Service

Startup Cemetery
- Startup Cemetery - Learn Why +100 Startups Have Failed

スタートアップの墓場。どういうサービスが生まれ滅んでいったか、栄枯盛衰の趣。