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

Vue

vue-youtube
GitHub - anteriovieira/vue-youtube: A simple component for a powerful API. vue-youtube provides a simple layer for you to use your imagination while over the YouTube IFrame Player API.
YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google Developers
Nuxt で YouTube プレイヤーを埋め込む - Qiita
YouTube Embedded Players and Player Parameters  |  YouTube IFrame Player API  |  Google Developers

vue x youtube x Nuxt

Nuxt env
Nuxt.js + TypeScript のアプリケーションで環境変数を安全に管理する - Qiita

Nuxt で環境変数をうまく使いこなす

vue-class-component vs. Vue.extend
Writing Single File Components (Vue Files) in Typescript: vue-class-component vs. Vue.extend

デコレータか Vue.extend どちらを使うのか話。どちらも結果は変わらないけど、自分の好みは、angular ぽいのは本来の Vue からかけ離れてるので、Vue.extend がいいなと。

Vue Component Design
Advanced Vue Component Design

Vue component の作り方を動画で学ぶ

CSS

a11y-css-reset
GitHub - mike-engel/a11y-css-reset: A small set of global rules to make things accessible and reset default styling

アクセシビリティを意識した Reset CSS

Text Animation
Text Animation Design Inspiration - HTML & CSS Snippets Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀
22 CSS Text Animations

text 関連のアニメーションのまとめ

ie11CustomProperties
GitHub - nuxodin/ie11CustomProperties: Custom Properties polyfill for IE11

IE11 用の Custom Properties ポリフィル

Staggered Animation
Different Approaches for Creating a Staggered Animation | CSS-Tricks

CSS で要素をずらして順にアニメーションを実行するいろいろな手法。sass loop / custom prop / data attr

CSS Animation Worklet API
CSS Animation Worklet API

メインスレッドに影響を与えないアニメーションを実行できる CSS Animation Worklet API がドラフト

@extend vs mixin
@extend を使うべき時、@mixin を使うべき時 | POSTD
@extend を使いこなすために | 株式会社 エヴォワークス -EVOWORX-

@extend は除去して mixin を使う理由

Cascade Custom Properties
CSS Custom Properties In The Cascade — Smashing Magazine

CSS Custom Properties をカスケーディングしてクリエイティブな表現に取り込んでみるテクニック。挙動について丁寧に説明してる

CSS custom prop x CSS grid
Bringing new CSS techniques to production
Web Design Experiments by Jen Simmons

CSS grid と カスタムプロパティで広がるレイアウトの世界

Css animation search
Animista

CSS animation をいろいろ探ってみる。いろんなバリエーションが揃っていて楽しい

Whirl
Whirl: CSS loading animations with minimal effort!

loading animation をまとめたライブラリ。シンプルだけどいろんなアイデアのものが詰まっていて参考になる

Woah.css
Woah.css

ユニークな CSS トゥイーンのサンプル集。かなり複雑な動きを CSS で表現してる

cssanimation.io
CSS Animation Library for Developers and Ninjas - cssanimation.io

CSS と twennMax でのアニメーションが並記されてるライブラリ

Effeckt.css
Effeckt.css

ユーザー操作のフィードバックとして実装したい CSS animation ライブラリ

Dynamic.css
Dynamic.css | Ustym Ukhman

ユニークなマイクロインタラクションを集めた CSS animation ライブラリ

vhs
vhs

シンプルで明快な CSS animation ライブラリ。UI の状態変化に

JavaScript

Better JavaScript
Practical Ways to Write Better JavaScript - DEV Community 👩‍💻👨‍💻

よりよい JavaScript を書こう

Smooth Scrolling Effect
GitHub - codrops/SmoothScrollingImageEffects: A small set of ideas on animating images and other elements while smooth scrolling a page.

スムーススクロールエフェクトのサンプル

Locomotive Scroll
Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects.

スムーススクロールエフェクトのライブラリ

AMP
Google Developers Japan: AMP の誤解を払拭する

これからの AMP について

npm
JavaScript Package Manager 2019 - Speaker Deck

これからの NPM

Bounce.js
Bounce.js

GUI で CSS トゥイーンアニメーションを実装できるツール。プリセットも用意されていて、それをベースにカスタマイズすることもできる。UI が使いやすい

PWA
What’s next for PWAs? - DEV Community 👩‍💻👨‍💻

PWA にまつわる次のステージの話

brightcove を使うなら
react-player-loader/index.js at master · brightcove/react-player-loader · GitHub
Brightcove Player, React and Typescript · GitHub
vue-video-player/player.vue at master · surmon-china/vue-video-player · GitHub
GitHub - brightcove/player-loader: An asynchronous script loader and embed generator for the Brightcove Player.

pseudo-buttons
Converting divs into accessible pseudo-buttons – Ben Frain

div 製のボタンを accessible にしてみる

WebGL

Free Frontend
Free Frontend

マイクロインタラクションやフロントエンドのアイデアに

