https://virgool.io/feed/@aynzad توسعه‌دهنده وب @ esfahani.dev fa 2026-06-07 21:31:13 https://files.virgool.io/upload/users/19744/avatar/avatar.png?height=120&width=120 https://virgool.io/@aynzad https://virgool.io/@aynzad/%DA%86%D8%B7%D9%88%D8%B1-%D8%A8%D8%AF%D9%88%D9%86-%D9%87%D8%B2%DB%8C%D9%86%D9%87-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B4%D8%AE%D8%B5%DB%8C%D8%A8%D9%84%D8%A7%DA%AF-%D8%AF%D9%88-%D8%B2%D8%A8%D8%A7%D9%86%D9%87-ssr-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85-ojpfombmgyqf این نوشته بازنشری از مقاله بررسی فنی تکنولوژی‌های بکار رفته در نسخه جدید سایت شخصی من با عنوان اصلی «اوج گرفتن در آسمان، این بار بدون سر!» است.چند ماه پیش وقتی داشتم درمورد راه‌اندازی دوباره سایت شخصیم فکر می‌کردم، تصمیم گرفتم تا جایی که می‌تونم از نظر فنی، از تکنولوژی‌هایی استفاده کنم که برام تازگی داشته باشند، تا بتونم با چیزهای جدید آشنا بشم و استفاده ابزارهای جدیدی رو تجربه کنم. در این پروژه برای من، انتخاب تکنولوژی‌ها و ابزارها اهمیت ويژه‌ای داشت چون باید ابزارهایی انتخاب می‌کردم که هزینه استقرار سایت رو تا حد ممکن کم کنه و آماده‌سازیش برای چندزبانه بودن پیچیده نباشه؛ در ادامه میخوام خیلی کوتاه درمورد این تکنولوژی‌ها و کاری که انجام دادم توضیح بدم. نتیجه کار رو در تصویر پایین میتونید ببینید.بلاگ شخصی منسیستم مدیریت محتوا (CMS)تخصص و علاقه اصلی من برنامه‌نویسی فرانت‌انده، گرچه نوشتن کدهای بک‌اند یک وبلاگ، پیچیدگی زیادی نداره اما باید دنبال روشی میگشتم تا بشه هزینه استقرار (deploy) رو پایین آورد و نیاز به برنامه‌نویسی بک اند هم نداشته باشه. در حقیقت چیزی که من دنبالش میگشتم یک Headless CMS بود؛ بدون سر، بدون درد سر!امکانات زیر رو برای بررسی کاندیدا، مدنظر قرار دادم:پشتیبانی خوب و تیم توسعه‌دهنده قویامکان تعریف post type های متنوعخروجی RESTful APIپشتیبانی از زبان فارسی و RTLقابلیت چند زبانه بودنهزینه پایین (رایگان بودن مزیت است ?)بعد از بررسی و تست امکانات چند نمونه، بلاخره تصمیم گرفتم که Prismic رو انتخاب کنم. موردی که خوشبختانه تمام فاکتور‌هایی که من نیاز دارم رو مرتفع می‌کنه و نسخه تک کاربره رایگان هم داره.محیط ارسال نوشته در prismicبرنامه‌نویسی فرانت‌انداین قسمت پروژه برای من خیلی جذاب بود، چیزی که درش تخصص دارم و بهش علاقه دارم، اما بین این همه ابزارها باید از چی استفاده می‌کردم؟ من تجربه کار با ابزار NextJS رو داشتم که نسخه SSRی برای کتابخانه ReactJS حساب میشه. SSR مخفف Server Sider Rendering هست که با توجه به سرعت لود و پرفورمنس بالاتر و مزیت‌هایی که در سئو و خیلی چیزهای دیگه داره، تصمیم نهایی که گرفتم استفاده از NuxtJs بود که هم SSR هست و هم VueJs که برای من نسبتا جدید بود.شروع کردم به خوندن داکیومنت ها و خیلی زود کد زدن باهاش رو شروع کردم. چون به مفاهیم SSR از قبل آشنا بودم، برام تجربه دلنشینی شد. در گیت‌هاب پروژه میتونید نگاهی به کدها بندازید و اگه نیاز داشتید هرجور که راحت بودید ازشون استفاده کنید.میزبانی وببرای میزبانی کردن سایت‌ها و وبلاگ‌ها، کاری که من همیشه هم انجام میدادم استفاده از هاست‌های اشتراکی یا سرور‌های مجازی/اختصاصی بود که هزینه سالیانه‌ای رو بابتش پرداخت میکردم؛ اما انتخاب ابزارهایی که گفته شد، این امکان رو به من میداد تا بتونم بدون هزینه سایت رو در وب میزبانی کنم. با کمک پلتفورم Vercel فقط کافی بود یک دامنه بخرم و DNS ها رو روش ست کنم، با متصل کردن اون به رپو گیتهاب پروژه بدون هیچ کانفیگ و دردسری Continuous Deployment رو براش فعال کردم تا با هر push روی گیت پروژه خودبخود پروژه دپلوی شه. بدون درد، بدون خونریزی و بدون هزینه!در حقیقت Vercel یک پلتفورم دپلویمنت برای برنامه نویسان فرانت-انده که هاست و CI/CD و ... رو scalable و بدون نیاز به تنظیمات پیچیده در اختیار کاربرانش میزاره.با vercel حتی نسخه staging هم میشه برای پروژه داشت تا تست‌ها قبل merge نهایی یک‌بار در اون محیط هم انجام بشه.دشبورد vercel پروژهنتیجه‌گیریهدف من از این نوشتن این مطالب، مستند‌کردن مدل تصمیم گیری و معرفی ابزارهایی که در پیاده سازی سایت شخصیم استفاده کردم بود. در این نوشته خوندیم که چطور میشه با انتخاب درست ابزارها برای پیاده‌سازی یک پروژه در هزینه و وقت صرفه جویی کرد و یک تجربه خوب و دلنشین داشت.اگر شما هم برای انتخاب تکنولوژی محصولی که میخواهید تولید کنید نیاز به کمک و مشاوره دارید، درمورد محصولتون چند خطی برام بنویسید، خوشحال میشم که بتونم در هر سطحی بهتون کمک کنم. علیرضا اصفهانی علیرضا اصفهانی Fri, 07 May 2021 23:36:53 +0430 https://virgool.io/@aynzad/sympli-faster-and-easy-design-whdwychuebcv وظیفه یه طراح (ui/ux designer) خوب اینه که زندگی رو برای بقیه ساده‌تر کنه و خب چرا اینکار باید اینقدر سخت باشه؟ فرض کنید شما یک طراح هستید که میخواین رابط‌کاربری یک وب‌سایت رو طراحی کنید؛ بعد از تموم شدن طرح اولیه، اون رو به مشتری ارائه می‌دین (تصویر خروجی رو احتمالا با ایمیل یا ... براش میفرستید)، مشتری بعد از دیدن طرح، احتمالا نقطه نظرهایی داره که شما باید در طرح نهایی اعمال کنید (تغییر رنگ‌ها، چنیش‌ها و ...). حالا شما باید دوباره خروجی طرح رو با این تغییرات براش بفرستید تا نظرشو بگه و این چرخه ممکنه بارها و بارها تکرار بشه. نگهداری و مدیریت نسخه‌های مختلف یک طرح، مشکلی هست که اکثر طراح‌ها باهاش دست و پنجه نرم میکنند. اگر شما هم طراح هستید احتمالا تصویر زیر براتون آشناس،‌ درسته؟نگهداری نسخه‌های مختلف یک طرح و مدیریت اون‌ها کار سخت و عذاب‌آوریهحالا یک سناریو دیگه؛ فرض کنید شما در یک تیم استارت‌آپی وظیفه طراحی رابط‌کاربری یک اپلیکیشن موبایل رو دارید که قراره نسخه android و ios داشته باشه؛ قطعا هر صفحه این اپلیکیشن شامل تعدادی آیکن و تصویر و ... (assets) میشه. که این assetها باید درکنار تصویر کامل هر صفحه؛ با فرمت‌ها، رنگ‌ها و اندازه‌های مختلف در اختیار توسعه‌دهنده‌های تیم قرار بگیره. واضحه که وظیفه خروجی گرفتن تمام این موارد به عهده طراح‌ هست؛ تا اینجا کار همه چی آرومه ولی اگه تغییر بزرگی در طرح اتفاق بیوفته؛ مثلا سبک آیکن‌های کل طرح از outlines به solid عوض بشه، چی؟ و صدالبته اگه حجم پروژه زیاد بشه این خروجی گرفتن‌های متوالی دردسر زیادی رو برای طراح و توسعه دهنده‌ها ایجاد میکنه.جدای از مسئله خروجی گرفتن اگه شما جزء اون دسته از طراح‌های وسواسی هستین که همیشه از اینکه جزیات طرح‌هاشون به دقت پیاده سازی نمیشن و کار نهایی با طرحشون فرق داره؛ شاکی هستند، حتما بنظرتون رسیده که یکی از دلایل اصلی این دوگانگی‌ها، اون فایل‌های تصویری طرح نهایی هستند که شما بدون هیچ کمک و توضیحی در اختیار توسعه دهنده قرار میدین و خب یه برنامه نویس جاوا احتمالا متوجه پیکسل اضافی فاصله آیکن از سمت راست یا ارتفاع دقیق خطوط که با نسبت طلایی بدست آوردید نشه و چیزی که به چشمش میاد رو حدسی اعمال کنه، مشکل اینجاست که تصویر طرح، بطور کامل گویای جزیات یک رابط‌گرافیکی نیست و نمیتونن پل خوبی بین طراح و توسعه دهنده باشه و حتما راهنما و توضیحاتی هم باید درکنار تصویر هر صفحه برای توسعه دهنده ارسال بشه. این راهنماها می‌تونه شامل فواصل، اندازه‌ها، اندازه متون، ضخامت متون، رنگ‌ها و ... باشه.تحقق یک رویاحتما خوشحال میشید اگه بهتون بگم که دیگه قرار نیس این سختی‌ها رو تحمل کنید. بله؛ میشه نسخه‌های مختلف یک طرح رو نگهداری کرد؛ از assetsها خروجی گرفت و برای تصویر هر صفحه توضیحات و راهنمایی‌هایی قرار داد؛ و بله میشه همه این کارها بصورت خودکار انجام بشه و حتی بیشتر ...پلتفرم sympli.io در ساخت محصولات دیجیتال همه این موارد رو در کنار هم آورده تا طراح‌، توسعه‌دهنده و مدیر پروژه بتونن راحت‌تر همکاری کنن و سرعت پیشرفت پروژه رو بالا ببرن.(مقایسه نسخه‌های مختلف یک طرح)کار با سیمپلی ساده اس، طراح کافیه در سیمپلی عضو بشه، یک پروژه جدید در سیمپلی ایجاد کنه، پلاگین سیمپلی برای نرم‌افزاری که باهاش طراحی میکنه (sketch - adobe xd - photoshop) رو نصب کنه و وقتی کار هر صفحه تموم شد از داخل همون نرم‌افزار طرح رو سینک کنه روی اکانت سیمپلی پروژه.البته مهمه که بدونیم فایل psd یا sketch پروژه، بعد از عملیات سینک جایی برای دانلود قرار نمیگیره و نیاز نیس نگران امنیت فایل خام طرحتون باشید.(سینک کردن صفحات طرح از طریق پلاگین اسکچ)سیمپلی برای توسعه دهنده ها هم پلاگین داره، توسعه دهنده بعد از عضویت در سیمپلی و دعوت شدن به پروژه در سیمپلی، میتونن از مزایای اون در وب‌اپ سیمپلی استفاده کنن، همچنین توسعه دهنده‌های android میتونن پلاگین android studio و توسعه‌دهنده‌های ios میتونن پلاگین Xcode این پلتفرم رو نصب کنن و خیلی راحت طرح رو در کنار کد داشته باشند و assetها،‌ متن‌ها، اندازه‌های متون، فاصله‌ها و ... رو به سرعت در اختیار داشته باشن.مدیر پروژه و طراح و برنامه‌نویسان پروژه،‌ همگی میتونن با استفاده از وب‌اپ سیمپلی طرح‌ صفحات رو ببینن، نسخه‌های مختلفش رو مقایسه کنن، برای هر صفحه کامنت بزارن و خروجی asset‌ها و فونت‌ها رو دریافت کنند.(محیط xcode بعد از نصب و استفاده از پلاگین سیمپلی)در زمانی که من این متن رو مینویسم سیمپلی یک اکانت ۳۰ روزه رایگان برای ثبت‌نام اولیه به همه میده تا از تمام امکاناتش بتونین بهره ببرنند و البته بعد از تموم شدن این ۳۰ روز هم میتونید همچنان به کارتون بصورت رایگان ادامه بدید،‌ اما محدودیت یک پروژه‌ فعال برای هر اکانت اعمال میشه (‌که خیلیم بد نیست :دی)من در انتها مزایای استفاده از سیمپلی ( و یا پلتفرم‌های مشابه ) رو که قسمتیش رو قبلا هم اشاره کردم لیست میکنم.برای طراح‌ها:راحتی بروزرسانی طرح و ارسال برای همکاران از طریق پلاگین‌های فوتوشاپ، ادوبی ایکس دی و اسکچکنترل نسخه‌های مختلف هر صفحه یا artboardآماده ساختن خودکار رنگ‌ها، assets، استایل‌ها، فواصل، چینش‌ها و ... برای توسعه‌دهنده هاگرفتن فیدبک طرح هر صفحه از طریق کامنت‌های وب‌اپ سیمپلیو ...برای توسعه‌دهنده‌ها:دریافت راحت متون درون طرح، رنگ‌ها، assets، استایل‌ها، فواصل، چینش‌ها و ...قابلیت درگ-اند-دراپ و افزودن assets درون IDE مقایسه نسخه‌های‌مختلف طرح برای متوجه شدن سریعتر تغییرات و اعمال آن‌هاو ...استفاده از ابزارهای مدرن و یکپارچه برای مدیریت طرح‌ها امروزه تبدیل به یک نیاز شدند تا طراح‌ها و توسعه‌دهنده‌ها کمتر و کمتر درگیر مسائل پیش‌پا افتاده و دردسرزا بشن و بیشتر و بیشتر روی کار اصلی خودشون تمرکز کنند. خوشبختانه sympli تنها ابزار مدیریت این قبیل امور نیست، شما برای مدیریت طرح‌‌ها و کارهاتون از چه ابزاری استفاده میکند؟من علیرضا اصفهانی هستم، طراحی UI/UX جذاب‌ترین کاریه که ازش پول در میارم، در کنار اون وب رو در سمت کاربر و سرور هم توسعه میدم. اگه دوست داشتین میتونین من رو در توییتر دنبال کنید، در تلگرام بهم پیام بدین و اگه مایلید با هم همکاری کنیم از طریق ایمیل باهام در ارتباط باشید. علیرضا اصفهانی علیرضا اصفهانی Thu, 25 Oct 2018 01:23:03 +0330