🙋🏽 😎 🐋 フロントエンドノート＃1 🖕🏿 👨🏽‍🎨 🕝

この記事では、いくつかの小さなフロントエンドのメモがあります。トピックが数文で完全に明らかにされているために短い場合もあれば、著者がそれらをより完全に明らかにするための十分な経験と知識を持っていないために短い場合もあります。あなたがそれを好きなら、私はリンクと研究で、ますます完全に書きます。

記事を書くというアイデアは、常に彼の知識、アイデア、問題を私と寛大に共有している友人、チームリーダー、フロントエンド（Lyokha、こんにちは！）との通信を読み直しているときに生まれました。

書かれていることはすべて、少数の人々の個人的な意見であり、真実であるふりをすることはほとんどありません。はじめましょう。

トランジションを使用しないようにしてください：すべて

多くの人がこれを知っていますが、最近、transitionプロパティでall値を使用するときに非常に注意する必要がある別の理由に遭遇しました。

遷移プロパティを持つコンテナがあると想像してみましょう。

.content{
  color: red;
  transition: 1s;
}

ホバーすると、色が変わります。

.content:hover {
  color: blue;
}

このコンテナ（たとえば、fillプロパティがcurrentColorと等しいsvg）でラップすると、ホバーするとイメージライトが変化します。しかし、すべてのsvgのどこかにそのようなプロパティを指定した場合はどうなるでしょうか？

svg {
  transition: 1s;
  fill: currentColor;
}

ホバーすると、 塗りつぶしは1秒ではなく、約2秒変更されます。これは、最初にトランジションが適用されて色が変更されるためです。私が理解しているように、外側の色が変更されるたびに、内側の変更がトリガーされます。しかし、誰かがより正確な説明を持っているなら、私はそれを読んでうれしいです。

解決策：遷移を明示的に指定します： svgを塗りつぶします（色を指定した場合、状況は変わらないため、上記の出力になります）。

svg {
  transition: fill 1.5s;
  fill: currentColor;
}

ブロックの比率を維持する

経験豊富なフロントエンド開発者なら誰でも、ブロックの比率を維持できる古代のハックについて知っているといつも思っていましたが、すべてではないことがわかりました。 パディング

プロパティは、パーセンテージで指定されている場合、正確に幅に基づいているため、次のトリックを実行できます。

.image-container {
  height: 0;
  position: relative;
  /*       */
  padding-top: calc(100% * 9 / 16 );
}

これで、このコンテナに画像を入れることができます。その高さは、コンテナの幅によって計算されます。

.img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

アスペクト比

少し前に、アスペクト比プロパティが追加されました。これにより、上から見えるすべてのものを1行で作成できます。

.image {
  aspect-ratio: 16 / 9;
}

私の意見では、このプロパティの主な違いと利便性は次のとおりです。

コンテナは必要ありません
幅または高さが指定されている場合、2番目の値はアスペクト比の値に基づいて計算されます
幅と高さが指定されている場合、プロパティは無視されます

アスペクト比のサポートはまだ95％とは程遠いので、注意して使用してください

ページネーションを後回しにしないでください

もちろん奇妙に聞こえますが、いくつかの製品をゼロから前面に出した人として、リストのページ付け、セレクター、テーブルなどのオプションに「スコア」を付けたいという誘惑は常にあると言えます。ユーザーがデータを生成し始めるとすぐにページが遅くなり始め、もちろんブレーキの原因の検索はそれほど難しくないので、私はこれをバックバーナーに決して置かないことに決めましたが、検索に関しては、状況は早急な解決策を必要とします。これは神経質で、たわごとのコードであり、開発部門との信頼関係の喪失です。

css変数を使用してコンポーネントの外観を制御する

cssの変数はすでに多くの人に愛され、尊重されていますが、インタビューの経験から、変数を使用する人は少なく、継承の真の力を知っている人はさらに少なくなっています。そのほとんどは、彼らが話しているドキュメントの一部に残っていました ：root（そしてこれは単なる疑似クラスです-ツリーのルートのエイリアスであり、ほとんどの場合htmlのエイリアスです）。

したがって、スコープスタイル（この例ではVue.jsを使用）のボタンコンポーネントがあり、次のスタイルがあると想像してください。

.button {
  color: var(--text-color, #000);
  background-color: var(--bg-color, #444)
}

そして、親コンポーネントで.darkクラスを簡単に定義できます。

.dark {
    --text-color: #fff;
    --bg-color: #333
}

そして、このクラスをボタンコンポーネントに渡します。

<my-button class="dark"/>

そして今では、強力な変数継承メカニズムを使用して、親のCSSスタイルをオーバーライドしないこのような単純なスタイルコントロールを利用できます。

面白くて耐え難いバグ

この記事を、同僚と私が見つけた小さいながらも不快な最前線のバグについての話で要約したいと思います。

wysiwygエディターへの画像の挿入

ブラウザのテキストエディタ（クイルを使用）では、ctrl + vを使用して別のサイトから画像を挿入することができます。誰もが実装されたメカニズムを使用して画像を挿入するということは考えていませんでしたが、ユーザーはそのようなユーザーです。特に画像の借用に敏感なあるサイトは、リクエストがどこから来たのかを判断し、ドメインが彼のものでない場合は、もちろん、それは真実ですが、私たちにとって驚きでした。したがって、wysiwygを開発/使用している場合は、何をどこに挿入するかを確認してください=）

Vue SSR + Cloudflare = <3

先に述べた同志が私に話した問題。

SSRとそれに続くSPAナビゲーションによって生成および提供されたページに移動した場合にのみ、APIへのすべてのリクエストが複製されました。長い間、彼らは何が問題なのか理解できませんでした。注意深く調査した結果、フッターには会社の電子メールの標準フィールドがあることが判明しましたが、cloudflareは電子メールを難読化します（スクレーパーから保護するため）。サーバー上のVueがjsでツリーを収集し、クライアントで別のツリーを取得すると（メールが一致しない場合）、Vueの再水和が壊れてクラッシュし、新しいvueインスタンスが作成されましたが、古い不完全なインスタンスは強制終了されませんでした。その結果、特定の状況下で、2つのVueインスタンスが同時にページ上で実行されていました。

それで全部です。コメント、願い、厳しい批判-私はこれらすべてを読んで結論を出すことができてうれしいです。

フロントエンドノート＃1