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

React

useEffect
Forget about component lifecycles and start thinking in effects — Sebastian De Deyne’s Blog

useEffect hook についての解説。

Vue

Reduce Your Vue.JS Bundle Size
How to Reduce Your Vue.JS Bundle Size With Webpack

webpack-bundle-analyzer 使って reduce bundle size しましょうという話。 Nuxt だと同梱されている。

Nuxt v2.9 releace
Release v2.9.0 · nuxt/nuxt.js · GitHub

typescript など破壊的変更。

WebGL

shader
シェーダー本を書いて得た知見まとめ - Qiita

shader に関する本を執筆するにあたって必要になった知見のまとめ。おすすめの本の紹介がとてもよかった。

AlteredQualia
AlteredQualia

WebGL のグラフフィック集。

Three / PIXI for SPA app with Vue / React
WebGL Libs for WebApp Frameworks - Speaker Deck

Three と PIXI を Vue や React の SPA で利用するときのインスタンスの破棄の仕方。モデルの圧縮 Draco について。

Distortion effect
Distortion and Parallax Shader

react-three-fiber + glsl
react-three-fiber: suspense + GLTF loader - CodeSandbox

react-three-fiber のとても良いサンプル。

ThreeJS Hover Zoom
CodePen - ThreeJS Hover Zoom Channel Displacement

Three で作る グリッヂのかかった hover effect

CSS

Easy lazyload cssz1
CSS を非同期ロードする最も簡単な方法 - Qiita

media 属性で CSS を非同期ロードする方法。

bone animation
Andrew Hoyer | Walking With CSS

複雑な bone animation

JavaScript

Functional JavaScript
Functional JavaScript: What are higher-order functions, and why should anyone care?

高階関数の理解を深める。関数を返す関数の使いどころとか学び。

ES2019
ECMAScript 2019 and beyond…

ES2019 についての新機能と ES2020 の未来のはなし。

ResizeObserver
ResizeObserver - Web APIs | MDN
Polyfill.io

任意のボックスモデルの変更を検知する。

Distortion Effect
Distortion Effect / Glitch Effect HTML & CSS Snippets Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀

Distortion Effect のまとめ集。

Frontend

GitHub CI/CD
GitHub gets a CI/CD service – TechCrunch

GitHub CI ベータリリース、本公開は 11 月。

Manage binary files
Netlify Large Media | Netlify

Netlify で大きいバイナリファイルを管理する。url クエリからサイズを出し分けすることができる。

motion design studio
海外のモーションデザインスタジオまとめ - その 1 ｜ Iori Iwaki - motion designer ｜ note
海外のモーションデザインスタジオまとめ - その 2 ｜ Iori Iwaki - motion designer ｜ note

海外のモーションデザインが得意なスタジオのまとめ。

WebKit Tracking Prevention Policy
WebKit Tracking Prevention Policy | WebKit

WebKit のユーザートラッキングに関するポリシー。google 牽制。

GitHub Actions
新 GitHub Actions 入門 - 生産性向上ブログ

ベータリリースされた GitHub Actions に入門

Puppeteer
Puppeteer で不要な CSS を消す - Cybozu Inside Out | サイボウズエンジニアのブログ
Modern Web Testing and Automation with Puppeteer (Google I/O ’19) - YouTube

Puppeteer のカバレッジ収集機能を使って、使っていない CSS を削除する

Cassie Evans
Cassie Evans on CodePen

かわいいインタラクションのコレクション

Comprehensive Guide to Clipping and Masking in SVG
A Comprehensive Guide to Clipping and Masking in SVG

svg mask の tips まとめ

Svg mask animation
Path scale Mask Reveal Text

mask 要素 を gsap animation する

Blob / Wave
Get Waves – Create SVG waves for your next design
Blobmaker

svg Blob や Wabe を作るジェネレーター

Snap.svg x path
Snap.svg で svg のパスを動かしたアニメーションを作ってみた | 東京上野の Web 制作会社 LIG

Snap.svg で 配列に格納した path をアニメーションさせる。

responsive x grid
レスポンシブデザインに見るデザインカンプと実装との溝 - シフトブレイン／スタンダードデザインユニット

カンプからレスポンシブデザインを実装するためのグリッドシステムの利用。

Design

chaos design
Chaos Design

紙のデザインの歴史とかカオスエンジニアリングとか、いろんな視点から、web のデザインシステムの変革と未来を照らし合わせる

How To Build A Sketch Plugin
How To Build A Sketch Plugin With JavaScript, HTML And CSS (Part 2) — Smashing Magazine

sketch plugin の作り方

design system
デザインシステムの落とし所はどこにある？ : could

寛大さと厳格さの駆け引きはデザイン組織としての習熟度との兼ね合い。 Material Design みたく、変化し続けることで持続可能性を広げる。デザインシステムは組織のビジョンのひとつ。

Event

JAC
Japan Accessibility Conference - digital information vol.2 - YouTube
セッション - Japan Accessibility Conference digital information vol.2

chrome tech Talk Night 14 - google
amp
Fully AMP pros and cons - Speaker Deck
Examples - amp.dev
amp-script の実用性について考える - mizchi’s blog
BMW.com | The international BMW Website

Feature Policy
Feature Policy および Feature unsized-media の導入ガイド - 銀色うつ時間

meguro.ts - drecom
TypeScript 型定義ファイルのコツと生成ツール dtsmake - Qiita

Suggestion: “safe navigation operator”, i.e. x?.y · Issue 16 · microsoft/TypeScript · GitHub
これから来そうな JavaScript 新機能 3 選 - Qiita

TypeScript 型定義ファイルのコツと生成ツール dtsmake - Qiita

ecma が Stage 0 ~ 4 - 新しいバージョンの release 6 月　、Stage 3 になると TypeScript 議論対象に。型を配りましょう。

ginza.js - plade
TS の subtype と contravariance

Type AB = A & B / AB is subType

Prettier のしくみ - Speaker Deck

string -> AST(parser) -> DOC -> string

好きなマンガ読める率 100％にするため、AWS Amplify で Vue アプリをデプロイしてみた - Speaker Deck

AWS のサービスいろいろ結合してくれてる。認証とかパッと導入できる。

webfont
Dynamically Loading Fonts with Javascript

dynamic subset - adobe fontplus - キャッシュ効かない - JS / unicode subset - google - splice - CSS / font face api を使おう

roppongi.js - dmm
Roppongi.vue 2 - YouTube