カランのブログ

Kalan 頭像照片，在淡水拍攝，淺藍背景

四零二曜日電子報上線啦！訂閱訂起來

ソフトウェアエンジニア / 台湾人 / 福岡生活
このブログはRSS Feed をサポートしています。RSSリンクをクリックして設定してください。技術に関する記事はコードがあるのでブログで閲覧することをお勧めします。

今のモード ライト

我會把一些不成文的筆記或是最近的生活雜感放在短筆記，如果有興趣的話可以來看看唷！

今のカテゴリ：前端

比語意化標籤更重要的事

身為一位前端工程師，雖然我們不需要把全部的 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 が解析されて実行されるまで、実際のページは表示されません。

スヴェルトサミット 2020 ノートとエクスペリエンス

Svelteは私のお気に入りのフロントエンドフレームワークの1つで、シンプルな構文と柔軟性、作者の哲学、そしてさまざまなアニメーションやカットシーンの使用がとても好きになりました。Svelteに対する彼らの見解について以前にいくつかの記事を書いたことがあります。Svelte Summitは2020年10月18日に開催され、パンデミックがオンラインで生放送され、合計7時間、17回のスピーチが行われました。ここでは、興味深いスピーチと私自身の経験を記録します。