نوشته های Miss Dev

ساخت و توسعه بک اند با استرپی

Miss Dev — Fri, 25 Apr 2025 00:13:16 +0330

استرپی - Strapi CMSسلام، خیلی وقت بود مطلبی منتشر نکرده بودم. استرپی یک سیستم مدیریت محتوا بصورت هدلس / Headless هست که این اصطلاح بدون سر برمیگرده به اینکه فقط سمت بک اند کار میکنه و فرانت رو باید با REST-API توسعه بدین. ( استرپی نمره اول هدلس ها رو داره )چیزی نیست که نشه با این سیستم توسعه داد!یادمه یجا در سایت تقریبا معروفی یکی سوال کرده بود که با استرپی میشه فروشگاه آنلاین راه اندازی کرد!؟ و جوابی که بهش داده بودن این بود که: داداش برو با ووکامرس فروشگاه بزن این به کارِت نمیاد!!!زیاد از جوابی که خوندم تعجب نکردم چون اکثر ما ایرانی ها دُگم هستیم و حاضر به استفاده یا امتحان چیزای جدید نیستیم.چیزی که هست درسته وردپرس و ووکامرس معروف هستن و تقریبا نیمی از وب سایت ها رو فرا گرفتن ولی ایراداتی داره که شاید روزها یا ماه‌ها یا شایدم سال‌های اول به چشم نیاد و اون هم عدم مقیاس پذیری هست!همون طور که از اسمش معلومه وردپرس جهت نوشتن اخبار و مقاله توسعه داده شد. بعدها با پیشرفت این صنعت با افزونه ها و ... وردپرس تبدیل شد به چیزی که حالا ازش استفاده می کنیم.یک وب سایت با رشد کردن و شاخ و برگ گرفتن روی بستر وردپرس باگ ها و خطاها یکی پس از دیگری خودشون رو نشون میدن و حالت مقیاس پذیری رو از دست میده!استرپی / Strapi CMSعلاقه مندان به حوزه برنامه نویسی وب نیم نگاهی به این سیستم قدرتمند داشته باشن تا بشه عضو همیشگی پروژه هاشون. کار با این سیستم به شدت آسون و تقریبا بدون نوشتن یک خط کدنویسی. مگر اینکه کارهایی بخواین انجام بدین که نیاز به کدنوشتن باشه مثلا هوک یا یه دایرکتیو که یکاری انجام بده.نصب و اجراخب با توجه به اینکه استرپی از نود جی اس استفاده میکنه باید اول نود جی اس رو نصب داشته باشین که پیشنهاد خودش نسخه LTS هست که در حال حاضر نسخه 20 رو میتونین در نظر بگیرین چون با نسخه های بالاتر سازگاری نداره و به مشکل میخورین.یک دیتابیس هم نیاز دارین که از بین MySQL - MariaDB - PostgreSQL - SQLite حق انتخاب دارین که البته بهتره سراغ SQLite نرید چون این دیتابیس جهت تست هست و به درد استفاده در سرور در آینده برای دیپلوی پروژه روی سرور نمیخوره.پیشنهاد استرپی جهت استفاده از دیتابیس و نسخه هادستور NPM برای نصب:npx create-strapi@latestطی فرایند نصب یک سری سوال‌ها میپرسه که طبق نیاز خودتون پیکربندی می‌کنین.بعد از فرایند نصب پیشنهاد من اینه که یک بار دستور:npm run developرو اجرا کنین و بعد از اینکه کاربری رو ایجاد کردین خارج بشین. و با کلیدهای CTRL + C در ترمینال پروژه رو متوقف کنین و یه سری کار نیازه انجام بدین:در روت پروژه خودتون دو فایل env قرار داره که یکیش example هست که بهتره پاک کنین. فایل README هم کلا به دردتون نمیخوره پاک کنین. اگر طی فرایند نصب TypeScript رو انتخاب کردین فایلی به نام tsconfig.json در روت پروژه قرار داره که اگر نیازه با JavaScript هم کار کنین در یک جایی از فایل این عبارت رو وارد بکنین:"allowJs": trueترمینال رو باز کنین و داخل روت پروژه بشین و یک سری پلاگین کارامد هست که پیشنهاد میدم نصب کنین:@_sh/strapi-plugin-ckeditor@sklinet/strapi-plugin-content-tags@strapi/plugin-color-picker@strapi/provider-email-nodemailerstrapi-advanced-uuidهمه رو با یک npm i میتونین یکجا نصب کنین. در فایل های پروژه دایرکتوری config و سپس plugins.ts/js رو با یک ادیتور باز کنین و اگر میخواین ایمیل رو تنظیم کنین همین طور که قبلا @strapi/provider-email-nodemailer نصب کردیم نیاز به پیکربندی و تنظیمات داریم.حالا این تنظیمات رو ذخیره کنین و برگردین به روت پروژه و فایل env رو ویرایش کنین و در انتهای فایل:من پیشنهادم استفاده از Gmail هست که نیازه احراز هویت دو مرحله ای رو برای اکانتتون از قبل فعال کرده باشین و با gmail app password میتونین یک رمز عبور برای SMTP بسازین.حالا نیاز هست به ویرایش فایل middleware.ts/js که داخل دایرکتوری config قرار داره. فایل رو با یه ادیتور باز کنین:با این تنظیمات اول مشکل CORS رو برای فرانت حل میکنیم و بعد با قرار دادن favicon.png در دایرکتوری uploads می تونیم آیکن رو قرار بدیم و جلوگیری کنیم از آیکن پیشفرض. دقت داشته باشین من اینجا ازhttp://localhost:3000استفاده کردم که پیشفرض Nuxt هست شما باید به URL مورد نظر خودتون تغییرش بدین.آخرین کاری که باید انجام بدین ویرایش فایل app.example.ts/js هست که اول باید example رو پاک کنین تا بشه app.ts/js و با یه ادیتور بازش کنین:همین طور که مشخص هست اینکار مانع از نمایش قسمت آموزش و اعلانات نسخه نصبی میشه.تا اینجا تونستیم استرپی و نصب و پیکربندی کنیم و حالا می تونین توی دنیای استرپی سیر کنین و هرچیزی که به فکرتون میرسه رو راحت پیاده سازی کنین.اگر سوالی دارین کامنت بذارین در اسرع وقت جواب میدم.

طراحی رابط کاربری و تجربه کاربری ضعیف

Miss Dev — Sat, 18 May 2024 16:59:19 +0330

