これは、日々の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
最新のミニマルデザインのギャラリー。