واقعا خلاقیت :)

قضیه از این قراره که این دوستمون داشته یه مستند از Supabase تماشا می‌کرده که به یه چیز عجیب و غریب برمی‌خوره: یه کافی‌شاپ ترمینالی به اسم @terminaldotshop که کلاً باید با SSH توش می‌چرخیدی.

همین موضوع عجیب و باحال، یه ایده‌ای رو تو سرش می‌ندازه:
«چی می‌شه اگه یه نمونه کار (پورتفولیو) برای دولوپرها درست کنم که طرف بتونه کامل از تو ترمینال بازش کنه؟»

این‌جوری می‌شه terminalfolio.xyz رو می‌سازه. یعنی شما می‌تونید با این دستور بهش وصل بشید:

ssh terminalfolio.xyz

نه خبری از مرورگره، نه CSS. فقط و فقط ترمینال!

با چه ابزارهایی این کار رو کرده؟

برای این که این ایده‌اش رو عملی کنه، چندتا از ابزارهای مورد علاقه‌اش رو با هم ترکیب کرده:

🧠 ‏React + Ink

اومده رابط کاربری (UI) ترمینال رو با Ink درآورده. Ink یه کتابخونه شبیه React هست که برای ساختن ابزارهای خط فرمان (CLI) تعاملی استفاده می‌شه. این‌طوری تونسته ساختار رابط کاربریش رو با کامپوننت‌های آشنای React بچینه.
فکرش رو بکنید، useState() رو با Box و Text و حتی منطق مسیریابی (routing) ترکیب کرده، اونم همه‌اش توی ترمینال!

🖥 سرور SSH با Golang

برای اینکه بشه با دستور ssh terminalfolio.xyz به اپلیکیشن دسترسی داشت، یه سرور SSH سفارشی با Go نوشته. کار این سرور اینه که اتصال رو مدیریت کنه، اپلیکیشن CLI رو اجرا کنه و به کاربرها یه تجربه‌ی روون و باحال بده، انگار که دارن با یه اپلیکیشن ترمینالی واقعی کار می‌کنن.

🧪 چالش‌هایی که داشته

* رندر کردن UI داینامیک توی ترمینال: می‌گه لایه انتزاعی (abstraction) که Ink می‌ده خیلی کمک کرده، ولی در کل طراحی تجربه کاربری (UX) برای CLI یه دنیای دیگه‌ست و ذهنیت متفاوتی می‌خواد.

* تجربه کاربری SSH: برخلاف سایت‌ها، توی SSH خبری از هاور (hover)، اسکرول راحت یا انیمیشن‌های نرم و روون نیست. باید کاری می‌کرده که حس کار با خود خط فرمان رو بده.

اصلاً چرا یه پورتفولیو ترمینالی؟

به نظرش راه باحالی بوده تا React، Golang و مفاهیم شبکه سطح پایین (low-level networking) رو با هم قاطی کنه و در کل، برای دل خودش یه پروژه فان ساخته باشه.


شبکه اجتماعی Abde Laziz:

✖️ https://x.com/gugocharade

—-

💡 مثل همیشه کنجکاو بمونید :)

🆔 @MdDaily