Basis Textures
Using Basis Textures in Three.js - Samsung Internet Developers - Medium

最新の Three.js で使える Basis Universal : decoded on GPU

36 Days of Type
36 Days of Type | Reflektor Digital

美しいミニマルな canvas デモンストレーション

流体表現
Sample
AdvancedTeam
The O By NARS

流体表現気持ちいいです、ぬるぬる

Generative Art
Generative Machines with Matt DesLauriers - YouTube

Generative Art への deep dive

Domenicobrz
Domenicobrz · GitHub
WebGL Portfolio

美しい WebGL の習作

Frontend

HTML can do
HTML can do that? - DEV Community 👩‍💻👨‍💻

HTML only でできることの探求。

Program
Program

instagram clone

Data visualization
Data visualization - Material Design

Data visualization について Material Design からの回答。

Learning Synths
Learning Synths

ウェブで動くシンセサイザー

Visual Regression test
Web アプリに Visual Regression テストを導入 - Qiita

声のブログに Visual Regression test を導入するはなし

SVG with Nested SVGs
Mimic Relative Positioning Inside an SVG with Nested SVGs — Sara Soueidan – Freelance-Front-End UI/UX Developer

SVG を入れ子にした時の話

dark mode
iOS 13 からのダークモード対応のコツ - Qiita

dark mode 対応

Slack speeds up
Slack speeds up its web and desktop client – TechCrunch

React で作り直された Desktop Slack は速くなった

Hand Writing Effect
Hand Writing Effect through CSS3 and Adobe Illustrator

手書きタイポエフェクトの作りかた

frontend まとめ
すべての新米フロントエンドエンジニアに読んでほしい 50 の資料 - Qiita

frontend 資料まとめ

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

ブラウザの機能を制限したり拡張する Feature Policy について

lighthouse v5.2.0
Release v5.2.0 · GoogleChrome/lighthouse · GitHub

lighthouse de third-party code の検出と検証が可能になった。Chrome 拡張機能ですぐに利用できる。Audits では Chrome 77 から使える予定。

Pagespeed / Search Engine Ranking
How Google Pagespeed works: Improve Your Score and Search Engine Ranking
Lighthouse v3 Score Weighting MAKE YOUR OWN COPY - Google Sheets

7 月から速度は SEO に影響し、遅ければ広告の費用が上がる。競合より早い必要性。 PageSpeed 5.0 は Lighthouse を継承しいろいろ進化した。Time to Interactive (TTI) / Speed Index / First Contentful Paint / First CPU Idle / First Meaningful Paint / Estimated Input Latency の順に重みがある。高い PageSpeed スコアを受け取るには、迅速な TTI が必要。ページに配信された JavaScript の量とメインスレッドでの JavaScript タスクの実行時間に影響される。js の整理や分割が有効。継続的なモバイル環境でのモニタリングを行う。

Chrome 76
「Chrome 76」の安定版公開　 Flash デフォルトブロックや PWA のインストールボタン - ITmedia NEWS

reject flash / don't audit secret mode / assist PWA / backdrop-filter:blur(10px); / Promise.allSettled / prefers-color-scheme /

game x math
ゲーム制作に使う数学を学習しよう | Unity Learning Materials

ゲームで使う数学の連載 unity 版

Accessible App
Welcome to Acccessible App | Accessible App

Accessible な UI を作るためのサンプル集。Vue を使って実装されているものが確認できる

Change slack webhook
slack の Incoming webhook が新しくなっていたのでまとめてみた - Qiita

slack の Incoming webhook が変更されたのうごかなかったらここをチェック

mercari
3 ヶ月で 20 万行を消すためにやったこと - Speaker Deck

頑張り

Git tips
【永久保存版】Git のあらゆるトラブルが解決する神ノウハウ集を翻訳した - LABOT 機械学習ブログ

困った時の逆引き git コマンド

Reduced Motion Picture
Reduced Motion Picture Technique, Take Two | CSS-Tricks

ブラウザでユーザーが Reduce Motion を設定しているときの挙動に対応する

Inclusive Design
Kat Holmes: Rethink What Inclusive Design Means - Adobe 99U

Inclusive Design を考え直そう

Design

User Inyerface
User Inyerface - A worst-practice UI experiment

UI のアンチパターンゲーム

Vertical Rhythm in Sketch
Vertical Rhythm in Sketch | Better Web Type
Pajamas Design System
Better Web Type | Web typography for web designers and web developers.

sketch のベースライングリッドでバーティカルリズムを実装する。View > Canvas > Layout Settings で設定する。フォント -> 行の高さ -> 行の高さ / n が基準のグリッド値で gitlab では 4px。

Modularscale
Modularscale

フォントのサイズをスケールさせてくれるツール。比率と基準サイズを変更できる

Event

V-meetup #10
処理の共通化とコンポーネントの分割/分類/粒度について
Alternative Atomic Design をさがして｜ Ryo Yoshitake | THE GUILD ｜ note
20190725-vuejs-application-testing-with-why