بد یا خوب مساله این استخب سلام سلام بعد از مدت های زیادی برگشتم 😊این روزها یه دغدغه جدید به قبلی ها اضافه شده و اونم طراحی ضعیف سایت و اپلیکیشن های ایرانیه!وقتی به سایت هایی مثل Dribbble و Pinterest و ... نگاه میکنی به عمق فاجعه پِی میبری. حالا بقیه سایت هایی که میشه ازشون ایده گرفتو میگذریم.چندین نمونه سایت و اپلیکیشن که دارای محبوبیت هستن رو بررسی کردم چندتا نکته مهم دیدم:عکس های بی کیفیت و پیکسلیشلوغی بیش از حد صفحاتفقدان Dark modeعدم رعایت نکات صفحه آراییمنوهای پیچ در پیچ و Nested بیش از اندازهبارگذاری سنگین صفحاتعدم رعایت Viewport safe areaنمایش پاپ آپ های زیادعدم خلاقیت و...اینا مهماش بود خیلی موارد دیگه هم به چشم میخوره که مربوط به کدنویسی سمت فرانت هستن. یه سر به Inspect و Console بزنین متوجه میشین.خیلی نکات دیگه هم هست که موجب میشه یک سایت یا اپلیکیشن شبیه نمونه های خارجی جذاب و کاربر پسند نباشه، مثلا همین فونت فارسی... 😒 البته اگه در کنار فارسی نویسی انگلیسی هم بکار برده بشه ممکنه به کل داستان رو متفاوت کنه.نظر شما چیه؟ چه نکات دیگه ای هم هست که من ننوشتم؟ تو برام بنویس.

لطفا فقط از وردپرس استفاده نکنید

Miss Dev — Sat, 04 Mar 2023 17:53:08 +0330

سلام، بعد از یک سال دوباره برگشتم با یه مقاله و پاره ای از توضیحات و ابهامات.کمتر کسی هست که اسم وردپرس رو نشنیده باشه و تقریبا از ده سایتی که می بینیم دست کم هشت تاش وردپرسیه! راستش خود دولوپرای وردپرس هم فکرش رو نمیکردن روزی انقدر طرفدار داشته باشه!فکرش رو بکن یه CMS خلق بکنی برای کمک به جامعه وبلاگ نویسان و بعدها باهاش تا فروشگاه هم پیش برن!مضایا و معایب زیادی داره مثلا یکی از مضایاش تمام شدن یک سایت کامل با قیمت مناسب یا شایدم کاملا رایگان! با گستردگی تمپلیت های آماده و ... ?‍♀معایبش خیلی بیشتر هم هست به دلیل کثیف بودن اجزای دیتابیس تاااااااااااااااااا باگ های متعدد و امنیت بسیار پایین و سنگین بودن و محدودیت و بخوام بگم همینجوری باید هی از " و " استفاده کنم! ?دیگه سال 2023 دزدی نیست هی بخواین از وردپرس استفاده کنین؟ خسته نشدین؟ با پیشرفت تکنولوژی و زبان های جدید برنامه نویسی و فریم ورک های غول وقتش شده یکم با بقیه CMS های رایگان و غیر رایگان دیگه هم آشنا بشین!خاصیت REST-API و Headless CMS ترکیبی پُررو میشه زد و یه وب اپلیکیشن خفن زد، دو تا از بهترین Headless CMS های اوپن سورس:Strapi, Directusالبته همین وردپرس که من خیلی کوبیدمش از حق نگذریم اگه به عنوان Headless ازش استفاده کنین شاید بهتر از بقیه باشه که نام بردم خدا رو چه دیدی!استرپی Strapi:هرچی بگم کم گفتم راجبش، رایگان و اوپن سورس هست و مختص برنامه نویساس و هسته قوی ام داره، تقریبا هر ماه یک الی دو ورژن بروز میشه گاهی هر دو ماه بستگی به تعداد Issue های گیت هاب داره! در حال حاضر ورژن 4 رو دارن تقویت میکنن.قابلیت های جدیدی بهش اضافه شده و همینجور بهتر و بهتر میشه، یک سری کاربرای ایرانی چند تا سوال داشتن اینکه به بانک های ایرانی متصل میشه یا نه؟ یا مثلا می تونن از احراز هویت پیامکی استفاده کنن؟جواب به این دو سوال بله است. شما در استرپی Webhooks دارید و API Token که با هر دو این موارد اگه دولوپر باشین می تونین به راحتی و یکم سر و کله زدن وب هوک مخصوص به پیامک و بانک رو بسازین و در اپلیکیشن استفاده کنین. ?دایرکت آس Directus:به جرات میتونم بگم بهترین هدلس سی ام اس!!! قابلیت های فراوونی داره که شاید حتی استرپی هم نتونه بهش برسه، یکی از اون مواردی که استرپی و هیچ سی ام اس دیگه ای نداره قابلیت Flows هست، این قابلیت به دولوپر این امکان رو میده که همه API ها یا Field هایی که تعریف میکنه رو اتوماسیون بکنه و دستورات خاص اعمال کنه. تمام قابلیت های یه سیستم حرفه ای و پیشرفته رو داره و تقریبا هیچ کاری نشد نداره!قسمت جالبش اینجاس که Directus برای کار کردن نیازی به هیچ Extension یا افزونه ای نداره و افراد مبتدی هم می تونن به راحتی باهاش کار بکنن.استقرار و Deployment:به منظور دیپلوی و آپلود این دو CMS به هاستی نیاز دارید که از NodeJS پشتیبانی کنه که امروزه خیلی از شرکت ها هستن که هاست مخصوص NodeJS ارائه میدن البته نسخه لینوکس استفاده شده در این سرورها خیلی مهم هست!استرپی به خوبی با تمام نسخه های لینوکس هماهنگ هست و من تا حالا Error بابت این قضیه ندیدم ولی برای دیپلوی دایرکت آس به دلیل استفاده از پکیجی به نام Argon2 با هر نسخه ای جور نیست مثلا اگه سروری از نسخه لینوکس CentOS استفاده میکنه فرار کنین ?‍♀هر دوی این سیستم ها با سرورهای ویندوز هم سازگاری دارن و مشکلی که بالا راجبش صحبت شد پیش نمیاد!سخن پایانیاگه دولوپر هستین و با فریم ورک ها و لایبرری های Vue, Nuxt, React, Next و ... استفاده می کنین و نمیخواین سیستم بک اند Backend رو از صفر تا صد بنویسین یک سری به Strapi و Directus بزنین. هر دو جامعه بزرگی در گیت هاب دارن و هردو قدرتمند هستن و برای هر منظوری میشه ازشون استفاده کرد ?دلیل مخالفت من با وردپرس بحث یکی بودن بک اند و فرانت اند هست و حتی معتقدم اگه قسمت داشبورد وردپرس رو از فرانت جدا کنین و از وردپرس در یک ساب دامین استفاده کنین و فرانت رو در روت اصلی داشته باشین و از REST-API استفاده کنین به مراتب بهتر از استفاده به صورت دیفالت هست! و حداقلش اینه که به روز شدین!در آخر هر سوال و ابهامی داشتید می تونین در کامنت بپرسین، خدانگهدارتون باشه.

