2020 FEconf Review
7750 ワード
空前の盛況
トラックA
A1. Webビューからダークモード継承を取得:一貫したユーザー体験を得る
CSS Variable
IEはサポートされていません
prefers color scheme:AOS 10、iOS 13以降のサポートでは、ユーザーがアプリケーションをダークモードでのみ使用したい場合、最終的に使用するのはちょっと気まずいかもしれません.
CSS Varialbe例
jsを使用してCSS変数にアクセス
CSS変数がサポートされていない場合、fallbockコード
ライトモードから暗いモードに切り替えると、白い画面のエラーが発生し、ユーザーの体験に不利です.そこで,最終的に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を実施したときに学んだこと
トラック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を動的にダウングレードし,キャッシュポリシーを紹介した.
A6. Statechorts:複雑なUI状態を制御する方法
Reference
この問題について(2020 FEconf Review), 我々は、より多くの情報をここで見つけました https://velog.io/@dyel0216/2020-FEconf-Reviewテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol