from bookmark to favorite - 2019.06
これは、日々の Web 制作で生まれたブックマーク集です。時事的に新しい記事もあれば、そうでないものもあります。引き出しやすいようにメモも付けておきます。
Vue
vue-typed-mixins
GitHub - ktsn/vue-typed-mixins: Type safe Vue.js mixins
vue.js - unable to use Mixins in vue with typescript - Stack Overflow
Using mixins with TypeScript - Get Help - Vue Forum
vue x typescript と mixins を実装するときのパッケージ
Nuxt pwa-module
【Nuxt.js】pwa-module のちょっとした TIPS - Qiita
The Offline Cookbook | Web Fundamentals | Google Developers
pwa-module v3
【Nuxt.js】pwa-module v3 における preCache の仕様変更 - Qiita
Pwa-module v3 からバンドルされるアセットが自動的にオフライン対象にならない。static 配下のみ自動追加になる。
React
React World
GitHub - sfatihk/react-world: ✨🌌 A different web experience in 8 bit React.js World
React World!
8bit のゲームを DOM と React component で実装する。スクロールイベントとそれをコンポーネントに渡して DOM を動かすサンプル。
React art
CodePen - shape-outside — Face
React で実装したシェイプに追従するテキストアートワーク。
WebGL
Falling City
CodePen - Falling City
Three のシンプルで印象的なデモ
P5LIVE
P5LIVE
P5 のライブコーディング環境
JavaScript
Learning TypeScript
仕事ですぐに使える TypeScript — 仕事ですぐに使える TypeScript ドキュメント
Introduction - TypeScript Deep Dive 日本語版
TypeScript をしっかり学んでいくコンテンツ。
Darkmode.js
GitHub - sandoche/Darkmode.js: 🌓 Add a dark-mode / night-mode to your website in a few seconds
mix-blend-mode: difference でダークモードを実装する
Drop caps & design systems
Drop caps & design systems - Vox Product Blog
Drop caps をクロスブラウザ対応しつつ CSS で実装する tips。
JavaScript のイベントをたくさん見られるサイト
メディア | JavaScript のイベントをたくさん見られるサイト
ESLint v6
ESLint v6.0.0 の変更点まとめ - Qiita
eslint:recommended に含まれるルールが更新されるなど。
Google Search x sw
Bringing service workers to Google Search | web.dev
Google Search における service worker の使いどころ。
ts-toolbelt
GitHub - pirix-gh/ts-toolbelt: 👷 Higher type safety for TypeScript
TypeScript のユーティリティツール。
gif アニメーションを js から操作する
Weekref
memory_in_javascript.pdf - Speaker Deck
WeakRef: JavaScript に弱参照がやってくる（ついでに Finalization も） - Qiita
Weekref でメモリを明確に管理できるようになる
Draggable Image
Draggable Image Strip | Codrops
ドラッグ移動のギャラリー
Web Workers
When should you be using Web Workers? — DasSur.ma
Web Workers - Off the main thread の使いどころとその理由とか。V-DOM の diff 処理とか寄せてもいい感じだからフレームワークとかそういうアーキテクチャになればいいよねっていう
Responsible JavaScript
Responsible JavaScript: Part II – A List Apart
変化に強い JavaScript を書く話。
Web Camera
Web Camera 02
Web Camera の映像をパーティクル化するデモ。
Promise
Promise combinators · V8
Promise.allSettled / Promise.any とかのはなし。
javascript-questions
GitHub - lydiahallie/javascript-questions: A long list of (advanced) JavaScript questions, and their explanations Updated weekly!
JavaScript の問題集
When a Modal is Open
Prevent Page Scrolling When a Modal is Open | CSS-Tricks
モーダル表示とスクロール制御
CSS
user agent stylesheet
各ブラウザごとのデフォルトのスタイルシート、user agent stylesheet のまとめ -Chrome, Safari, Firefox, Edge | コリス
The State of CSS 2019
The State of CSS 2019
いまの CSS を調査したいろいろまとめ
CSS layout
Relearn CSS layout: Every Layout
さまざまな layout を実現するための CSS テクニックの紹介
CSS Glitch Effect
How To Create CSS Glitch Effect - CSS3 Animation Tutorial
CSS で簡単に作る Glitch Effect の解説
Clouds with SVG and CSS
Drawing Realistic Clouds with SVG and CSS | CSS-Tricks
Svg filter と CSS でリアルな質感の雲を作るチュートリアル
CSS Day 2019: some things
CSS Day 2019: some things I learned
css 開発の重要ポイントについて
CSS 3D Text Effects
Top 20: CSS 3D Text Effects - csshint - A designer hub
3D ぽい CSS のテキストエフェクトまとめ
Top 24: HTML and CSS background pattern - csshint - A designer hub
FrontEnd
How to Section Your HTML
How to Section Your HTML | CSS-Tricks
semantic な section についてのはなし。
Marking Required Fields in Forms
Marking Required Fields in Forms
フォームに必須のフィールドを実装するときに気をつけること。
readme-md-generator
GitHub - kefranabg/readme-md-generator: 📄 CLI that generates beautiful README.md files
readme を package.json と git の設定でアシストしつつ CLI で簡単に生成するジェネレーター。
Optimizing Google Fonts
Optimizing Google Fonts Performance — Smashing Magazine
google fonts の最適化、これに加えて service worker に乗せてやるのがいいかと＊
Micro Frontend
Micro Frontends
Micro Frontend とは。ポジティブ - フロントエンドが複雑になり続けているので、スケーラブルなアーキテクチャがほしい。技術とドメインの適切なレベルの結合と結合ロジックを明確にする必要。それで独立したチーム間でソフトウェアを拡張することができる。ネガティブ - 必要なインフラを適切に管理するための十分な自動化。多くのアプリのフロントエンド開発、テスト、およびリリースプロセスへの対応。独立したフロントエンドコードの品質、一貫性の確保。開発の決定がより分権化され制御されにくくなる。ペイロードサイズ - 独立した JavaScript は、共通の依存関係が重複する可能性を持っていて、ペイロードサイズが増加します。ただ個々のページが単一のモノリシックなフロントエンドを構築した場合よりも速くロードされる可能性がある。モノリスでは、任意のページがロードされると、すべてのページのソースと依存関係を一度にダウンロードすることがよくあったけど、マイクロフロントエンドはそのページのソースと依存関係だけをダウンロードするから。
Ions
Atomic Design for Design Systems – Chris Cid ∣ CJCid
Introducing “Ions”, an extension to the Atomic Design – Chris Cid ∣ CJCid
Atomic Design に取り入れる Ions の話。atomic design に organisms 以下の component を横断できる atoms (ions) を実装する。カテゴリを分けると、Modes / Viewports / Styles / Variations / Types / States / Statuses / Situations という感じ。
Rendering on the Web
Rendering on the Web - Web 上のレンダリング | Web | Google Developers
いろいろなレンダリングパターンの紹介。
adobe fonts
フォントのライセンス
TypekitはAdobe Fontsになりました AdobeMAX AdobeFonts - Adobe Blog
typekit がなくなって adobe fonts が生まれた。PV / domain / sync count とか限界突破してる＋
Create A PDF From Your Web
How To Create A PDF From Your Web Application — Smashing Magazine
Web から PDF を出力するためのツールや手法について。
Layout Instability API
The Layout Instability API | web.dev
interaction や transition/animation などではない予期しないレイアウト変更を防ぐために…メディア要素のサイズに付与し、レイアウト済の既存のコンテンツをなるべく動かさないようにし、動かすときは transition/animation で変化を示唆。
Sign in with Apple
Getting Started - Sign in with Apple - Apple Developer
Apple が推奨する Sign in with Apple の実装方法
optimize images
画像の最適化を自動化する | Web Fundamentals | Google Developers
画像最適化の詳解
iOS 13
API Diffs から見る iOS 13 の新機能 WWDC19 - Qiita
iOS13 release note
Generate new repositories with repository templates
Generate new repositories with repository templates - The GitHub Blog
GitHub でリポジトリのテンプレートから新しいリポジトリを作れるようになりましたよ
Design
Undesign
Undesign | Collection of free design tools and resources for makers, developers and designers
デザインリソースまとめ。
guide to iconography
A complete guide to iconography
Icon を作るためのレシピ。
田渕さん
「ユーザーが関心を持ってくれるデザインを創ろう」アートディレクター田渕 将吾の考えるデザインの引き出しとは？
beautifulwebtype
beautifulwebtype.com
free webtype gallery
Figma
Figma ではじめる UI（Web）デザイン｜ Part1 ｜ nao komura ｜ note
Figma の使い方の連載
product design
【翻訳】“意味”を持ったプロダクトをデザインするために｜デザインビジネスマガジン”designing”
プロダクトデザインに必要な視座について
Dark UI
63 Beautiful Dark UI Examples & Design Inspiration
最近話題になるダーク UI のインスピレーション
Learn how to design large-scale systems
GitHub - donnemartin/system-design-primer: Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
大規模なデザインシステムの設計方法をまなぶ
404 pages
404 Error Page - Awwwards
404 まとめ
A Recipe for Designing Animations
A Recipe for Designing Animations—Without Sacrificing Performance
google のいけてるアニメーションをさくさく実装していくやりかた。アニメーションは幾何学と google パレットとガイドラインに基づいてデザインされ、ストーリーを伝える目的で。レイテンシーの少ないパフォーマンスのいいアニメーションを実装したい。イラストは Illustrator x sketch で Illustrator はパスファインダー使うために。フォールバック png で用意しつつ、モーションリクエストを減らしているユーザーへのアクセシビリティを確保。AEUX で sketch から After Effects にグループ単位でコピーする。5 秒間、なめらかで一貫性のあるアニメーションはマテリアルガイドラインを活用して。After Effects の Bodymovin 拡張で、JSON を生成。この段階で MOV もエクスポート。Lottie で JSON に対応する SVG を生成。コールバックとか JS から操作できるようになるし、GIF みたいに巨大にならずにすむ。LottieFiles でプレビューできる。PhotoShop で、資料などで共有のために GIF を作成する。After Effects のファイル／読み込み／ビデオフレームからレイヤーを使用して、MOV を Photoshop に読み込む。 Photoshop のタイムラインパネルを使用してフレームアニメーションを作成し、Save for Web で GIF としてエクスポート。長いアニメーションのとき、変換するのが遅い場合は、オンラインの MOV toGIF コンバーターを使う。gif は ImageOptim とか ezGif で最適化する。
文字サイズの比率と調和
文字サイズの比率と調和 - シフトブレイン／スタンダードデザインユニット
調和数列を用いて文字サイズを算出する
4px baseline grid
The 4px baseline grid — the present - UX Collective
4 の倍数での grid 設計
〇〇できそう感
UI のお作法。28 個の「〇〇できそう感」をまとめました。｜ maiokamoto ｜ note
Web UI のシグニファイアまとめ
Fashion Websites
50 of the Fiercest Fashion Websites
Fashion Website collection
Event
TypeScript Meetup 1
TypeScript Meetup 1 Build 2019 update
“型パズル”との付き合い方
Modernizing pixiv - Google スライド
slide
PWA Night vol.5
PWA Night Vol.5 - YouTube
Nuxt.js の PWA モジュールは何をやっているのか - Speaker Deck
Service Worker Life Cycle “Install” pwanight - Speaker Deck
ZOZO テクノロジーズ Meetup 10
ZOZOTech meetup Frontend １０ - Speaker Deck
Introduction to TensorFlow.js - Speaker Deck
フロントエンドエンジニアのスキルについて / About Frontend Developer Skills - Speaker Deck