آموزش جامع Wordpress Rest API و Nuxt Js

Miss Dev — Wed, 23 Feb 2022 00:01:32 +0330

Wp Rest APIحدود یک سال پیش مقاله ای منتشر کردم که اینجا می تونید ببینید.توی این پست میخوام آموزش جامع تری بنویسم که چطور می تونین از Wordpress به عنوان بک اند در پروژه های Nuxt Js خودتون استفاده کنین. اگر درخواست ها بیشتر باشه قسمت دوم هم انتشار میدم در غیر این صورت فقط قسمت اول که همین پست هست رو توضیح میدم و بقیه ماجرا رو به خودتون میسپرم. البته در سایت خودمون هم بزودی آموزش جامع تری خواهم گذاشت که هنوز سایت تکمیل نیست و لینکش رو نمیذارم.اول به 2 تا سوال که ممکنه داشته باشین جواب میدم:سوال اول : وردپرس خودش به تنهایی میتونه یه سایت تمیز و خوب به ما بده چرا باید از API هاش استفاده کنیم؟جواب : اگه Rest API و استفاده ازش بی معنا بود که تولید نمیشد و وردپرس هیچ وقت ازش استفاده نمیکرد! با استفاده از این قابلیت دیگه شما نگران هک شدن سایت نیستین و عملا نیاز به افزونه های زیادی ندارید و برای همه پروژه ها قابل پیاده سازی هست و سرعت خوبی هم داره.سوال دوم : برای چه پروژه هایی قابل استفاده است؟جواب : برای همه پروژه ها با هر تکنولوژی که از Rest API پشتیبانی میکنه می تونین استفاده کنین. مثل: React, Vue, Nuxt, Next, Ruby, Ruby On Rails, Python و... و حتی اپلیکیشن Android و iOSخب بریم سر اصل مطلب، توی این پست برای قسمت اول آماده سازی مقدمات کار رو بهتون آموزش میدم و در قسمت دوم و یا شاید سوم همه چی رو دیگه تقریبا تکمیل می کنیم.اول از همه وردپرس خام رو دانلود میکنیم و روی لوکال هاست خودمون حالا استفاده از Xampp و Wamp و ... زیاد مهم نیست البته من خودم از Ampps استفاده میکنم. بعد از نصب که حالا احتمالا بلدین نصبش رو من فرض میگیرم که بلدین و نصب کردین و تمام ?برید داخل فولدر themes و هرچی هست پاک کنین اصلا بهشون نیاز نداریم، بعد برید داخل plugins اونجا هم یه فایل hello هست که من همیشه میبینمش Shift + Delete میکنم هرجا ببینمش ?برگردید داخل فولدر themes یه فولدر به هر اسمی که میخواین انتخاب کنین بسازید. 3 تا فایل باید بسازید، index.php, style.css, functions.php این سه تا رو ایجاد کنین.ما نیاز داریم هرکی ادرسی که برای بک اند هست حالا میتونه داخل هاستی که میخوایم فرانت اند رو داشته باشیم باشه یا هرجا اینم مهم نیست که البته پیشنهاد میکنم هم بک اند هم فرانت هردو یک جا باشن و بک اند داخل یه دایرکتوری دیگه ذخیره بشه یعنی همین فایل های وردپرستون. فرض بگیرید اسم سایتتون sample هست و اگه یه ساب دامنه ایجاد بشه به اسم : backend.sample.com چقدر زیباس!!!هر کی آدرس رو وارد کرد بره به آدرسی که فرانت اونجاس یعنی sample.com خب توی فایل index.php کدهای زیر رو قرار بدید:PHP Redicrectخب با کد بالا همین کارو انجام دادیم و آدرس backend.sample.com رو به فرانت sample.com ریدایرکت کردیم.برای اینکه وردپرس این تم رو بشناسه توی فایل style.css کدهای زیر رو قرار میدیم:/* Theme Name: Sample < اسم سایتتونAuthor: اسم خودتونAuthor URI: لینک سایتتونDescription: توضیح کوتاه راجب سایتVersion: 1.0 < هر ورژنی که هست */خب این اطلاعات مربوط به تمتون میشه که یه رکن اساسی هست و همه تم ها باید داشته باشن.حالا مهم ترین بخش کدهایی هست که باید در فایل functions.php وارد بشن.function allow_origin() { header( "Access-Control-Allow-Origin: *" );}add_action('init','allow_origin'); /* اجازه به وردپرس برای استفاده از تصویر شاخص */ add_theme_support( 'post-thumbnails' );تیکه کد اول که کامنت ننوشتم براش برای مشکل احتمالی CORS هست اگه نمیدونین چیه برید اینجا کامل بخونین.خب کار با تم تموم شد به همین راحتی و اصلا هم کار پیچیده ای نبود.چند تا افزونه یا Plugins هست که به نظرم حتما باید نصب کنین و اینم بگم ما داریم از Rest API استفاده میکنیم یعنی اصلا مهم نیست حتی اگه از افزونه های نال شده سالم استفاده کنید. من برای چند تا پروژه اینکارو کردم مشکلی پیش نیومد البته گفتم باید سالم باشه مخرب باشه میره میزنه دیتابیس رو داغون میکنه بد میشه.افزونه Advanced Custom Fieldsخب حتما میدونین که این افزونه برامون پست های سفارشی ایجاد میکنه و در صورت نیاز نصب کنین و اگر خواستین این پست های سفارشی رو توی Rest API هم داشته باشین:افزونه ACF to REST API هم نصب کنین که میاد و پست های سفارشی ایجاد شده رو در خروجی Json که ایجاد میشه بهمون میدهافزونه Classic Editorاین افزونه هم میاد یه ادیتور کلاسیک شبیه به Microsoft Word ایجاد میکنه که همه میشناسنافزونه REST API Featured Imageاین افزونه میاد همون تصاویر شاخص رو داخل خروجی Json و Rest API برامون نمایش میده که خیلی خیلی پیشنهاد میشه نصب کنین با اینکه دیگه آپدیت نمیشه و برامون مهم نیست بشه یا نشه نصب کنین.افزونه WP REST Cacheخب این افزونه خیلی واجبه نصبش میاد زمانی که از چیزی رو Get میکنین کش میکنه و سری بعد سریع تر همون رو باز براتون Get میکنه خیلی افزونه خوبی هست و سرعت رو بالا میبره حتما نصب کنین.افزونه JWT Authentication for WP-APIاین افزونه زمانی که اپلیکیشن یا پروژه فرانت شما نیاز به احراز هویت Login داره به کارتون میاد و کاربر بعد از Login یک توکن JWT میگیره و حالا خیلی بلاها میتونین سر کاربرتون در بیارید با این توکن که قسمت های آینده که بریم توی Nuxt بهتون آموزش میدم.افزونه WP REST Userاین افزونه هم برای ثبت نام و فراموشی رمز عبور به کارتون میاد که اینم اگه احراز هویت دارید حتما نصب کنین که آموزش کامل حتما داده میشه.افزونه Custom Post Type UIخب برای پست تایپ سفازشی نیاز پیدا می کنین به این افزونه و پیشنهاد من استفاده از این افزونه هست فایل functions.php رو برای نوشتن دستی کدهای مربوط به پست تایپ سفارشی کثیف نکنین بذارید سبک باقی بمونه.خب اینم از افزونه هایی که در این راه نیاز داشتین گفتم پیشنهاد کنم نصب کنین که قسمت های بعدی این آموزش جذاب میایم کلا از بیس باهاشون کار میکنیم تصویری.تا اینجا یاد گرفتیم یه تمپلیت اختصاصی برای بک اندمون ایجاد کنیم و در قسمت دوم میریم سراغ Nuxt Js اگه بلد هستین همراه بشین چون درس Nuxt رو نمیتونم ایجا بدم جاش نیست. حداقل اینه که Vue رو بلد باشین خود Nuxt پیچیدگی نداره خیلی راحته.آدرس این پست رو برای دوستاتون هم به اشتراک بذارین ( اگه دوس داشتین ) و حتما کامنت بذارین ببینم چند نفر تشنه یادگیری هستین که قسمت دوم هم انرژی داشته باشم بنویسم براتون.شاد باشین

