from bookmark to favorite - 2019.12
これは、日々の Web 制作で生まれたブックマーク集です。時事的に新しい記事もあれば、そうでないものもあります。引き出しやすいようにメモも付けておきます。
CSS
CSS Advent Calendar 2019
CSS Advent Calendar 2019 - Qiita
CSS アドベントカレンダー。ぼくはアクセシビリティについて書きました。
2019 font-family
font-family について本気で考えてみた - Qiita
2019 の font-family の設定を考察。
rem
CSS の単位 rem の正しい使い方 - Qiita
rem の取り扱い、ユーザーの font size 設定に準じる方法。
CSS Layout
CSS Layout
CSS で作る定番レイアウトと UI パーツのリソース集。
CSS Icons
500+ CSS Icons, Customizable, Retina Ready & API
CSS でできたアイコン集。
shadow generator
brumm.af
美しいシャドウをわかりやすい GUI で作り出せるジェネレーター。
JavaScript
Jest
読みやすさを重視した Jest の書き方 - 彼女からは、おいちゃんと呼ばれています
読みやすい jest テストの書き方、beforeEach 再考 / テストの構造化 / 差分を際立たせる by STORES.jp
JavaScript Visualized
🚀⚙️ JavaScript Visualized: the JavaScript Engine - DEV Community 👩💻👨💻
JS がブラウザで何をしているかビジュアライズ詳解
ameba.jp
Success Story: ameba.jp - amp.dev
amp story 事例
Cropping Images
Cropping Images to a specific Aspect Ratio with JavaScript • PQINA
crop した画像の canvas を返す関数のスニペット
new JavaScript engine
2019 Javascript engine 俯瞰 - abcdefGets
Facebook 産の hermes、FFMPEG 作者の quickjs
Dark Mode Favicons
Dark Mode Favicons | CSS-Tricks
Favicons for Dark Mode の作り方
screenfull
screenfull - npm
Simple wrapper for cross-browser usage of Fullscreen API
new Stack for React
2020 年、 React 軸で学ぶべき技術 - mizchi’s blog
Next.js / Preact / Workbox / Firebase / Netlify / ReactNative
2019 - 2020
2019 年、2020 年の JavaScript - 別にしんどくないブログ
ES 2019 - 2020 のまとめ。
WebGL
Rendering Text with Three
Techniques for Rendering Text with WebGL | CSS-Tricks
Three でテキストをレンダリングする。
GLSL step - if
条件分岐のために step 関数を使う時の考え方をまとめてみた - Qiita
GLSL で if の代わりに step を使って条件分離する
GLSL basic
誰も置いていかないシェーダーはじめの一歩 - KAYAC engineers’ blog
シェーダーを始めるためにグラデーションを描く基礎知識
three.js with Nuxt.js
three.js with Nuxt.js - Qiita
Nuxt で three を使うために必要な実践的 tips
Advent Calendar
シェーダーアドベントカレンダー Advent Calendar 2019 - Qiita
Three.js Advent Calendar 2019 - Qiita
WebGL 関連のアドベカレンダー
Three.js x Blender
Three.js のための Blender 入門 - Qiita
Three.js x Blender の初歩的な解説
debug tools
2019 年の WebGL デバッグツール状況 - Qiita
Three.js Developer Tools / Spector.js / WebXR API Emulator /
Vue
vue-next
きたるべき vue-next のコアを理解する - Qiita
vue-composition-api など新しい API を深く理解していく
Nuxt x TypeScript x Composition API
Nuxt.js with TypeScript and Composition API - Qiita
Nuxt で TS と Composition API を使ってコンポーネントを書いていくサンプル。asyncData がないから watch でラップした async/await でそれっぽく。
Nuxt asyncData with composition API
How to handle Nuxt.js asyncData with new composition API // mmyoji’s blog
Composition API に Nuxt の asyncData がないから fetch で実装する。
CSS Architecture on Vue.js
CSS Architecture on Vue.js - Speaker Deck
external CSS x scoped css on PLAID
HTTP request for Nuxt.ts
HTTP リクエストを型安全にする手法と Nuxt TS での実装例 - Qiita
エンドポイントを文字列で指定するのでなく、メソッドで動かせるようにする。
read Nuxt
Nuxt.js ソースコードリーディング事始め - Qiita
Nuxt のコードリーディングのやり方
Vue CLI x Composition API
Vue.js レベルを上げよう！○× ゲームを作って TypeScript＆Vue3 の CompositionAPI と仲良くなる - Qiita
Vue CLI x TypeScript x Composition API を使ってミニマルなアプリを作って、ひととおり Composition API をさわる。
Vue Fes Japan 2019 special site
Vue Fes Japan 2019 サイトのソースコードを公開した
Vue Fes Japan 2019 のサイトのあれこれ。netlify x contentful というよくあるスタックで静的サイトを構築。
inject plugin
inject と Headless Vue インスタンスを活用したリアクティブな認証管理 - ElevenBack LLC. Engineering
Vue の inject で $xxx にとり回したい認証情報を格納、 defineGetter を利用してリアクティブに実装することでシンプルかつ Vuex store のように取り扱える。
Composition API test
CompositionAPI を使って composition を分離した状態でテストする - Qiita
Composition API で書いた Vue の data や methods を外部化してテストする。
https://note.com/taqno/n/nd19c6ec8efee
Frontend
Browser Default Styles
Browser Default Styles
ブラウザのデフォルトスタイルを要素で絞って検索確認できるツール。
Top Pens of 2019 on CodePen
Top Pens of 2019 on CodePen
毎年恒例の Top Pens on CodePen
firebase thinking
君はまだ平成のアーキテクチャを使ってるのか？僕は Firebase と令和の時代に行くぞ。 - Qiita
firebase を使った新時代のアーキテクチャ
Rethinking the Front-end behavior
Rethinking the Front-end - Level Up Coding
コンポーネントの分離を考える、関心/課題別にコードをコンポーネントにする。
JAMstack
JAMstack ってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 - エンジニア Hub ｜若手 Web エンジニアのキャリアを考える！
JAMstack とは、実例を交えて説明。
moduler scale
ハーモニック・モジュラー・スケールのための Sass ライブラリと Sketch プラグイン - シフトブレイン／スタンダードデザインユニット
文字サイズの比率と調和
音楽、数学、タイポグラフィ
FECF2019 音楽、数学、タイポグラフィ - YouTube
「文字サイズの比率と調和」「音楽、数学、タイポグラフィ」 を実践するための Sass と Sketch プラグイン。
WASM が Recommendation になったことにより、Web で動く新しい言語が増えた。
Sizzy
Sizzy
クロスデバイスデバッグツール
Amazon CodeGuru
［速報］「Amazon CodeGuru」発表。機械学習したコンピュータが自動でコードレビュー、問題あるコードや実行の遅い部分などを指摘。AWS re:Invent 2019 － Publickey
コード解析サービス、料金は結構高い。
performance update
How to 速度改善 ー Web パフォーマンスについて知っておきたいこと 7 選ー - Qiita
How to 速度改善 ー原因調査編ー - Qiita
How to 速度改善 ー実装&技術調査編 1 ー - Qiita
フロントエンド速度改善へのあれこれ
Web Performance Calendar
Web Performance Calendar » JavaScript component-level CPU costs
Web Performance についてのアドベカレンダー
レイアウトプリミティブ
レイアウトプリミティブ - シフトブレイン／スタンダードデザインユニット
Relearn CSS layout: Every Layout
CSS 設計において、どうレイアウトを組み立てるかを考えるときのレイアウトプリミティブについて。メディアクエリに依存したレイアウトをコンポーネントが持たないように。
🍛
カレー Advent Calendar 2019 - Qiita
🍛
JAMstack
世界の JAMstack とこれから
2020 の JAMstack の世界線を考察。
Design
Colors and Fonts
Colors and Fonts || A curated library of colors and fonts for digital designers and web developers.
デザイナー向けのリソース集。
Awesome Design UI Kits
Awesome-Design-Tools/Awesome-Design-UI-Kits.md at master · LisaDziuba/Awesome-Design-Tools · GitHub
各ツールに合わせた UI モックのまとめ。
Minimal Images
Minimal Images
unsplash から pick したミニマルな free images
Happy Hues
Happy Hues - Curated colors in context.
UI のカラーをプレビューしながら試せる。
Design System
UI デザイナーが知っておきたい海外の優れたデザインシステム 17 選 | knowledge / baigie
Adele – Design Systems and Pattern Libraries Repository
オススメのデザインシステムを解説。
OOUI for UX designer
UX デザイナーにとっての OOUI とは？｜ Atsushi Kadono ｜ note
理想の UX 視点でアプリのドメインの概念を考察、その概念から「オブジェクト」という形で抽出。タスクベースの開発にならないように注意する。
UX Design nnotes
UX デザインを学ぶデザイナーが絶対に読むべき note 厳選 20 本｜タクノリ・アダチ｜ note
note の UX 記事まとめ。実践的なものからポエムまで。
Free Vector Images
Free Vector Images for Commercial Use
ベクターのイラスト素材。
Inspiration
Creative gallery
NEORT | Popular Arts
creative coding gallery
Inspirational Websites 2019
Inspirational Websites Roundup 11 | Codrops
2019 最後のインスピレーション
2019: Projects of the Year
2019: Projects of the Year
Projects of the Year on web
DDD HOTEL
DDD HOTEL
シンプルでミニマルだけどインパクトある表現
VOGUE x GUCCI
とびきりのハッピーに出会う冬。あなただけの宝物を探して。｜ VOGUE JAPAN
往年のスキューモフィズムなコラージュと CSS アニメーションの応酬。
Motion plus design TOKYO
自分のスキルを磨くことに投資して、自分のすきなことだけをやる。クライアントに惹かれてはいけない、きみはアーティストだから。
Territory Studio
Homepage - Territory Studio
レディプレーヤーワン。悪者の UI はちょっとだけいいやつより進化したデザインでメカゴジラの UI、80/年代カルチャーゲームの研究とかやってた。
Ash thorp
ALT Creative, Inc.
AWAKEN AKIRA
FITC Tokyo 2015 Titles on Vimeo
マスタリー: 仕事と人生を成功に導く不思議な力 | ロバート グリーン, Robert Greene, 上野 元美 |本 | 通販 | Amazon
カエルを食べてしまえ! 新版 (知的生きかた文庫) | ブライアン・トレーシー, 門田 美鈴 |本 | 通販 | Amazon
-世界を変えた伝説の広告マンが語る-大胆不敵なクリエイティブ・アドバイス | ジョージ・ロイス |本 | 通販 | Amazon
攻殻機動隊や AKIRA など代表作。クリエイターとしての時間の使い方について。好きな本とかの紹介。人生の成功度は、どう時間を使ったかが明確に反映される。クリエイティブのすべては集中力で、自分で時間をコントロールする術を身につけるのが大切だと。
DIST.30
令和元年ベストの font-family はこれだ / Better font-family 2019 in Japanese - Speaker Deck
パフォーマンスを高める CSS - Google Slides
adobe MAX
UI x micro interaction
Adobe MAX Japan 2019 ver3.1.pdf - Google Drive
マイクロインタラクションで UI を気持ちいい使い心地にする
マイクロインタラクション
マイクロインタラクションを活かしたコンセプトデザインの作成 @Adobe MAX Japan 2019 ｜鈴木慎吾 / TSUMIKI INC.
マイクロインタラクションのコンセプト設計とプロトタイプ動画作成を XD でやる
Sneak Peek
AdobeMAX 2019 「Sneak Peek」から見る今後のデザインツール活用の展開｜ Noriaki Kawanishi / DMM ｜ note
Sneak Peek まとめ。いつも通り切り抜きとか合成のはなし。音声加工、光源調整。
Google dev fes 2019
Chrome Dev Summit 2019 Recap
Chrome Dev Summit 2019 Recap - Google Slides
Chrome Dev Summit 2019 - All Sessions - YouTube
11/ 28 の dev summit をキャッチアップしてみる
Roppongi.vue 4
Vue のリアクティブシステムを理解してパフォーマンス低下を防ごう (Roppongi.vue 4 ) - ninjinkun
Vue.js for 2020
TypeScript CompilerAPI x Vuex
TypeScript CompilerAPI による Vuex の参照型生成 - Speaker Deck
CompilerAPI で Vuex の参照型を生成するパッケージ
vue-next
vue-next から始める ソースコードリーディング - Speaker Deck
vue-next の読み方を指南。
Composition API
Vue 3.0 Composition API を利用した Store と Composables の違い - Speaker Deck
We Are JavaScripters! 3 周年
javascript - behind the scene
javascript - behind the scene - Speaker Deck
javascript のロードからパースまでの解説
React history
React の歴史 - Speaker Deck
Ginza.js 7
VS code … Monaco Editor
Monaco Editor をハックする - Qiita
Monaco Editor をホストするまで。
Vue.js アーキテクチャリング勉強会
Vue.js アーキテクチャリング勉強会で Vue のアーキテクチャ の LT をした話 -
BASE における Vue コンポーネント設計の現在 - Speaker Deck
Vue.js 設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜 - Speaker Deck