صفحه‌ی استاتیک به خواننده چه بدهکار است
صفحه‌ی استاتیک Astro اول خود جمله را بدهکار است: HTML از پیش ساخته، قلم با تعویض، و نه Three.js نه GSAP و نه Lenis پای خود نوشته در همین سایت.
نوشتهی محمد هنرور· ۷ دقیقه مطالعه
صفحه‌ی استاتیک یک بدهی ساده دارد. کسی که آن را باز کرده باید بتواند جمله را بخواند بی‌آنکه منتظر برنامه‌ای بماند که جمله را سر هم کند، و بی‌آنکه هزینه‌ی صحنه‌ای را بدهد که مال نشانی دیگری است. این سایت ساخت استاتیک Astro است. مقاله‌ای که می‌خوانی مارک‌داونِ یک پوشه بود. در زمان ساخت HTML شد، یک آدرس، و یک آیتم خوراک. GitHub Pages همان فایل را می‌دهد. هیچ‌جا در این مسیر از سرور نمی‌خواهد پاراگراف را همان لحظه بسازد.
صفحه‌ی استاتیک، و وقتی صحنه هزینه‌اش را درمی‌آورد قاعده‌ی جایی است که Three.js حق دارد اجرا شود. این یادداشت سوی دیگر همان قاعده است: صفحه حتی وقتی صحنه‌ای در کار نیست چه بدهکار است.
کلمه‌ها از قبل در فایل‌اند
Astro متن HTML را از پیش می‌نویسد. عنوان، توضیح، سرفصل‌ها و پاراگراف‌ها در پاسخ‌اند. درخواستی نیست که بدنه‌ی مقاله را بعد از رسیدن سند پر کند. ناوبری، متن درباره، و همین نوشته یک جور فایل‌اند. اگر اسکریپتی بعداً خطا بدهد ستون هنوز آن‌جاست، چون ستون رندری نبود که اسکریپت صاحبش باشد.
این بدیهی به نظر می‌رسد تا صفحه‌ای متن را در بوم قایم کند، یا پشت کامپوننتی که تا ارزیابی بسته نقاشی نمی‌شود. خانه بوم دارد. آن بوم هیرو است و متن نیست. عنوان یک عنصر در سند است. نوشته آن بوم را اصلاً ندارد. قالب نه آن را سوار می‌کند نه شهر پروژه‌ها را. Three.js همین دو جاست. مقاله هیچ‌کدام نیست، پس کتابخانه جزو باز کردن این نشانی نیست.
جست‌وجو بدهی را عوض نمی‌کند. فهرست وبلاگ می‌تواند با Pagefind در مرورگر بگردد، روی فایل‌هایی که از قبل ساخته شده‌اند. نقطه‌ی پایانی نیست که سرور جواب بدهد. جزئیات این انتخاب، از جمله اینکه چرا اسکیمای سایت SearchAction ادعا نمی‌کند، در یادداشت صحنه است. این‌جا نکته کوچک‌تر است. پیدا کردن صفحه اختیاری است. خواندن صفحه‌ای که از قبل باز کرده‌ای نباید اختیاری باشد.
این را سرعتِ اندازه‌گیری‌شده جا نمی‌زنم. برای این یادداشت آزمایش سرعت نرانده‌ام و عددی را هم قرض نمی‌گیرم. «بدهکار» این‌جا یعنی یک ساختار: جمله در HTML است، اضافه‌ها حق دارند خطا بدهند یا هرگز شروع نشوند.
قلمی که جمله را قایم نمی‌کند
نقاشی اول باز باید قلم انتخاب کند. متن انگلیسی با Inter است، فونت متغیر. متن فارسی با وزیرمتن، باز هم متغیر. زبان سند ترتیب را معلوم می‌کند. در صفحه‌ی انگلیسی پشته Inter است، بعد وزیرمتن، بعد قلم سیستم. در صفحه‌ی فارسی وزیرمتن اول است تا کلمه‌ی فارسی با طراحی لاتین Inter کشیده نشود. هر دو خانواده وزن ۱۰۰ تا ۹۰۰ را دارند. Inter در این سایت فقط لاتین و لاتین گسترده است. وزیرمتن بازه‌ی عربی را برای فارسی نگه می‌دارد و لاتین را برای اسم ابزار داخل جمله‌ی فارسی.
هر دو font-display: swap اعلام می‌کنند. اعلام روی وجه‌های Inter در استایل سایت است و روی وجه‌های وزیرمتن که بسته‌ی قلم می‌فرستد. تعویض یعنی مرورگر ممکن است اول با جایگزین بکشد و وقتی فایل رسید عوض کند. سطر ممکن است کمی تکان بخورد، چون عرض مقاله 70ch است و ch دنبال صفرِ قلمی می‌رود که همان لحظه در کار است. تکان کوچک هزینه‌ی نشان دادن کلمه هنگام بار است. متن نامرئی تا تمام شدن فایل دلخواه، هزینه‌ای است که حاضر نیستم بگیرم.
ستون مقاله، فاصله‌ی سطر ۲ برای فارسی، و حرف درشت انگلیسی که صفحه‌ی فارسی نمی‌گیرد، در عرض سطر، و ضرب خواندن نوشته شده. به این بدهی مربوط‌اند چون فایل استاتیکی که خوانده نشود، فقط به خاطر ازپیش‌ساخته بودن هدیه نیست. HTML باید حروفی باشد که واقعاً بشود دنبال کرد، به زبان همان نشانی که باز کرده‌ای.
هزینه‌ی هیرو را پای نوشته ننویس
کامپوننتی که چیدمان مشترک وارد کند اسکریپت هر صفحه‌ای می‌شود که از آن چیدمان استفاده می‌کند. برای همین صحنه‌ی خانه فرزند اتفاقی چیدمان نیست. خانه بوم خودش را سوار می‌کند. اسکریپت از فراخوان بیکاری شروع می‌شود و ماژول صحنه را می‌آورد، و آن ماژول است که Three.js را می‌کشد. اگر prefers-reduced-motion جور باشد بوم پیش از آن واردات برداشته می‌شود. جایگزین همان گرادیان CSS است که صفحه‌های دیگر تنها پس‌زمینه‌شان است. رندرری که خطا بدهد هم به همان گرادیان برمی‌گردد. نوشته لازم نیست بداند خانه کدام مسیر را رفته، چون ماژول را در خودش ندارد.
شهر پروژه‌ها جای دوم است و آخر. بومی پایین‌تر در آن صفحه ماژولش را وقتی به دید می‌آید وارد می‌کند. اگر آن‌جا نرسی دانلودش نمی‌کنی. حرکت کم، داخل همان ماژول، چرخش خودکار را خاموش می‌کند و حلقه‌ی پیوسته راه نمی‌اندازد. باز هیچ‌کدام از این کد روی مسیر مقاله نیست.
معرفی چیز سومی است که آدم‌ها با صحنه یکی می‌گیرند و نباید. فقط روی خانه اجرا می‌شود، با بوم دوبعدی رسم می‌شود نه با Three.js، و همان لحظه می‌شود ردش کرد. دکمه منتظر بار قلمی نمی‌ماند که ذره‌ها منتظرش‌اند. Escape هم رد می‌کند. حرکت کم، یا بازگشت در همان نشست، لایه را پیش از اجرا برمی‌دارد. مقاله کامپوننت معرفی را اصلاً رندر نمی‌کند. دری را رد نمی‌کنی که روی مسیر نبوده. عنوان این صفحه از اولین بایت همان عنوان است.
GSAP و Lenis همان جدایی را دنبال می‌کنند. صفحه‌ی مقاله حرکت را ساده می‌گذارد. اسکریپت حرکت آن کتابخانه‌ها را فقط وقتی وارد می‌کند که سند غنی باشد و حرکت کم خاموش. نوشته هرگز غنی نیست، پس واردات اتفاق نمی‌افتد. اگر خواننده prefers-reduced-motion گذاشته باشد روی خانه هم اتفاق نمی‌افتد. بلوک‌هایی که قرار بود از شفافیت صفر بیایند در CSS دیده می‌شوند، تا کتابخانه‌ی ردشده نتواند بخشی را قایم کند. سازوکار در کی انیمیشن را نمی‌آوریم است. بدهی ساده است: نخواستن حرکت باید صفحه‌ی خواندنی بگذارد، نه صفحه‌ی خالی.
«زود» این‌جا چه معنایی حق دارد
کلمه را به کار می‌برم چون صفحه‌ی همکاری به کارش برده: صفحه‌ای که باید زود باز شود، با همان ابزارهایی که این سایت واقعاً با آن‌ها ساخته شده. روی نوشته، زود شکل مشخصی دارد. HTML تمام است. قلم عوض می‌شود به‌جای اینکه متن را نگه دارد. مسیر رندرر دانلود نمی‌کند. مسیر کتابخانه‌ی اسکرول دانلود نمی‌کند. جای اسکرول یک نوار سه‌پیکسلی و تراشه‌ی دقیقه‌ی مانده را با رویداد خود مرورگر رنگ می‌کند. فهرست مطالب فهرستی از پیوند به عنوان‌هایی است که از قبل در سندند.
این فهرست معیار نیست. اتصال کند هنوز می‌تواند فایل قلم را دیر برساند. تصویر بزرگ، اگر نوشته‌ای یکی می‌داشت، باز همان‌قدر خرج دارد که خرج دارد. دارم می‌گویم این قالب حاضر نیست روی کلمه چه چیزی اضافه کند، نه تضمینی درباره‌ی شبکه بین تو و میزبان. میزبان متعارف و اسلش ته آدرس پیکربندی‌اند تا فایلی که می‌خوانی و نشانی نقشه یکی باشند. ادعای کارایی نیستند. یادداشت صحنه ثبتشان کرده.
گذار نما تنها تکه‌ی حرکتی است که چیدمان هنوز در راه از صفحه‌ای به صفحه‌ی دیگر می‌شناسد. محو کوتاه شفافیت است و با حرکت کم خاموش می‌شود. گذاری که خطا بدهد یا رد شود سند تازه را می‌گذارد. پیش‌شرط خواندن آن نمی‌شود.
این صفحه برای چه نیست
این سایت عمومی خودم است. مطالعه‌ی موردی مشتری نیست و برای حرف زدن از سرعت مشتری نمی‌سازد. کار خصوصی در فهرست پروژه‌ها نام و بازه‌ی فعالیت می‌ماند، بدون شرح. جنس کاری که واقعاً برمی‌دارم در همکاری است. آن صفحه نشانی عمومی از نوع دیگر ندارد. اگر موضوع جور نباشد، نتیجه‌ی درست این است که همان اول گفته شود، نه اینکه همکاریِ ساخته‌شده منتشر شود تا قالب جدی به نظر برسد.
اینکه کدام قلم می‌نشیند و فاصله چطور با جهت خط می‌رود در حروف، فاصله، و حرکت صفحه است. این‌جا تکرارش نمی‌کنم. بدهی این نوشته تنگ‌تر است. نشانی را باز کرده‌ای. جمله‌ی آن نشانی باید در فایل باشد، با قلمی که حق دارد پیش از کامل شدن دیده شود، در ستونی که بشود تمامش کرد، بدون هیرو، بدون شهر، بدون معرفی، و بدون کتابخانه‌ی اسکرول چسبیده به این بازدید.
اگر مرز را در قالب‌ها بخواهی، یک مقاله را باز کن و ببین چه چیزی را وارد نمی‌کند. بعد خانه را باز کن و ببین فراخوان بیکاری فقط آن‌جا سراغ صحنه را می‌گیرد. این شکاف همه‌ی قول است. صفحه‌ی استاتیک همان صفحه‌ای را بدهکار است که خواسته شده، و فرصت خواندنش را پیش از آنکه چیز تزئینی نوبت بگیرد.