良い＆有用なアイデア – Codepen

私はそうでした 出口アニメーションのアイデアを把握します 最近、つまり、最近の提案（ようなもの） @exit-style 要素をDOMから削除するときに、要素をアニメーション化することができます。 それ 主に公正です 提案 現時点では、多くの課題があります。

しかし、出口（および入学！）アニメーションに役立つ新しい技術があります 今すぐ （とにかくクロムで）。それらは比較的新しいものであり、あなたが私のようであれば、私たちがこれらのdomに入っている/出口の状況にいるときにまだすぐに気にしないでください。 Una KravetsとJoey Arharはそれらを覆いました 素晴らしい 8月のブログ投稿： スムーズなエントリとエグアニメーション用の4つの新しいCSS機能。要約させてください！

1. あなたが使用している場合 @keyframes アニメーション、これで設定できます display その中のどこにでもプロパティがあり、それはひっくり返ります そのキーフレームで。このようになるためには使用しませんでした。アニメーションはすぐに移動します display 最終的な値へのプロパティ。これにより、あなたがする最後のことが設定される「終了」アニメーションになります display: none、視界とアクセシビリティツリーから要素を削除します。 @keyframes。
2. 使用している場合 transitionしかし、 display プロパティはまだ即座に最終的な値に反転します。つまり、新しいものを使用しない限り transition-behavior: allow-discrete; それを反転するプロパティ/値 display の変更 終わり 始まりの代わりに移行の。
3. これらの最初の2つは、出口アニメーションにかなり便利です（彼らは去るドムの状況には役に立たないが、それでもある種の「出口」です）。しかし、 入り口 または、要素があるときのアニメーションを「開始」します 追加した DOMに、今私たちは持っています @starting-style これにより、いくつかのスタイルを設定できます。 transition それらが存在すると仮定して、そのアットルールの外側の要素に設定されたスタイルに。
4. 入り口と存在することを想像できる一般的なHTML要素は
   「ポップオーバー」として動作する要素（メニューやツールチップなど）。これらの要素は、魔法のように「最上層」に運ばれることから利益を得ることができます。 z-index コンテキストの問題などを積み重ねます。しかし、今、あなたがそれをスムーズに行うために、視界からの内外のアニメーションをアニメーション化することにした場合、新しいキーワードを追加する必要があります overlay あなたの移行に。ねえ、時々あなたは素敵なものを持ってもっと仕事をしなければならない。

そして、それはすべて、視界に登場することさえありません。トランジションを表示すると、実際に「実際の」出口アニメーションに役立つので、その状況にある場合は、見る価値があります。ウナとジョーイはそれをカバーしているので、間違いなく そのブログ投稿を掘り下げてください。

一部の分析ツールがクリックを追跡する方法を知っています 発信 ウェブサイトのリンク？それはいつも私の心を揺るがしました。 Analyticsツールがそれを知るためには、ウェブサイトがなくなってユーザーが従ったリンクの新しいものに置き換える前に、その情報を小さなスプリットの時間にサーバーに撮影する必要があります。それはかなり信頼できないと思います。

実際、この「ユーザーが去る直前」の状況に向けて特別に設計されたWebプラットフォームAPIがあります。 navigator.sendBeacon()。それは持っているのはいいことですが、あなたはまだしなければなりません 電話 それと、それを呼びます 適切なタイミング。 Erik Wittはブログ投稿でこれを調査しました ビーコンの信頼性をアンロードする：最小限のデータ損失のためのベンチマーク戦略。

彼は、イベントリスナーでSendBeaconを呼び出すことを比較しました unload、 beforeunload、 pagehide、 そして visibilitychange。私は自分のお金をかぶっていただろう beforeunload、しかしそれはそうでした 断然最悪です データの37％のみを確実に報告します。 4つの中で最高です visibilitychange 90％。 Erikは、98％を報告しているChromeの実験的APIをカバーしているため、投稿をチェックしてください（使いやすくなります）。

たまに、AI/LLM APIの例が表示されます。 わかりました 大丈夫 それはかなり賢いです。レイモンド・カムデンを読んだとき、私はそう思った genaiはあなたがベガスで勝つのを助けることができますか？ レイモンドが言うように、ええと、いや、それはできませんが、それはあなたが持っているブラックジャックのようなゲームで最良の決定を下すのに役立ちます 合理的に複雑な決定ツリー。

