JavaScript

with Shadow DOM
- Encapsulating Style and Structure with Shadow DOM | CSS-Tricks

shodow DOM を解説しつつ、ダイアログをつくる。

don’t need input number
- You probably don’t need input type=“number”

マウスホイールでスロットみたいになるフィールドは果たして UX に良いのだろーかうーん、いらないよね。

JavaScript technic
- 7 Tricks with Resting and Spreading JavaScript Objects

オブジェクトを … で色々なテクニック。

Responsible JavaScript
- Responsible JavaScript: Part I · An A List Apart Article

持続可能な Responsible な JavaScript design pattern を考える。

PWA app with Glide
- Glide
- 【2019 年 4 月版】Google SpreadSheet から音速で PWA が吐きだせるってホントに？！ - Qiita
- 簡単過ぎる！Google スプレッドシートから PWA アプリを開発できる「Glide」を使ってみた！ - paiza 開発日誌

Glide を使って PWA を爆速で作ってみる。

easy TypeScript
- TypeScript 再入門「がんばらない TypeScript」で、JavaScript を“柔らかい”静的型付き言語に（gfx 執筆） - エンジニア Hub ｜若手 Web エンジニアのキャリアを考える！

TypeScript を既存プロジェクトに入れる方法

WebHID API
- Upcoming WebHID API - access Bluetooth/USB HID devices in web applications

learn WebHID API

JavaScript data structure
- Rocking JS data structures!

ES6 のデータ構造の作り方についての考察

JS Benchmarks
- Perflink | JS Benchmarks

JavaScript の実行速度を比較する

RE:DOM
- RE:DOM – Tiny turboboosted JavaScript library for creating user interfaces

V-DOM を使わない UI を構築するためのライブラリ

javascript のギターコードチャート
- The Little Chord Chart

これめっちゃアクセシブルなコード譜とかに応用できそう＊

Vue

Vue test
- Vue のコンポーネント単体テストを始めてみよう - SCOUTER 開発者ブログ

Vue で UI テストをやっていこう。

vue design pattern

- Vue 使いなら知っておきたい Vue のパターン・小技集 - Qiita

JavaScript \$once(‘hook:beforeDestroy’) がいい

Prop and slots
- Vue.js における Render Prop と Scoped Slots について - Qiita

Render Prop = Scoped Slots

Nuxt x iftttt x netlify
- Nuxt.js + Netlify で RSS を取得して静的 JSON にする｜たか橋｜ note

rss を json に変換して出力する

Vue.js オススメライブラリ 21
- Vue.js おすすめライブラリ 21 選（おまけ+1） - Qiita

UI やいろいろな Vue ライブラリ。

Nuxt x AMP
- hn-amp.herokuapp.com

case : AMP Hacker News

Vue x D3
- Vue.js and D3: A Chart Waiting To Happen – Simon Wuyts – Medium

interactive chart with Vue

Nuxt x storybook
- An (almost) comprehensive guide on using Storybook with Nuxt.js

たっぷりわかる Nuxt x storybook。

Nuxt x TS
- TypeScript 再入門「がんばらない TypeScript」で、JavaScript を“柔らかい”静的型付き言語に
- Vue.js to TypeScript の書き方一覧 - Qiita
- TypeScript + Vue.js でのフロントエンド開発 - razokulover publog
- GitHub - nuxt-community/nuxt-property-decorator: Property decorators for Nuxt (base on vue-property-decorator)
- nuxt/nuxt.js: typescript-vuex - CodeSandbox
- Vuex による状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita

TypeScript で Nuxt を始める。いろんなやり方があるけど Vue.extend と Vuex 用に plugin を作って名前空間をインポートしていくような構造に落ち着いた。エラーはゆるふわで出るように。

React

react useEffect
- A Complete Guide to useEffect — Overreacted

useEffect の実践的な使い方のまとめ

CSS

dark \ light mode switch
- How to create a dark\light mode switch in CSS and Javascript | CodyHouse

CSS Custom Properties を使ったダークモード切替の丁寧なチュートリアル。

important to better understand and write CSS.
- Things nobody ever taught me about CSS. – Charlie Gerard – Medium

パフォーマンスのところあたりとか無意識でやってるけど、見直しておくと安心する。

flexulator
- Flexulator

よくある flex-generator だけど、使い心地 ○

CSS Sizing specification - aspect-ratio
- Designing An Aspect Ratio Unit For CSS — Smashing Magazine

要素の大きさをアスペクト比で指定する未来のプロパティ

cssdb
- cssdb

CSS の新機能を集めたサイト

Generative art with CSS
- Generative art with CSS

CSS で Generative art を頑張るための tips 集、図形の描き方が色々提案されてるのがおもしろい。

CSS Grid fllex
- Digging Into The Display Property: The Two Values Of Display — Smashing Magazine)

CSS displey grid / flex に付いての洞察

custom radio
- How to create a custom radio switch in CSS | CodyHouse

いまどきの CSS でカスタムする radio button

CSS env()
- env() - CSS: Cascading Style Sheets | MDN
- Why you should use CSS env() – LogRocket

css でグローバルな環境変数を定義する env() と PostCSS で今すぐ導入する tips

css battle
- CSSBattle

できるだけ短い CSS で実装する最強を目指す css battle :)

minimal collection of CSS styles
- GitHub - kognise/water.css: A just-add-css collection of styles to make simple websites just a little nicer

ページに必要なちょっとした CSS 集。

Frontend

Designing for accessibility by using Apple VoiceOver
- Designing for accessibility by using Apple VoiceOver

VoiceOver 機能を使って音声関連のアクセシビリティを開発する。

