تصویری از وب سایت شخصی پیخوش

وب سایت شخصی

وضعیت: توسعه فعال
مدت فعالیت: ۱ ماه
شروع: ۱۴۰۲/۸/۱۷
آخرین فعالیت: ۱۴۰۲/۱۰/۶
بازخورد: خوب :)

ابزار ها:

Astro
TypeScript
Figma
Tailwind
React
Radix
Remix Icon
Sahel Font
Inter Font
Grease Pencil

این وب سایت تقریبا جزو اولین پروژه هایی هستش که من برای خودم انجام دادم و نتیجتا سعی کردم تا جای ممکن یه تجربه تمیز و همینطور منحصر به فرد رو شکل بدم که سال ها بعد جایی در وب ازم یه خاطره محترم باقی بمونه و باقی با پیدا کردن مطالب و وبسایت، از وجود همچین جایی خوشحال بشن :) امیدوارم…

و اما، توسعه!

ایده تا برنامه ریزی

ایده داشتن یه وبسایت شخصی همیشه همراه من بوده؛ از اونجایی که عموما توی پلتفرم های مختلف ای فعالیت میکنم و این حرکت های کوچک اکثرا هیچ وقت به چشم نمیان؛ پس چه بهتر اگه همه این موضوعات توی یه فضای شخصی سازماندهی بشن و قابل دسترسی باشن.

مسئله دیگه ای هم که باعث شروع کار روی این پروژه شد، احساس نیازم به داشتن یه رزومه یا پورتفولیو بود تا بتونم هم به عنوان یه نمونه کار خوب توی فهرستم بهش نگاه کنم و هم حالت رسمی تری به فعالیت هام بدم.

من مدت ها با داشتن وبسایت شخصی به این حالت مستقل مخالف بودم برای خودم و ترجیحم این بود از سرویس های وبلاگ دهی/میکروبلاگ استفاده کنم تا نوشته ها/مطالب مورد توجه یه جامعه کاربری ای قرار بگیره و صرفا گوشه ای از وب، خاک نخوره؛ ولی خب بعد تمام این مدت هایی که توی وبسایت های شخصی افراد مختلف وقت گذروندم و با دیدن و مطالعه مطالب منحصر به فرد شون به وجد اومدم، نتونستم رویای ساختن یه فضای دنج و شخصی رو مشابه اونها و برای به یادگار موندن حضورم، فراموش کنم.

برای این پروژه من درگیر یه سری موضوع بودم و از نظر زمانی، مدت های محدودی رو می تونستم روش کار کنم؛ گاها بعد از رسیدگی به باقی مسائل، میتونستم سه الی چهار زمان بذارم تا قبل از اینکه بی خوابی فشار بیاره و برم برای روز بعدی.

ولی با این اوصاف همچنان جزو سریع ترین توسعه هایی بود که داشتم و پروژه رو با وجود نداشتن محتوای کافی (بخش بلاگ و توسعه نامه ها به کل از لانچ اولیه جا موندن به این دلیل که نوشتن برای من کار سختیه و حجم محتوای مورد نیاز هم زیادتر از حد یه تعویق کوتاه مدت بود) تونستم توی یه مدت ده - چهارده روزه به سر انجام برسونم و خوشحال با بقیه به اشتراکش بذارم :)

من همیشه در حال یادگیری ام و دست روی ایده هایی میذارم که پیاده سازی شون برام چالش برانگیزه؛ برای همین تجربه اولین پروژه با Astro و ترکیبش با کتابخونه هایی مثل SolidJS/React و همینطور تلاش برای جای دادن Radix این وسط؛ چیز بامزه ای شد! و یکم وقت گیر تر از حالت عادی که خب… به هر حال بخشی از کاره D:

انتخاب استک و توسعه

انتخاب استک میشه گفت (برای اولین بار :) جزو سریع ترین بخش های کار بود؛ چون من بعد از اصرار طولانی مدتی که روی کار با ابزار های نوگرا و منحصر به فرد تر داشتم، مثل استفاده از Leptos و Rust برای پروژه های وب، به جلو رفتن و بهره بردن از ابعاد مختلف ابزار های مرسوم و استانداردمثل React رو آورده بودم و نتیجتا میدونستم که کار UI، حوزه ای نیست که بشه بدون استفاده از یه اکوسیستم غنی به نحو درستی جلو بردش و نیاز دونستم که برای توسعه این پروژه و ایده هایی که براش داشتم، از کتابخونه ای استفاده کنم که امکان استفاده از این دست ابزار هارو برای رابط کاربری بهم بده.

که خب این رو در ذهن داشتم چون مدتی بود از Astro می شنیدم و می خوندم و میدونستم ایده ممکن ای هست.

این بین برای اطمینان، پیاده سازی یه بخش بلاگ رو با NextJS هم بررسی کردم و با دیدن اینکه Astro تمرکز بخصوصی روی این ناحیه داره و بیشتر سمت پروژه های محتوایی جهت دهی شده، و امکاناتی مثل آماده بودن رندر مارک داون، استفاده از کتابخونه های مختلف برای بحث Reactivity و… تصمیم گرفتم که با Astro کار رو پیش ببرم.

هدف قبلی من برای مدت طولانی ای کار با Zola بود ولی حالا بعد از تجربه ای که از توسعه به دست آوردم، جدا Astro و انعطاف پذیری ساختارش رو (به خصوص برای ایده های نامرسومی مثل این وبسایت :) ترجیح میدم.

رابطه من با Tailwind هم توی این سالها بگیر و نگیر داشته و پیش از این ترجیح میدادم که بخاطر شلوغی کد نهایی (مخصوصا با دیدن المان های رندر شده NextUI توی بازنویسی اخیر) سمتش نرم و با CSS-in-JS و ایده های کامپایل تایم کار هارو جلو ببرم؛ که خب از اونجایی که راه حل معقول و قابل اتکا ای وجود نداشت و من ترجیحم روی تسریع روند توسعه بود، تصمیم گرفتم با Tailwind شانس خودم رو یک بار دیگه امتحان کنم.

دلایل استفاده از React و Radix هم به هم دیگه وابسته اند و این موضوع که کتابخونه رابط کاربری Headless ای که برای SolidJS وجود داشت (به اسم Kobalte) به هیچ عنوان با Astro کار نمیکرد و در ترکیب با نبودن یه پکیج آیکون بروز مشابه نمونه های اکوسیستم React، تصمیم گرفتم مجددا تصمیم منطقی رو بگیرم و با این گزینه ها کارو جلو ببرم.

همچنان ترجیحم روی حداقل استفاده و جایگزینی React و Radix با SolidJS و Kobalte است چون به مراتب ساختار بهتری دارن و بهبود قابل توجهی نسبت به موارد فعلی هستن، ولی خب باید دید میشه به کار انداخت این ترکیب رو با Astro یا خیر :)

باقی موارد هم (مثل Remix Icon، فونت ساحل و…) صرفا جزو انتخاب همیشگی من هستن و به طور پیش فرض جزوی از تجربه ای بودن که میخواستم ارائه بدم.


🌱 مباحث دیگه (احتمالی) برای توسعه نامه: