mtmtkzm / til

today i learned.

til

today i learned.

til's Issues

2019/04/15

Nuxt

SSR時、JavaScript をオフにしても SPA部分が普通に（？）ある程度動く

2019/04/12

Nuxt

axios インスタンス

plugin 内で inject すると、Vueインスタンス、Store、コンテキストで共通利用できるようになる！（これが axios module?

2019/05/02

UAでスタイルの分割今はこれで良さげだった
https://qiita.com/mtmtkzm/items/7e6dcd4dc54285b749b3

デメリット

• レスポンシブの時同様、いらないスタイルまで出力してしまう

メリット

• media query での実装と大差なく脳を使える

2019/04/03

PHP

array_merge

オリジナル配列と、新配列の要素数、同じじゃないとダメなんだぜ！（return しないと null が入る）

名前空間

クロージャ関数内では JS みたいに外の変数にはアクセスできない！
use することで使えるようになるんやで。

融けるデザイン

オペレーションジェスチャとコマンドジェスチャの違いを 理解 してインタラクションを設計する必要があるよね。

下記はオペレーションジェスチャになるところ、コマンドジェスチャを利用してしまっている良くない例。

これは左になぞったあと、そのなぞったということが認識されてワンテンポ置いたあとに、ひとつ前の写真が表示されるというものであった。また、コマンドが認識されたあと、今見ている写真が左にアニメーションして動いていくトランジション効果をかけたものもあった。電子書籍も、ページをめくっている感じを演出として出したいのか、画面をなぞると次のページに切り替わるというものがあった。特に電子ペーパーの場合はアニメーションには強くないので、なぞりのジェスチャの後に画面がクロスフェードして次のページが現れるというものがあった。

AMP

amp-img の background-cover 的挙動は、object-fit を利用する。

2019/04/08

Laravel

• コントローラーはリソース（URL）に対してひとつ作成したい
• View で変数定義するな😂

axios / http

これからは、特に何かない限り .data はhttpの副産物として、中で処理してしまうようにする。とおもった。
ok:

const result = await axios
  .get(url, {})
  .then(response => response.data)

const data = result;

ng:

const result = await axios
  .get(url, {})
  .then(response => response)

const data = result.data;

2019/04/10

開発全般

全てのデータに名前をつけることから始めると良さそう。

1. マークアップ
2. BFFがモックを返す
3. レスポンスを View に吐き出す

だとやり直す部分が多い。最悪の場合マークアップをやり直さなくてはならんくなる。

何事にもキレない

HTTP Request Library

https://qiita.com/il-m-yamagishi/items/a823c1afbdf253e84a34

service worker によるサポートを受けるためには fetch API を利用する必要があったり

service worker との親和性が向上

これはどういうこと….？

2019/04/04

Service Worker

iosでは、

• インストールバナーが出せない
• manifest.json のアイコンを表示できない

Nuxt TypeScript

環境はすぐ完成した。

2019/04/26

Nuxt

plugin の context で、
nuxt.config にある共通 head を書き換えることができたので、動的な何かを差し込みたいけどアプリで共通なものは、処理をここに共通化できそう。

/client/plugins/insert-localized-fontfamily.js

// lang にあわせたフォント用CSSを読み込み
export default ({ app, store }) => {
  const lang = store.state.i18n.locale;

  app.head.link.push({
    rel: "stylesheet",
    href: "Noto Sans JP とか"
  });
};

2019/04/17

Nuxt

レイアウトにある TheHeader.vue とかのコンポーネントはどうやって asyncData すればいいんだ