# from bookmark to favorite - 2019.07
## for note
### Vue
**vue-youtube**
[GitHub - anteriovieira/vue-youtube: A simple component for a powerful API. vue-youtube provides a simple layer for you to use your imagination while over the YouTube IFrame Player API.](https://github.com/anteriovieira/vue-youtube)
[YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google Developers](https://developers.google.com/youtube/iframe_api_reference)
[Nuxt で YouTube プレイヤーを埋め込む - Qiita](https://qiita.com/howdy39/items/bede05cb1ff9f7ab2783)
[YouTube Embedded Players and Player Parameters  |  YouTube IFrame Player API  |  Google Developers](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)
> vue x youtube x Nuxt
**Nuxt env**
[Nuxt.js + TypeScript のアプリケーションで環境変数を安全に管理する - Qiita](https://qiita.com/potato4d/items/5e267b828cfaba2ac960)
> Nuxt で環境変数をうまく使いこなす
**vue-class-component vs. Vue.extend**
[Writing Single File Components (Vue Files) in Typescript: vue-class-component vs. Vue.extend](https://frontendsociety.com/writing-single-file-components-vue-files-in-typescript-vue-class-component-vs-vue-extend-c5c1d8e47b7)
> デコレータか Vue.extend どちらを使うのか話。どちらも結果は変わらないけど、自分の好みは、angular ぽいのは本来の Vue からかけ離れてるので、Vue.extend がいいなと。
**Vue Component Design**
[Advanced Vue Component Design](https://adamwathan.me/advanced-vue-component-design/)
> Vue component の作り方を動画で学ぶ
### CSS
**a11y-css-reset**
[GitHub - mike-engel/a11y-css-reset: A small set of global rules to make things accessible and reset default styling](https://github.com/mike-engel/a11y-css-reset)
> アクセシビリティを意識した Reset CSS
**Text Animation**
[Text Animation Design Inspiration - HTML & CSS Snippets Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀](https://codemyui.com/tag/text-animation)
[22 CSS Text Animations](https://freefrontend.com/css-text-animations/)
> text 関連のアニメーションのまとめ
**ie11CustomProperties**
[GitHub - nuxodin/ie11CustomProperties: Custom Properties polyfill for IE11](https://github.com/nuxodin/ie11CustomProperties)
> IE11 用の Custom Properties ポリフィル
**Staggered Animation**
[Different Approaches for Creating a Staggered Animation | CSS-Tricks](https://css-tricks.com/different-approaches-for-creating-a-staggered-animation/)
> CSS で要素をずらして順にアニメーションを実行するいろいろな手法。sass loop / custom prop / data attr
**CSS Animation Worklet API**
[CSS Animation Worklet API](https://www.w3.org/TR/2019/WD-css-animation-worklet-1-20190625/)
> メインスレッドに影響を与えないアニメーションを実行できる CSS Animation Worklet API がドラフト
**@extend vs mixin**
[@extend を使うべき時、@mixin を使うべき時 | POSTD](https://postd.cc/when-to-use-extend-when-to-use-a-mixin/)
[@extend を使いこなすために | 株式会社 エヴォワークス -EVOWORX-](https://www.evoworx.co.jp/blog/sass-extend/)
> @extend は除去して mixin を使う理由
**Cascade Custom Properties**
[CSS Custom Properties In The Cascade — Smashing Magazine](https://www.smashingmagazine.com/2019/07/css-custom-properties-cascade/)
> CSS Custom Properties をカスケーディングしてクリエイティブな表現に取り込んでみるテクニック。挙動について丁寧に説明してる
**CSS custom prop x CSS grid**
[Bringing new CSS techniques to production](https://sidigital.co/blog/bringing-new-css-techniques-to-production)
[Web Design Experiments by <NAME>](https://labs.jensimmons.com/)
> CSS grid と カスタムプロパティで広がるレイアウトの世界
**Css animation search**
[Animista](http://animista.net/)
> CSS animation をいろいろ探ってみる。いろんなバリエーションが揃っていて楽しい
**Whirl**
[Whirl: CSS loading animations with minimal effort!](https://whirl.netlify.com/)
> loading animation をまとめたライブラリ。シンプルだけどいろんなアイデアのものが詰まっていて参考になる
**Woah.css**
[Woah.css](http://www.joerezendes.com/projects/Woah.css/)
> ユニークな CSS トゥイーンのサンプル集。かなり複雑な動きを CSS で表現してる
**cssanimation.io**
[CSS Animation Library for Developers and Ninjas - cssanimation.io](http://cssanimation.io/)
> CSS と twennMax でのアニメーションが並記されてるライブラリ
**Effeckt.css**
[Effeckt.css](https://h5bp.org/Effeckt.css/)
> ユーザー操作のフィードバックとして実装したい CSS animation ライブラリ
**Dynamic.css**
[Dynamic.css | Ustym Ukhman](http://192.168.127.12/experiments/DynamicCss/)
> ユニークなマイクロインタラクションを集めた CSS animation ライブラリ
vhs
[vhs](http://jxnblk.com/vhs/)
> シンプルで明快な CSS animation ライブラリ。UI の状態変化に
### JavaScript
**Better JavaScript**
[Practical Ways to Write Better JavaScript - DEV Community 👩‍💻👨‍💻](https://dev.to/taillogs/practical-ways-to-write-better-javascript-26d4)
> よりよい JavaScript を書こう
**Smooth Scrolling Effect**
[GitHub - codrops/SmoothScrollingImageEffects: A small set of ideas on animating images and other elements while smooth scrolling a page.](https://github.com/codrops/SmoothScrollingImageEffects/)
> スムーススクロールエフェクトのサンプル
**Locomotive Scroll**
[Locomotive Scroll | Detection of elements in viewport & smooth scrolling with parallax effects.](https://locomotivemtl.github.io/locomotive-scroll/)
> スムーススクロールエフェクトのライブラリ
**AMP**
[Google Developers Japan: AMP の誤解を払拭する](https://developers-jp.googleblog.com/2019/07/amp.html)
> これからの AMP について
**npm**
[JavaScript Package Manager 2019 - Speaker Deck](https://speakerdeck.com/yosuke_furukawa/javascript-package-manager-2019)
> これからの NPM
**Bounce.js**
[Bounce.js](http://bouncejs.com)
> GUI で CSS トゥイーンアニメーションを実装できるツール。プリセットも用意されていて、それをベースにカスタマイズすることもできる。UI が使いやすい
**PWA**
[What’s next for PWAs? - DEV Community 👩‍💻👨‍💻](https://dev.to/stefandorresteijn/what-s-next-for-pwas-942)
> PWA にまつわる次のステージの話
**brightcove を使うなら**
[react-player-loader/index.js at master · brightcove/react-player-loader · GitHub](https://github.com/brightcove/react-player-loader/blob/master/src/index.js)
[Brightcove Player, React and Typescript · GitHub](https://gist.github.com/hamishrouse/ee1669b151d7d8afdf5111debb23f27a)
[vue-video-player/player.vue at master · surmon-china/vue-video-player · GitHub](https://github.com/surmon-china/vue-video-player/blob/master/src/player.vue)
[GitHub - brightcove/player-loader: An asynchronous script loader and embed generator for the Brightcove Player.](https://github.com/brightcove/player-loader#why-do-i-need-this-library)
**pseudo-buttons**
[Converting divs into accessible pseudo-buttons – Ben Frain](https://benfrain.com/converting-divs-into-accessible-pseudo-buttons/)
> div 製のボタンを accessible にしてみる
### WebGL
**Free Frontend**
[Free Frontend](https://freefrontend.com/)
> マイクロインタラクションやフロントエンドのアイデアに
**Basis Textures**
[Using Basis Textures in Three.js - Samsung Internet Developers - Medium](https://t.co/3fFzgXRmRF)
> 最新の Three.js で使える Basis Universal : decoded on GPU
**36 Days of Type**
[36 Days of Type | Reflektor Digital](https://36days.reflektor.digital/)
> 美しいミニマルな canvas デモンストレーション
**流体表現**
[Sample](http://samsy.ninja/fluiddrive/index.html?debug=true)
[AdvancedTeam](https://advanced.team/)
[The O By NARS](https://www.obynars.com/)
> 流体表現気持ちいいです、ぬるぬる
**Generative Art**
[Generative Machines with Matt DesLauriers - YouTube](https://www.youtube.com/watch?v=8Uo6zFwSO78)
> Generative Art への deep dive
**Domenicobrz**
[Domenicobrz · GitHub](https://github.com/Domenicobrz)
[WebGL Portfolio](https://domenicobrz.github.io/webgl/)
> 美しい WebGL の習作
### Frontend
**HTML can do**
[HTML can do that? - DEV Community 👩‍💻👨‍💻](https://dev.to/ananyaneogi/html-can-do-that-c0n)
> HTML only でできることの探求。
**Program**
[Program](https://sarthology.github.io/proGramCLI/)
> instagram clone
**Data visualization**
[Data visualization - Material Design](https://material.io/design/communication/data-visualization.html#)
> Data visualization について Material Design からの回答。
**Learning Synths**
[Learning Synths](https://learningsynths.ableton.com/)
> ウェブで動くシンセサイザー
**Visual Regression test**
[Web アプリに Visual Regression テストを導入 - Qiita](https://qiita.com/junkisai/items/016c567a9fbade08d65b)
> 声のブログに Visual Regression test を導入するはなし
**SVG with Nested SVGs**
[Mimic Relative Positioning Inside an SVG with Nested SVGs — Sara Soueidan – Freelance-Front-End UI/UX Developer](https://www.sarasoueidan.com/blog/mimic-relative-positioning-in-svg/)
> SVG を入れ子にした時の話
**dark mode**
[iOS 13 からのダークモード対応のコツ - Qiita](https://qiita.com/gonsee/items/c04b73787730c0e831df)
> dark mode 対応
**Slack speeds up**
[Slack speeds up its web and desktop client – TechCrunch](https://techcrunch.com/2019/07/22/slack-speeds-up-its-web-and-desktop-client/)
> React で作り直された Desktop Slack は速くなった
**Hand Writing Effect**
[Hand Writing Effect through CSS3 and Adobe Illustrator](https://medium.com/@KanishkSrivastava/hand-writing-effect-through-ccs3-and-abobe-illustrator-9cc45b1f80e7)
> 手書きタイポエフェクトの作りかた
**frontend まとめ**
[すべての新米フロントエンドエンジニアに読んでほしい 50 の資料 - Qiita](https://qiita.com/suzu-4/items/ea5d802cb0ad16682ae2)
> frontend 資料まとめ
**Feature Policy**
[Feature Policy および Feature unsized-media の導入ガイド - 銀色うつ時間](https://sisidovski.hatenablog.com/entry/2019/06/05/185936)
> ブラウザの機能を制限したり拡張する Feature Policy について
**lighthouse v5.2.0**
[Release v5.2.0 · GoogleChrome/lighthouse · GitHub](https://github.com/GoogleChrome/lighthouse/releases/tag/v5.2.0)
> lighthouse de third-party code の検出と検証が可能になった。Chrome 拡張機能ですぐに利用できる。Audits では Chrome 77 から使える予定。
**Pagespeed / Search Engine Ranking**
[How Google Pagespeed works: Improve Your Score and Search Engine Ranking](https://calibreapp.com/blog/how-pagespeed-works/)
[Lighthouse v3 Score Weighting MAKE YOUR OWN COPY - Google Sheets](https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0)
> 7 月から速度は SEO に影響し、遅ければ広告の費用が上がる。競合より早い必要性。 [PageSpeed 5.0](https://developers.google.com/speed/docs/insights/release_notes) は Lighthouse を継承しいろいろ進化した。Time to Interactive (TTI) / Speed Index / First Contentful Paint / First CPU Idle / First Meaningful Paint / Estimated Input Latency の順に重みがある。高い PageSpeed スコアを受け取るには、迅速な TTI が必要。ページに配信された JavaScript の量とメインスレッドでの JavaScript タスクの実行時間に影響される。js の整理や分割が有効。継続的なモバイル環境でのモニタリングを行う。
**Chrome 76**
[「Chrome 76」の安定版公開　 Flash デフォルトブロックや PWA のインストールボタン - ITmedia NEWS](https://www.itmedia.co.jp/news/articles/1907/31/news054.html)
> reject flash / don't audit secret mode / assist PWA / backdrop-filter:blur(10px); / Promise.allSettled / prefers-color-scheme /
**game x math**
[ゲーム制作に使う数学を学習しよう | Unity Learning Materials](https://learning.unity3d.jp/series/yasuhara_math/)
> ゲームで使う数学の連載 unity 版
**Accessible App**
[Welcome to Acccessible App | Accessible App](https://accessible-app.com/#/)
> Accessible な UI を作るためのサンプル集。Vue を使って実装されているものが確認できる
**Change slack webhook**
[slack の Incoming webhook が新しくなっていたのでまとめてみた - Qiita](https://qiita.com/kshibata101/items/0e13c420080a993c5d16)
> slack の Incoming webhook が変更されたのうごかなかったらここをチェック
**mercari**
[3 ヶ月で 20 万行を消すためにやったこと - Speaker Deck](https://speakerdeck.com/naopr/3keyue-de20mo-xing-woxiao-sutameniyatutakoto)
> 頑張り
**Git tips**
[【永久保存版】Git のあらゆるトラブルが解決する神ノウハウ集を翻訳した - LABOT 機械学習ブログ](https://blog.labot.jp/entry/2019/07/01/183204)
> 困った時の逆引き git コマンド
**Reduced Motion Picture**
[Reduced Motion Picture Technique, Take Two | CSS-Tricks](https://css-tricks.com/reduced-motion-picture-technique-take-two/)
> ブラウザでユーザーが Reduce Motion を設定しているときの挙動に対応する
**Inclusive Design**
[Kat Holmes: Rethink What Inclusive Design Means - Adobe 99U](https://99u.adobe.com/videos/63712/kat-holmes-google-rethink-what-inclusive-design-means)
> Inclusive Design を考え直そう
### design
**User Inyerface**
[User Inyerface - A worst-practice UI experiment](https://userinyerface.com)
> UI のアンチパターンゲーム
**Vertical Rhythm in Sketch**
[Vertical Rhythm in Sketch | Better Web Type](https://betterwebtype.com/articles/2019/07/02/designing-with-a-baseline-grid-and-vertical-rhythm-in-sketch/)
[Pajamas Design System](https://design.gitlab.com/layout/grid#baseline-grid)
[Better Web Type | Web typography for web designers and web developers.](https://betterwebtype.com/)
> sketch のベースライングリッドでバーティカルリズムを実装する。View > Canvas > Layout Settings で設定する。フォント -> 行の高さ -> 行の高さ / n が基準のグリッド値で gitlab では 4px。
**Modularscale**
[Modularscale](https://www.modularscale.com/)
> フォントのサイズをスケールさせてくれるツール。比率と基準サイズを変更できる
### Event
**V-meetup #10**
[処理の共通化とコンポーネントの分割/分類/粒度について](https://slides.com/nakajmg/okimochi-component)
[Alternative Atomic Design をさがして｜ Ryo Yoshitake | THE GUILD ｜ note](https://note.mu/ryopan/n/n5663632cc48e)
[20190725-vuejs-application-testing-with-why](https://yinm.github.io/slides/20190725-vuejs-application-testing-with-why/#slide=1)
**chrome tech Talk Night 14 - google**
amp
[Fully AMP pros and cons - Speaker Deck](https://speakerdeck.com/aggre/fully-amp-pros-and-cons)
[Examples - amp.dev](https://amp.dev/ja/documentation/examples/?format=websites)
[amp-script の実用性について考える - mizchi’s blog](https://mizchi.hatenablog.com/entry/2019/04/19/124652)
[BMW.com | The international BMW Website](https://www.bmw.com/en/index.html)
Feature Policy
[Feature Policy および Feature unsized-media の導入ガイド - 銀色うつ時間](https://sisidovski.hatenablog.com/entry/2019/06/05/185936)
**meguro.ts - drecom**
[TypeScript 型定義ファイルのコツと生成ツール dtsmake - Qiita](https://qiita.com/ConquestArrow/items/450f961c3d54bc932cf3)
[Suggestion: “safe navigation operator”, i.e. x?.y · Issue #16 · microsoft/TypeScript · GitHub](https://github.com/microsoft/TypeScript/issues/16#issuecomment-515160784)
[これから来そうな JavaScript 新機能 3 選 - Qiita](https://qiita.com/rana_kualu/items/9d9cf20ab5019143fdcb)
[TypeScript 型定義ファイルのコツと生成ツール dtsmake - Qiita](https://qiita.com/ConquestArrow/items/450f961c3d54bc932cf3)
> ecma が Stage 0 ~ 4 - 新しいバージョンの release 6 月　、Stage 3 になると TypeScript 議論対象に。型を配りましょう。
**ginza.js - plade**
[TS の subtype と contravariance](https://slides.yamatatsu193.net/ts-subtype/index.html)
> Type AB = A & B / AB is subType
[Prettier のしくみ - Speaker Deck](https://speakerdeck.com/sosukesuzuki/prettier-falsesikumi)
> string -> AST(parser) -> DOC -> string
[好きなマンガ読める率 100％にするため、AWS Amplify で Vue アプリをデプロイしてみた - Speaker Deck](https://speakerdeck.com/dublook/hao-kinamangadu-merulu-100-nisurutameni-aws-amplifydevueapuriwodepuroisitemita)
AWS のサービスいろいろ結合してくれてる
認証とかパッと導入できる
webfont
[Dynamically Loading Fonts with Javascript](https://usefulangle.com/post/74/javascript-dynamic-font-loading)
image regression test
> dynamic subset - adobe fontplus - キャッシュ効かない - JS / unicode subset - google - splice - CSS / font face api を使おう
**roppongi.js - dmm**
[Roppongi.vue #2 - YouTube](https://youtu.be/uKAyATS6f90?t=579)