from bookmark to favorite - 2019.09
これは、日々の Web 制作で生まれたブックマーク集です。時事的に新しい記事もあれば、そうでないものもあります。引き出しやすいようにメモも付けておきます。
Vue
Lazy load component for vue
Vue.js App Performance Optimization: part 2— Lazy loading routes and vendor bundle anti-pattern.
Vue components の非同期ロードの tiips 連載
WebGL
GLSL func
GLSL についてのメモ - Qiita
glsl で良く作られるユーティリティ関数 - Qiita
GLSL の組み込みやよく使う関数のまとめ
JavaScript
rgbShiftSlider
GitHub - hmongouachon/rgbShiftSlider
rgb effect を適用したスライダー
CSS
Dart Sass
Web 制作者のための Sass の参考書.pdf - Speaker Deck
@import の廃止、Ruby は滅び Dart で書かれる。名前空間付き変数。
Break points
レスポンシブデザインのブレイクポイントの正解はこれだった 2019 最新版 - web のあれこれ
tablet 560, desktop 960
Style Guide list
CSS Style Guides — dailydevlinks
Style Guide のまとめ
Logical Operations with CSS
Logical Operations with CSS Variables | CSS-Tricks
CSS 変数使った論理演算
UI Interactions
UI Interactions | Raphael Fabeni
ミニマルなよくある UI インタラクション集
CSS Grid
CodePen - CSS Grid: Magazine Layouts
CSS Grid で 雑誌レイアウト
Frontend
viewport units on mobile
2019 年のエンジニア新人研修の講義資料を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
しっかりと、すごいしっかりと
viewport units on mobile
The trick to viewport units on mobile | CSS-Tricks
Viewport の値を CSS で取り扱う方法。
alt
「代替」の意味を探して
alt について、代替テキスト・アクセシビリティツリー・文書構造とプレゼンテーションの分離
cyberagent UX / accessible
UX エンジニアとアクセシビリティエバンジェリストによる品質と開発速度が担保されたチームのつくりかた | FEATUReS
開発者がプロダクトのクオリティや健全性について、自分たちで裁量権をもって進められる体制を作っていくために信頼関係を
cyberagent x Yahoo Japan
となりの会社とテックトーク | FEATUReS
React SPA そのさきの時代は DX を抑えつつ UX を意識して
GitHub Actions β
laboobal/gh-pages.yml at master · uto-usui/laboobal · GitHub
GitHub Actions β を使ってみたけど、かんたん。VuePress を Github Pages にデプロイする流れやってみた
GitHub Actions x IE11
GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かす - Qiita
GitHub Actions で IE / Safari 動かして e2e という流れをやってみる
Safari 13 topic
Safari 13 Release Notes | Apple Developer Documentation
ios13 から日本語フォントの bold がより太くなるケース - Qiita
eliminating the need to set-webkit-overflow-scrolling: touch / Added support for CSS conic gradients / Added support for the Pointer Events API / Added the CPU Usage Timeline for analyzing and improving the power efficiency Mac safari から Web インスペクタで CPU 使用率やバッテリー消費影響を計測できる。ウェブサイト内の JavaScript の処理が重いのか、CSS レイアウト再計算/描画が重たいのか追跡可能。
MDN web docs
フロントエンドエンジニア御用達の MDN web docs を網羅した - Qiita
MDN web docs の TOC 的なもの
canvas で動的にいろいろカスタムできるジオメトリックなフォント
How to Accessibly Split Text
CSS { In Real Life } | How to Accessibly Split Text
スタイルのためにスプライトしたテキストのアクセシビリティ対応、aria-label と aria-hidden を使う
SVG animation generator
Home - SVG Artista
svg animation のジェネレータ
Can I email
Can I email… Support tables for HTML and CSS in emails
Can I use の mail バージョン
Design
Color tools
Color Tools For Designers 2019 - Muzli - Design Inspiration
カラーツールのまとめ
「今どきのデザイン」の見た目が似ている
「今どきのデザイン」の見た目が似ている理由 | アドビ UX 道場 #UXDojo - Adobe Blog
ウェブデザインの企業化
Typography Basics
Typography Basics: Terminology, Examples and Infographics
Infographic がわかりやすくてみやすい
Font Pairings Trends in 2019
37 Exceptional Font Pairings Trends in 2019 | Nice, Very Nice!
トレンドを押さえたいい感じのフォントの組み合わせのまとめ
Event
UX MILK Fest 2019
UX MILK Fest 2019 | デジタルな UX に関わるすべての人のための UX デザインフェス
カウカモのリードデザイナーが語る、住まい探しの新しい体験 ー UX MILK Fest 2019 イベントレポート | remark
議論を進めるプロトタイプは UI だけじゃない｜角銅 浩平｜ note
情緒の設計 - Speaker Deck
エンジニアが UX リサーチャーを兼任するに至ったワケ #uxmilk_fest / 20190914 - Speaker Deck
Agile UX Research
UX MILK Fest 2019「誰のための UX?」 - Speaker Deck
Dist
顧客と共に、北極星を目指す。 - スタジオディテイルズの制作現場 - - Speaker Deck
デザインツールのクラウドサービス化が進んで起きそうなこと｜ Yoshiki Kojima / chot Inc.｜ note
ひとりで Atomic Workflow を試してみた - Speaker Deck
Inspiration
Gucci
#24HourAce | #24HourAce
すきになったサイト