2020 FEConf

7740 ワード
Conference frontend FE テキストリンク
トラックA
A1. Webビューからダークモード継承を取得:一貫したユーザー体験を得る

  • CSS Variable

  • IEはサポートされていません

  • prefers color scheme:AOS 10、iOS 13以降のサポートでは、ユーザーがアプリケーションをダークモードでのみ使用したい場合、最終的に使用するのはちょっと気まずいかもしれません.

  • CSS Varialbe例
    :root {
--main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

  • jsを使用してCSS変数にアクセス
    .five {
  background-color: var(--main-bg-color);
}

// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");

// 어느 곳에서나 변수 얻기 
getComputedStyle(element).getPropertyValue("--my-var");

// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4);

  • CSS変数がサポートされていない場合、fallbockコード
    .adaptive-color-900 {
	color:$grey900;
  color:var(--adaptiveGrey900);
}

  • ライトモードから暗いモードに切り替えると、白い画面のエラーが発生し、ユーザーの体験に不利です.そこで,最終的にSSR時にCSSを動的にダウングレードし,キャッシュポリシーを紹介した.
    • A2. iframeを使用して、まったく異なるサービスを統合します。
  • XSS攻撃防御のための砂箱属性の設定
  • 属性値理解できない
  • ただし、allow-scriptとallow-ston-originを使用するとセキュリティが脆弱になる可能性があるので、srcの検証が必要です.
    • A4. Relay、それからDeclarativeを考え直す
  • GraphQLとRelay
  • Vue Relay
    • A5. フロントエンドでTDDが可能であることを示します。
    A6. Statechorts:複雑なUI状態を制御する方法
  • statecharts
  • XState
    • B1. React NativeでPinch Zoomを実施したときに学んだこと
    Mac OS 10.13 Mysqlインストールレコード
    2分でandroidをマスターブラウザでappを開く