もちろん、BlackJackを支援するためにソフトウェアを作成する場合は、できることは、そのツリーのデータから正しい結果をソフトウェアに返すことです。しかし、代わりにLLMに答えを求めることにはもっと楽しくて未来的なものがあります。あなたの耳のコンピューターと話すように。

私はブラックジャックをプレイしていて、ディーラーには6つのダイヤモンドが表示されています。クラブのジャックとハートのジャックがあります。私は打つべきですか、それとも滞在する必要がありますか？

あなたは20を持っています、それは良い手です。ディーラーには16があり、これは平均以下です。あなたがヒットした場合、あなたはあなたを逮捕するカードを手に入れる危険を冒します。したがって、ディーラーが逮捕されていることを願っています。

繰り返しますが、これはそうではありません 良い アイデアは、レイモンドがAIを介して苦労していたので、恐ろしい答えを提供することを喜んでいたからですが、プロンプトを作成するためにプロンプ​​トを作成し、チャートの座標よりも退屈でないと感じる「プレーンな言語」の方法で結果を得ることに興味深いものがあります。

先日、最近のケビンパウエルのビデオについておしゃべりしていました。 コンテナとラッパーのクラスへの新しいアプローチ （彼は他の人のほんの一握りを信じています）。このアイデアは、このような列でグリッドをセットアップすることでした。

.grid {
  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

ちょっと複雑に見えますよね？ステップに分解するのは、それほど悪くはありません。ほとんどのように見えるのは、ほとんどが命名されています。しかし、それの本当の美しさはです で 命名。これを設置すると、呼び出すだけでグリッドにアイテムのエッジとエッジを非常に簡単に配置できます grid-column: full-width;、しかし、通常のコンテンツは中央に設定されています。ビデオに取り上げる素晴らしい詳細がいくつかあります。おそらく最高のものは、コンテンツを全幅のコンテナ内で同じセンターに戻す方法です content エリア まったく同じテンプレート列を適用します その容器に。

JavaScript Iを必要とするレイアウト関連のものは、通常、かなり硬いです。 JavaScriptがロード（またはそうではない）場合、レイアウトが失敗したり、シフトしたりするというアイデアは、私を悩ませます。

しかし 時々、レイアウトの更新が完全にボーナス強化である場合、私は容赦します。私は一緒にいるかもしれないと思います 要素を「全幅」にするというYihui Xieのアイデア （クラス名と同様に、Kevinが上記のセクションで利用できるようにします）。

アイデアは、JavaScriptの少しを使用して、要素が完全な幅であるかどうかを動的に決定できるということです。これが状況です：

1. コードブロック（

   ).If the scrollWidth is greater than offsetWidth, it means the code block has a horizontal scrollbar, and we may want to make it full-width.

2. 表（
   ).If its offsetWidth 親のものよりも大きいです offsetWidth、幅が広すぎます。
   目次（IDを持つ要素 TableOfContents、例えば、


   要素が完全に大きくなると、それは可能性が高くなる可能性がありますが、そうでない場合、それは大したことではありません。

   Yihui Xieは、次のようなクラスで全幅を履いています。

   .fullwidth {
     width: 100vw;
     margin-left: calc(50% - 50vw);
   }

   これは古典的なテクニックでもありますが、上記のテクニックほど堅牢または柔軟ではないと思います。

   ---

   サイトのページビューを追跡したいと思っていますが、ボットを避けたいと思います。つまり、現実の人間のユーザーではないサイトをリクエストするものは何でも。 ハーマン・マルティヌスは彼のクマのブログプラットフォームでそれを試みています このような：

   body:hover {
     border-image: url("/hit/{{ post.id }}/?ref={{ request.META.HTTP_REFERER }}");
   }

   さて、人がページの上にカーソルを押し上げる（またはモバイルでスクロールする）とトリガー body:hover ポストヒットのURLを呼び出します。ボットがホバーするとは思わず、代わりにJSを使用してページと対話するだけなので、合理的な確実性を持って、これが人間の読者であると仮定できます。

   次に、ユーザーエージェントがボットではないことを確認します（これは完璧ではありませんが、それでも何か）。また、ユーザーエージェント文字列からブラウザとプラットフォームを抽出します。

   おそらく厳密なコンピューターサイエンスではありませんが、サーバーサイドカウンターよりもはるかに便利な数字であると思います。