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

FrontEnd

Pen
- Banksy Shredder

バンクシーのインタラクションを実装してみたのやつ。

security
- 「私はロボットではありません」選ぶ必要なし　新「reCAPTCHA」Google が公開、ユーザーは何もしなくて OK - ITmedia NEWS

reCAPTCHA v3 についてのこと。

Accessibility
- Accessibility Cheatsheet — Practical approaches to Universal Design

アクセシビリティ関連のチートシート。

JavaScript

Intersection Observer
- Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io

Intersection Observer はページをスクロールに応じた DOM 要素がウィンドウに出現したかどうかを効率よく検知するための API 。scrool イベントでページの `scrollTop` やそれぞれの `getBoundingClientRect` を計算して実装していた技術を代替するもの。scrollama という Intersection Observer をラップしたライブラリを使うといいかんじ。

async / await cheat sheet
- GitHub - frontarm/async-javascript-cheatsheet: Cheatsheet for promises and async/await

async / await のチートシート。もう手に馴染んでるけど、だれかに教えたいときとかに使いたい。

console technic
- 10 Console tricks, to debug like a Pro. – ITNEXT

console.log に留まらない、さまざまな console テクニック。

JavaScript developer should know
- GitHub - leonardomso/33-js-concepts: 📜 33 concepts every JavaScript developer should know.

JavaScript developer が知っておくべきこと 33 を確認できるリンク集。英語学習がてら読むやつ。

CSS

button hover effect
- 100 Days CSS Challenge

CSS の button hover effect を 100 日投稿していく企画。それぞれ個性があって楽しい。

Border Radius Generator
- Fancy Border Radius Generator

Border Radius のジェネレーター。流体っぽいいいかんじのシェイプを生成する。レイヤードして回転させてブレンドさせると素敵になるよ。

Vue

破綻しない Vue.js アプリケーション開発
- 破綻しない Vue.js アプリケーション開発のために大切なこと / How to make a robust Vue.js application - Speaker Deck

依存しない捨てやすいコード作り、SFC は必要になるものだけであとは VanillasJS 、Vuex の責務の範囲を明確に、VueCLI や Nuxt で足回りを作っておく。

Nuxt.js v2.0.0
- Nuxt.js v2.0.0 がリリースされたので触ってみた【変更点まとめ】 - Studio Andy

weback 4 & Babel 7 / Ignore files / Store modules / watch option / Error Handler などが注目ポイント。Migration guide にRelease v2.0.0 · nuxt/nuxt.js · GitHub いろいろ書いてる。

Vue Examples
- Vue.js Examples

Vue 製の UI やアプリケーションサンプルのキュレーションサイト。

React

performance
- React 製の SPA のパフォーマンスチューニング実例 | リクルートテクノロジーズ　メンバーズブログ

Design

Adobe Sensei
- Adobe Sensei の画像解析が凄すぎた! 14000 人から拍手喝采を浴びた研究中の技術(Adobe MAX 2018) 

先生はすごいしエモい。

CC Update

- 新機能および機能の強化 | Photoshop CC の最新リリース
- 新機能と機能強化 | Illustrator CC の最新リリース

Minimal
- 50 Clean, Simple and Minimalist Website Designs - Hongkiat

最新のミニマルデザインのギャラリー。