見出し画像

from bookmark to favorite - 2019.01

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

JavaScript

DeviceMotion event
- Shiny, Simulating Reflections for Mobile Websites

スマホのジャイロを利用したリフフレクション、safari では使いにくくなったやつ。

Force map vector
- JavaScript とフォースマップでパーティクルアニメーションを作る

Force map ベクトルの力場の作り方

convert color space
- Converting Color Spaces in JavaScript | CSS-Tricks

JavaScript での色の変換いろいろ。

Tree Shaking
- Tree Shaking
- What is tree shaking and how does it work?

使ってないメソッドやプロパティを除外する tree shaking のはなし。副作用がある (除外されると困りそうな) ものは package.json で管理する。

JavaScript test
- JavaScript でも単体テストを導入しよう!ってかテストって何?

JavaScript のテスト指南書。

ES2019
- JavaScript の次の仕様 ES2019 でほぼ確実に追加される新機能まとめ - Qiita

Chrome ではほぼ使える ES2019 な機能たち。

TypeScript on ESLint
- TypeScript on ESLint の未来 - Qiita

TSLint から ESLint へ @typescript-eslint/parser になる

create gif animation
- LGTM gif アニメーションを作ろう - KAYAC engineers’ blog

webRTC x WebGL で ブラウザ上で撮影して エフェクトをかけた gif を生成するアプリを作る。

chroma.js
- chroma.js api docs!

色をいい感じに操作するための js ライブラリ。インタラクティブなコンテンツと相性がいいのでよく使ってる。

webpack Tree Shaking
- webpack の Tree Shaking を理解して不要なコードがバンドルされるのを防ぐ - Qiita
- webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 - Qiita

不要なスクリプトを除去するための webpack の仕組みを知る。

ES2018
- New ES2018 Features Every JavaScript Developer Should Know | CSS-Tricks

ES2018 の機能をあらためて。

Vue

Vue Fes Japan 2018
- GitHub - vuejs-jp/vuefes.jp: Vue Fes Japan 2018 の Web サイトのソースコードです。ナレッジ共有のために公開します

Vue Fes Japan 2018 のプロモサイトのレポジトリ。

VueCLI v3 -> WebComponents
- Vue CLI v3 を利用して、あらゆるサイトに埋め込める Web Component ベースの Qiita スライドビューアーを開発した話 - Qiita

VueCLI v3 が吐き出す WebComponents で作った実用的なコンポーネントの話。

Firebase x Nuxt app
- Firebase と Nuxt.js を使ってユーザ認証関係を簡単に作ってみる+1 ヶ月の自分に教えたいリンク集 - Qiita

firebase x Nuxt 認証つきアプリの作り方と詰みポイントの攻略法。

Vue x TypeScript
- Vuex による状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita

Vue x TypeScript の徹底考察 2018。v3 に期待を含めてるので、この辺の情報や tips は細かくアップデートしていきたい。

How Vue mixin
- 俺がやらかした Vue mixin のアンチパターンから学ぶ mixin の使い方と代替案

宣言部分は共通化しない、つまり mixin を使わない。data, props などの「値」を mixin で共通化しない。ライフサイクルメソッドを mixin で共通化しない。computed, methods などの「関数」の宣言部分を mixin で共通化しない。「関数」の共通化が必要な場合は、その内部処理を単純な関数として(mixin を使わず)共通化する。「View のイベントハンドリング」は近しい View を持つ ViewModel 同士で共通化可能。「View 用のデータ成形」は近しい View を持つ ViewModel 同士で共通化可能。「Model の監視」は同じ Model に依存する ViewModel 同士で共通化可能。 「ローカル State の管理」は共通化しないほうが良さそう。 -> Vanilla.js で Util、Helper、Service クラスなどを使って共通化。 -> どうしてもローカル State を共通化したければ component を ラップする state を slot で流し込むようの component を定義する (高階関数的な)

Nuxt.js v2.4.0
- Nuxt.js v2.4.0 is out! TypeScript, Smart prefetching and more… - DEV Community 👩‍💻👨‍💻

TypeScript サポート始まる。次のページのリソースを先読みする Smart prefetching の機能が素敵。

