カランのブログ

ソフトウェアエンジニア / 台湾人 / 福岡生活

今のモード ライト

今のカテゴリ：前端

HTML semantic タグより大事なこと

身為一位前端工程師，雖然我們不需要把全部的 HTML 標籤背得滾瓜爛熟，但是常見的 HTML 標籤與使用場景還是要有一定程度的了解，根據不同場景使用。 但是，使用語意化標籤的目的是什麼？我發現很多文章對於語意化標籤往往只停在表面，也就是討論某某標籤應該使用在哪裡，導致網頁上的標籤看似多彩繽紛，但使用者體驗卻沒有得到相對的提升。

HTMLとCSSは多くの問題を解決できますが、JavaScriptも非常に重要です。

2017年に、HTML/CSSを使用して実現できるさまざまなレイアウトのテクニックについて共有された記事を読みました。初めて読んだ時、共感を覚え、当時知らなかったテクニックも学びましたので、皆さんにもおすすめです。JavaScriptはほとんどの問題を解決できますが、アクセシビリティの観点やパフォーマンス、バンドルサイズの観点から見ると、CSSで解決できる方が良いです。ただし、JSを使用しないことは完全に使用しないことを意味せず、両者にはいくつかの違いがあります。この記事では、再度上記の記事を読み直し、改善できると思われる点を指摘します。

配置に役立つ擬似クラス

CSSのレイアウトを行う際には、対応するCSSスタイルを使用して処理を行います。場合によってはJavaScriptを使用する必要がありますが、実際にはCSSには多くの疑似クラスが存在し、これらをうまく活用することでCSSを簡素化し、不要なJavaScriptの実装を減らすことができます。また、過去とは異なり、ごく少数のブラウザのみがサポートしていたということもなくなりました。

Sentry の Web Vitals を slack に統合する

現在、多くのウェブサイトでは、Web Vitalsの測定プロセスが導入されており、指標を定量化して改善すべき箇所を見つけることができます。しかし、あまり知られていないのは、Sentryが以前にもWeb Vitalsの統計機能を導入していたことです。この機能では、LCP、FP、CLSなど、Web Vitalsの各指標を統計することができ、開発者はバックエンドで関連するグラフを確認したり、平均値を表示することができます。非常に便利です。

フロントエンドの視点から SwiftUI を見ると

UIの観点から見ると、フロントエンドとモバイル開発は似たような問題に直面することがあります。使用される言語や開発手法は異なるかもしれませんが、私たちは使いやすいユーザーインターフェースを作る必要があります。そのため、コンポーネントベースの開発、状態管理、データフロー、副作用の管理（APIまたはIOなど）など、私にとっては相互学習に適した領域です。

フロントエンド不安症

本記事は、私の視点や考えを表現するものであり、同業者に対する批判の意図はありません。私は現在、フロントエンドの領域（ここではウェブ開発を指します）が徐々に成熟してきており、フロントエンドフレームワークはコンポーネントベースの中心思想とレスポンシブメカニズムを採用し、フレームワーク固有の文法や開発手法、哲学と組み合わせることで、ほとんどの使用シナリオに対応できると考えています。

HTML を組み合わせてどのフォームデータかがわかる

フォームはウェブページの一般的なアプリケーションで、プレーンテキストの転送だけでなく、ファイルのアップロードも可能です。しかし、フォームの振る舞いは他の伝達方法とは異なるため、疑念や誤解が生じることがあります。この記事では、仕様の詳細を理解し、フォームが最終的に何をするのか、フォームが他の転送方法とどのように異なるのかを理解し、最後に、フォームタグの背後でHTMLが何をするのかを説明します。

Svelte の深い理解 (2) — Svelte 生成コードの分析

Svelte の核となるコンセプトから、Svelte はコンパイルプロセスからできるだけ多くの情報を取得し、ダイナミックのオーバーヘッドを削減したいと考えています。前回の記事では、Svelte のコンパイルからコード生成までの仕組みを説明しました。今日は、Svelte が生成したコードがどのように機能するかを見てみましょう。

Svelte (0) についての深い理解—抽象構文ツリーとは?

この連載記事では、読者にSvelteのコンパイルメカニズムとコード生成についてより深く理解してもらうことを目的として、Svelteの原則の実装について探ります。Svelte のコンパイルプロセスにはコードの解析が含まれるため、この記事では抽象構文ツリーとは何かを説明し、さらに抽象構文ツリーの役割と重要性について説明します。

ホットワイヤーとターボリンク

Turbolinks は Ruby on Rails で通常使用される JavaScript パッケージです (ライブラリとしてのみ使用できます)。主に HTML を取得して、リクエストと CSS を再送信するコストを回避します。実際、「JavaScriptを使用する必要がない」というのは完全に正しいわけではなく、JavaScriptはまだありますが、ライブラリで自動的に行われるため、JavaScriptを書かなくても開発できます。

SSR のシナリオの考え方と使用方法

ブラウザが Web ページをクロールすると、クローラーはページの HTML コンテンツをクロールしてコンテンツを生成し、それをデータベースにキャッシュして定期的に更新します。つまり、SSR が実装されていない場合、html ファイル自体は空白になり、JavaScript が解析されて実行されるまで、実際のページは表示されません。