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

Frontend

The State of JavaScript 2018
- The State of JavaScript 2018

JavaScrip 開発者を対象に行われたアンケート結果のまとめ。

UI design
- オブジェクトベースな UI デザインに取り組むための心構え｜ usagimaru ⌘ Satori Maru ｜ note

UI デザイン meets オブジェクト指向の設計論 = OOUI = オブジェクト指向ユーザーインターフェイス。UI をレイヤー構造で捉えたときの、オブジェクトの在り方を定義することが求められる。この構造についての解釈と解説がわかりやすくまとまって素敵。

object orientation
- オブジェクト指向のいろは - Qiita

OOUI を実際コードベースで表現するためのイディオムを筋トレするためのポスト。すごいボリュームの記事だけど、内容はすべて大切なもの。

secure
- エンジニアなら知っておきたい、絵で見てわかるセキュア通信の基本 - Qiita

セキュアのよみもの。これも大ボリュームで質も分厚い。

ffmpeg
- ffmpeg で動画を綺麗な gif に変換するコツ - 丁寧に手を抜く
- ffmpeg で動画を GIF に変換 - Qiita

動画コンテンツをやったので ffmpeg いろいろ設定考えたりしてました。奥が深いです…

SPA x SEO
- 【記事版】State of SEO for SPA 2018 - Qiita

SPA と SEO 関連の正しい情報 2018-2019 版

web.dev
- Home  |  web.dev

google developers guide learning 👨‍💻

GitHub CI
- Features • GitHub Actions · GitHub
- Introducing GitHub Actions | CSS-Tricks

MS になってから Github がいろいろ熱い。

PHP7.3 fast
PHP 7.3 Performance Benchmarks Are Looking Good Days Ahead Of Its Release - Phoronix

弊社でも PHP7 にあげたら、ものすごい高速・低負荷になった …

CSS

New CSS
- What’s New In CSS?

新しい CSS の DEMO 集。

CSS matrix
- CSS transform の matrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com

matrix の理解もそうなんですが、Vue アプリの作成の方も参考になるエントリ。

JavaScript

等値比較
 - JavaScript の等値比較を全部理解する - Qiita

== と === の真髄。普段は === しか使わないのが基本だけど、ちゃんと復習。

Houdini animation
- Houdini’s Animation Worklet  |  Web  |  Google Developers
- Houdini – CSS の秘密を解き明かすもの  |  Web  |  Google Developers

Web の CSS animation の次の時代へ準備をしていく。2020 あたりは gsap いらないようなプロダクトも増えそう。

Vue

Vue x dynamic import x weback
-Chrome、Safari で使える JavaScript の dynamic import（動的読み込み） - Qiita
-Webpack で Dynamic import を行ってみる - Qiita
-動的 & 非同期コンポーネント — Vue.js
-babel/packages/babel-plugin-syntax-dynamic-import at master · babel/babel · GitHub

Vue は Webpack 使っていると、簡単に dynamic import でコンポーネントを読み込ませることができる。ファーストビュー以外のコンポーネントを非同期にしてやるのがおすすめ。babel 必要。

vue fes japan 2018 資料
- Japanese Vue 3.0 Updates @ VueFes Japan - Google スライド
- 和訳 次期 Vue (v3.0) の計画 / Plans for the Next Iteration of Vue.js - Qiita
- Vue Fes Japan: Next-Level Vue Animations
- Sébastien Chopin - Nuxt.js 2.0 : Vue Fes Japan 2018 - YouTube

keynote など、これはちゃんと見ておきたいもの。Vue v3 楽しみ、TS な時代がやってくる 2019になりそうです。

- KARTE が 1,000 サイト以上で Vue.js を動かしている話 - Speaker Deck]
- Vue Fes Japan - Speaker Deck
- 1 年間単体テストを書き続けた現場から送る Vue Component のテスト / Vue Component Test - Speaker Deck
- note を Nuxt.js で再構築した話というタイトルでお話してきました #vuefes ｜福井 烈 / piece of cake, inc.｜ note
- Vue Designer: デザインと実装の統合
- Atomic Design デザインと実装の狭間
- Vue.js で reg-suit を利用した Visual Regression Testing | tsuchikazu blog
- Testing a Vuex store
- JAPANESE Why vue-cli needed a UI and what you can do with it
- Progressive Repro Frontend #vuefes - Speaker Deck
- Vue Fes Japan 2018 LINE 株式会社 Lunch スポンサー LT

個人的にきになる話題はテスト関連でした。Atomic Design についての考え方とかも納得感があるものでした。

- Vue Fes Japan 2018 - Google フォト

会場のようす

AtomicDesign x Vue.js
- Vue.js からみた AtomicDesign – Takanori Sugawara – Medium

Vue で AtomicDesign やりたいなら Nuxt でやるといいと思ってる。Nuxt way に乗れば、適当な規約がもらえるので Atomic になる。細かい粒度はそれぞれのルールで。

Design

Bookstore
- BOOK AND SONS

Typography な本を集めた古書店

Adobe MAX
- Adobe MAX Japan 2018 ビデオアーカイブ

Tech

きゃりー
- 「きみのみかた」を支える技術

MV の演出 を iPad でやるはなし。