استفاده از استرپی و ناکست

Miss Dev — Sat, 30 Oct 2021 15:44:40 +0330

Nuxt + Strapiسلام دوستان امروز میخوام راجب تجربه خودم از استرپی به عنوان بک اند و ناکست به عنوان فرانت رو براتون توضیح بدم.استرپی یک شعار داره: Design API's fast, manage content easily ترجمه: به سرعت ای پی آی طراحی کن، به راحتی محتوا رو مدیریت کن.قبل از اینکه کار با این به اصطلاح CMS رو شروع کنم راستش رو بخواین می ترسیدم سمتش برم! فکر میکردم خیلی سخته بخوام از بقیه سیستم های مدیریت محتوا بگذرم ?اکثر سیستم های مدیریت محتواهای رایج از Rest-API پشتیبانی میکنن ولی بالاخره دلمو زدم به دریا رفتم توی Documentation و دیدم با اکثر فریم ورک ها مچ شده و کار میکنه از Vue و Nuxt گرفته تا React, Angular, Next برام خیلی جالب به نظر رسید و یه پوشه درست کردم روی دسکتاپ و برای نصب آماده شدم.استرپی برای شروع نصب از CLI, Docker, DigitalOcean, Platform.sh پشتیبانی میکنه و از هر طریق قابل نصبه! من پیشنهادم از راه CLI هست چون راحت تره که جلوتر بهش اشاره میکنم.استرپی تا الان که دارم می نویسم فقط از نسخه های LTS ورژن های 12تا 14 برای Node استفاده میکنه و اگه ورژن شما بیشتر از این باشه با خطا مواجه میشین. دستورهای نصب:npx create-strapi-app نام پروژهyarn create strapi-app نام پروژهمن همیشه برای پروژه ها به جای اسم پروژه یک نقطه میذارم که توی همون فولدری که میخوام نصب کنه نه توی فولدر دیگه.وقتی استرپی کامل نصب شد با دستور yarn develop یا npm run develop وارد بخش ثبت نام میشین و بعد از اون وارد خود پنل اصلی میشین. استرپی با React نوشته شده بنابراین فوق العاده قوی و قابل اعتماده فقط گهگاهی ارورهایی میده که با رفرش کردن صفحه برطرف میشه.شما برای نصب پلاگین های اضافی نیاز دارین با Package management اونها رو نصب کنین و با یک سرچ کوچیک می تونین تعداد زیادی پلاگین در مخزن npm پیدا کنین.من با استرپی و ناکست تونستم چندین پروژه موفق ایجاد کنم شما هم می تونین ?خب دوستان در روزهای آینده کامل تر همراه با عکس و توضیحات کامل تر استرپی و ناکست رو کامل می کنیم.

استفاده از وردپرس به عنوان بک اند درست است؟

Miss Dev — Tue, 10 Aug 2021 14:43:11 +0430

خیلی ها از من پرسیدن که آیا درسته از وردپرس به عنوان بک اند در پروژه های فرانت اند استفاده کنیم یا نه؟جواب این سوال اینه‌ : چی چیزی دست شما رو برای این کار بسته؟! ?یک پستی توی ویرگول نوشته بودم قبلا که توی این لینک میتونین ببینین.شما می تونین توی پروژه های React, Vue, Nuxt, Angular برای بک اند از وردپرس کمک بگیرین! اینکه منطقی هست این کار یا نه بسیار اشتباهه...به عنوان مثال شما میتونین برای احراز هویت کاربرای اپلیکیشنتون از وردپرس استفاده کنین و برای عضویت,ورود و خروج کاربراتون از JWT وردپرس استفاده کنین.یا مثلا پست های وبلاگتون رو در پروژه فرانتتون Fetch کنین و نشون بدین یا هر پست تایپی که در وردپرس دارین میتونین توی فرانت نشون بدین و این کار عملا هیچ زمان غیر منطقی برای Load از کاربراتون نمیگیره و در کمتر از یک ثانیه نشون کاربر میده.پیشنهاد من اینه که پروژه فرانت و وردپرس رو توی یک سرور بیارید بالا که به مشکل CORS هم برخورد نکنین که البته توی پستی که لینکشو گذاشتم بالا توضیح دادم چطور این مشکل رو برطرف کنین.شما حتی میتونین فروشگاه ووکامرس خودتون رو هم در فرانت بدون هیچ محدودیتی داشته باشین و تنها راه خلاصی از سنگین شدن وردپرس بهینه سازی هست.هر سوالی داشتین در نظرات بپرسین سعی میکنم به تک تکشون جواب بدم.

انتخاب بهترین فریم ورک

Miss Dev — Thu, 29 Jul 2021 14:48:58 +0430