accessible color scheme
- How to design an accessible color scheme – Envoy Design – Medium

アクセシビリティを考慮したカラーやコントラストの tips。

Accessibility Insights
- Accessibility Insights

ページをアクセシビリティチェックするためのツール。chrome 拡張から試せる。

Vugu
- Vugu: A modern UI library for Go+WebAssembly
- Go で Vue っぽく Web アプリが作れる Vugu 事始め - Qiita

Go + WebAssembly で Vue っぽく SFC を書ける新時代のフロントエンドライブラリ。

HTTP/3 QPACK
- HTTP/3 のヘッダ圧縮仕様 QPACK について - ASnoKaze blog

HTTP/3 vs HTTP/2

Automatically-Generated ID
- Enforcing Accessibility Best Practices with Automatically-Generated IDs

自動生成した ID でコンポーネントごとにアクセシブルなラベルを発行する tips

Chromium Edge
- Microsoft、「Chromium」ベースの新しい「Microsoft Edge」をプレビュー公開 - 窓の杜

welcome Chromium Edge :)

Understanding Between W3C and WHATWG
- W3C で現在公開されている HTML と DOM 仕様は将来廃止されます - 水底の血
- DRAFT Memorandum of Understanding Between W3C and WHATWG

W3C じゃなく [WHATWG](http://d.hatena.ne.jp/keyword/WHATWG) を読もう。

VS Code Git
- VSCode での Git の基本操作まとめ - Qiita

VSCode ときどきしか使わないからリファレンスとして

CSS Design
- Daily CSS Design

365 days project クオリティがすごい。CSS というか WebGL の作品がおおいかも。

GitHub Style Guide
- GitHub Style Guide · Primer

すごく美しくまとまってる

Illustrated.dev
- Illustrated.dev

フロントエンドの概念をイラストで説明するプロジェクト。イラストが好み、英語学習に。

Front-end Developer Handbook 2019
- Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!

Front-end Developer Handbook の最新版、Front-end の 2018-2019 の流れは必ずみておく。ツールとかまとまってるのも参考に。

line developer podcast
- UIT INSIDE - LINE UIT 室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

line 社 developer チームの podcast

Performance

Who has the fastest website in F1?
- Who has the fastest website in F1? - JakeArchibald.com]

パフォーマンス改善でスポーツする。

WebGL

Three.js をデバッグするときの tips いろいろ
- The Big List of three.js Tips and Tricks!

Three.js がうまく動かないときとか、FPS 改善など、デバッグの tips いろいろ

dispose three objects
- three.js / documentation

three 関連オブジェクトの削除方法

three.bas
- GitHub - zadvorsky/three.bas: THREE.JS Buffer Animation System

THREE.JS Buffer Animation

Three NodeMaterial
- Three.js NodeMaterial introduction

three で node material のオブジェクトを実装するためのtips。

Noise Art
- Art of Noise - a Collection by Tibix on CodePen

色々なノイズ表現

perticle
- CodePen - Particles Field

FPS の滑らかなパーティクルアクション

ericdrowell
- GitHub - ericdrowell/ElGrapho

webGL のグラフ描画ツール

WebGL image viewer
- Sticky Image Effect | Codrops

WebGL の sticky image visual

sheader
- GLSL Shadertoy のシェーダ芸人になるための Tips 集 - Qiita

Shadertoy での tips いろいろ

WebGL playground
- Grass

草の揺れ動くシェーダ。

SVG

SVG Music Animation
- CodePen - Bach SVG Music Animation

svg と audio の sync animation。すごい。

stortion effect with svg
- Image Distortion Effects with SVG Filters | Codrops

Design

Design file management
- How To Organize Files In A Design Agency - Clay

ファイル管理のスタートとしてデザインファイルの命名を考える。

Apple Card
- The Design of Apple’s Credit Card

Apple が発表したクレカの解剖。

はじめての UI デザイン
- はじめての UI デザイン pdf

guild UI design

Helvetica
- Helvetica® Now

新しい Helvetica、かなりモダンな印象。

free icon set +
- Remix Icon - Open source icon library

cdn や package からも使える豊富な SVG ICON 集

photoshop map
- プラグイン必要なし。フォトショップ CC2015 以降だとノーマルマップを簡単に作る方法がありました。 | 3DCG 最新情報サイト MODELING HAPPY

photoshop で map を作る方法

Inspirational Websites
- Inspirational Websites Roundup #3 | Codrops

UI

fullscreen-slider
- GitHub - ykob/fullscreen-slider

fullscreen でスクロールジャックして閲覧する UI。

Event

v-tokyo Meetup #9
- STUDIO の解説 @Vue.js v-tokyo Meetup #9
- jest-matcher-vue-test-utils - Speaker Deck
- Vuex ORM –フロントエンドの ORM と、データのノーマライズ– | Vue.js v-tokyo Meetup #9 - Speaker Deck

Amp Conf
- AMP Conf 2019 - 第１日目 ライブ配信 (Japanese) - YouTube
- Best practices for creating an AMP story - amp.dev
- Introducing AMP Stories - YouTube
- Telling the stories of the segregated South: A folklorist’s lifelong promise - The Washington Post
- tappable
- AMP for Gmail  |  AMP for Email  |  Google Developers
- AMP for Email - Interactive and Dynamic Email Experiences at OYO
- 高速表示可能な Google の AMP ページを提供者の本物の URL で表示できる仕組み | TechCrunch Japan
- SXG（Signed HTTP Exchanges）始めました - Yahoo! JAPAN Tech Blog
- AMP Playground

新しい時代の AMP はとても強い印象。 AMP HTML から派生して違うサービスで活躍しそう。