Vue app Performanse
- [JavaScript/Vue.js アプリのパフォーマンス改善 一休.com スマートフォンサイトを高速化するためにやったこと - ログミー Tech](https://logmi.jp/tech/articles/320604)

Vue アプリケーションのチューニングの仕方、コンポーネントを作りすぎるとバンドルサイズが増えたり、js のサイズ管理を頑張っていこう。

Vue 2.6
- Vue 2.6 released! – The Vue Point – Medium

“Macross” v-slot のシンタックスなど v3 に向かうためのアップデート。

Vue slot
- Vue.js の mixin を slot で代用する - Qiita

mixin を代用するような slot の書き方。

WebGL

Distortion Slider
- WebGL Distortion Slider

さいきんよく見かける Distortion effect slider の作り方。

WebGL Advent Calendar 2018
- WebGL Advent Calendar 2018 - Qiita

2018 の WebGL アドベ。作ってみた系の記事がおもしろくて勉強になる。

Shaders Book
- The Book of Shaders

オープンソースの Shader バイブル

wgld.org
- WebGL 開発支援サイト wgld.org

WebGL を1から始めるならこのサイトのお世話になる。

website history
- 10 Year Challenge: How Popular Websites Have Changed

web デザイン 10 年の変革の歴史

CSS

Select CSS
- Styling a Select Like It’s 2019 | Filament Group, Inc., Boston, MA

いまどき 2019 年の(IE10+)セレクトボックスのスタイリング。

CSS loader
- 簡単で便利なのが揃ってる!CSS で実装されたローディング・スピナーのアニメーションのまとめ | コリス

CSS 縛りの loader 集。

gradient border in css
- Gradient Borders in CSS | CSS-Tricks

CSS gradient border の作り方。

CSS drawing with WebComponents
- css-doodle
- css-doodle gallery - a Collection by yuanchuan on CodePen

CSS で ドローイングするための webComponents 。CodePen のギャラリーがかっこいい。

CSS keyframe editor
- Keyframes | Editor

CSS の @ketframe の GUI エディタ。transform とか text のプロパティを試せる。

CSS tips
- 30 Seconds of CSS

UI の実装によく使う、初歩的な CSS の tips 集。

CSS watch
- Pure CSS watch animation

CSS だけでできた腕時計。

CSS subgrid
- Why we need CSS subgrid - DEV Community 👩‍💻👨‍💻

CSS sub grid がいろいろ幸せにしてくれるはなし

away from Sass
- Stepping away from Sass

未来を想像して Sass を離れた CSS を書いてみるはなし。

Rendering Optimizations
- Browser Rendering Optimizations for Frontend Development ― Scotch.io

ブラウザのレンダリングパスを最適化するための知識、CSS が与える影響についてが多め。

CSS Triggers
- CSS Triggers
- Rendering Performance  |  Web Fundamentals  |  Google Developers

レンダリングパフォーマンスを最適化するための Layout / Paint / Composite パイプラインに与える CSS のプロパティ一覧。

SVG

SVG mask
- Interactive SVG mask w/full screen image

> マウスに追従するインタラクティブな svg mask のサンプル。

SVG polygon
- Low poly animals

SVG polygon を animation させて動物のモデルを作る。

SVG Filters
- SVG Filters 101 | Codrops

svg フィルタを導入するための覚書

SVG Blob element generater
- Blobmaker

GUI で Blob なオブジェクトを作るためのジェネレーター。

WordPress

WordPress REST API
- Wordpress REST API post orderby custom value – Tim Ross Web Development
- WordPress REST API order by meta_value – Tim Ross Web Development

Rest API を meta_value で並び替えて get したいとき。

Frontend

Clean Architecture x Frontend
- Clean Architecture in Web Frontend #mixleap - Speaker Deck

詳細>アダプター>方針というレイヤー構造で、詳細>アダプターは方針のプラグインとして機能する、方針(ビジネスロジック)は詳細に影響されない。アダプター(Redux や Vuex)は詳細を受け取り、UI と DB のデータを整形する。

UI animation deep dive
- Web フロントエンドでアニメーションを実装する時になにを考えるか - Qiita

UI アニメーションはユーザーの認知を助けるフィードバックを与える状態変化、React で実践していく考察。

sin cos tan
- 三角関数は何に使えるのか 〜 サイン・コサイン・タンジェントの活躍 〜 - Qiita

三角関数は暗記するように。

grid layouts for vue
- Vue.js にも対応の優れ物!高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid | コリス

Vue 製の grid layout system を実装する軽量プラグイン。

Top Pens 2018
- Top Pens of 2018 on CodePen

2018 年の codepen ランキング。

Public APIs
- Public APIs UI

mock 用とかに使いたい API まとめ

Git Explorer
- Git Explorer

git 逆引き的なツール

Email Signature Generator
- MySigMail - UI Email Signature Generator

HTML mail 署名のプレビューしながらジェネレートできる環境。

Chrome Dev Tools

- How to Use Chrome Dev Tools to Find Performance Bottlenecks ― Scotch.io

chrome dev tools や lighthouse を使ったパフォーマンスチューニング。

iOS Shortcuts and Netlify
- Blog Publishing Using iOS Shortcuts and Netlify | Gregory Schier

iPhone から web hook をうまく使って Netlify をビルドする方法。

数式画像生成
- Online LaTeX Equation Editor - create, integrate and download
- Qiita の数式チートシート - Qiita

数式の画像を生成したくて、いろいろ。

Image cdn

- imgix • Real-time image processing and image CDN
- API Reference | imgix Documentation
- Purging Images | imgix Documentation

画像 CDN、1000 枚ごとに 3 ドル、転送量 1GB ごとに 0.08 ドルがかかる。また、月の最低支払料金が 10 ドル、host- Amazon S3 / Google Cloud Storage / Web Folder / Web Proxy。オプティマイズやエフェクトかけたアセットを呼び出すことができる。

Sayonara Nikkei
- 日本経済新聞社を退職しました

emo 🎸⚡️

Shell tips
- シェルスクリプト入門者のためのチェックリスト

shell の細やかでツボを押さえた tips 集。

Design

design inspiration
- Gillde - Design Inspiration - Graphic - Design - Motion - Art - Inspirations - Graphicroozane
- UI/UX Inspiration Archives - Graphic - Design - Motion - Art - Inspirations - Graphicroozane

クオリティの高い様々な Design idea をキュレーションしてる。interaction design をよく見てる。

Motion graphic trend
- The 5 Major Motion Graphic Trends to Look Out For in 2019

2019 年のモーショングラフィックトレンドとサンプル5つ。

UX in Motion
- UX in Motion | Animation

UI アニメーションの種別まとめ。

Parallax Lacks
- What Parallax Lacks

パララックスの問題のいろいろ。よくないところはユーザーは制御が難しくパララックスなオブジェクトを見逃す、テキストの動きはめまいになる人もいる、パララックスなオブジェクトが ad と認識され意図的に無視される、もう見飽きていてそれほど印象的でない。効果的に使うなら、限定的な箇所に絞り、ユーザーにゆとりがありタスクのない場面で、1度表示されたオブジェクトはそのままにキープする。

Vector Mockups
- Vector Mockups Library

いろんな UI モックアップの詰め合わせ。

Beyond the interface
- Beyond the interface – Base Voices

ブランディングのパラドクス。デヴェロッパーはブランドを差別化したいが、ユーザーは同じように振る舞い、同じように見えることを望んでいる。UI を差別化する大きな要因として捉えずに、ユーザーに優しく使い易い標準化を目指す。

YouTube Redesign
- The Youtube Redesign That Got Me Hired – Muzli - Design Inspiration

Youtube リデザインの考察、デザインは継続的なプロセス

Website of the Year 2018

- Website of the Year 2018 - CSS Design Awards

✨✨✨✨✨✨✨✨✨✨

Blacks Who Design
- Blacks Who Design

デザイン業界で活躍するすべてのいけてる黒人デザイナーの紹介。

UI

Card Grid
- Isometric Card Grid

Card を Grid レイアウトで斜めに整列させるレイアウト。

CSS Toggle Buttons
- Pure CSS Toggle Buttons | ON-OFF Switches

CSS で作る Toggle Button のサンプル集。

CSS Grid
- Isometric eCommerce CSS Grid

CSS Grid を 使ったショーケースレイアウトのサンプル。

Event

次世代 Web カンファレンス
- nextwebconf - YouTube
- Performance - 次世代 Web カンファレンス #nwc_perf - YouTube
- Design - 次世代 Web カンファレンス #nwc_design - YouTube
- Frontend - 次世代 Web カンファレンス #nwc_front - YouTube

Processing Community Day Tokyo 2019
- GitHub - HarukaKajita/NoiseFlow: PCD Tokyo 2019 の LT のデモ。
- デジタルアートのプラットフォームを開発してる話 - Speaker Deck
- p5.js ではじめるデイリーコーディングのススメ | Processing Community Day Tokyo 2019

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

なにかの役にたてれば。🐈

🐈🐈🐈
1

\\ uto-usui //

👨🏻‍💻 Frontend Developer - VOUGE, GQ, WIRED - Condé Nast Japan/Nuxt, WebGL/Guitar, Photograph, Woodwork/吉祥寺 ⇄ 渋谷 🐈

from bookmark to favorite

日々のWeb制作で生まれたブックマーク集です。時事的に新しい記事もあれば、そうでないものもあります。引き出しやすいようにメモも付けておきます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。