これは、日々の Web 制作で生まれたブックマーク集です。時事的に新しい記事もあれば、そうでないものもあります。引き出しやすいようにメモも付けておきます。

JavaScript

web speech API
- たった 17 行のコードで音声自動文字起こしを実装する - Qiita

JavaScript の web speech API で Chrome で動く自動文字起こしの実装。

optimize third party script
- サードパーティ JavaScript の最適化 - 一休.com Developers Blog

パフォーマンスバジェットの定義と Google Tag Manager の削除に到るまでの考察。

JavaScript is
- JavaScript の概念たち (前編) - Qiita
- JavaScript の概念たち (後編) - Qiita
- GitHub - oimo23/33-js-concepts: 📜 JavaScript 開発者が知るべき 33 のコンセプト (翻訳)

JavaScript 総まとめ。

Vue

Vue state management
- Vue コンポーネントの State 管理を考える - 一休.com Developers Blog

モジュール結合度を意識して Vuex と props を使い分けていく。Vuex は modules に区切ったとしても、どこからでも参照できるグローバルストア。コンポーネントに閉じている状態は props で、コンポーネント同士で共有したい状態は Vuex で管理するときれいになる。

Vue Virtual DOM system
- Vue.js の仮想 DOM と差分レンダリングの仕組み ① - Adways エンジニアブログ
- Vue.js の仮想 DOM と差分レンダリングの仕組み ② - Adways エンジニアブログ
- Vue.js の仮想 DOM と差分レンダリングの仕組み ③ - Adways エンジニアブログ

VDOM を差分レンダリングする仕組みのコードリーディング。

vuepress component catalog
- vuepress-plugin-component-catalog - npm

vuepress で component 集を作るためのプラグイン。

Vue test
- 【2018 年】Vue のテスト関連まとめ【非公式】 - Qiita

Vue で test したい時のリソースまとめ。

vue-tinder
- GitHub - shanlh/vue-tinder: 仿造 Tinder 的 Vue 组件，类似国内的探探、陌陌等 APP 的左右滑动卡片功能。

tinder 風 vue component

Vue +
- Vue.js 続・大規模アプリ開発 - Speaker Deck

Vue 入門の続きとしての大規模開発へ。ツール選定や開発思想のまとめ。

Vue. x TypeScript
- Vuex による状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita

Vuex は TypeScript しんどいけど、v3 のリリースでコアが TypeScript になるのがブレイクスルーになりそう。それまでは諦めるか、vuex-type-helper に頼ってみる。

Vuex map helper
- Vuex のマップ系ヘルパーの書き方決定版！ - Qiita

Vuex の map*** の書き方まとめ。

Nuxt x WebAudioAPI
- ブラウザ上で音楽編集ができるソフトを Nuxt.js+WebAudioAPI で作った話Qiita

Nuxt x WebAudioAPI で クライアントで動くオフライン対応した簡単な mp3 編集アプリを作る。

Firebase x Nuxt.js x Auth
- Firebase と Nuxt.js を使ってユーザ認証関係を簡単に作ってみる+1 ヶ月の自分に教えたいリンク集 - Qiita

Firebase x Nuxt.js x Auth の実装の参考に。

Lighthouse x Vue x speed
- Lighthouse を使って Vue.js で書いたポートフォリオサイトを爆速化する - Keke の日記

Lighthouse の結果からサイトパフォーマンスを改善する。踏み込んだ施策や Chrome devtool の使い方も開設されていて◯

Nuxt x speed
- 阿部寛を超えるための技術: はてなブログから Nuxt に移行した話 | Studio Andy

Nuxt で基本的なブログに必要な実装に高速化施策を駆使して、阿部寛を超えるまでの取り組み。

Frontend

Yahoo frontend Technology
- ヤフー株式会社における Web フロントエンドの技術選定 - Yahoo! JAPAN Tech Blog

Yahoo のサービスごとの frontend 技術仕様の解説。Web フロント技術室とか JavaScript サポートチームとかがあって、社内の技術力や情報鮮度を保てるようにしているらしい。

micro interaction with Adobe CC

- イマドキの UI デザインには欠かせない! マイクロインタラクションを作るためのズルい CC 活用テクニック(Adobe MAX JAPAN 2018 発表資料) - ICS MEDIA

マイクロインタラクションを作るための Animate と Ae と XD の使い分けや、そのテクニックの紹介。マイクロインタラクションや接続型アニメーションの必要性や意義についても語られていて素敵。

image optimized
- Squoosh

google 製の 画像圧縮アプリ。

Atomic design
- デザイナー・エンジニアのコンポーネント分類基準とその理想郷 - Speaker Deck

Atomic design を デザイナーとエンジニアで認識合わせをしつつ、定義と実装を模索する。

- 手戻りが少ないアトミックデザインの導入｜ふじけん / kenshir0f ｜ note

Atomic design を 導入するときの心構え。

Npm scripts

- Node.js ユーザーなら押さえておきたい npm-scripts のタスク実行方法まとめ - ICS MEDIA

Npm scripts の書き方。

Cloud Functions x Docker
- Firebase Cloud Functions で消耗したくない人のために、開発環境のベストプラクティスをまとめていったら Docker に行き着いた話（随時更新） - Qiita

Cloud Functions x Docker の参考に。

firebase-meetup
- firebase-meetup.pdf - Speaker Deck

マイクロサービスごとにチームが分かれている、エンジニアの技術的横断が課題になっていて flutter / firebase を活用していけば、その辺り解決できるのではないのかなーという文脈で技術選定するのもありなのでは、という。

gulp v4
- GitHub - gulpjs/gulp: The streaming build system

タスクランナーの gulp v4 が release されました。

Design

DesignShip2018
- #DesignShip2018 全セッション聞き起こしまとめ｜ akatsuki174 ｜ note

DesignShip2018 のまとめ。

2D - Animation
- 2D - Animation Tools for Apps, Games, and Web

2d animation を作るブラウザツール

Event

Netlify Meetup #003
- What really happens when you deploy a site on Netlify - Speaker Deck
- Netlify Functions で TypeScript を使う方法 / netlify-lambda-typescript - Speaker Deck
- Gatsby と Netlify で JAMstack なメディア開発 - Speaker Deck
- A story till the netlify fun book is made - Speaker Deck

Netlify Meetup に参加してきたんだけど、より好きになった。

Chrome Dev Summit 報告クリスマス会
- 技術面からみる パフォーマンス改善 / Frontrend Vol.13 Dec 19th, 2018 - Speaker Deck
- Chrome チームの推すこれからくる新しい Web API / Upcoming Web APIs advocated by the Chrome team - Speaker Deck
- パフォーマンス改善のケーススタディ - Speaker Deck
- Chrome Dev Summit 2018 - Day 1 Livestream - YouTube
- Chrome Dev Summit で披露された高速化のテクニックの数々

Dev Summit の解説会に参加してきたんだけど、毎年新技術のエッジな情報が満載で楽しい。