これは、日々のWeb制作で生まれたブックマーク集です

04/09

FrontEnd

時事的に新しい記事もあれば、そうでないものもあります。引き出しやすいようにメモも付けておきます。

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

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