from bookmark to favorite - 2019.08
これは、日々の 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
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