انتخاب بهترین فریم ورکسلام به همه ویرگولی ها من مدت زیادی نبودم و الان بعد از مدتی برگشتم و میخوام کمی درباره فریم ورک های ترند و برتر با شما صحبت کنم.دنیای برنامه نویسی روز به روز پیشرفت میکنه و ما باید خودمون رو با این تکنولوژی ها بروز کنیم! خب انتخاب های زیادی هم داریم.فریم ورک Django بر پایه Python:جنگو یک فریم ورک برای هسته پایتون که با معماری MVT که مخفف Model View Controller به معنی مدل نمایش کنترلگر است. جنگو از دیتابیس های زیادی پشتیبانی میکنه، از MySQL گرفته تا MongoDB.ساختار کلی جنگو رو در عکس زیر می بینید:مزایای جنگوپکیج اهراز هویت (Authentication)پنل ادمین پیشفرض و بسیار ماژولارپکیج Sessions برای مدیریت Session هامدیریت پیام‌های موقت یا پیام‌های Session-based با استفاده از پکیج Messagesتولید Google sitemap XML یا استفاده از پکیج Sitemapsبر پایه پایتونیادگیری ساده و تسریع روند کدنویسی و توسعه پروژهفریم ورک Ruby on Rails بر پایه Ruby:چارچوب Ruby on Rails به پایه مدل MVC ساخته شده. که مخفف Model View Controller است، شعال این فریم ورک : تصور کن چی میسازی وقتی اونو یاد بگیری... این شعار در نگاه اول کمی بلوف به حساب میاد ولی وقتی بیشتر غرق میشی توی دنیای اون متوجه میشی نه تنها شعار نیست بلکه کاملا درست هم هست. کار با این فریم ورک بسیار راحت و آسون است و پیشنهاد میکنم یک سری به سایت اصلی اون بزنین.مزایا :خوانایی بالا و Syntax دقیق نسبت به سایر رقباچند الگویی (Multi-Paradigm)مدیریت حافظه و Garbage-Collectorمناسب برای ساخت اپلیکیشن های تحت وبمتن باز و رایگان بودنداینامیک بودن و عدم نیاز به کامپال کردن کدهارضایت بالا و یادگیری سریع برای مبتدیانجامعه کاربری پر جمعیتکتابخانه های سرشاز از APIفریم ورک Laravel بر پایه PHP:زبان برنامه نویسی PHP یکی از برترین و محبوب‌ ترین زبان های برنامه ‌نویسی در حوزه طراحی وب است. این زبان برنامه نویسی Framework ‌های بسیار زیادی دارد که لاراول یکی از آن‌ها است. عاملی که فریم ورک لاراول را از سایر فریم ورک‌های زبان PHP متمایز می‌سازد، ویژگی‌های زیاد آن است. تا الان که دارم این متن رو می نویسم نسخه 8 اون وارد شده.مزایا :استفاده از معماری MVCمتن باز (Open Source) بودنآسانی در یادگیریافزایش سرعت توسعه پروژهامنیت بالابروز رسانی آسانآسان‌تر کردن اعمالی همچون احراز هویت (Authentication) ، مسیریابی (Routing) و Cache کردناستفاده از Remote Componentافزایش چشمگیر سرعت کد نویسیتوسعه برنامه بدون به خطر افتادن قابلیت‌ها و کدهای قبلی برنامهمحدود کردن Eloquent با استفاده از دستوراتی سادهقابلیت اجرای آزمایش‌‌های متعدد مانند Unit Testing با استفاده از دستوراتی سادهقابلیت دسترسی آسان به Database توسط Migration هاخط فرمان فوق العاده Artisanقابلیت ایجاد Package‌های مختلفاستفاده از خصوصیت auto-loadingاستفاده از ابزار ORMاستفاده کردن از موتور Template Bladeفریم ورک Vue بر پایه /h3>یک فریم‌ورک متن باز زبان JavaScript است که از آن برای توسعه رابط کاربری استفاده می‌شود. Vue.js برای اولین بار در دسامبر سال 2013 توسط Evan You، یکی از کارمندان سابق گوگل، به دنیا معرفی شد. شما می‌توانید از Vue در ساخت اپلیکیشن‌های تحت وب تک صفحه‌ای یا حتی وب‌سایت‌هایی در مقیاس بزرگ با ساختارهای مختلف استفاده کنید. همچنین می‌توانید کامپوننت‌هایی ایجاد کرده و در سایر بخش‌های پروژه یا حتی پروژه‌های دیگر از آن استفاده کنید.مزایا :حجم بسیار کمی داردساده و قابل فهم استیکپارچه استدارای مستندات کاملی می باشدبسیار انعطاف پذیر استدارای ارتباط دو طرفه استجمع بندی :اینها تنها بخشی از فریم ورک های رایج و ترند حوزه برنامه نویسی بود که به عرضتون رسوندم. هرکدوم مزایایی نسبت به همدیگه دارن و کمی انتخاب رو پیچیده میکنه! ولی نظر شخصی من برای استفاده از این فریم ورک ها استفاده از Laravel و Vue در کنار هم است. و البته قدرت Django و Ruby on Rails هم نباید نادیده گرفت.

پویا پارسا سرپرست تیم توسعه Nuxt.js

Miss Dev — Thu, 15 Apr 2021 13:34:36 +0430

