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

JavaScript

laxxx
- GitHub - alexfoxy/laxxx: Simple & light weight (3kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

スクロールに合わせたインタラクションのためのスクリプト

web
- pikapkg/web: Run npm dependencies directly in the browser. No Browserify, Webpack or import maps required.

バンドラーを利用せずにブラウザで npm を直接利用・実行する。wherever ESM syntax is supported.

Web Authentication API
- W3C and FIDO Alliance Finalize Web Standard for Secure, Passwordless Logins
- パスワードレス認証 WebAuthn の勘所と対応状況：新春特別企画｜ gihyo.jp … 技術評論社
- Web Authentication API - Web API | MDN

リリースされた Web Authentication API 使ってパスワードなしの生体認証とかやっていこう。

こえのブログ
- アメブロ 2019: こえのブログでの PWA

モダンすぎるプロダクトの PWA 概要。

Vue

Nuxt v2.5
- Release v2.5.0 · nuxt/nuxt.js · GitHub

topics: Typescript DX (reject nuxt-ts) / Open in Browser command option / .nuxtignore /

React

react performance up
- Progressive React

React アプリケーションを最適化 / 高速化するいくつかの方法。

WebGL

Displacement Scroll
- Displacement Scroll

ディストーションエフェクトのサンプル。

WebGL Transitions on Scroll
- How to Create Smooth WebGL Transitions on Scroll using Phenomenon | Codrops

scroll で変化していくコンテンツを WebGL で実装する。

Frontend

Semantics to Screen Readers
- Semantics to Screen Readers · An A List Apart Article

スクリーンリーダーに伝えるためのアクセシビリティ

optimize googlefonts
- Make your Google Fonts render faster · PerfPerfPerf

google fonts を使いたいとき、レンダリング最適化したコードを吐き出すツール。

PB
- Google Developers Japan: パフォーマンスバジェットのご紹介 - ウェブパフォーマンスのための予算管理
- Fast load times  |  web.dev

サイトパフォーマンスを高速に保つため、パフォーマンスに関する予算を決める。アセットやページ全体のファイルサイズ、ローディングまでにかかる時間、Lighthouse のスコアなど、UX 上重要であるものや、運用しやすいものをバジェットとして定義する。

HTML Emails
- HTML Emails 101 For Web Developers – Andrew Laurentiu – Medium

HTML E-mail の作り方と心がけること。

CSS

CSS Scroll Snap
- CSS Scroll Snap: How Do I Look In This?

スクロール位置をスナップさせる CSS Scroll Snap のサンプル。

Mask Compositing
- Mask Compositing: The Crash Course | CSS-Tricks

Composite layer どんなのに使ったらいいかわからないけど、楽しいのはわかった。

css calc func
- Benjamin De Cock on Twitter

CSS ではいろいろな算術関数が追加される予定。

CSS Magazine Layouts
- 38 CSS Magazine Layouts

Magazine 風レイアウトのサンプル、だいたい CSS だけで実現できてる。

Design

designer inspiration
- One Page Love - One Page Website Inspiration and Templates

シングぺージサイトのインスピレーションやサンプルを集めるサイト

Humane by Design
- Humane by Design

倫理的で人間的なデジタル UX を設計するための量も質もデザインも美しい UX ガイド。

Teenager’s UX: Designing for
- Teenager’s UX: Designing for Teens

Teenager は読解力がない / 習熟度が上がりにくい / 忍耐力がない。コンテンツが密集していてナビゲーションがよくない大規模サイトとか課題。政府、団体、学校の ​​ サイトが、使い勝手が悪く感じる。ウェブでたくさん読むのを好まない、読みやすく概念を視覚的に示したサイトが好まれる。文章は余白を十分に。内容を小さく意味のあるまとまりで構成する。ハイライトや箇条書きを使うといい。6 年生の読書レベルで書く。大人と同じくらい小さいフォントサイズを嫌う。ロードスピードが命。子供っぽい表現を使わない。タッチデバイス。

配色はセンスじゃない
- 配色はセンスじゃない、UI デザインで色をかんたんにキメるメソッド｜ Taiki IKEDA ｜ note

[Coolors.co](https://coolors.co/) で右にキーカラーをロックして、スペースキー連打、メインカラーと同じくらいの明るさで、メインカラーとはかなり異なる色を選ぶ。black: rgba(0,0,0,0.87) text, rgba(0,0,0,0.54) sub, rgba(0,0,0,0.26) disable, rgba(0,0,0,0.12) border. white: rgba(255,255,255,1.00), rgba(255,255,255,0.70), light-030: rgba(255,255,255,0.30), rgba(255,255,255,0.12)

アクセシビリティ
- AbemaTV のアクセシビリティ 小さな一歩｜しゅんすけ｜ note

コントラスト/色数を改善していく。

How to simplify
- How to simplify your design – UX Planet

シンプルなデザインの実現の仕方。

Checklist Design
- Checklist Design - best UI elements for the best UX practice

コンポーネントをよくするための UI/UX の Tips 集。

Event

Frontend de KANPAI! #6
- 【増枠】Frontend de KANPAI! #6 -みんなのサービスづくり- - connpass
- note カイゼンやっていき 💪 - Speaker Deck
- 開発を担当した三年間の振り返り - Speaker Deck
- 『プロダクト開発における スキルと肩書』 at Frontend de KANPAI! #6 -みんなのサービスづくり- - Speaker Deck

Vuefes US
- VueConf US 2019 - Google スライド

Scoped Slots / Class API / Dynamic Lifecycle Hook Injection x Advanced Reactivity API = New Mixin Pattern / React-hooks like / Recommended over mixins / Closer to standard JS intuition