صفحه‌ی استاتیک، و وقتی صحنه هزینه‌اش را درمی‌آورد
این سایت ساخت استاتیک Astro است. Three.js فقط روی هیروی خانه و شهر پروژه‌ها می‌آید، نه پای نوشته؛ و معرفی را همان لحظه می‌شود رد کرد.
نوشتهی محمد هنرور· ۳ دقیقه مطالعه
صحنه‌ی تمام‌صفحه‌ی WebGL ثانیه‌ی اول قشنگی است و هر ثانیه‌ی بعدی گران. رندرر می‌خواهد، شیدر، نسبت پیکسل، و اغلب یک گذر پس‌پردازش. در صفحه‌ای که کارش خواندن است این هزینه هیچ نمی‌خرد. این سایت ساخت استاتیک Astro است روی GitHub Pages. صحنه دو جا اجازه دارد. جاهای دیگر دانلود نمی‌شود.
پشته کوتاه است: Astro برای صفحه‌ها، Three.js فقط جایی که خود صحنه موضوع است، GSAP و Lenis فقط جایی که حرکت خواسته شده.
صفحه پیش از مرورگر تمام شده است
Astro متن HTML را از قبل می‌سازد. برای بدنه‌ی مقاله یا ناوبری درخواستی به سرور نمی‌رود. وبلاگ مارک‌داون است. هر زبان پوشه‌ی خودش را دارد. نوشته در زمان ساخت آدرس، تصویر اشتراک، و آیتم RSS می‌شود.
GitHub Pages همان فایل‌ها را می‌دهد. میزبان متعارف https://mh-honarvar.github.io است و ته آدرس اسلش می‌خواهد تا نقشه و لینک یکی باشند. جست‌وجوی وبلاگ Pagefind است و جعبه‌ی فرمان Ctrl+K. هر دو در مرورگر روی فایل ساخته‌شده اجرا می‌شوند. آدرس جست‌وجویی نیست که سرور جواب بدهد. برای همین SearchAction در اسکیمای سایت نیست. جعبه مانده. آن ادعا رفته.
صحنه نمی‌تواند جزئی روی چیدمان مشترک باشد. جزئی که از چیدمان بیاید اسکریپت هر صفحه است. صحنه‌ی خانه دیگر آن‌طور وارد نمی‌شود.
دو صحنه و یک خط دورشان
خانه یک بوم دارد. اسکریپت در فراخوان بیکاری scripts/scene/scene.ts را می‌آورد و با آن Three.js را. صحنه هیرو است: پس‌زمینه‌ی شیدر، حباب، و در لایه‌ی دسکتاپ گذر درخشش. فایل هنوز حالت محیطی را از وقتی می‌شناسد که همان بوم پشت هر صفحه بود. آن حالت وصل نیست. نوشته، درباره، برچسب و همکاری بوم را رندر نمی‌کنند و ماژول را نمی‌آورند.
پروژه‌ها صحنه‌ی دیگری دارند، شهر کامیت. بوم آن‌جا یک سال شمار مشارکت را دارد. وقتی به دید می‌آید scripts/scene/city.ts می‌آید. برج روز است و ارتفاع تعداد. اگر به آن بخش نرسی ماژول شهر گرفته نمی‌شود. کارت‌ها و نمودار زبان HTML معمولی‌اند.
prefers-reduced-motion بوم خانه را پیش از ورود برمی‌دارد. جایگزین یک گرادیان CSS است، همان شستی که صفحه‌های دیگر تنها پس‌زمینه‌شان است. رندرر در بلوک آزمایشی ساخته می‌شود. اگر خطا بدهد تابع برمی‌گردد و گرادیان می‌ماند.
کیفیت لایه دارد. صفحه‌ی باریک یا هسته‌ی کم روی پایین‌ترین لایه می‌ماند، بدون درخشش. هیروی دسکتاپ می‌تواند درخشش داشته باشد و اگر فریم طول بکشد یک لایه پایین می‌آید. نسبت پیکسل سقف دارد. این چانه‌زنی مال مقاله نیست چون مقاله شروعش نمی‌کند.
معرفی لحظه است نه دروازه
بازدید اول هنوز می‌تواند اسم را به شکل ذره روی خانه پخش کند. قبلاً حدود دو و نیم ثانیه صفحه‌ی مات روی عنوان بود. خزنده‌ای که اسکریپت را اجرا کند همان انتظار را می‌دید، چون sessionStorage بازدید قبل را ندارد.
آن صفحه رفته. عنوان در سند است، زیر لایه‌ی شفاف، همان سطر قبلی. دکمه‌ی رد کردن از همان لحظه دیده می‌شود. منتظر فونت و ذره نمی‌ماند. Escape هم رد می‌کند. گذر کوتاه‌تر است. حرکت کم، یا بازگشت در همان نشست، معرفی را پیش از اجرا برمی‌دارد.
صحنه کی می‌ارزد
هیرو را نگه می‌دارم چون خانه نگاه اول است: زمینه‌ای نرم به رنگ تأکیدی، کمی واکنش به اشاره‌گر، بعد کنار رفتن. نمایش محصول نیست و ادعای مشتری در آن نیست. شهر به دلیل دیگر می‌ارزد. تصویر داده‌ای است که صفحه دارد، شمار مشارکت عمومی، و پایین فهرست است نه جلوی کلمه.
صحنه را جایی که کار یک پاراگراف است برمی‌دارم. مقاله با چرخیدن حباب روشن‌تر نمی‌شود. درباره‌ی من حرکت کوچک خودش را دارد، حلقه و خط زمان، و آن‌ها CSS هستند نه رندرر.
حروف و اسکرول نیمه‌ی دیگر بودجه است، در حروف، فاصله، و حرکت صفحه. مسیریابی فارسی پیش از هر شیدر در دو مسیر، نه یک صفحه‌ی وارونه است.
این چه نیست
این سایت عمومی خودم است، ریپازیتوری mh-honarvar.github.io. مطالعه‌ی موردی مشتری نیست. ریپازیتوری خصوصی نام و بازه‌ی فعالیت می‌ماند. اگر وقت و موضوع جور باشد راه گفتن تلگرام است، @MH759. جنس کار در همکاری است و کمی زمینه‌ی شخصی در درباره. هزینه را جایی می‌دهم که یا نگاه اول صفحه است یا تصویری از شمار واقعی مشارکت، نه پشت هر پاراگراف.
اگر بخواهی همین را در کد ببینی: بوم خانه فقط در صفحه‌ی اول سوار می‌شود، شهر فقط وقتی به دید بیاید ماژول خودش را می‌گیرد، و صفحه‌ی نوشته هیچ‌کدام را در اسکریپت‌هایش ندارد. این حد را برای اینکه خواندن ارزان بماند گذاشته‌ام، نه برای اینکه صحنه بد باشد.