پویا پارس: Head of Nuxt.js Developersبه نقل از وب سایت: passionatepeopleیک سال پیش ، این افتخار را داشتیم که از یکی از بهترین توسعه دهندگان در حال حاضر در صحنه فناوری ، پویا پارسا استقبال کنیم! پویا انتخاب شجاعانه خود را برای انتقال از ایران به هلند با کمک نیک ون دیک کرد. ما نمی توانیم بیشتر از نیک بخاطر انجام چنین کار عالی نه تنها یافتن بهترین پروژه های مناسب برای توسعه دهندگان، بلکه کمک به آنها برای شروع زندگی خود در اینجا در هلند ، سپاسگزار باشیم.وی پویا را از فرودگاه تحویل گرفت و پس از اقامت کوتاه در هتل دانشجویی آمستردام ، به او کمک کرد تا خانه ای در هارلم پیدا کند. او حتی با او به IKEA رفت تا به او کمک کند مبلمانش را بخرد و مکان را دنج کند!نیک و دیک و پویا پارسا در فرودگاهکنجکاوی و عشق پویا به آزمایش در مورد کدگذاری صدق می کند، او دوست دارد هنگام آشپزی نیز این کار را انجام دهد! یکی از نکات فوق العاده مخفیانه آشپز وی استفاده از نمک به همراه آب پرتقال است! او می گوید مردم مانند او دیوانه به او نگاه می کنند اما گفته قدیمی این است که هر نابغه ای کمی دیوانگی در او وجود دارد. او یک دوستدار حیوانات است، پویا دو گربه در خانه دارد ، نانی و پانی.نانی و پانیدر دسامبر ، پویا فرصتی پیدا کرد تا برای کنفرانس DotJS پاریس از شهر نور ، پاریس دیدن کند. او توسط تیم Passionate People ما برای یادگیری، توسعه و معاشرت با سایر افراد برجسته صنعت توسعه به آنجا اعزام شد ، چیزی که قبلاً فرصتی برایش نداشت. ما می خواستیم تمام کمکهای لازم را برای شکوفایی بالقوه خود به او بدهیم.ایوان یو خالق ویو و پویا پارسا مدیر توسعه ناکست و سازنده ویو بوت استرپفوریه ماه بزرگی برای پویا بود زیرا وی در زمان سازماندهی Vuejs Amsterdam وارد سمت مدیر فنی شد! وی به همراه یکی دیگر از توسعه دهندگان ما ، کریس ویسر ، در سازماندهی ترکیب نقش مهمی داشت. با این کار کریس میزبان 27 سخنران مشهور جهان بود. پویا نیز در میان آن 27 نفر بود و این افتخار بزرگی برای او بود زیرا اولین بار بود که در یک صحنه بزرگ در حضور بیش از 2000 نفر سخنرانی می کرد! دوستانش از آن سوی کره زمین Livestream او را تماشا می کردند و حتی در طی یک مسابقه آنلاین یکی از آنها مجوز نمایندگی Vuemaster را کسب کرد! سرانجام ، پویا با مصاحبه با سخنرانان و گفتگوهای دوست داشتنی با رهبران جهان پیش رو به ایجاد قسمت های پادکست بسیار آموزنده کمک کرد.پویا پارسا در سخنرانیگردهمایی های مجازی به یک امر عادی تبدیل شد و هر هفته با هدف سازماندهی جامعه و ایجاد مثبت در این اوقات ، سازماندهی می شد. از آن زمان ، در مجموع 13 نشست آنلاین با حدود 32 سخنران انجام شده است که در مورد Nuxt & Static Sites ، کدگذاری خلاقانه با Svelte ، ساخت اجزای قابل دسترسی در React ، برنامه نویسی کاربردی و موارد دیگر گفتگوهای مجازی انجام می دهند! پویا همچنین سخنران برجسته میهمان یکی از این رویدادها بود و در مورد وضعیت عملکردهای Nuxt صحبت کرد!در ماه آوریل، ما توسعه دهندگان خود را با یک بسته ناهار تحویل داده شده در خانه شگفت زده کردیم تا از اینکه در حالی که آنها از خانه کار می کنند لذت ببرند! پویا نیز بخشی از این گروه (گرسنه) بود!رویداد بزرگ دیگر امسال کنفرانس جهانی Vue.js بود که توسط Vue.js آمستردام در 17 و 18 سپتامبر برای شما به ارمغان آورد! این رویداد استثنایی در پاییز بیش از 25 متخصص برجسته از 20 کشور مختلف در صنعت را جمع کرد و اخبار اختصاصی Evan You را فاش کرد! پویا همچنین یکی از افرادی بود که با سخنرانی خود درباره معماری Nuxt تجربه ارزشمند خود را با حاضران در میان گذاشت.پروژه های پویا پارسا:پویا در Booking.com کار می کند.پویا: Vuejs هم کار میکند.رئیس چارچوب Nuxt.سازنده فریم ورک BootstrapVue.حقایق جالب درباره پویا:پویا وقتی دیگران اطرافش خوشحال می شوند خوشحال می شود.حیوان روح او گربه است.به گفته وی ، آب پرتقال با نمک "طعم و مزه بهشت" است.منبع: passionatepeopleمن به عنوان یک عضو کوچیک این صنعت و یک ایرانی به پویا افتخار میکنم که پرچم ایران رو در این ابعاد حفظ کرده.

تجربه من از کار با Nuxt

Miss Dev — Tue, 13 Apr 2021 13:09:09 +0430

