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

Vue

vue3
GitHub - vuejs/vue-next

Vue 3 、モダンで美しい ts が詰まってる。

React and Vue
I created the exact same app in React and Vue. Here are the differences. 2019 Edition

Vue と React の今時な比較

React

React animation for mobile
GitHub - aholachek/mobile-first-animation: Performant gesture-driven animation on the mobile web

React ベースの mobile first なアニメーション

WebGL

Aligning HTML Elements to 3D
Three.js Aligning HTML Elements to 3D

HTML 要素を canvas の 3D オブジェクトと揃える

Image Distortions
How to Create Motion Hover Effects with Image Distortions using Three.js | Codrops

Three.js で Image Distortions effect を つくる

JavaScript

PWA - Vanilla JS
Build a PWA Using Only Vanilla JavaScript - Level Up Coding

Vanilla JS で書く PWA app

Async In Modern JavaScript
Writing Asynchronous Tasks In Modern JavaScript — Smashing Magazine

JS の非同期通信について、Node.js のサンプルもある

create depth map
Photoshop 3D - Using Depth Maps, Bump Maps, and Normal Maps
Create a Depth Map Object-Photoshop | Pixel Street Studios
OmniVirt 3D Photo Creator Tool. Free 3D Photo maker.

fake 3d effect のための depth map 作成ツール、被写界深度がいい感じのやつはちゃんと effect が当たるような感じ

Same-Site Cookies
Same-Site Cookies By Default | text/plain

Chrome 80 (20/4) 以降で SameSite-by-Default に変わる。異なるドメインからセットされる cookie 、ほとんどすべてのユーザーがサードパーティの Cookie を有効にしている、ブロックできるのに

p5.js Showcase
p5.js Showcase - Processing Foundation - Medium

Optional Chaining
そろそろ JavaScript に採用されそうな Optional Chaining を今さら徹底解説 - Qiita

Optional Chaining 詳しく

クラス設計
関心の分離を意識した名前設計で巨大クラスを爆殺する - Qiita
役割駆動設計で巨大クラスを爆殺する - Qiita

クラス設計に必要な関心の分離と役割駆動設計

実践 TypeScript for latest nuxt
Nuxt.js TypeScript - 実践 TypeScript アップデート - - Qiita

実践 TypeScript の内容を Nuxt v10. にアップデートするための

Sass Modules
Introducing Sass Modules | CSS-Tricks

Sass Modules の始め方

CSS

CSS Circles
CSS Circles - Cloud Four

CSS でいろいろな円を描く方法、円を利用して path 上に text を配置するデモ

:not(:placeholder-shown)
Possibly the Most Useful CSS Trick - DEV Community 👩‍💻👨‍💻

:not(:placeholder-shown) の使いどころ

CSS Grid
CSS { In Real Life } | Building a Scrapbook Layout with CSS Grid

CSS でスクラップブックレイアウトを組む

Reset CSS
A Modern CSS Reset - Andy Bell

2019 後期のモダン Reset CSS

Text Mask Effect
Reverse Knockout Text Mask Effect with SVG | Viget

背景に影響されないように画像をテキストに合わせて切り抜く

cursorOS
cursorOS - original macos cursors

CSS cursor collection on mac

Frontend

Block mixed contents
グーグル、「Chrome」で混在コンテンツのブロック強化へ - CNET Japan

Mixed コンテンツの規制強化

Screen Size Map
Screen Size Map

スクリーンサイズのコレクション

Terseness tension
Terseness tension | Christian Heilmann

簡略化されたコードはより多くの知識が必要で認識のオーバーヘッドがおき、複雑な依存関係があります。巧妙で密なハックよりも、スタイルに従ったクリーンなコードを 。「less is more」のアプローチを盲目的に追うことで、多くの技術的負債を生み出しました。

New in Chrome 78
New in Chrome 78  |  Web  |  Google Developers

CSS Properties / Fresher service workers / Native File System

good by flash
Official Google Webmaster Central Blog EN: Goodbye, Flash

フラッシュは検索対象外に、さよなら

BERT
Understanding searches better than ever before

検索エンジンの BERT とは

Accessible Drop Caps
Accessible Drop Caps | Adrian Roselli

Accessible なドロップキャップ

Accessibility
marcus.io · Fata Morganas in Accessibility

new accessibility techniques turn out to be solutions that are not yet ready for prime-time.

GitSheet
GitSheet

Git Cheat Sheet

Free for developers
Free for developers

無料で始められるサービスの上限とかがまとまってる

Event

UX MILK Fest 2019
UX MILK Fest 2019 登壇資料・ブログまとめ | UX MILK

UX MILK Fest 2019 資料

ginza.js 5
Deno

Node.js 作者の新しいもの nNpm に委譲したスモールなコアとは逆張りの、モノシリックなフレームワーク

meguro.css
style-in-react-native
詳細度調整擬似クラスの使い所を考えてみた - Speaker Deck
Chrome 78 Beta で試す CSS Properties and Values API

ts meetup 3
TypeScriptMeetup 3 メルペイの TypeScript 活用.pptx - Google Drive
安全性の極北から見る TypeScript - Speaker Deck
TypeScript Meetup3
https://www.tsconf.jp

型のコストパフォーマンス / どれくらい安全性が欲しいのか / 安全性に全振りした TypeScript の世界観、any と as -嘘 / DOM を取得するときくらいしか使わない / any は伝染して、そのスコープ全体が危うくなる、汚染範囲を狭くする / 変数で any 使わない / 関数のインターフェースで any 使わない

Design

Design Inspiration Resources
Design Inspiration Resources 2019 - Muzli - Design Inspiration

デザイナーやデヴェロッパーがチェックしておきたいリソースまとめ

Spacing design
Spacing, Grids and Layouts

余白の設計入門

Design Tips
🔥 Design Tips

awesome Design Tips

Overview galley
Overview

地球の美しい場所をまとめたギャラリー、美しい

spectrum
spectrum

adobe の デザインシステム spectrum

Award
ブランデッドコミュニケーション部門 A カテゴリー｜ 2019 年入賞作品｜ ACC TOKYO CREATIVITY AWARDS

デジタルテクノロジーを活用した表現における卓越したデザインと優れたユーザーエクスペリエンス、クリエイティビティとクラフトマンシップを表彰

web design drill
未経験でも 1 カ月で即戦力クラスの知識が身に付く『web デザインドリル』公開 | knowledge / baigie

基礎力をつけるための初学者向け資料

Inspiration

ANIME OBSOLETE
ANIME OBSOLETE - OFFICIAL WEBSITE

あがるエフェクト満載