https://nuxtjs.org/سلام، این اولین پست من در سال جدید هست. خب باید بگم به عنوان عضوی از جامعه اوپن سورس و جامعه برنامه نویسان با اکثر لایبرری ها و فریم ورک ها کار میکنم، از React گرفته تا Angular، Ruby on rails، Express، Next و البته NodeJS که از همه اینا که بگذریم من به شخصه از ساختار VueJs خوشم میاد. یه ساختار قابل فهم، آسون و تمیز. این تمیزی به حدی هست که اگر کسی کمی از جاوا اسکریپت بدونه به سادگی اگر به View ها Component ها نگاه کنه میتونه بفهمه چه خبره!بعد از اینکه NuxtJs به واسطه VueJs پا به عرصه گذاشت همه جا پر شد از اینکه Nuxt نسخه تکامل یافته ای از خود Vue بحاسب میاد و مسائلی مثل Server Side Rendering خیلی بولد شد و سر زبون ها پیچید.الان حدودا از سال 2019 که نسخه 2.9.2 منتشر شده دارم باهاش کار میکنم. اوایل چنگی به دلم نزد ولی از نسخه 2.10.0 نظرم کامل برگشت و شروع کردم به خوندن مستنداتش. اینو به عنوان یه دوست بهتون میگم، هر تکنولوژی سمت وب منتشر میشه همیشه Documentation اش رو خوب مطالعه کنین. از شروع این پست 13 روز میگذره که نسخه 2.15.4 منتشر شده و تغییراتی داشته ولی من از 2.15.3 استفاده میکنم.خب تا اینجا خیلی حرف زدم راجب نسخه ها و... برسیم سر تجربه که واسه اونایی میگم که هنوز سمتش نیومدن و حالا یا از ترس تست چیزای جدیده یا نمیدونم!!! چون دلیلی نداره کسی که Vue کار میکنه Nuxt رو ندید بگیره!اول اینکه باید بگم هر چی از ویو میدونین بذارین کنار چون قرار هست خود ویو ساده تر باشه. خیلی خیلی ساده تر!خب برای شروع یه فولدر ایجاد میکنین به هر اسمی که دوس دارین. بعد اگر با npm کار میکنین این دستور: npm init nuxt-app بعد یه نقطه بعد از nuxt-app بزنین تا در همون فولدر با همون اسم پروژه شروع شه که نیاز نباشه فولدر جدا ایجاد کنین. و اگه yarn کار میکنین این دستور: yarn create nuxt-app اینجا هم همین طور یک نقطه بندارین که راحت تر باشین و بعد از نصب اگه نگاه کنین فولدرهای جدید میبینین که توی Vue نیست.ساختار راهنما یا DIRECTORY STRUCTURE:.Nuxt, Content, Layouts, Middleware, Pages, Static, Nuxt.configفولدر nuxt. این فولدر همینطور که قبلش نقطه هست بصورت Hidden هست و اتوماتیک ساخته میشه جلوتر بهتون توضیح میدم.فولدر content این بخش اضافه است یعنی در صورتی به فایلها اضافه میشه که ماژول مخصوصش نصب باشه یعنی nuxt/content@ وقتی این ماژول رو نصب کنین انگار محتوای داینامیک Markdown یا Json دارین و محتوا رو Fetch مکنین!فولدر layouts فایل هایی که اینجا تولید میکنین جزو صفحات اصلی بحساب میان مثل App.vue در Vue ولی بصورت سازمان یافته و کامل تر اینجا میتونین صفحات پیش فرض رو بسازید مثل صفحه error یا blog یا هرچی که قراره ساختار کلی ثابت داشته باشه.فولدر middleware یه زمان هایی هست شما نیاز هست توابع سفارشی داشته باشین که بخواین قبل از برگه های اصلی و ثابت رندر بشه، مثل توابع auth که باید دقت داشته باشین به عنوان اولین argument حتما context رو باید اختصاص بدین.فولدر pages همین طور که اسمش پیداس صفحه ای هست که برای ساخت router ها هست و هر برگه ای که اینجا بسازین بدون اینکه نیاز باشه به router معرفی بشه خودش اتوماتیک ساخته میشه! این یکی از قشنگیای ناکست هست همین طور که اولشم عرض کردم ناکست اومده که ویو رو از این هم ساده تر کنه.فولدر static خب اینم از اسمش مشخصه فایل های ثابت مثل css, fonts, favicon, logo رو میتونین اینجا تشکیل بدین. تازه میتونین توی static قرار ندین فونت و استایل هاتون رو! توی پوشه assets قرار میدین و در nuxt.config با alias تنظیم میکنین.و اما اصلی ترین ساختار یعنی nuxt.config این فایل شبیه به فایل main.js در Vue عمل میکنه ولی ساده تر. هر تنظیمی درباره پروژه تون هست توی این بخش اتفاق میوفته اعم از معرفی متا تگ ها گرفته تا معرفی plugin و css ها و alias ها و تنظیمات build و pwa و... همه در این فایل جا میگیرن.خب یکم از جذابیت های ناکست هم بگم. یکی از جذابیت های خیلی باحالش برای یک توسعه دهنده آزادی عمل بسیار بالاس، قرار نیست اذیت بشین هر باری که بخواین صفحه بسازین هی برید توی router.js بخواین به پروژه معرفیش کنین. کافیه توی فولدر pages فقط فایل هاتونو بسازین تا خودش بره بشینه توی router و میتونین هر بار برید به فولدر nuxt. و router رو ببینید.?یکی دیگه از جذابیت هاش اینه که اگه components: true رو توی nuxt.config هر جایی بعد از شروع این فایل یعنی export default قرار بدین تا بعد از اینکه کامپوننتی میسازین دیگه نیاز نباشه بخواین از import برای وصل کردن به برگه هاتون استفاده کنین. نه نیاز به import دارید نه export ? فقط پیشنهاد میکنم کامپوننت ها رو متمایز و خاص ایجاد کنین این مهمه که چه اسمی بهش میدین. سعی کنین یونیک انتخاب کنین و از این اسم دو بار استفاده نکنین.یکی دیگه از جذابیت ها زمانی هست که از pwa استفاده میکنین. توی Vue باید میومدین کلی لوگو به سایزهای مختلف درست میکردین. توی ناکست یک لوگوی با کیفیت درست کنین بذاریدش توی فولدر static و تمام... حالا توی nuxt.config تنظیمات pwa رو انجام میدین و اون لوگو خودش اتوماتیک به سایزهای مختلفی که میخواین تقسیم میشه. ? برای اطلاعات بیشتر راجب nuxt/pwa@از جذابیت های i18n هم بگم که خیلی خیلی راحت میتونین فارسی رو بهش اضافه کنین و تنظیماتش رو انجام بدین تا برگه ها خود به خود برای زبان های مختلف تنظیم بشن. برای نصب ماژول nuxt/i18n@ مراجعه کنین.راجب SSR هم یه توضیح مختصر بدم که خیالتون راحت شه. اول اینکه برای استفاده از این مبحث مهم که برای سئو بسیار بسیار مهمه. سروری که قراره استفاده کنین حتما باید از Node.js پشتیبانی کنه. تنظیمات مربوط به سرور باید در middleware تحت عنوان server-middleware انجام بدین. اگه میخواین این بخش رو مطالعه کنین: server-side-renderingیه چندتا ماژول ناکست هم معرفی میکنم.ماژول pwa / ماژول auth / ماژول axios / ماژول sitemap / ماژول google-analytics / ماژول color mode / ماژول image / ماژول cloudinary / ماژول shopify / ماژول sentry خب این بود توضیحات جامع و تجربه من از Nuxt.js که امیدوارم استفاده کرده باشین. در آخر آرزوی سلامتی و موفقیت دارم برای همه شمایی که این پست رو میخونین. خیلی دوست داشتم این پست رو یک روز بذارم با اینکه 4 سالی میشه باهاش اشنا هستم و حرفه ای کار میکنم.موفق باشید.

استفاده از وردپرس به عنوان بک اند

Miss Dev — Sun, 29 Nov 2020 12:15:09 +0330

سلام به همه ویرگولی ها خصوصا فرانت اند دولوپرها ( توسعه دهندگان فرانت اند ) در این مطلب قصد دارم استفاده از وردپرس به عنوان بک اند در وب اپلیکیشن های Vue,React,Angular و... را آموزش بدم.برای شروع یه دایرکتوری جدا باید در پنل هاست خودتون ایجاد کنید ( Addon Domain ) و وردپرس رو نصب کنین. موقع نصب حتما تیک گزینه از موتورهای جستجو درخواست کن تا محتوای سایت را بررسی نکنند رو حتما بزنین.افزونه هایی که باید نصب کنین:افزونه Akismet Spam Protection ( که البته به صورت پیش فرض نصب هست )افزونه Persian Date ( برای تاریخ شمسی )افزونه ACF و ACF to Rest API ( برای ساخت زمینه سفارشی و نمایش زمینه ها در رست ای پی آی )افزونه Smush - Lazy load images ( برای کم کردن حجم عکس ها )خب این بود از افزونه هایی که برای کار با ای پی آی به دردتون میخوره و بهتره نصب کنین.خب پس از نصب وردپرس شما نیاز به هیچ کدوم از قالب های پیش فرض ندارید و همه رو پاک کنین یه فولدر قالب ایچاد کنین و نیاز به 2 تا فایل بیشتر ندارد index.php و functions.php این دو فایل رو ایجاد کنین.خب در فایل index.php میایم یه تیکه کد جاوا اسکریپت قرار میدیم که اگر کسی دایرکتوری بک اند ما رو فهمید و خواست باز کنه یک راست وارد فرانت ما بشه ( همون دایرکتوری که قراره وب اپلیکیشنمون باشه )frontend = your domainخب تا اینجا کار صفحه index.php تموم شد و آدرس سایت اصلی که همون اپلیکیشن Vue یا React یا Angular و ... خودتون هست رو جایگزین کنین.در فایل functions.php اصلی ترین بخش کار ما است و تمام تنظیمات Rest API اونجا انجام میشه و خیلی مهمه. در این فایل یه سری کد رو باید قرار بدیم اولین کدی که باید قرار بدیم دسترسی CORS هست که اگه تنظیم نشه نمی تونین با API در اپلیکیشن خودتون کار کنین:CORS header Accessچند تا کد دیگه قرار میدم براتون برای راحتی کار، یه مشکلی که ممکنه باهاش برخورد کنین مشکل تاریخ در پست تایپ ها و نوشته هاس که فرمتی که شما در تنظیمات اصلی وردپرس برای تاریخ انجام میدین رو در بخش wp-json نشون نمیده و کلی اذیت کنندس، برای رفع این مشکل باید یک رست ای پی آی برای تاریخ ایجاد کنین:formated date rest apiدر کد بالا که نوشتم در قسمت array پست تایپ هایی که به تاریخ نیاز دارن رو وارد کنین.مشکل بعدی که باهاش برخورد میکنین برای گرفتن عکس های تصویر شاخص مطالب هست. برای اینکه بدون دردسر بتونین تصویرها رو در wp-json شناسایی کنین و بگیرید نیاز به یک تکه کد دیگه دارین:با نوشتن کد بالا اول میایم میگیم id مرتبط با هر تصویر رو بگیر بعد بیا برامون یه نقطه Rest درست بکن به اسم featured_image شما میتونین هر اسمی که دوس دارین قرار بدین. و گفتیم به پست تایپ post این نقطه رست ای پی آی رو تزریق کن که هر پست تایپی که دارین میتونین وارد بکنین.خب دوستان کدهایی که عکس گذاشتم ازش از کامپیوتر خودم هست و تجربیات خودم هست، اگه جایی خواستین این مطالب رو نشر بدین با ذکر منبع این کارو بکنین ممنون میشم.و در آخر هر سوالی در این زمینه داشتین کامنت بذارین در اصرع وقت جواب میدم. ممنون که تا اینجا همراه من بودین. موفق باشین.

مستند ایوان یو خالق Vue

Miss Dev — Mon, 23 Nov 2020 13:11:16 +0330

https://www.youtube.com/watch?v=OrxmtDw4pVI حتما این مستند رو ببینید شاید براتون جالب باشه که ایوان از کجا به اینجا رسید: یه دولوپر معمولی بوده که با جاوا اسکریپت کار میکرده و یه اپ موبایل میسازه و یه روز گوگل بهش پیشنهاد همکاری میده توی یکی از ساختمان های واقع در نیویورک و ایوان به اونجا میره و چند سالی کار میکنه تا زمانی که Angular js بوجود میاد و بخاطر ساختار Angular میاد به این فکر میکنه که چرا خودم یه فریم ورک جاوا اسکریپت برای خودم نسازم؟! و اینجا بود که استارت میخوره Vue و وقتی اولین ورژن رو به نام Seed.js منتشر میکنه از اسمش راضی نبوده و چون ساختار این فریم ورک Viewmodel هست میاد سرچ میکنه این کلمه رو به زبان های مختلف تا میرسه به فرانسوی View که میشه Vue و بعد این اسم رو با Seed جایگزین میکنه و به این ترتیب Vue شکل میگیره.اگر به زبان انگلیسی مسلط هستین این ویدیو رو حتما ببینید.

معرفی یه کامپوننت بامزه برای Vue

Miss Dev — Sat, 21 Nov 2020 22:55:20 +0330

Kinesis for interactive animationsاکثر طراح های وب با Interactive Animation ها آشنا هستن. با گردش ماوس روی صفحه المان های وب حرکت می کنن! در جی کوئری کلی پلاگین برای این کار پیدا میشه که بعضا خیلی پرحجم هستن یا خوب نوشته نشدن و لَگ و باگ زیاد دارن اما برای فریم ورک محبوب Vue هم کامپوننت هایی در سراسر وب پیدا میشه اما یکی از بامزه ترین اونها رو میخوام بهتون معرفی کنم (:این کامپوننت حالت های مختلف داره و یکی از قابلیت های جالبش برای پخش موزیک هست طوری که وقتی موزیک پخش میشه المانی که براش مشخص میکنین با موزیک Reaction نشون میده (:از این لینک می تونین دمو رو مشاهده کنین. همچنین برای نصب و اطلاعات بیشتر لینک گیتهاب

استفاده از Vue بدون Webpack

Miss Dev — Wed, 18 Nov 2020 15:30:13 +0330

با Vue خیلی ها آشنا هستن و خیلی ها نیستن، به زبان ساده یک فریم ورک جاوا اسکریپت هست که برای ساخت وب اپلیکیشن های تک صفحه یا SPA که مخفف Single Page Application هست. این به این معنی نیست که شما کل صفحه هاتون رو در یک صفحه نمایش بدین! خیر. منظور از تک صفحه اینه که پیمایش بین صفحات وب اپلیکیشن تون بدون Load صورت میگیره و حس جالبی میده و به قول جادی: و از این جور چیزها! (((: خلاصه که با Vue خیلی خوش میگذره بهتون و اگه تا الان امتحانش نکردین شدیدا توصیه میکنم یک بارم که شده نیم نگاهی بهش بندازین. یادگیریش فوق العاده راحته به شرطی که پیش زمینه از مکانیزم شی گرایی و جاوا اسکریپت داشته باشید که راحت تر بتونین باهاش کار کنید. در ضمن اینم بگم که حتما نیاز نیست از Webpack و Node و Npm استفاده کنید! با یکم سرچ و جستجو با کلید واژه : HttpVueLoader به راه حل جالبی میرسید که خیلی راحت ولی با یکم تفاوت در متودهای اصلی میتونین بدون دردسر با پکیج منیجر و سر و کله زدن با دستورات مختلف پروژه کاملا Vue.js خودتون رو روی هر سرور و هاستی حتی هاست های اشتراکی به راحتی Deploy کنین و پروژه خودتون رو به قول معروف لانچ کنید.این اولین نوشته من در ویرگول هست اگه کم و کاستی هست ببخشید.