نوشته های pooria vakili

فرق virtual dom , shadow dom در جاوااسکریپت

pooria vakili — Thu, 03 Oct 2024 23:40:41 +0330

اگر مفهوم shadow dom متوجه بشوید فرق react با vue.js متوجه می شویدوچرا react virtual dom ولی shadow dom نیستدر ,vue js ,react این طوری استبه این مفهوم virtual dom میگویند ولی در ویو جی اس شما با دو حالت در ارتباطید یکی virtual dom shadow dom حالت دوم در مفهوم در ویوجی اس به نام teleport که اینطوری که در کامپونت ها استفاده می کنید به عنوان مثالدر react شما با state set state یا use state کار میکنید ولی در ویوجی اس برای مفهوم virtual dom با v-model data یا ref کار می کنیددر واقع در react برای این که کارهای dom انجام می دهیم با jsx کار میکنیم.مفهوم virtual dom در یک عکسمفهوم shadow dom در یک عکسمفهوم slot در vue.jswhat virtualdom?در virtual dom در JavaScript و React یک مفهوم مهم است که عملکرد و کارایی برنامه‌های کاربردی را بهبود می‌بخشد. من به شما مفاهیمی از Virtual DOM ارائه می‌دهم:تعریف Virtual DOMدر virtualdom یک مدل مجازی از DOM (Document Object Model) است که در حافظه سیستم ذخیره می‌شود این مدل یک نمای دقیق از ساختار و وضعیت DOM واقعی استمزایای استفاده از Virtual DOMکارایی بالا:تغییرات در Virtual DOM بسیار سریع‌تر از تغییرات در DOM واقعی انجام می‌شود .این امر بهینه‌سازی فرآیند آپدیت و بهینه‌سازی منابع سیستم کمک می‌کند.کاهش عملیات DOM:تنها تغییرات ضروری در DOM واقعی اعمال می‌شوند،سازگاری با API های اتی:در virtual domاجازه می‌دهد از API‌های اتی React استفاده کنیم نحوه کارکرد Virtual DOMایجاد:هر بار که حالت برنامه تغییر کند، Virtual DOM به روز می‌شود .تطبیق:در react virtualdomرا با DOM واقعی تطبیق می‌دهد .آپدیت:تنها تغییرات لازم در DOM واقعی اعمال می‌شوند .تفاوت Virtual DOM با DOM واقعیدر virtualdom یک مدل مجازی است که در حافظه ذخیره می‌شود در Dom واقعی مدل واقعی ساختار وب است که توسط مرورگر‌ها مدیریت می‌شود اهمیت در Reactدر virtualdomبه React اجازه می‌دهد یک API اتی را ارائه دهد این مفهوم بهینه‌سازی فرآیند آپدیت و بهینه‌سازی منابع سیستم را ممکن می‌سازد .نکات مهمدر virtual domیک مفهوم کلی است که توسط کتابخانه‌های مختلفی مانند ReactDOM پیاده‌سازی می‌شود در React، Virtual DOM با عناصر React (React elements) مرتبط است درReact از اشیاء داخلی دیگر مانند "fibers" نیز برای ذخیره اطلاعات اضافی درخت کامپوننتی استفاده می‌کندنتیجه‌گیریدر virtual domیک مفهوم کلیدی در توسعه برنامه‌های کاربردی مدرن است. این مفهوم بهینه‌سازی کارایی و کارایی برنامه‌ها را فراهم می‌کند و اجازه می‌دهد از API‌های اتی استفاده کنیم. در زمینه React، Virtual DOM نقش مهمی در ساختار و عملکرد کامپوننتی‌ها ایفا می‌کند.در (Shadow DOM) در جاوااسکریپت یک مفهوم مهم در توسعه وب است که به طور خاص در وب کامپوننت‌ها کاربرد دارد. من به شما مفاهیمی از Shadow DOM ارائه می‌دهم:تعریف Shadow DOMدر یک زیر درخت DOM خصوصی است که درون یک عنصر وب کامپوننتی وجود دارد. این زیر درخت از نظر DOM اصلی مستقل است و فقط توسط مرورگر قابل دسترسی است .مزایای استفاده از Shadow DOMانکپسولاسیون: Shadow DOM اجازه می‌دهد جزئیات اجرای داخلی یک عنصر را از بقیه صفحه پنهان کند .عملکرد بالا: این تکنیک بهینه‌سازی فرآیند رندرینگ پیچیده‌های UI را ممکن می‌سازد .امنیت: سطحی از جدایی بین بخش‌های مختلف یک صفحه وب فراهم می‌کند .نحوه کارکرد Shadow DOMپیاده‌سازی مرورگر: مرورگرها Shadow DOM را برای ایجاد عناصر وب و رابط‌های کاربری مرتبط استفاده می‌کنند .جدایی: Shadow DOM یک حاشیه بین DOM عمومی و جزئیات اجرای داخلی ایجاد می‌کند .رندرینگ خصوصی: این زیر درخت DOM خصوصی به طور مجزا از DOM اصلی رندر می‌شود .مزایای Shadow DOMمدیریت سبک: CSS خاص خود را دارند که نمی‌توانند توسط انتخاب‌کنندگان خارجی دستکاری شوند امنیت: به اندازه کافی امن است تاجزئیات اجرای داخلی را پنهان کند محدودیت‌هادسترسی محدود: استاندارد DOM API‌ها نمی‌توانند به عناصر درون Shadow DOM دسترسی پیدا کنند محدوده مرورگر: تنها مرورگرهایی که پشتیبانی از Web Components را دارند، Shadow DOM را پشتیبانی می‌کنند .در (Shadow DOM) و (Virtual DOM) دو مفهوم مهم در توسعه وب هستند که هر کدام وظایف و مزایای دارند. من به شما تفاوتی بین این دو ارائه می‌دهم:هدف: برای بهبود عملکرد توسط کاهش تعداد عملیات DOM مورد نیاز در هنگام بهینه‌سازی طراحی شده است بر اساس مفهوم انکپسولاسیون طراحی شده است و محیطی محدود برای CSS و JavaScript فراهم می‌کند نحوه کارکردیک مدل مجازی کامل از DOM واقعی است که در حافظه ذخیره می‌شود .یک زیر درخت DOM خصوصی درون یک عنصر وب کامپوننتی ایجاد می‌کند .مزایایبهینه‌سازی فرآیند آپدیت و بهینه‌سازی منابع سیستم را ممکن می‌سازد محدوده کاربردتوسط کتابخانه‌های JavaScript مانند React و Vue.js پیاده‌سازی می‌شود توسط مرورگرها پیاده‌سازی می‌شود و بخشی از استاندارد Web Components است منابع chatgpt https://www.freecodecamp.org/news/virtual-dom-vs-shadow-dom/

انواع token در برنامه نویسی فرانت اند

pooria vakili — Thu, 12 Sep 2024 22:45:58 +0330

در این پاسخ، من به تفاوت‌های اصلی بین توکن‌های دسترسی (access token)، توکن‌های بازنویسی (refresh token) و توکن‌های معمول (normal token) اشاره خواهم کرد.توکن‌های دسترسی (Access Token)حاوی اطلاعات کاربر و مجوزهای مورد نیاز استمعمولاً دارای زمان انقضای کوتاه (هر چند ساعت یا روز) استبرای هر درخواست به سرور ارسال می‌شوندنباید در محیط کلاینت ذخیره شوندتوکن‌های بازنویسی (Refresh Token)حاوی اطلاعات کاربر است اما جزئیات کمتری نسبت به توکن‌های دسترسیمعمولاً دارای زمان انقضای طولانی‌تر استذخیره می‌شوند و فقط زمانی استفاده می‌شوند که توکن دسترسی شودباید با دقت نگه‌داری شوند تا از سوءاستفاده جلوگیری شودتوکن‌های معمول (Normal Token)این اصطلاح معمولاً برای توکن‌هایی استفاده می‌شود که ویژگی‌های خاصی ندارندممکن است ترکیبی از ویژگی‌های توکن‌های دسترسی و بازنویسی داشته باشندعمر آنها می‌تواند کوتاه یا طولانی باشد، بسته به طراحی سیستمتفاوت‌ها1. زمان انقضاء:Access token کوتاه‌مدتRefresh token طولانی‌مدتNormal token می‌تواند کوتاه یا طولانی‌مدت2. نحوه استفاده:Access token برای هر درخواست به سرورRefresh token برای تجدید توکن دسترسیNormal token بسته به طراحی سیستم، ممکن است برای هر دو هدف استفاده شود3. ذخیره‌سازی:Access token معمولاً در محیط کلاینت ذخیره نمی‌شوندRefresh token در محیط کلاینت ذخیره می‌شوندNormal token روش ذخیره‌سازی آن بستگی به طراحی سیستم دارد4. امنیت:Access token نیاز به امنیت بالا داردRefresh token نیاز به امنیت بالایی دارد و باید با دقت نگه‌دارده شودNormal token نیاز به امنیت مناسب دارد، اما ممکن است کمتر از توکن‌های دسترسی و بازنویسی باشدبهترین شیوه‌هاهمیشه از HTTPS برای انتقال توکن‌ها استفاده کنیدتوکن‌های دسترسی را در محیط کلاینت ذخیره نکنیدتوکن‌های بازنویسی را با دقت نگه‌دارید و فقط در سرور ذخیره کنیدسیاست چرخش توکن‌ها را پیاده‌سازی کنیدمکانیزم لغو توکن‌های بازنویسی را داردبا در نظر گرفتن این تفاوت‌ها و بهترین شیوه‌ها، شما می‌توانید از مزایای توکن‌های مختلف در حالی که همچنان امنیت سیستم خود را حفظ می‌کنید، استفاده کنید.

grid flex position in css

pooria vakili — Sat, 07 Sep 2024 00:40:07 +0330

فرق grid ,flex در طرح کدام بهتر است انتخاب کنم flex یک بعدی ولی grid دو بعدی فرض بگیرید یک صفحه کل وب width 100% قرار دادید و دو عکس دارید که width هر کدام ۵۰ است در flex دو تا راه حل دارید یک سکشن div کلی که width درصد 100 است درست می کنید و یک div که 50 درصد است درست می کنید و div دوم هم ۵۰ درصد قرار می دهید راه حل دوم از سینتکس flex در css استفاده می کنید flex basis flex grow flex shrink .div {flex:1 50٪ 0 } در حالت flex basis شما می توانید مثل width عمل کنید در تیلویند ۱.۲،۲.۳ ۳.۴ ۵.۶ تا اونجایی که می دانم دارد ولی در گرید این مسئله کاملا فرق دارد همه ضلع وب کلا ۱۲ قسمت است که اگر دو تصویر ۵۰ % است اینطوری است دو تا div grid cols 6 درست می کنید فرض می گیرم دو تا الامنت بغل هم درست کنیم هم با grid flex چه طوری با flex یک دیو کلی درست می کنید جای justify یا align مشخص می کنید و آن ها بغل هم درست می کنید در grid چه طوری گرید درست که دیفالت زیر هم قرار می گیرید ولی وقتی،از flow که بغل هم و column که اون به ۱۲ قسمت تبدیل کنید استفاده می کنید و بغل هم قرار می دهید ولی در flex این column به row تبدیل می شود و در گرید برعکس هم است مثلا grid grid rows از یک تا ۱۲ زیر هم grid cols از یک تا ۱۲ بغل هم قرار می گیرند بعد هم می توانید از align justify یا همه اینها با place درست کنید و در گرید راه حل بعدی وجود دارد grid template columns که برای همه px rem em استفاده می کنید که بغل هم چقدر باشد grid template rows که زیر هم چقدر باشد و حتی می توانید grid کوتاه بنویسد مثلا گرید دو قسمتی دارید یک div کلی grid grid cols 2 div 1 justify start div 2 spanاین یعنی آخر قرار بگیرید پس شما می توانید هم با flex و گرید طرح درست کنید این طور نیست که فقط یک راه حل داشته باشید وقتی تجریه تحلیل می کنید دو راه حل دارید که هر کدام کلی راه حل دارد که با توجه به طرح ها کلی راه حل نشان می دهد من تو شرکت هاکوپیان یک همکار فرانت اند دولوپر داشتم اون بین همکاران یک رقابت درست کرد که شما هر طرحی با flex در همه رزولیشن مدیا کوئری درست کنید من همان با grid در همه رزولیشن مدیا کوئری،درست می کنمposition in cssقسمت دوم همین پست در قسمت اول در مورد grid flex صحبت کردم در این قسمت position ,float صحبت می کنمکلا position به ۵ قسمت تقسیم بندی می شوند1) static 2) sticky 3) fixed 4) relative 5)absolute1) static عملا شما سایتی استایل ندهید position static در مروگر نشان می دهد حتی شما از آن استفاده نکنید 2) sticky فرض بگیرید یک هدر و متن دارید و قصد دارید مروگر وب اسکرول می گیریم همه جا اون ببینم از position sticky استفاده می کنم 3) fixed از fixed در دو جا استفاده می کنیم مثل sticky استفاده می شود یعنی اگر هدر و متن داشته باشید و قرار باشید هدر در همه جای صفحه نشان داده شود از fixed استفاده می کند بیشترین استفاده position fixed در مدال است استفاده دوم من می خواهم یک چیز،پایین ترین حالت ممکن سمت راست یا چپ قرار دهم از fixed استفاده می کنم مثلا با این position navigation bar یا bottom navigation درست کنید 4) absolute,5)relative این دوتا به هم خیلی مربوط هستند فرض بگیرید ۵ تا رادیوباتن دارید که ازهم فاصله داشته باشند که از relative absolute چند حالت می دهید right left bottom top که در کلاس تیلیوند اینها inset خلاصه کرده است و استفاده دوم این فرض بگیرید دو تصویر بغل هم قرار دهیم اولی relative دومی absolute قرار می دهیم فرض بگیریم متن در تصویر قرار بگیریم دو راه حل داریم absolute relative یا relative index است https://lnkd.in/dqshjd8uحالت float فرض بگیریم می خواهیم دو تا متن داریم یکی سمت راست سمت چپ

سلام سمت چپ حالت ممکن قرار بگیرید

div class float right >سلام در سمت راست حالت ممکن قرار بگیرید

که این سینتکس شبیه به حالت flex justify content between می باشد

thunder client in vs code

pooria vakili — Fri, 06 Sep 2024 11:58:47 +0330

اگر مثل من برای برنامه نویسی فرانت اند از vs code استفاده می کنید اگه فایل json برای api دادند از thunder client استفاده کنید اگر با پست من مشکل داریدthunder client از سه قسمت تشکیل شده است.1)activity2)collections 3)envactivityجایی که api اضافه می کنید مثلا jsonplaceholder یا apifakecollections از چند قسمت تشکیل شده استNew connectionsجایی که api اضافه می کنید import جایی که فولدر json که ذخیره کردید اونجا قرار میدهید مثلا من مسیر api در دسکتاپ ریختم فایل json import می کنمimport url برای جایی که مثلا api به صورت مرورگردارید مثلادر پست من انلاین یا سواگر استenvکه دو حالت که varible فایل api خودتان مشخص کنید یا می خواهید یا اکانت بخری به صورت premium از thunder client استفاده می کنید

devops ngnix pm2 iis njs

pooria vakili — Sun, 01 Sep 2024 19:04:06 +0330

تو این پست می خواهم در مورد ngnix صحبت کنم خیلی ساده بگویم توی ویندوز اگه برای سایت تان هاست ویندوزی بگیرید با iis server کار جلو می برید من یک پست جدا برای iis server می نویسم ولی این پست ngnix است که ngnix کامندلاین لینوکس و کار با کامند لاین در لینوکس در رابطه با ngnix خوب بلد باشید شما هر سایت بالا میارید یک اسمی داره مثلا سایت من دیجیکالا شما در ngnix سرور استاپ یا استارت بکنید اینطوری می نویسید systematic start digikalaاین به معنی است که من بعد از این که npm run build پروژه فرانت زدم می خوام با ngnix پروژه بالا بیارم که اول systematic stop digikala می زنم و در آخر کد بالا می زنم که سایتم بالا میاد ولی وسط کار سایت ارور ۵۰۲ bad gate way این بر می گرده تنظیمات ngnix که من تعیین کردم که بیشتر در مورد این توضیح می دهم در ngnix وقتی پروژه تنظیم کنیم این به چند قسمت می گرده server location http eventswork station in eventsبه این برمی گرده که به سایت شما چند نفر سر زدن عدد دیفالت ۱۲۸ ۲۵۶ ۵۱۲ شما می توانید عددش تغییر بدهید مثلا evenکه اینجا IP می نویسم و پورت جدید مشخص می کنیم که مثلا این پورت برای بک اند که با سواگراست }} مثلا سرعت سایت من پایین می خوام با gzip که باینری و اسمبلی سرعت سایت در server که بالا نوشتم بالا می برم و ارور ۵۰۲ bad gate way داشت به چند چیز برمی گرده یک ngnix چطور تعیین کردید و دو پکیج و فریم ورک استفاده می کنید به روز هست یا نه توی،ngnix حتما proxy ها یاد بگیرید اینجا یک proxy گرفتم برای جلو بردن سرور و location ,که با هم nestled یعنی تو در تو هستند باید همه proxy ها بلد باشید اگه کار با ngnix سخت و مثل من برنامه نویس فرانت اند دولوپر که جاوااسکریپت خوب بلد با njs جلو برو با njs و جاوااسکریپت می توانید مسیر پروژه فرانت جلو می برید و با استفاده از کد داینامیک که با njs به ngnix می دهید مسیر اون تغییر بدهیدبرنامه نویسان فرانت اند حواستان باشد پروژه به devops تحویل میدهید اگه با nuxt or next نوشتید فایل server داشته باشه که تو pm2 به مشکل برنخورید njs in javascript اگه می خواهید با جاواسکریپت به صورت داینامیک با ngnix کار کنید حتما سراغ Njs برویدنمونه njs در جاواسکریپت امروز می خواهم در مورد دواپس کمی صحبت کنم که هر برنامه نویس بک اند و فرانت اند بد نیست بلد باشد فرض بگیریم پروژه ای که با next js nuxt js یا هر پروژه react vue در هاست ویندوز یا لینوکس قرار دهید هاست لینوکس ۱) نصب نرم افزار winscp در ویندوز برای کپی کردن فایل ها در هاست لینوکس ۲) نصب نرم افزار git و باز کردن پنجره git bash کار با ssh اگه پکیج ها نصب نیست npm I بعد npm run build حتما از پروژه خودت build بگیرید. ۳) بلد بودن دستورات کامند لاین pm2 مثل pm2 list لیست پروژه موجود در شبکه نشان می دهد طبق جدول که افلاین آنلاین pm2 save پروژه ذخیره می کندpm2 restart پروژه در سایت قرار می دهید و در آخر بگویید کدام می خواهید قرار دهید طبق pm2 list می گیرید که از صفر نشان می دهد در آخر id می نویسید مثلا pm2 restart 0 که id 0 طبق pm2 list که گرفتم نشان دادم لیست کامل دستورات pm2https://lnkd.in/dCCVP6DW۴) بلد بودن دستورات کامند لاین لینوکسی مثل ls cd sudo apt۵) با ssh در git bash با بلد بودن user name password به هر هاست سروری وصل شوید ۶) اگر هم دیتابیس و بک اند دارید حتما از ngnix بلد باشید اگه پروژه فرانت هم next js یا nuxt js باز باید ngnix کار کنید چون اگه دستورات fqdn ثبت کنید نیاز،می شودhttps://lnkd.in/d3GfzdUi۷) نصب node js آخرین نسخه در لینوکس هاست ویندوزی برای next js یا nuxt js نصب نرم افزار node js سمت سرور و نصب خود node js که این دو نرم افزار متفاوت است نصب نرم افزار iis server در ویندوز و بلد بودن که چطوری node js server روش فراهم کنید اگه پروژه react pure vue pure بود مثل cra vite نصب node js server نیاز نیست و در آخر بلد بودن پورت های شبکه که چطور در همین نرم افزار پورت تعیین کنید مثلا پورت ۹۰ پورت سواگر است و پورت ۶۰ به یک صفحه دیگری وصل می شود از سایت خودتان در next js یا nuxt js حتما google lighthouse webpagetest بگیریددر مورد google lighthouse حتما این پست در لینوکس بخوانید https://lnkd.in/duuVXCc4حتما سعی کنید هاستی که می خرید لینوکس باشد که سرعتش بالاتر از هاست ویندوز و برای کارهای غیر ضروری و ساده از هاست ویندوز استفاده کنید برای شرکت های برزگ یا پروژه های معمولی یا پیجیده از هاست لینوکسی استفاده کنیدنرم افزار iis در devops چیست و چه طور استفاده می کنیماین iis در دو حالت1) clientبرای جایی به کار می رود که پروژه به نفر دیگه ای که در تیم هست نشان دهیم مثلا IP کامپیوتر من۱۹۲.۱۶۸.۱۰.۲۰:۳۰۰۰این صفحه از وب سایت در مروگر به بک اند فرانت uiux یا حتی کارفرما همزمان نشان دهیمو آخری پورتی که استفاده می کنم برای این که iis در کامپیوتر خودتان نصب کنید وارد turn off on windows بخش add or remove programs در کنترل پنل شوید گزینه های asp net نسخه ۴ و hyper I've telnet client تیک می زنید وiis client می توانید استفاده کنیدسمت client یک برنامه نویس فرانت همراه با جستجو در گوگل می تواند یاد بگیرد چون امکانات ویندوز سرور نمی خواهد2) serverاین نسخه از iis می توانید در هاست ویندوزی استفاده کنید برای این چون سیستم سرور می‌دهند در خود سرور گزینه off on می زنید نرم افزار با توجه به پروژه ای دارید اگه csr مثلا با react pure vite vue ،با iis و مسیرپروژه تنظیم می کنید و اگه برنامه بک اند داشته و بک اند دات نت باشه ویژوال استادیو نصب می کنید و node js آخرین نسخه نصب می کنید اون به یک پورت دیگه در سواگر بالا میاورید ولی اگه پروژه با next js یا nuxt یک پروژه فول استک نود جی اس سمت سرور بریزید و کد سرور در پست ngnix نوشتم تو این پروژه بریزید با توجه به پروژه ای دارید هر چه پروژه سنگین تر برای هاست ویندوزی بیشتر هزینه کنید مثلا اگه پروژه ۶۰ صفحه ای دارید رم ۱۶ تا ۳۲ مناسب چون ویژوال استادیو در هاست ویندوز برای بک اند نصب کنیدهزینه یک پروژه ۶۰ صفحه ای در لینوکس ارزان تر بهینه و سرعت بالاتری دارد ولی در هاست ویندوز هزینه بیشتری برای سرورتان انجام دهیدمنابعhttps://iverique.medium.com/devops-reverse-proxy-configuration-with-nginx-910b1ad871dfhttps://github.com/nginx/njs-exampleshttps://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/https://carbon.now.sh/9c5j5PCcw6DhBh3U0AsWhttps://virgool.io/@azolfaghar/%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%87%D8%A7%DB%8C-nodejs-%D8%A8%D8%A7-pm2-prjgwponutit

چطور یک وب سایت در lighthouse google بالا ببریم

pooria vakili — Mon, 25 Mar 2024 14:15:08 +0330

1)در فایل img حتما چهار چیز را قرار دهید1)lazy 2)placeholder 3) layout 4)alt2)در css تا می توانید منیمایز بنویسید مثلا یک فایل css مثلا ۵۰۰ خط کد نویسی کردید با node-sass یا سایت sassmeister کد css مینیمایز کنید بعد با تیلویند کد css کوچک کنید که من با این چند کار css از ۵۰۰ خط به ۱۵۰ خط رساندم3) از فایل svg قراردادن در react جلوگیری کنید چون دو عیب دارد1) کد 64bit ده هزار خط کد تولید میکند 2)بعضی جاها path زیاد استفاده میکنید ونه هزار خط کد نویسی میکنید بهترین حالت این که اون svg به صورت img بنویسید4) کد جاوااسکریپت تا می توانید منیمایز یا کوچک کنید که سرعت performance سایت بالا بیاد5) برای سایت هاست حتما لینوکس بگیرید چون ویندوز به دلیل وجود ils سرعت وب سایت به شدت پایین می اید6) خود کامپونت به حالت lazycomponent بنویسید که سرعت speedindex سایت بالا بیاد7) به هیچ وجه از هر قسمت سایت خودتان کامپونت جدا ننویسید مثلا من سایت فروشگاهی دارم مثل یک سایت انت دیزاین مثلا هر قسمت مثل modal popup drawer timeline button dropdown tab slider یک کامپونت بنویسیم من یک پروژه داشتم مثل همین 45 کامپونت درست کرده بود که نصف اش در سایت استفاده نمی کردیم.8) در سایت اصلا یک عکس کامنت نکنید تو light house گوگل به شما تذکر میدهد که شما از این عکس درسایت استفاده نکردید و کد کامنت کردید9) سایت حتما با https شروع شود و سایت اگه با http باشد به شما تذکر می دهد10) هر صفحه حتما title در بالای صفحه نوشته شود11) سایت حتما نمونه pwa داشته باشد12) از اتربیوت aria تامی توانید درسایت استفاده کنید13) هر صفحه در سایت در link اصلا noindex nofollow قرار ندهید14) از فونت سایزهای بهینه استفاده کنید15) در سایت برای سيؤ بهتر از تگ meta استفاده کنید16) عکس ها باید preload تا حد ممکن سرعت بالا ببرید17) حافظه نهان کش یک سایت تا می توانید پاک کنید18) عرض وارتفاع یک عکس حتما مشخص کنید19) سایت حتما با استفاده از ربات صفحه اول در گوگل شود20) از font-display استفاده کنید تا مخاطب متوجه شود شما درسایت تان از چه فونتی استفاده کردید21) برای تصویر از object-fit استفاده کنید که درواقع از aspect ratio استفاده کرده است

اتربیوت !important در css

pooria vakili — Thu, 26 Oct 2023 11:40:33 +0330

کلمه `!important` در CSS برای تعیین اولویت بالای یک قاعده استفاده می‌شود. وقتی شما از `!important` استفاده می‌کنید، قوانین اولویت بیشتری نسبت به سایر قوانین درنظر گرفته می‌شود و به این ترتیب مقدار استایل تعیین شده با `!important` برای عنصر مورد نظر اعمال می‌شود.استفاده از `!important` در برخی موارد می‌تواند مزایا و کاربردهایی داشته باشد:1. اولویت بالا: با استفاده از `!important` می‌توانید استایل خاصی را به اولویت بالا برسانید و از تداخل با قوانین دیگر جلوگیری کنید. این ویژگی مفید است زمانی که میخواهید بخشی از استایل را به صورت قطعی تعیین کنید و اجازه ندهید تغییرات دیگری از آن تحت تأثیر قرار بگیرند.2. راحتی در نگهداری: با استفاده از `!important` می‌توانید قوانین خاصی را به طور مستقیم و بدون نیاز به تغییر دادن سایر قوانین نگه دارید. این کار می‌تواند در مواردی که نیاز به اعمال تغییرات سریع و مداوم روی استایل‌ها دارید، مفید باشد.با این حال، استفاده زیاد و بی‌ارزش از `!important` می‌تواند برخی معایب را به همراه داشته باشد:1. پیچیدگی و خوانایی کد: استفاده زیاد از `!important` می‌تواند باعث پیچیده شدن و خوانایی کد CSS شود. زمانی که برای اعمال تغییرات مجدد به استایل‌ها نیاز دارید، ممکن است سختی بیشتری را تجربه کنید.2. تداخل‌های ناخواسته: زمانی که از `!important` برای حل مسئله تداخل‌های استایل استفاده می‌کنید، ممکن است به طور ناخواسته قوانین دیگر را بازنویسی کنید و تداخل‌های جدیدی ایجاد کنید. این می‌تواند منجر به پیدا کردن راه‌حل‌های پیچیده‌تر و زمان‌برتر شود.3. عدم انعطاف‌پذیری: استفاده زیاد از `!important` می‌تواند منجر به عدم انعطاف‌پذیری در ساختار استایل‌ها شود. در صورتی که بخواهید تغییراتی را اعمال کنید، ممکن است بخش‌های دیگری از وبسایت یا برنامه‌ی شما تحت تأثیر قراربگیرند و تغییرات مورد نظر را نتوانید به راحتی انجام دهید.بنابراین، استفاده از `!important` باید با احتیاط و به میزان لازم انجام شود. باید سعی کنید از روش‌های دیگری برای مدیریت استایل‌ها استفاده کنید، مانند استفاده از سلکتورهای با اولویت بالا، بهینه‌سازی ساختار CSS و استفاده از نام‌گذاری مناسب برای کلاس‌ها و آیدی‌ها.در نهایت، استفاده مناسب از `!important` باید با توجه به شرایط و نیازهای پروژه خاص شما انجام شود. اگر تنها در موارد ضروری و برای حل مشکلات خاص از آن استفاده کنید، معایب آن را حداقل می‌کنید و قابلیت پیشرفت و نگهداری کد را بهبود می‌بخشید.استفاده از `!important` در CSS می‌تواند در برخی موارد ضروری باشد، اما در بعضی موارد می‌توانید از روش‌های دیگری برای مدیریت استایل‌ها استفاده کنید تا نیاز به `!important` را کاهش دهید. در زیر چند روش برای استفاده نکردن زیاد از `!important` آورده شده است:1. استفاده از سلکتورهای با اولویت بالا: در CSS، سلکتورهایی با اولویت بالا وجود دارند که به صورت طبیعی از `!important` قوی‌تر هستند. مثلاً استفاده از آیدی‌ها به عنوان سلکتور یا استفاده از سلکتورهای مشخصی مانند `body` یا `html` می‌تواند به شما کمک کند تا بدون استفاده از `!important` قوانین خاصی را اعمال کنید.2. بهینه‌سازی ساختار CSS: بررسی و بهینه‌سازی ساختار CSS می‌تواند از تداخل‌ها و نیاز به `!important` جلوگیری کند. ساختار ساده و سازمان‌دهی شده CSS، قابلیت خوانایی و نگهداری را بهبود می‌بخشد و احتمال استفاده زیاد از `!important` را کاهش می‌دهد.3. استفاده از نامگذاری مناسب: استفاده از نامگذاری مناسب برای کلاس‌ها و آیدی‌ها می‌تواند به شما کمک کند تا با استفاده از سلکتورهای دقیق‌تر و بدون نیاز به `!important`، استایل‌ها را اعمال کنید. با انتخاب نام‌های معنادار و دقیق، سلکتورهایتان را بهبود داده و قدرت و انعطاف‌پذیری بیشتری در تعیین استایل‌ها خواهید داشت.4. استفاده از سلکتورهای نسبی: استفاده از سلکتورهای نسبی می‌تواند به شما کمک کند تا قوانین خاصی را برای المان‌های داخلی یا فرزندان مشخص کنید، بدون نیاز به `!important`. با استفاده از سلکتورهای نسبی مانند `:first-child`، `:last-child`، `:nth-child` و غیره، می‌توانید قوانین خاصی را برای المان‌های مورد نظر تعیین کنید.5. استفاده از سطوح اولویت: در CSS، قوانینی با اولویت متفاوت وجود دارند که می‌توانید از آنها برای تعیین استایل‌ها استفاده کنید. به عنوان مثال، استفاده از ترتیب قرارگیری قوانین در فایل CSS، استفاده ازترتیب قرارگیری قوانین در فایل CSS، استفاده از سلکتورهای وراثتی (inheritance) و استفاده از پیشوندهای CSS مانند `:hover` و `:focus` می‌تواند به شما کمک کند تا بدون نیاز به `!important` استایل‌ها را کنترل کنید.در نهایت، همیشه در هنگام نوشتن CSS، تلاش کنید برای استفاده بهینه از سلکتورها و تنظیمات CSS وابسته به سلسله مراتب المان‌ها. با طراحی مناسب و سازماندهی دقیق CSS خود، می‌توانید نیاز به `!important` را به حداقل برسانید و به راحتی استایل‌های خود را کنترل کنید.

استرپی (strapi) چیست؟

pooria vakili — Fri, 25 Aug 2023 12:46:19 +0330

دقیقا سال 97 بود که من مصاحبه های برنامه نویسی فرانت شروع کردم، اون زمان من با ری اکت وری اکت نیتیو همزمان کار می کردم با ری اکت پنل ادمین وفروشگاه اینترنتی می زدم ولی کسی نمونه کار من قبول نمی کرد، چون بک اند برای نمونه کار می خواستم من گفتم من فرانت اند دولوپر بک اند کار یافول استک کار نیستم گفتند قبول ما حرفی ندارم که شما بک اند بزنید ولی بزنید با استرپی بک اندش پیاده شد همین باعث شد که استرپی هم یاد بگیرماستراپی (Strapi) یک سیستم مدیریت محتوا (CMS) متن‌باز است که برای توسعه و مدیریت راحت و قدرتمند API های وب طراحی شده است. این CMS به توسعه‌دهندگان امکان می‌دهد تا برنامه‌ها و وبسایت‌هایی با قابلیت‌های پیچیده را با استفاده از یک رابط برنامه‌نویسی (API) ایجاد کنند و آن‌ها را با سرعت بالا و به راحتی مدیریت کنند.استراپی بر پایه زبان برنامه‌نویسی Node.js و فریم‌ورک Express ساخته شده است. با استفاده از استراپی، شما می‌توانید مدل‌ها و نوع‌های داده‌ای خود را تعریف کرده و API های سفارشی خود را بر اساس این مدل‌ها ساخته و مدیریت کنید. همچنین، استراپی از یک رابط کاربری مدیریتی بهره می‌برد که به شما اجازه می‌دهد تا محتوای سایت خود را به صورت بصری مدیریت کنید و تغییرات را اعمال کنید.استراپی از معماری مبتنی بر سرویس (Headless) پیروی می‌کند، به این معنی که بخش مدیریت محتوا و بخش نمایش آن (Frontend) به طور مجزا عمل می‌کنند. شما می‌توانید از استراپی به عنوان سیستم مدیریت محتوا استفاده کنید و سپس از هر فرانت‌اند (مانند React یا Vue.js) برای نمایش و استفاده از داده‌ها استفاده کنید.استراپی از ویژگی‌هایی مانند مدیریت کاربران، احراز هویت، مدیریت سطوح دسترسی و قابلیت‌های گسترده دیگر برخوردار است. همچنین، با استفاده از پلاگین‌ها و افزونه‌های استراپی، می‌توانید قابلیت‌های آن را گسترش دهید و به نیازهای خاص خود بپیوندید.استراپی (Strapi) یک سیستم مدیریت محتوا (CMS) متن‌باز است که برای توسعه و مدیریت راحت و قدرتمند API های وب طراحی شده است. این CMS به توسعه‌دهندگان امکان می‌دهد تا برنامه‌ها و وبسایت‌هایی با قابلیت‌های پیچیده را با استفاده از یک رابط برنامه‌نویسی (API) ایجاد کنند و آن‌ها را با سرعت بالا و به راحتی مدیریت کنند.استراپی بر پایه زبان برنامه‌نویسی Node.js و فریم‌ورک Express ساخته شده است. با استفاده از استراپی، شما می‌توانید مدل‌ها و نوع‌های داده‌ای خود را تعریف کرده و API های سفارشی خود را بر اساس این مدل‌ها ساخته و مدیریت کنید. همچنین، استراپی از یک رابط کاربری مدیریتی بهره می‌برد که به شما اجازه می‌دهد تا محتوای سایت خود را به صورت بصری مدیریت کنید و تغییرات را اعمال کنید.استراپی از معماری مبتنی بر سرویس (Headless) پیروی می‌کند، به این معنی که بخش مدیریت محتوا و بخش نمایش آن (Frontend) به طور مجزا عمل می‌کنند. شما می‌توانید از استراپی به عنوان سیستم مدیریت محتوا استفاده کنید و سپس از هر فرانت‌اند (مانند React یا Vue.js) برای نمایش و استفاده از داده‌ها استفاده کنید.استراپی از ویژگی‌هایی مانند مدیریت کاربران، احراز هویت، مدیریت سطوح دسترسی و قابلیت‌های گسترده دیگر برخوردار است. همچنین، با استفاده از پلاگین‌ها و افزونه‌های استراپی، می‌توانید قابلیت‌های آن را گسترش دهید و به نیازهای خاص خود بپیوندید. در استرپی شما می توانید api بر اساس restapi یا graphql پیاده سازی کنید. نصب و راه‌اندازی:- نصب Strapiبر روی سیستم خود- ساخت یک پروژه جدید- اجرای سرور توسط Strapi1. آشنایی با رابط کاربری Strapi:- پنل مدیریت Strapiو محیط کاربری آن- مدیریت دسترسی‌ها و نقش‌ها- مدیریت داده‌ها و مدل‌ها2. ساخت مدل‌ها:- تعریف و ساخت مدل‌ها در Strapi- تعیین ویژگی‌ها و روابط مدل‌ها- استفاده از انواع مختلف فیلدها3. ایجاد APIها:- تعریف و ساخت APIها در Strapi- تنظیم مسیرها و متد‌های درخواست- استفاده از کنترلرها برای پردازش درخواست‌ها4. اعمال محدودیت‌ها و اعتبارسنجی:- محدودیت دسترسی به APIها- اعتبارسنجی داده‌ها و صحت‌سنجی درخواست‌ها5. استفاده از پلاگین‌ها و افزونه‌ها:- نصب و مدیریت پلاگین‌ها در Strapi- استفاده از پلاگین‌های موجود یا توسعه‌دهی پلاگین‌های سفارشی6. امنیت و مدیریت کاربران:- ثبت نام و ورود کاربران- مدیریت نقش‌ها و دسترسی‌ها- اعتبارسنجی و مدیریت توکن‌ها7. استفاده از داده‌ها و APIها:- اتصال و استفاده از APIهای Strapiدر برنامه‌ها و وب‌سایت‌ها- دریافت و ارسال داده‌ها از و به API ها8. استقرار و مدیریت:- استقرار برنامه Strapiبر روی سرورهای عمومی- مدیریت و نگهداری Strapiو بروزرسانی‌های آناین سرفصل‌ها به شما کمک می‌کنند تا با مفاهیم اصلی Strapi آشنا شوید و بتوانید از این ابزار برای توسعه و مدیریت سیستم‌های مدیریت محتوا استفاده کنید. لازم به ذکر است که تفصیلات بیشتر و مطالبمربوط به هر سرفصل در داکیومنتاسیون رسمی Strapi و منابع آموزشی موجود قابل دسترسی استStrapiبرای انواع مختلف پروژه‌ها مناسب است. این ابزار یک سیستم مدیریت محتوا (CMS) است که برای توسعه و مدیریت API ها و برنامه های تحت وب استفاده می‌شود. در زیر، تعدادی از پروژه‌هایی که Strapi برای آنها مناسب است را بررسی می‌کنیم:1. وب سایت‌های شخصی و وبلاگ‌ها: اگر شما یک وب سایت شخصی، وبلاگ یا نمایشگاه آنلاین می‌سازید و نیاز به مدیریت محتوا و ایجاد APIبرای ارتباط با برنامه‌های دیگر دارید، Strapi می‌تواند انتخاب خوبی باشد.2. فروشگاه‌های آنلاین: اگر شما یک فروشگاه آنلاین راه‌اندازی می‌کنید و نیاز به مدیریت محتوا، محصولات، سفارشات و پرداخت‌ها دارید، Strapiمی‌تواند به عنوان بک‌اند قدرتمند برای این نوع پروژه‌ها عمل کند.3. برنامه‌های موبایل: اگر شما یک برنامه موبایل توسعه می‌دهید و نیاز به ارتباط با سرور و مدیریت محتوا دارید، Strapiمی‌تواند به عنوان سیستم مدیریت محتوا برای برنامه‌های موبایل شما عمل کند.4. پلتفرم‌های آموزشی آنلاین: اگر شما یک پلتفرم آموزشی آنلاین راه‌اندازی می‌کنید و نیاز به مدیریت دوره‌ها، محتواهای آموزشی و کاربران دارید، Strapiمی‌تواند به عنوان CMSقوی برای مدیریت محتوا در این نوع پروژه‌ها عمل کند.5. برنامه‌های IoT(اینترنت اشیا): اگر شما یک برنامه IoT دارید که نیاز به ارتباط با دستگاه‌ها و مدیریت داده‌های سنسورها و دستگاه‌ها دارد، Strapi می‌تواند به عنوان بک‌اند این برنامه‌ها عمل کند.به طور کلی، Strapiبرای پروژه‌هایی که نیاز به مدیریت محتوا، ایجاد APIو ارتباط با برنامه‌های دیگر دارند، بسیار مناسب است. با استفاده از Strapiمی‌توانید بخش‌های مختلف پروژه‌های خود را مدیریت کنید و دسترسی به داده‌ها و سرویس‌های خود را از طریق APIفراهم کنید.CMS Storybook در واقع یک اصطلاح ترکیبی است که برای اشاره به استفاده از Storybookدر توسعه و آزمون کامپوننت‌های رابط کاربری (UI components) در یک Content Management System (CMS)استفاده می‌شود.Storyblokیک ابزار توسعه محتوا به صورت UIاست که توسعه‌دهندگان را قادر می‌سازد تا کامپوننت‌های رابط کاربری را به صورت مستقل و جداگانه تست و نمایش دهند. با استفاده از Storyblok، توسعه‌دهندگان می‌توانند به صورت مستقل و بازنشانی (isolated) کامپوننت‌های مختلف را تست و مشاهده کنند و در این رابطه با طراحان و تیم فنی همکاری کنند. Storybookبه توسعه‌دهندگان امکان می‌دهد که به صورت تعاملی و در محیط جداگانه از برنامه‌ها، کامپوننت‌ها را بسازند و بررسی کنند.از سوی دیگر، CMS (Content Management System) یک سیستم مدیریت محتوا است که به توسعه‌دهندگان و مدیران امکان می‌دهد محتوا را مدیریت و ارتباط برقرار کنند. CMS می‌تواند برای ساخت وبسایت‌ها، بلاگ‌ها، فروشگاه‌های آنلاین و سایر برنامه‌های مبتنی بر وب استفاده شود. این سیستم‌ها به صورت معمول دارای رابط کاربری نمایشی هستند که به مدیران اجازه می‌دهد محتوا را ایجاد، ویرایش و منتشر کنند.بنابراین، CMS Storybookبه استفاده از Storybookدر توسعه و آزمون کامپوننت‌های رابط کاربری در یک سیستم مدیریت محتوا اشاره دارد. با استفاده از Storybookدر محیط جداگانه، توسعه‌دهندگان می‌توانند کامپوننت‌های UIخود را تست و نمایش داده و در ارتباط با CMS، محتوا را مدیریت کنند. این رویکرد به توسعه‌دهندگان و طراحان امکان می‌دهد تا به طور مستقل و کارآمد‌تر بر روی کامپوننت‌های خود کار کنند و در عین حال با محتوا هماهنگی داشته باشند.در زیر، سرفصل‌هایی را برای یک آموزش مربوط به CMS Storybook ارائه می‌دهم:1. معرفی CMSو Storybook:- توضیح درباره سیستم مدیریت محتوا (CMS) و مفهوم Headless CMS.- معرفی ابزار Storyblokو نحوه استفاده از آن در توسعه کامپوننت‌های رابط کاربری (UI components).2. نصب و پیکربندی Storyblok:- روش نصب Storyblok پروژه شما.- تنظیمات اولیه و پیکربندی Storybookبرای استفاده در توسعه CMS.3. ایجاد کامپوننت‌های UI:- نحوه ایجاد کامپوننت‌های رابط کاربری برای استفاده در CMS.- استفاده از Storybookبرای تست و نمایش کامپوننت‌ها.- مفهوم استوری‌ها و استفاده از آن‌ها در Storybook.4. اتصال به CMS:- معرفی روش‌های اتصال به سیستم مدیریت محتوا (CMS) از Storybook.- استفاده از API CMSبرای دریافت محتوا و اطلاعات مورد نیاز برای کامپوننت‌ها.5. ساختاردهی محتوا:- نحوه ساختاردهی محتوا در CMSبرای استفاده در کامپوننت‌های UI.- استفاده از دسته‌بندی‌ها و برچسب‌ها برای سازماندهی محتوا.6. انتشار و به‌روزرسانی محتوا:- روش‌های انتشار و به‌روزرسانی محتوا در CMS.- نحوه برقراری هماهنگی بین Storybookو CMS برای نمایش محتوا به‌روزرسانی شده.7. تست و اشتراک گذاری کامپوننت‌ها:- استفاده از Storyblokبرای تست و اعتبارسنجی کامپوننت‌های UI.- نحوه اشتراک گذاری کامپوننت‌ها در یک تیم توسعه‌دهنده.8. بهینه‌سازی و پیشرفته‌ترین مفاهیم:- بهینه‌سازی کارایی کامپوننت‌ها و بهبود عملکرد CMS.- استفاده از پیشرفته‌ترین مفاهیم Storybookو CMS برای توسعه و مدیریت برنامه‌ها.این سرفصل‌ها می‌توانند به عنوان یک راهنمای عمومی برای آموزش CMS Storybookمورد استفاده قرار گیرند. البته، ممکن است بسته به نیازها و محدودیت‌های پروژه، سرفصل‌ها بهبود و تغییر یابند.این cms storyblock یک بدی دارد این است که تا 14 روز رایگان است وبعد از14 روز پولی می شود پس حواستان به این موضوع باشدبرگرفته شده از داکیونت وب سایتhttps://strapi.io/https://www.storyblok.com/home

مهارت های نرم وسخت در برنامه نویس

pooria vakili — Thu, 24 Aug 2023 22:10:53 +0330

به نظر من می دانید چه شرکتی بهترین تیم برنامه نویسی دارد کسی که دلسوزانه به فکر تیم باشد نه پول دار شدن؟ چی منظورت نفهمیدم ۴۰ تا ۶۰ درصد برنامه نویسانی که من باهاشون کار کردم مهارت های سخت قوی دارند و اگه قوی نباشه با سرچ آموزش و چت جی پی قوی می کنند ولی مهارت های نرم خیلی ضعیفی دارند به چند دلیل ۱) خودشان الکی جونیور می دانند شما خدا اشرف مخلوقات آفریده است البته این نکته به معنی نیست شما فرانت اندی بروید بک اند یا دواپس یاد بگیرید نه عجله نکنید منظور حرف من این نیست 2) خیلی تو خودشون و معتقد هستند که درون گرا هستند ولی شاید هم نباشند و ارتباط گرفتن باهاشون به هر دلیل سخت است مدام ببینید هدفون تو گوش هستند مثلا یک مثال بزنم خیلی رفیق برنامه نویس داشتم با شبکه های اجتماعی ارتباط برقرار نمی کنند یا گوشی شون نه ساعت خاموش ۴ ساعت مثلا روشن می کنند 3) مدام تنش درست می کنند یا تو حرف می پرند 4) عاشق رهبری کردن هستند و منم منم می کنند ادعای زیادی دارند. 5) خط نشان کشیدن 6) تعصب زیادی دارند 7) ازش مثلا بپرسید کتاب clean code you don't know js elequent js زیاد خوانده است ولی کم شده است مثلا کتاب آیین دوست یابی یا زبان بدن بخواند 8) عاشق حاشیه درست کردن است ۹) هوش اجتماعی پایینی دارند مدام با کامپیوتر ‌کار می کند و به خاطر کارش با اجتماع نیست یا می پیچاند و برای این که خودش با اجتماع وفق دهد مافیا بازی می کند تا این مشکلش از بین ببرد چه شرکتی برد می کند وقتی با همچین برنامه نویسی رودرو می شود 1) او را اخراج نکند اخراج کردن به نظر من به راحتی از کوره در رفتن است ۲) به روان شناس معرفی کند یا تو خود شرکت یک نفر روان شناس کاملا بی طرف استخدام کند باهاش صحبت کند چون بسیاری از مشکلات انسان ها با صحبت دهان به دهان نه پیام دادن حل می شود منی که برنامه نویس فرانت اند دولوپر به خیلی چیزها نه گفتم منم مثل شما هستم

فرانت اند چیست وردپرس چیست چه فرق ها مزایا معایب دارد

pooria vakili — Sat, 05 Aug 2023 16:54:22 +0330

فرانت اند دولوپرفرانت‌اند (Front-end) به بخشی از فرآیند توسعه نرم‌افزار اطلاق می‌شود که مربوط به طراحی و پیاده‌سازی واسط کاربری (User Interface) و تجربه کاربری (User Experience) است. در واقع، فرانت‌اند عبارت است از ساختاردهی و برنامه‌نویسی قسمت‌هایی از یک وبسایت یا نرم‌افزار که کاربران با آن در تعامل هستند.فرانت‌اند دولوپر (Front-end Developer) فردی است که مسئولیت طراحی و توسعه رابط کاربری و تجربه کاربری وبسایت یا نرم‌افزار را بر عهده دارد. وظایف عمده فرانت‌اند دولوپر شامل موارد زیر می‌شود:1. طراحی واسط کاربری: فرانت‌اند دولوپر باید طرح و طراحی واسط کاربری را بر اساس نیازها و الگوهای طراحی مدرن ایجاد کند. این شامل طراحی صفحات وب، لوگو، آیکون‌ها، رنگ‌ها، فونت‌ها و سایر عناصر تجربه کاربری است.2. برنامه‌نویسی وب: فرانت‌اند دولوپر باید از زبان‌های برنامه‌نویسی مانند HTML (HyperText Markup Language)، CSS (Cascading Style Sheets) و JavaScript استفاده کند تا صفحات وب را برنامه‌نویسی کند و ویژگی‌های تعاملی و قابلیت‌های پویا را به آنها اضافه کند.3. بهینه‌سازی عملکرد: فرانت‌اند دولوپر باید مطمئن شود که وبسایت یا نرم‌افزار به طور صحیح در مرورگرهای مختلف و رایانه‌ها و دستگاه‌های مختلف نمایش داده می‌شود و عملکرد بهینه‌ای دارد. این شامل بهینه‌سازی سرعت بارگذاری، پاسخگویی، بهبود مشاهده در دستگاه‌های موبایل و رعایت استانداردهای وب است.4. تست و اشکال‌زدایی: فرانت‌اند دولوپر باید صفحات وب را تست کرده و اشکالات را پیدا و رفع کند. او باید از ابزارها و تکنیک‌های مربوط به تست و اشکال‌زدایی استفاده کند تا اطمینان حاصل کند که وبسایت یا نرم‌افزار به درستی کار می‌کند.علاوه بر این، فرانت‌اند دولوپر باید با ابزارها و فریم‌ورک‌های مختلف مانند React، Angular، Vue.js و Bootstrap ، اگرچه ممکن است برخی از این موارد برای توسعه فرانت‌اند نرم‌افزارها مورد استفاده قرار نگیرند. همچنین، فرانت‌اند دولوپر باید با مفاهیم و تکنولوژی‌های مرتبط با وب آشنا باشد و قادر به همکاری با تیم‌های دیگر برای ادغام بخش‌های مختلف نرم‌افزار باشد.به طور خلاصه، فرانت‌اند دولوپر مسئولیت ایجاد واسط کاربری جذاب، قابل استفاده و تعاملی برای کاربران را بر عهده دارد و از تکنولوژی‌ها و ابزارهای مرتبط با طراحی و توسعه وب استفاده می‌کند.وردپرسوردپرس یک سیستم مدیریت محتوا (CMS) است که برای ایجاد و مدیریت وبسایت‌ها استفاده می‌شود. این سیستم توسط یک انجمن بزرگ توسعه دهندگان و متخصصان وب ایجاد شده است و امروزه یکی از محبوب‌ترین و پرکاربردترین CMS ها در دنیا محسوب می‌شود.وردپرس به شما امکان می‌دهد تا بدون نیاز به دانش برنامه نویسی و طراحی وب، وبسایت خود را ایجاد و مدیریت کنید. با استفاده از قالب‌ها وافزونه‌های مختلف می‌توانید ظاهر و عملکرد وبسایت خود را به دلخواه تغییر دهید و امکانات مورد نیاز را به آن اضافه کنید.وردپرس دارای یک رابط کاربری آسان و قابل فهم است که به شما اجازه می‌دهد مطالب را به راحتی اضافه، ویرایش و حذف کنید. همچنین، امنیت بالای وردپرس و وجود بروزرسانی‌های منظم آن، از این CMS یک انتخاب مناسب برای ایجاد وبسایت‌های حرفه‌ای و امن می‌کند.وردپرس دو نسخه دارد:(WordPress.com) که یک سرویس میزبانی رایگان و نیمه رایگان برای ایجاد وبسایت است و وردپرس.اورگ (WordPress.org) که نسخه قابل دانلود و نصب بر روی سرورهای خود شماست و امکانات گسترده‌تری را ارائه می‌دهد.مزایای فرانت‌اند دولوپر (Front-End Developer) نسبت به وردپرس عبارتند از:1. انعطاف‌پذیری بیشتر: به عنوان یک فرانت‌اند دولوپر، شما کامل‌ترین کنترل را بر روی طراحی و رابط کاربری وبسایت خود دارید. شما می‌توانید با استفاده از HTML، CSSو JavaScriptطراحی و ایجاد رابط کاربری دلخواه خود را انجام دهید و به طور کامل به شخصیت و برند خود وفادار بمانید.2. بهره‌وری بالا: یکی از مزایای فرانت‌اند دولوپری این است که می‌توانید کدهای بهینه و بهره‌ور برای وبسایت خود بنویسید. با استفاده از تکنولوژی‌های جدید و به روز، می‌توانید بهینه‌سازی‌های لازم را انجام داده و سرعت بارگیری وبسایت را افزایش دهید.3. اعتباربخشی به مهارت‌های فنی: با توجه به اینکه شما به طور مستقیم با کدهای HTML، CSS و JavaScript کار می‌کنید، مهارت‌های فنی خود را در این زمینه بهبود خواهید داد. این می‌تواند شما را به یک توسعه‌دهنده وب حرفه‌ای تبدیل کند و در موقعیت‌های شغلی مختلف بهره‌وری بیشتری داشته باشید.4. انعطاف در انتخاب فریم‌ورک‌ها: به عنوان یک فرانت‌اند دولوپر، شما می‌توانید از انواع فریم‌ورک‌ها و کتابخانه‌های جاوااسکریپت مانند React، Vue.jsو Angularاستفاده کنید. این فریم‌ورک‌ها به شما امکانات و قابلیت‌های پیشرفته‌تری را برای توسعه وبسایت‌های پویا و تعاملی ارائه می‌دهند.5. امکانات پیشرفته: در حالی که وردپرس امکانات فراوانی برای ساخت وبسایت‌ها ارائه می‌دهد، اما به عنوان یک فرانت‌اند دولوپر می‌توانید از امکانات پیشرفته‌تری مانند انیمیشن‌ها، تعاملات پیچیده، بهینه‌سازی‌های SEO، انعطاف در طراحی رابط کاربری و موارد دیگر استفاده کنید.مزایای فرانت‌اند دولوپر (Front-End Developer) نسبت به استفاده از وردپرس شامل موارد زیر است:1. طراحی سفارشی: به عنوان فرانت‌اند دولوپر، شما کامل‌ترین کنترل را بر روی طراحی و رابط کاربری وبسایت خود دارید. می‌توانید طرح‌ها و رابط کاربری‌های سفارشی را بر اساس نیازهای خاص خود ایجاد کنید و به طور کامل به شخصیت و برند خود وفادار بمانید.2. عملکرد بهینه: با استفاده از کدهای بهینه و بهره‌ور، می‌توانید عملکرد و سرعت بارگیری وبسایت خود را بهبود بخشید. شما مستقلانه می‌توانید از بهترین شیوه‌ها و روش‌های بهینه‌سازی استفاده کنید و به نتیجه‌ای بهتر برسید.3. انعطاف پذیری در انتخاب فریم‌ورک‌ها: به عنوان یک فرانت‌اند دولوپر، شما می‌توانید از گستره‌ای از فریم‌ورک‌ها و کتابخانه‌های جاوااسکریپت مانند React، Vue.js، Angularو غیره استفاده کنید. این فریم‌ورک‌ها امکانات پیشرفته‌تری را برای ساخت وبسایت‌های پویا و تعاملی فراهم می‌کنند.4. قابلیت همکاری با توسعه دهندگان بک‌اند: برای ایجاد وبسایت‌های پیچیده و کاربردی، شما نیاز به همکاری با توسعه دهندگان بک‌اند (Back-End Developers) دارید. با داشتن مهارت فرانت‌اند، به راحتی می‌توانید با توسعه دهندگان بک‌اند هماهنگی کنید و در تیم‌های چندنفره به طور مؤثر همکاری کنید.5. امکانات پیشرفته: با استفاده از تکنولوژی‌های جدید و پیشرفته، می‌توانید امکاناتی مانند انیمیشن‌ها، افکت‌ها، تعاملات پیچیده و رابط کاربری پویا را در وبسایت خود پیاده‌سازی کنید.6. امنیت: برخلاف وردپرس که به عنوان یک CMSمحبوب هدف قرار گرفتن از نظر امنیتی، با استفاده از کدهای سفارشی و مدیریت مستقیم، می‌توانید کنترل بیشتری بر روی امنیت وبسایت خود داشته باشید.معایب وردپرسمعایب وردپرس عبارتند از:1. محدودیت‌های طراحی: وردپرس برای ساخت وبسایت‌ها از قالب‌ها (Themes) استفاده می‌کند و اغلب طراحی وبسایت به حدود و محدودیت‌های این قالب‌ها محدود می‌شود. این می‌تواند به شما در ایجاد طرح‌ها و رابط کاربری‌های سفارشی محدودیت بیاورد.2. پیچیدگی در سفارشی‌سازی: در صورت نیاز به سفارشی‌سازی پیشرفته وردپرس، ممکن است با پیچیدگی‌های فنی روبرو شوید. برای تغییرات پیشرفته و گسترده، نیاز به دانش فنی بیشتر و تجربه بیشتری دارید.3. بارگیری و سرعت: با افزایش تعداد افزونه‌ها و قالب‌های مورد استفاده، ممکن است سرعت بارگیری وبسایت شما کاهش یابد. همچنین، برخی افزونه‌ها و قالب‌ها ممکن است کدهای غیربهینه و زیادی را به وبسایت اضافه کنند که تأثیر منفی بر عملکرد و سرعت آن داشته باشد.4. نیاز به بروزرسانی‌ها: برای حفظ امنیت و عملکرد بهتر، وردپرس و افزونه‌های مورد استفاده باید به‌روزرسانی شوند. این به معنی نیاز به نظارت و مدیریت مداوم برای بروزرسانی‌های سیستمی است.5. وابستگی به افزونه‌ها: در برخی موارد، برای اضافه کردن ویژگی‌ها و قابلیت‌های مورد نیاز به وبسایت، باید از افزونه‌ها استفاده کنید. این موضوع ممکن است به معنی وابستگی شما به افزونه‌ها و تأثیر آن بر عملکرد و امنیت وبسایت باشد.6. پشتیبانی محدود: در صورت بروز مشکلات فنی یا نیاز به رفع اشکالات، وابستگی به بخش پشتیبانی وردپرس معمولاً محدود است. در حالی که جامعه وردپرس بزرگ و فعالی دارد، اما در صورت بروز مشکلات پیچیده و فنی، پشتیبانی رسمی وردپرس ممکن است محدود و زمان بر باشد.به طور کلی، وردپرس با توجه به مزایا و قابلیت‌هایش، یک سیستم مدیریت محتوا قدرتمند است. اما برای استفاده موثر و موفق از آن، نیاز به آگاهی و تجربه برنامه‌نویسی و طراحی وب دارید. همچنین، مدیریت امنیت، بروزرسانی‌ها و پشتیبانی مداوم نیز نیاز است.شخصی سازی در وردپرس با سفارش ساری، می‌توانید نیازهای خاص خود را به توسعه‌دهنده وردپرس ارائه داده و وبسایت خود را بر اساس این نیازها سفارشی کنید.از جنبه‌های مختلفی می‌توان دلایلی را برای سپردن یک وردپرس کارسایت سفارسی به یک فرانت اند دولوپر مطرح کرد:1. مهارت‌های تخصصی: فرانت اند دولوپرها تخصص و تجربه قوی در طراحی و توسعه رابط کاربری (UI) و تجربه کاربری (UX) دارند. آنها می‌توانند طراحی‌های منحصر به فرد، انیمیشن‌ها و تعاملات پیشرفته را برای وبسایت شما ایجاد کنند که ممکن است با استفاده از قالب‌های استاندارد وردپرس به آن دسترسی نداشته باشید.2. سفارشی‌سازی پیشرفته: با استفاده از فرانت اند دولوپر، می‌توانید وبسایت خود را به طور کامل سفارشی کنید. این شامل تغییرات در طراحی، افزودن ویژگی‌های خاص، ایجاد قالب‌های سفارشی و ساختاردهی دقیقتر به وبسایت است. فرانت اند دولوپر می‌تواند به شما کمک کند تا نیازهای خاص و منحصر به فرد خود را در وبسایت وردپرس برآورده کنید.3. بهره‌وری و سرعت بالا: با سفارش ساری به یک فرانت اند دولوپر، می‌توانید برنامه‌نویسی بهینه‌تری برای وبسایت خود داشته باشید. این به معنی بهبود سرعت بارگیری، بهره‌وری بالاتر و عملکرد بهتر است. فرانت اند دولوپرها معمولاً با استفاده از زبان‌های برنامه‌نویسی مانند HTML، CSS و JavaScript کد می‌نویسند و می‌توانند بهینه‌سازی‌های لازم را برای کارایی بهتر انجام دهند.4. امکانات پیشرفته: با استفاده از فرانت اند دولوپرها، می‌توانید ویژگی‌ها و امکانات پیشرفته‌تری را به وبسایت خود اضافه کنید. این شامکانات شامل انیمیشن‌های پیچیده، تعاملات پویا، افزودن افکت‌های ویژه و امکانات تعاملی می‌شود که با استفاده از قالب‌های استاندارد وردپرس به آنها دسترسی محدودتری دارید.5. پشتیبانی فنی: در صورت نیاز به پیکربندی پیچیده‌تر، رفع اشکالات فنی و بهبود عملکرد، فرانت اند دولوپر می‌تواند به شما کمک کند. آنها تجربه و دانش فنی بیشتری در زمینه توسعه وب دارند و می‌توانند به شما در رفع مشکلات فنی و بهبود وبسایت کمک کنند. اگر نیازهای خاصی دارید یا می‌خواهید وبسایت تان طراحی شده باشد، همکاری با یک فرانت اند دولوپر می‌تواند گزینه مناسبی باشد.ui/uxUI وUX اصطلاحاتی هستند که در طراحی و توسعه وبسایت و نرم‌افزارها به کار می‌روند و به طور جداگانه به مفهوم‌های زیر اشاره می‌کنند:1. UI (User Interface) یا رابط کاربری: UI به مجموعه‌ای از المان‌ها، برخورد و تعامل کاربر با یک وبسایت یا نرم‌افزار اشاره دارد. طراحی UI شامل ظاهر و قابلیت‌های گرافیکی و تجسمی است که برای ارتباط بین کاربر و سیستم استفاده می‌شود. این شامل طراحی دکمه‌ها، منوها، فرم‌ها، نوارهای ناوبری و سایر المان‌های تعاملی است که کاربر با آنها در ارتباط است.2. UX (User Experience) یا تجربه کاربری: UX به تجربه کاربر در طول تعامل با وبسایت یا نرم‌افزار اشاره دارد. این شامل تمامی جنبه‌های تعامل کاربر با محصول مورد نظر است و هدف آن بهبود رضایت کاربران است. UX شامل طراحی فرآیند تعامل، ساختار اطلاعاتی، طراحی مسیرهای کاربری، فهرست‌ها و هرچیزی است که تجربه کاربر را بهبود بخشد.به طور خلاصه، UI و UX هر دو به جنبه‌های مختلف تعامل کاربر با یک محصول دیجیتال اشاره دارند. UI بر روی ظاهر و قابلیت‌های گرافیکی تمرکز می‌کند و UX بر روی تجربه کلی کاربر در استفاده از محصول تمرکز دارد. هدف اصلیUI وUX بهبود استفاده و رضایت کاربران است.

فرانت اند ، بک اند،فول استک کیست چه وظایفی دارد وباهم چه فرق هایی دارند؟

pooria vakili — Fri, 04 Aug 2023 13:15:46 +0330

فرانت اند دولوپرفرانت‌اند (Front-end) به بخشی از فرآیند توسعه نرم‌افزار اطلاق می‌شود که مربوط به طراحی و پیاده‌سازی واسط کاربری (User Interface) و تجربه کاربری (User Experience) است. در واقع، فرانت‌اند عبارت است از ساختاردهی و برنامه‌نویسی قسمت‌هایی از یک وبسایت یا نرم‌افزار که کاربران با آن در تعامل هستند.فرانت‌اند دولوپر (Front-end Developer) فردی است که مسئولیت طراحی و توسعه رابط کاربری و تجربه کاربری وبسایت یا نرم‌افزار را بر عهده دارد. وظایف عمده فرانت‌اند دولوپر شامل موارد زیر می‌شود:1. طراحی واسط کاربری: فرانت‌اند دولوپر باید طرح و طراحی واسط کاربری را بر اساس نیازها و الگوهای طراحی مدرن ایجاد کند. این شامل طراحی صفحات وب، لوگو، آیکون‌ها، رنگ‌ها، فونت‌ها و سایر عناصر تجربه کاربری است.2. برنامه‌نویسی وب: فرانت‌اند دولوپر باید از زبان‌های برنامه‌نویسی مانند HTML (HyperText Markup Language)، CSS (Cascading Style Sheets) و JavaScript استفاده کند تا صفحات وب را برنامه‌نویسی کند و ویژگی‌های تعاملی و قابلیت‌های پویا را به آنها اضافه کند.3. بهینه‌سازی عملکرد: فرانت‌اند دولوپر باید مطمئن شود که وبسایت یا نرم‌افزار به طور صحیح در مرورگرهای مختلف و رایانه‌ها و دستگاه‌های مختلف نمایش داده می‌شود و عملکرد بهینه‌ای دارد. این شامل بهینه‌سازی سرعت بارگذاری، پاسخگویی، بهبود مشاهده در دستگاه‌های موبایل و رعایت استانداردهای وب است.4. تست و اشکال‌زدایی: فرانت‌اند دولوپر باید صفحات وب را تست کرده و اشکالات را پیدا و رفع کند. او باید از ابزارها و تکنیک‌های مربوط به تست و اشکال‌زدایی استفاده کند تا اطمینان حاصل کند که وبسایت یا نرم‌افزار به درستی کار می‌کند.علاوه بر این، فرانت‌اند دولوپر باید با ابزارها و فریم‌ورک‌های مختلف مانند React، Angular، Vue.js و Bootstrap ، اگرچه ممکن است برخی از این موارد برای توسعه فرانت‌اند نرم‌افزارها مورد استفاده قرار نگیرند. همچنین، فرانت‌اند دولوپر باید با مفاهیم و تکنولوژی‌های مرتبط با وب آشنا باشد و قادر به همکاری با تیم‌های دیگر برای ادغام بخش‌های مختلف نرم‌افزار باشد.به طور خلاصه، فرانت‌اند دولوپر مسئولیت ایجاد واسط کاربری جذاب، قابل استفاده و تعاملی برای کاربران را بر عهده دارد و از تکنولوژی‌ها و ابزارهای مرتبط با طراحی و توسعه وب استفاده می‌کند.بک اند دولوپربک‌اند (Back-end) دولوپمنت به بخشی از فرآیند توسعه نرم‌افزار اطلاق می‌شود که مربوط به طراحی و توسعه قسمت‌های پشتیبانی و عملکردی یک وبسایت یا نرم‌افزار است. بک‌اند دولوپمنت شامل سرورها، پایگاه داده‌ها و لایه‌های منطق کسب و کار (Business Logic) است که وظیفه مدیریت داده‌ها، پردازش درخواست‌ها و ارائه پاسخ‌های مورد نیاز به کاربران را دارند.بک‌اند دولوپر (Back-end Developer) فردی است که مسئولیت طراحی و توسعه این لایه‌های پشتیبانی را بر عهده دارد. وظایف عمده بک‌اند دولوپر شامل موارد زیر می‌شود:1. پایگاه داده: بک‌اند دولوپر باید پایگاه داده‌ها را طراحی و مدیریت کند. او باید ساختار داده‌ها را تعریف کند، جداول را ایجاد کند و کوئری‌ها را برای استخراج و ذخیره داده‌ها ایجاد کند.2. لایه منطق کسب و کار: بک‌اند دولوپر مسئولیت پیاده‌سازی لایه‌های منطق کسب و کار را دارد. این لایه‌ها شامل عملیات پردازشی و منطقی است که در پشت صحنه نرم‌افزار انجام می‌شود. بک‌اند دولوپر باید قوانین و منطق کسب و کار را پیاده‌سازی کند و عملیاتی مانند محاسبات، اعتبارسنجی و ذخیره‌سازی داده‌ها را انجام دهد.3. سرور و برنامه‌نویسی شبکه: بک‌اند دولوپر باید با استفاده از زبان‌ها و فریم‌ورک‌های برنامه‌نویسی مانند Java، Python، Ruby، Node.js و PHP سمت سرور را پیاده‌سازی کند. او باید قادر به ایجاد و مدیریت سرورها و برنامه‌های شبکه باشد تا درخواست‌ها را دریافت کرده و پاسخ مناسب را برای کاربران تولید کند.4. امنیت: بک‌اند دولوپر باید از نظر امنیتی برنامه‌ها را محافظت کند و آسیب‌پذیری‌های احتمالی را شناسایی و رفع کند. او باید پروتکل‌ها و استانداردهای امنیتی را رعایت کند و از رمزنگاری و حفاظت از داده‌ها در ارتباطات استفاده کند.5.تست و اشکال‌زدایی: بک‌اند دولوپر باید صحت و عملکرد درست برنامه‌ها را تضمین کند. او باید تست‌های مربوط به برنامه‌ها را انجام داده و اشکالات و خطاها را پیدا و رفع کند. این شامل تست واحد، تست انتگرال و تست عملکرد است.علاوه بر این، بک‌اند دولوپر باید با ابزارها، فریم‌ورک‌ها و تکنولوژی‌های مرتبط با بک‌اند آشنا باشد. این شامل سیستم‌های مدیریت پایگاه داده (مانند MySQL، PostgreSQL، MongoDB)، فریم‌ورک‌های وب (مانند Django، Ruby on Rails، Express.js) و ابزارهای توسعه بک‌اند (مانند Git، Docker، RESTful API) است.بک‌اند دولوپر بر عهده دارد تا اجزای پشتیبانی و عملکردی یک وبسایت یا نرم‌افزار را طراحی و پیاده‌سازی کند تا به‌طور موثر با فرانت‌اند دولوپر و دیگر اجزای سیستم تعامل کند و کاربران بتوانند از برنامه با استفاده از واسط کاربری فرانت‌اند استفاده کنند.فول استکفول استک دولوپر (Full Stack Developer) یک توسعه‌دهنده نرم‌افزار است که در تمامی لایه‌های یک برنامه یا وبسایت، از بک‌اند (Back-end) تا فرانت‌اند (Front-end)، توانایی کار کند. به عبارت دیگر، فول استک دولوپر توانایی توسعه رابط کاربری (UI)، برنامه‌نویسی سمت سرور، پایگاه داده و سایر زمینه‌های مرتبط با توسعه نرم‌افزار را دارا می‌باشد.فول استک دولوپر توانایی‌های زیر را داراست:1. فرانت‌اند (Front-end) توسعه: فول استک دولوپر باید توانایی طراحی و توسعه قسمت‌های مرتبط با رابط کاربری (UI) و تجربه کاربری (UX) را داشته باشد. او باید بتواند با استفاده از زبان‌های مانند HTML، CSS و JavaScript صفحات وب تعاملی را طراحی و پیاده‌سازی کند.2. بک‌اند (Back-end) توسعه: فول استک دولوپر باید توانایی برنامه‌نویسی سمت سرور را داشته باشد. او باید بتواند با استفاده از زبان‌های برنامه‌نویسی مانند Java، Python، Ruby، PHP یا Node.js، سمت سرور را پیاده‌سازی کند و با پایگاه داده‌ها ارتباط برقرار کند.3. پایگاه داده: فول استک دولوپر باید توانایی طراحی، پیاده‌سازی و مدیریت پایگاه داده‌ها را داشته باشد. او باید با انواع پایگاه داده‌ها مانند MySQL، PostgreSQL، MongoDB و Redis آشنا باشد و بتواند با آن‌ها کار کند.4. طراحی و گرافیک: فول استک دولوپر باید توانایی طراحی و قالب‌بندی صفحات وب را داشته باشد. او باید بتواند با استفاده از ابزارها و تکنولوژی‌های مربوطه، ظاهر و بخش گرافیکی برنامه یا وبسایت را ایجاد کند.5. مدیریت سرور و نگهداری: فول استک دولوپر باید توانایی مدیریت سرورها و نگهداری برنامه‌ها را داشته باشد. او باید بتواند مشکلات سرور را رفع کند، عملکرد سیستم را بهبود بخشد و برنامه را به‌روز نگهدارد.به‌طور کلی، فول استک دولوپر با توجه به مهارت‌های گوناگونی که در توسعه نرمافزار دارد، قادر است به صورت مستقل یا در تیم‌های توسعه‌دهنده‌ای که متخصصان مختلفی در آن‌ها حضور دارند، فعالیت کند. این نوع توسعه‌دهندگان به دلیل داشتن دانش و تجربه در تمامی لایه‌های توسعه نرم‌افزار، می‌توانند به صورت جامع و کامل بر روی پروژه‌ها کار کنند و بتوانند از ابتدا تا انتها بر یک پروژه نرم‌افزاری تأثیرگذار باشند.فرق فرانت اند دولوپر با بک اند و فول استکفرانت‌اند دولوپر (Front-end Developer)، بک‌اند دولوپر (Back-end Developer) و فول استک دولوپر (Full Stack Developer) هر سه نقش مختلف در فرآیند توسعه نرم‌افزار دارند و در لایه‌های مختلف آن فعالیت می‌کنند. در ادامه، به توضیح هر کدام از این نقش‌ها می‌پردازم:1. فرانت‌اند دولوپر (Front-end Developer): فرانت‌اند دولوپر مسئولیت طراحی و توسعه قسمت‌های مرتبط با رابط کاربری (UI) و تجربه کاربری (UX) را دارد. او با استفاده از زبان‌های HTML، CSS و JavaScript صفحات وب تعاملی و قابل دسترسی را ایجاد می‌کند. فرانت‌اند دولوپر باید توانایی طراحی و گرافیک، برنامه‌نویسی جاوااسکریپت، نمایش و سازماندهی اطلاعات در صفحه و توسعه رابط کاربری پاسخ‌گویی (Responsive UI) را داشته باشد.2. بک‌اند دولوپر (Back-end Developer): بک‌اند دولوپر مسئولیت پشتیبانی و توسعه سمت سرور نرم‌افزار را بر عهده دارد. او با استفاده از زبان‌های برنامه‌نویسی مانند Java، Python، Ruby، PHP یا Node.js، قسمت‌های پنهان از نرم‌افزار را پیاده‌سازی می‌کند. بک‌اند دولوپر بر عهده مدیریت پایگاه داده، پردازش منطقی، ارتباط با سرویس‌های خارجی و ساختاردهی منطقی برنامه است.3. فول استک دولوپر (Full Stack Developer): فول استک دولوپر مهارت‌هایی در هر دو لایه فرانت‌اند و بک‌اند دارد. او توانایی توسعه در تمامی لایه‌های یک برنامه را داراست. یعنی می‌تواند قسمت‌های مرتبط با رابط کاربری را طراحی و پیاده‌سازی کند و همچنین قسمت‌های سمت سرور را پیاده‌سازی کند و با پایگاه داده‌ها ارتباط برقرار کند. فول استک دولوپر باید تسلط کامل بر زبان‌های برنامه‌نویسی مرتبط با هر دو لایه (مانند HTML، CSS، JavaScript و زبان‌های سمت سرور) و توانایی مدیریت پروژه و حل مسائل توسعه نرم‌افزاری را داشته باشد.به‌طور خلاصه، فرانت‌اند دولوپر بر روی رابط کاربری تمرکز دارد، بک‌اند دولوپر بر روی سمت سرور و پایگاه داده تمرکز دارد، و فول استک دولوپر توانایی کار در هر دو لایه را داراست. انتخاب نقشی متوقف بر تمایلات و علاقه شخصی شماست و می‌توانید بر اساس مهارت‌ها و علاقه خودتان در یکی از این نقش‌ها تخصص پیدا کنید یا به عنوان فول استک دولوپر به صورت گسترده‌تر در تمامی لایه‌های توسعه نرم‌افزار فعالیت کنید.https://www.youtube.com/watch?v=LZrGk4IUfKo

آیا شغل دواپس مناسب کار فرانت اند است یانه قسمت دوم

pooria vakili — Tue, 01 Aug 2023 15:15:54 +0330

ارور 402 چیست؟ارور 402 Not Permission در وب سایت‌ها، مربوط به این است که شما دسترسی لازم برای دسترسی به منبع مورد نظر را ندارید. این ارور ممکن است به دلیل عدم وجود دسترسی و یا احراز هویت نامعتبر باشد.علت این خطا ممکن است به دلیل محدودیت‌های دسترسی درون برنامه‌نویسی باشد. به عنوان مثال، اگر شما در حال اجرای یک برنامه PHP هستید، این خطا ممکن است به دلیل عدم دسترسی به دایرکتوری‌های مورد نیاز درون برنامه باشد.در موارد دیگر، این خطا ممکن است به دلیل عدم احراز هویت صحیح باشد. به عنوان مثال، اگر شما در حال اجرای یک برنامه از راه دور هستید، احتمالاً باید وارد شوید و احراز هویت کنید تا بتوانید به منابع دسترسی پیدا کنید.برای رفع این مشکل، شما باید ابتدا اطمینان حاصل کنید که دسترسی لازم برای دسترسی به منابع مورد نیاز درون برنامه را دارید. سپس مطمئن شوید که ورودی‌های احراز هویت صحیح هستند و شما به درستی احراز هویت کرده‌اید. در صورتی که این مشکل به دلیل محدودیت‌های دسترسی درون برنامه‌نویسی باشد، باید دسترسی لازم را به منابع موردنیاز اختصاص دهید.کوبرنتیز چیست؟کوبرنتیز (Kubernetes) یک پلتفرم مدیریت و اجرای برنامه‌های کاربردی مبتنی بر محیط‌های کانتینری مانند Docker است. با استفاده از کوبرنتیز، می‌توانید برنامه‌های خود را در یک محیط مجازی و جداگانه از محیط‌های دیگر اجرا کنید و به راحتی مدیریت کنید.کوبرنتیز به کاربران اجازه می‌دهد تا برنامه‌های خود را در چندینcontainer (ظرف) کانتینری در یک یا چند سرور اجرا کنند و به صورت خودکار توزیع و مدیریت کنند. با استفاده از کوبرنتیز، می‌توانید برنامه‌های خود را به صورت مداوم در حالت آماده به کار نگه دارید و به راحتی به محیط‌های مختلف منتقل کنید.کوبرنتیز از چندین مفهوم مانند پاد (Pods)، کنترل کننده (Controllers)، خدمات (Services) و بارگذاری تعادل دهنده (Load Balancer) استفاده می‌کند تا به کاربران اجازه دهد برنامه‌های خود را به صورت موثر و بهینه مدیریت کنند. همچنین، کوبرنتیز از ابزارهای متنوعی برای مانیتورینگ و مدیریت برنامه‌ها و منابع سخت‌افزاری استفاده می‌کند.در کل، کوبرنتیز یک پلتفرم مدیریت و اجرای برنامه‌های کاربردی مبتنی بر محیط‌های کانتینری است که به کاربران اجازه می‌دهد به راحتی برنامه‌های خود را در چندینcontainer کانتینری در محیط مجازی اجرا کنند و به صورت خودکار توزیع و مدیریت کنند.directadmin what?دایرکت ادمین (Direct Admin) یکی از پنل‌های مدیریت هاست می‌باشد که برای مدیریت وب‌سایت‌ها و سرورهای اینترنتی استفاده می‌شود. این پنل دارای امکاناتی مانند مدیریت دامنه‌ها، ایجاد پست الکترونیکی، پشتیبانی از زبان‌های برنامه‌نویسی مختلف و ... است.برای غیرفعال کردن دایرکت ادمین، می‌توانید به صفحه‌ی اصلی مدیریت دایرکت ادمین وارد شده و از منوی "Admin Level" گزینه‌ی"Reseller Level" را انتخاب کنید. سپس دکمه‌ی"Save" را برای ذخیره تغییرات فشار دهید. با انجام این کار، دایرکت ادمین غیرفعال شده و دسترسی به آن برای کاربران معمولی محدود می‌شود.cpanel what?cPanel یکی از محبوب‌ترین پنل‌های مدیریت هاست و سرورهای اینترنتی است که برای مدیریت وب‌سایت‌ها و سرورهای اینترنتی استفاده می‌شود. با استفاده از cPanel، کاربران می‌توانند به راحتی و با کمترین دانش فنی، وب‌سایت‌های خود را مدیریت کنند.این پنل دارای امکاناتی مانند مدیریت دامنه‌ها، ایجاد پست الکترونیکی، پشتیبانی از زبان‌های برنامه‌نویسی مختلف، مدیریت پایگاه داده‌ها، نصب و مدیریت سیستم‌های مدیریت محتوا (CMS) مانند وردپرس، جوملا و دروپال، مانیتور کردن منابع سرور و ... است. همچنین cPanel دارای رابط کاربری ساده و کاربرپسندی است که کاربران می‌توانند به راحتی از آن استفاده کنند.port ssl what?پورت SSL یا Secure Sockets Layer Port، پورتی است که برای ارتباط امن بین کاربر و سرور از پروتکل SSL یا TLS استفاده می‌شود. SSL یا Secure Sockets Layer یک پروتکل امنیتی است که برای رمزنگاری ارتباطات اینترنتی استفاده می‌شود و به کاربران امکان می‌دهد تا اطلاعات خود را بصورت امن از طریق اینترنت انتقال دهند.پورت استاندارد برای SSL یا TLS، پورت 443 است. بنابراین، هنگامی که یک کاربر به یک وب سایت با استفاده از SSL دسترسی پیدا می‌کند، مرورگر وب آدرس سایت را با پروتکل "https" به جای"http" نشان می‌دهد و به پورت 443 متصل می‌شود. این پورت به عنوان پورت پیش فرض برای SSL و TLS شناخته شده است و اکثر مرورگرهای وب و سرورهای وب از این پورت برای ارتباط امن استفاده می‌کنند.http ,https what?HTTP یا Hypertext Transfer Protocol یک پروتکل ارتباطی است که در اینترنت برای انتقال اطلاعات بین کاربر و سرور به کار می‌رود. این پروتکل برای انتقال اطلاعات از شبکه‌ای از سرورها و دستگاه‌ها استفاده می‌کند که به شبکه وب (World Wide Web) معروف است.از آنجا که HTTP یک پروتکل ارتباطی ناامن است، برای رمزنگاری اطلاعات و افزایش امنیت در ارتباط میان کاربر و سرور، پروتکل HTTPS یاHypertext Transfer Protocol Secure توسعه داده شده است. HTTPS از SSL یا TLS برای رمزنگاری ارتباط استفاده می‌کند و اطلاعاتی که از طریق این پروتکل منتقل می‌شوند، به صورت رمزنگاری شده ارسال می‌شوند.بنابراین، فرق اصلی بین HTTP وHTTPS در امنیت ارتباط است. در HTTPS، ارتباط بین کاربر و سرور رمزنگاری شده است و این باعث می‌شود که اطلاعاتی که بین کاربر و سرور منتقل می‌شوند، در برابر حملات جاسوسی محافظت شوند. در حالی که در HTTP، ارتباط بین کاربر و سرور به صورت غیر رمزنگاری شده است و اطلاعاتی که از طریق این پروتکل منتقل می‌شوند، به راحتی قابل مشاهده هستند و ممکن است توسط افرادی با دسترسی به شبکه‌ی میان‌رده (Man-in-the-Middle) تغییر یا سرقت شوند.host domain what?هاست، محلی است که فایل‌های وب‌سایت شما در آن قرار می‌گیرند و با استفاده از آن، کاربران می‌توانند به وب‌سایت شما دسترسی پیدا کنند. در واقع هاست، فضایی در سرورهای اینترنتی است که به شما اجازه می‌دهد تا فایل‌های وب‌سایت خود را بر روی آن آپلود کنید تا همگان بتوانند آن را مشاهده کنند.دامین، نامی است که برای شناسایی وب‌سایت شما استفاده می‌شود. به عبارت دیگر، دامین نام وب‌سایت شماست که توسط مرورگرها و کاربران برای دسترسی به وب‌سایت شما استفاده می‌شود. هر دامین به یک آدرس IP نسبت داده شده است که برای شناسایی سرورهای میزبان وب‌سایت استفاده می‌شود.بنابراین، هاست و دامین دو مفهوم جداگانه هستند. هاست به فضایی اشاره می‌کند که فایل‌های وب‌سایت شما در آن قرار دارند، در حالی که دامین به نام و شناسه وب‌سایت شما اشاره دارد و برای دسترسی به وب‌سایت شما توسط کاربران استفاده می‌شود. با این حال، برای راه‌اندازی یک وب‌سایت، هاست و دامین هر دو نیاز است و بدون آن‌ها وب‌سایت شما در دسترس کاربران قرار نخواهد گرفت.port tls what ?TLS یا Transport Layer Security یک پروتکل امنیتی است که برای رمزنگاری ارتباط اینترنتی و افزایش امنیت در ارتباط میان کاربر و سرور استفاده می‌شود. TLS پیشتر با نام SSL یاSecure Sockets Layer شناخته شده بود و اکثر مرورگرهای وب و سرورهای وب از TLS برای ارتباط امن استفاده می‌کنند.پورت استاندارد برای TLS، پورت 443 است. بنابراین، هنگامی که یک کاربر به یک وب سایت با استفاده از TLS دسترسی پیدا می‌کند، مرورگر وب آدرس سایت را با پروتکل "https" به جای"http" نشان می‌دهد و به پورت 443 متصل می‌شود. پورت 443 برای ارتباط امن وب بر روی پروتکل HTTPS استفاده می‌شود و اطلاعاتی که بین کاربر و سرور از طریق این پورت منتقل می‌شوند، به صورت رمزنگاری شده ارسال می‌شوند.یک سری سوال های که کاربران برای کار با directadmin می پرسند؟https://forum.directadmin.com/threads/permanently-disable-direct-admin.40073/#:~:text=Change%20the%20name%20of%20the,it%20or%20comment%20it%20out.https://forum.directadmin.com/threads/enable-disable-directadmin-and-accounts.23380/https://forum.directadmin.com/threads/how-to-disable-directadmin-auto-update.67390/https://forum.directadmin.com/threads/how-disable-open_basedir-for-only-one-domain.65996/https://forum.directadmin.com/threads/git-manager-is-not-visible.66114/https://forum.directadmin.com/threads/disable-config-redirect-to-2222.22307/https://forum.directadmin.com/threads/enable-disable-directadmin-and-accounts.23380/https://forum.directadmin.com/threads/disable-ssh-acess.63789/https://forum.directadmin.com/threads/i-disabled-ssl-in-user-level-cant-enable-it-now.62498/https://forum.directadmin.com/threads/enable-disable-directadmin-and-accounts.23380/https://forum.directadmin.com/threads/disable-local-dns-services.59899/یکم هم در موارد basic شبکه بدانیمپروتکل tcp/ipTCP/IP یا Transmission Control Protocol/Internet Protocol، یک مجموعه از پروتکل‌های شبکه است که برای ارتباط در شبکه‌های کامپیوتری استفاده می‌شود. این پروتکل‌ها شامل دو لایه‌ی جداگانه‌ی پروتکل هستند که هر یک وظایف مختلفی را بر عهده دارند:1. پروتکل اینترنت یا IP (Internet Protocol): این پروتکل برای ردیابی و ارسال بسته‌های داده ایجاد شده است و برای ارسال بسته‌های داده به دستگاه‌های دیگر در شبکه از آدرس IP استفاده می‌کند.2. پروتکل کنترل انتقال یا TCP (Transmission Control Protocol): این پروتکل برای برقراری ارتباطات امن و قابل اعتماد بین دو دستگاه در شبکه استفاده می‌شود. با استفاده از این پروتکل، بسته‌های داده بین دو دستگاه با کیفیت بالا و به صورت توزیع شده ارسال می‌شوند.TCP/IP به عنوان پایه‌ای برای شبکه‌های اینترنت و شبکه‌های کامپیوتری در سطح جهانی به کار می‌رود و تمام دستگاه‌های متصل به اینترنت از این پروتکل‌ها برای انتقال داده‌ها استفاده می‌کنند. به عنوان مثال، ارسال و دریافت ایمیل، مرور وب و ارسال فایل‌ها در اینترنت توسط TCP/IP انجام می‌شود.تعریف انواع پروتکل ها درشبکه های کامپیوتریدر شبکه‌های کامپیوتری، برای برقراری ارتباط بین دستگاه‌ها و انتقال داده‌ها، از پروتکل‌های مختلفی استفاده می‌شود. به طور کلی، پروتکل‌های شبکه را می‌توان به چهار دسته‌ی اصلی زیر تقسیم کرد:1. پروتکل‌های لایه فیزیکی: شامل پروتکل‌هایی مثل Ethernet، Wi-Fi، Bluetooth و غیره هستند که برای انتقال بیت‌ها در شبکه استفاده می‌شوند.2. پروتکل‌های لایه دو: شامل پروتکل‌هایی مثل ARP (Address Resolution Protocol) و PPP (Point-to-Point Protocol) هستند که برای شناسایی دستگاه‌ها و بسته‌های داده در شبکه استفاده می‌شوند.3. پروتکل‌های لایه سه: شامل پروتکل‌هایی مثل IP (Internet Protocol) و ICMP (Internet Control Message Protocol) هستند که برای مسیریابی بسته‌های داده در شبکه استفاده می‌شوند.4. پروتکل‌های لایه چهار به بالا: شامل پروتکل‌هایی مثل TCP (Transmission Control Protocol)، UDP (User Datagram Protocol)، HTTP (Hypertext Transfer Protocol)، FTP (File Transfer Protocol) و غیره هستند که برای ارتباط و انتقال داده‌ها بین دستگاه‌ها در شبکه استفاده می‌شوند.هر پروتکل به عنوان یک لایه از مدل OSI (Open Systems Interconnection) که یک مدل مرجع برای ارتباطات شبکه است، معرفی شده است و هر لایه از این مدل مسئولیت‌های خاص خود را در برقراری ارتباطات شبکه دارد.اینترانت چیست؟اینترانت (Intranet) یک شبکه‌ی خصوصی است که درون یک سازمان، شرکت یا سازمان دولتی ایجاد می‌شود تا به کاربران داخلی اجازه دسترسی به منابع و خدماتی را که درون این سازمان قرار دارند، بدهد. این شبکه محدوده دسترسی آن را به داخل سازمان کنترل می‌کند و امنیت بالاتری دارد، زیرا به دلیل محدود بودن دسترسی، احتمال ورود نفوذکننده‌ها کمتر است. درون اینترانت می‌توان به اطلاعات دیتابیس، اسناد و ایمیل‌ها دسترسی پیدا کرد، برنامه‌های کاربردی را اجرا کرد و با دیگر کاربران داخلی ارتباط برقرار کرد.به عبارت دیگر، اینترانت یک شبکه‌ی خصوصی برای ارتباط داخلی سازمان است که از طریق آن کاربران سازمان به منابع و خدمات درون سازمان دسترسی پیدا می‌کنند.

آیا شغل دواپس مناسب کار فرانت اند دولوپر هست یا نه آیا باید فرانت اند دولوپر کار دواپس یاد بگیرد یا نه

pooria vakili — Mon, 31 Jul 2023 19:19:30 +0330

می‌توان گفت که شغل دواپس مناسب کار فرانت‌ اند دولوپر است، چرا که بسیاری از خدمات دواپس نیاز به تخصص و مهارت در زمینه فرانت‌ اند دارند. به عنوان مثال، برای مدیریت بخش‌هایی از سایت مانند هاستینگ، دیتابیس، امنیت سایت و ... نیاز به دانش در زمینه فرانت‌ اند وب دارید.اما باید توجه داشت که کار دواپس و فرانت اند دو حوزه متفاوت هستند و هر دو نیاز به تخصص و مهارت‌های خودشان دارند. به علاوه، بهتر است که هر کدام از این حوزه‌ها را به طور جدی و به صورت تخصصی بررسی کرد و بر اساس علاقه و توانایی شخصی، به یکی از این حوزه‌ها تمرکز کنید.در مورد یادگیری دواپس برای یک فرانت‌ اند دولوپر، باید گفت که این به عنوان یک تجربه مفید به شما کمک می‌کند تا بیشتر با فرایند توسعه‌ی یک پروژه آشنا شوید و درک بهتری از ابزارها و تکنولوژی‌های مورد استفاده در یک پروژه داشته باشید. اما بهتر است که تمرکز اصلی شما روی فرانت‌ اند باشد نه دواپس. اما باید توجه داشت که هر کاری که انجام می‌دهید، همراه با ریسک‌هایی همراه است.در مورد ریسکی که شما اشاره کرده‌اید، اگر سرور شما برای هاست دامین، سرور وب و یا اینترنت برای شرکت شما قطع شود، ممکن است با مشکلاتی همراه باشد. اما با استفاده از ابزارهایی مانند Git، Azure، GitLab، Docker، Visual Studio، Nginx، CI/CD، PM2 و SSH، می‌توانید به راحتی سیستم‌های پشتیبانی و نگهداری را ایجاد کنید تا در صورت بروز هرگونه مشکل، بتوانید سریعاً به سیستم‌های قبلی بازگردید و مشکل را برطرف کنید.از طرفی، همانطور که شما هم اشاره کرده‌اید، بهتر است که بخش‌هایی از کار دواپس مانند هاستینگ، دیتابیس و امنیت سایت را به تیم‌های متخصص و مسئول بسپارید تا از این مسائل برعهده آن‌ها باشد. در نهایت، با داشتن تیم‌های متخصص و مسئول و استفاده از ابزارهای مناسب، می‌توانید به راحتی ریسک‌های کار دواپس را کاهش دهید و بهبود کیفیت کار خود را تضمین کنید.pm2 what؟PM2 یک مدیر فرآیند برای برنامه‌های Node.js است که به کاربران اجازه می‌دهد برنامه‌های خود را به سادگی بیشتری مدیریت کنند. PM2 یک نرم‌افزار مجازی‌سازی است که بر روی سیستم‌عامل‌های مختلف قابل اجرا است و برای مدیریت پردازش‌های Node.js استفاده می‌شود.PM2 قابلیت‌های مختلفی ارائه می‌دهد، از جمله:راه‌اندازی و مدیریت برنامه‌های Node.js با استفاده از چندین فرآیند (process) (cluster mode)مانیتور کردن عملکرد برنامه و نمایش اطلاعات مربوط به پردازش‌ها و منابع سیستم مورد استفاده توسط برنامه‌ها (monitor mode)راه‌اندازی خودکار برنامه در صورت خاموش شدن یا برخورد با خطا (restart mode)برنامه‌های Node.js را در پس‌زمینه اجرا کرده و به صورت مداوم در حال اجرا بودن آن‌ها را تضمین می‌کند (daemon mode)نصب و مدیریت بسته‌های Node.js از طریق PM2با استفاده از PM2، می‌توانید به راحتی برنامه‌های Node.js خود را مدیریت کنید و از مزایای این ابزار برای ارتقاع کارایی و عملکرد برنامه‌های خود بهره بگیرید.1 - نصب پکیج PM2 : ssh what؟2 - اجرای پروژه با PM2// Start and Daemonize applicationpm2 start app.js --name my_app_name// to switch can be used to automatically restart process on every change in project// --watch // --ignore-watch="node_modules"برای اجرای پروژه روی چند تا از core های CPU میتونید از سوئیچ i استفاده کنید :// Load Balance 4 instances of api.js pm2 start api.js -i 4 pm2 start api.js -i max3 - ذخیره تنظیمات که بعد از Restart شدن سرور ، پروژه مجددا به طور اتوماتیک اجرا بشه// Make pm2 auto-boot at server restart:pm2 startup// freeze to automatic re spawn pm2 save برای مانیتور کردن پروژه میتونید از دستور های زیر استفاده کنید که هر کدوم به نحوی میتونه توی مانیتور کردن پروژه تون مفید باشه :1234567// Monitor in production: pm2 monitor pm2 monit pm2 imonit pm2 logs pm2 logs pm2 show برای مشاهده لیست پروژه های اجرا شده توسط pm2 از این دستور استفاده کنید :pm2 listو برای stop و start کردن پروژه از این دستور استفاده کنید : stop : pm2 stop pm2 stop // to start pm2 start // to restart pm2 restart برای حذف پروژه از لیست pm2 از دستور زیر استفاده کنید :pm2 stop pm2 delete از pm2 میتونید به عنوان یه وب سرور برای فایل های استاتیک هم استفاده کنید ، لازم هم نیست اصلا پروژه node.js داشته باشید ، بلکه میتونید یه directory رو مثل یک وب سرور روی هر port که خواستید میزبانی کنید :pm2 serve expose ssh what?SSH مخفف عبارتSecure Shell می‌باشد و یک پروتکل امنیتی برای ارتباط از راه دور بین دو دستگاه است. با استفاده از SSH، می‌توانید به یک سیستم کامپیوتری از راه دور و از طریق اینترنت متصل شوید و فرمان‌ها و دستورات را از راه دور اجرا کنید.ازSSH برای ارتباط با سرورها و دیگر دستگاه‌های از راه دور استفاده می‌شود. با استفاده ازSSH، می‌توانید به سیستم عامل سرور متصل شوید و دستورات را از راه دور اجرا کنید. این بسیار مفید است زیرا به شما اجازه می‌دهد تا به دستگاه‌های دیگر از راه دور دسترسی داشته باشید و مانند آن‌ها کنترل کنید. همچنین، SSH امکاناتی برای امنیت بیشتر در ارتباط از راه دور فراهم می‌کند و از امنیت بالایی برخوردار است.به طور خلاصه، SSH یک پروتکل امنیتی برای ارتباط از راه دور بین دو دستگاه است که برای اتصال به دستگاه‌های دیگر از راه دور و اجرای دستورات از راه دور استفاده می‌شود.اگر می‌خواهید مطالب خود را در سایت دوپلیش کنید و از یک سرور هاست لینوکس برای این کار استفاده می‌کنید، می‌توانید از نرم‌افزارهایی مانند WinSCP و FileZilla استفاده کنید تا به سرور هاست لینوکس خود وصل شوید و فایل‌های خود را در سرور بارگذاری کنید. برای این کار، ابتدا باید اطلاعات ورود به سرور هاست خود را (مانند نام کاربری، رمز عبور و آدرس سرور) در نرم‌افزار مورد نظر خود وارد کنید و سپس به سرور وصل شوید و فایل‌های خود را در سرور بارگذاری کنید.ngnix what؟ در مورد بالا آمدن سرور، اگر شما سرور خود را در سرویس‌های ابری مانند سواگر استقرار داده‌اید، می‌توانید با استفاده از ابزارهایی مانند Nginx، سرور خود را تنظیم کنید. Nginx یک وب سرور متن باز است که برای اجرای دیگر نرم‌افزارهای وب مانند PHP و Python نیز قابل استفاده است. با استفاده از Nginx، می‌توانید سرور خود را بهبود دهید، بارگذاری وب‌سایت را افزایش دهید و امنیت وب‌سایت خود را افزایش دهید.برای تنظیم Nginx، باید به مسیر فایل تنظیمات Nginx بروید و فایل تنظیماتی که برای سرویس ابری خود می‌خواهید را ویرایش کنید. در این فایل، شما می‌توانید تنظیمات مربوط به سرور خود را انجام دهید، مانند تنظیمات دامنه، SSL و فیلترینگIP. بعد از انجام تغییرات، باید فایل را ذخیره کنید وNginx را با استفاده از دستور service nginx restart یا systemctl restart nginx راه‌اندازی مجدد کنید تا تغییرات اعمال شود.به طور خلاصه، با استفاده از Nginx می‌توانید سرعت و امنیت وب‌سایت خود را بهبود دهید و با تنظیمات مناسب، بهبود کارایی سرور خود را تجربه کنید.ci/cd what?CI/CD به مجموعه‌ای از اصول و فرایندهای مربوط به توسعه نرم‌افزار و ارائه آن به مشتریان با سرعت و کیفیت بالا گفته می‌شود. CI/CD مخفف Continuous Integration/Continuous Deployment است.Continuous Integration به معنای ادغام مستمر کد است و به فرایندی اطلاق می‌شود که در آن، تغییرات کد توسط برنامه‌های خودکار بررسی و ادغام می‌شوند تا مشکلات احتمالی در ابتدای فرآیند شناسایی و برطرف شوند.Continuous Deployment به معنای ارائه مستمر نرم‌افزار به مشتریان است و به فرایندی اطلاق می‌شود که در آن، نرم‌افزار تغییر یافته برای استفاده مشتریان آماده می‌شود.CI/CD به کمک اتوماسیون فرایندهای تست، ادغام و ارائه نرم‌افزار، مزیت‌های زیادی را در اختیار توسعه‌دهندگان و مشتریان قرار می‌دهد، از جمله افزایش کیفیت و سرعت توسعه و ارائه نرم‌افزار، افزایش اعتماد به نرم‌افزار، کاهش خطاها و افزایش بهره‌وری توسعه‌دهندگان می باشد.docker what?داکر (Docker) یک پلتفرم متن باز برای اجرای برنامه‌های کاربردی در محیط‌های مجازی است. داکر به کاربران اجازه می‌دهد تا برنامه‌های خود را در یک محیط مستقل و جداگانه از سیستم‌عامل و سخت‌افزار میزبان اجرا کنند.در داکر، هر برنامه به عنوان یک container (ظرف) مستقل اجرا می‌شود که شامل کدهای برنامه، ابزارهای مورد نیاز برای اجرای برنامه و تنظیمات محیطی است که برای اجرای برنامه لازم است. هر container با سایر containerها مستقل است و نمی‌تواند به منابع یا پروسه‌های دیگر دسترسی داشته باشد.یکی از مزیت‌های اصلی داکر این است که به کاربران اجازه می‌دهد تا برنامه‌های خود را با تنظیمات محیطی خاص در container اجرا کرده و به راحتی بین سیستم‌ها و محیط‌های مختلف منتقل کنند. بنابراین، با استفاده از داکر، می‌توانید از تنظیمات آسان برای اجرای برنامه‌های خود استفاده کنید و در هر محیطی که نیاز باشد اجرای برنامه را انجام دهید.به طور خلاصه، داکر یک پلتفرم مجازی که به کاربران اجازه می‌دهد برنامه‌های خود را در محیطی جداگانه و مستقل از سیستم‌عامل و سخت‌افزار میزبان اجرا کنند.git what؟مثلا azure و تنظیمات گیت به شما می دهند کار کردن با ویژوال استادیو گرافی که هر برنامه نویس دارد در اون نرم افزار و add commit push pull merge است مورد دوم باید یک برنامه نویس فرانت بلد باشد ولی مورد اول باید یک دواپس کار بلد باشدرودمپ دواپسرودمپ داکرhttps://roadmap.sh/dockerرودمپ کوبرنتیزhttps://lnkd.in/dMfc44ue

ارورها در فریم ورک ناکس

pooria vakili — Mon, 29 May 2023 11:08:56 +0330

می آموزیم چگونه ارور درلایف سایکل های مختلف ایجاد کنیمناکس 3 یک فریم ورک فول استک است، به این معنی است که موجود است در چندین سورس در سمت کاربر ران تایم های ایجاد می کند که این ارورها می تواند در کانتکس های مختلف به وقوع می پیوندد1) ارورهایی که سمت لایف سایکل ها به صورت (spa-ssr) رندر می شود2) اروهای که درسمت nitro server هستند3) ارورهای که درسمت کلاینت (spa,ssr) هستند.4) دانلود ارورها در سمت jschunksارورهای که درسمت لایف سایکل های ویوجی اس به صورت (spa,ssr) رندر می شوندشما می توانید هوک هایی اروری در سمت ویو استفاده کنیددر طولانی مدت،فریم ورک ناکس از هوک های vue:error پشتیبانی می کند که به منظور تعامل با ارور های سطح بالا استاگر شما استفاده می کنید ارورهایی در سمت فریم ورک ،شما می توانید پشتیبانی کنید از گلوبال هندلرهایی که سمت vueApp.config.errorHandler پشتیبانی می شودارورهای که درسمت سرور وکلاینت است (Spa,ssr)فریم ورک ناکس قصد دارد با هوک های موجود در صورت وجود تماس بگیرد و در صورت شروع خطایی که در اپلیکیشن های ناکس رخ می دهد،آن را اعلام کند.شامل می شود1) پلاگین های که در سمت فریم ورک ناکس ایجاد می شود2) رندر می کنید شما vueApp به html که در سرور است3) اپلیکیشن های که در همان زمان mount شدن در سمت کلاینت نشان داده می شود و شما باید در صورت بروز خطا، از onErrorCaptured یا vue:error استفاده کنید.4) هوک هایی که در سمت پردازش به سمت mount:app می رود.ارور های که به صورت api یا در سمت سرور لایف سایکل های nitro استشما نمی توانید در حال حاضر سرورساید های دیفان و هندل کنید،اما می توانید رندر های که در سمت صفحه استErrors downloading JS chunksشما ممکن است رویارویی داشته باشید با ارورهای chunk که در شبکه کانکت می شود و دیپلوی جدید ( که در گذشته آن را لود کردید) وهم چنین url هایی که در js chunk فرستاده می شوند، مواجه شوید.فریم ورک ناکس قابلیت ایجاد و پشتیبانی از chunk هایی که به صورت لود شده اند را دارند. مشکلات پرفورمنس و نوگیشن در مسیرهای روت معمولا به علت این chunk ها است.شما می توانید تغییر دهید رفتاری که در تنظیمات experimental.emitRouteChunkError که false و ( هوک هایی که خوانده نمی شود یا ارورهایی که درهمه جا وجود دارد) ویا به صورت معمولی اگر سپس شما خودتان می خواهید هندل کنید. اگر شما می خواهید chunkها هندل کنید ارورهای است که معولا در سمت لودینگ می فرستید، شما می توانید اتوماتیک ایده هایی که وجود دارد چک کنید.Rendering an Error Pageموقعی که فریم ورک ناکس برخورد می کنید وبا لایف سایکل هاش کار می کنید موقعی که در سمت اپلکیشن ویو رندر می شود (spa,ssr) است،می خواهید یک json ریسپانس کنید ( اگر ریکوئستی که میفرستاد پذیرفته شود درسمت header application/json) واروری که در سمت صفحه html وجود دارد.شما می توانید شخصی سازی کنید صفحات اروری که اضافه می شود در سمت error.vue سورس دایرکتوری که در سمت اپلکیشن هستند که در app.vue وجود دارد. این صفحات در یک prop که شامل ارورهای که هندل می شود.موقعی که شما آمادگی دارید صفحه هات ارور پاک کنید ، شما می توانید در تماس باشید با clear error هایی که در سمت متود به شما کمک میکند،که می گیرد option هایی که در سمت path رندر می شوند (که به طور مثال در safe page navigation) می باشد.use errorCreate Errorشما می توانید متودهای در این سمت استفاده کنید که می تواند ارورهای جدید در سمت meta data ایجاد کند.این است قابل استفاده در ویوجی اس وNitro و اپ های که وجود دارد به این معنی برگردانده می شود.اگرشما خطا برگردانید، وارورهای جدید در creatError ایجاد کنیددر سرور ساید آن می خواهید trigger full screen ارور هایی که در صفحاتی که می توانید با clear error پاک کنیددر کلاینت ساید شما می خواهید،صفحاتی که درسمت ارورهای none-fatal است اگر شما می خواهید هندل کنید نیاز دارید به trigger a full-screen که ارورهای صفحه می خواند،سپس شما می توانید به تنظیمات در fatal:true انجام می دهیدshow Errrorشما می توانید به متود های در تماس باشید که پوینت بندی در کلاینت سایت یا سرور سایت می کند ودایرکت می شود به میدلور هایی که پلاگینش در متود setup() وجود دارد.شما می خواهید trigger a full-screen صفحات اروری که می توانید پاک کنید در clear error ایجاد کنیدClear errorاین است متود هایی می خواهید در حال حاضر در سمت handle nuxt error تمیز کند.اگر بنابراین option هایی که به سمتpath ریدارکت می کنید که به طور مثال اگر شما می خواهید در safe page نویگیت کنیدارورهای که در سمت اپ رندر می شودتگ یک کامپونت است که به شما اجازه می دهد در سمت پروژه های کلاینت خود با خطاها برخورد کنید وبه جای صفحات خطا موجود در وب سایت،ازآن استفاده کنید.این کامپونت های است که responsible می شود ارورهای که هندل وبه وقوع می پیوندد در اسلات های که به صورت default وجود دارد.در کلاینت این می خواهید جلوگیری کنید ارورهای که درسمت بالا وجود دارد و رندر میکنید در اسلاتی که در #error وجود دارد.ارورهای که درسمت slot به صورت prop می فرستید (اگر شما ست کنید در trigger ری رندر می شود و این error=null باشد و اون slot به صورت default باشد شما نیاز دارید به این ارورهای که به طور کامل حل شده است واولین ارورهای که در اسلات می خواهید فقط در بار دوم رندر کنیدمنابع این پستhttps://nuxt.com/docs/getting-started/error-handling

evan u what

pooria vakili — Fri, 19 May 2023 00:15:40 +0330

آقای evan u سازنده ویو جی است رشته تحصیلی اش هنر بود و برای این که در شرکت گوگل استخدام شود مدام افزونه های کروم درست می کرد و به قدری این افزونه های کروم درست کردن ادامه داد تا بالاخره در شرکت گوگل استخدام شد و فریم ورک انگولار کار کرد آقای evan u دید که انگولار فریم ورک ولایبری خیلی سخت است از شرکت گوگل خارج شد و ویو جی اس درست کرد که به صورت opensource کارش ادامه داد وبرای یادگیری ویوجی اس سایت vueschools.com درست کرد که به صورت آکادمی ویوجی اس آموزش دهد و با شرکت های مثل علی بابا در چین به صورت اسپانسر کار می کند والان که ناکس با David و پوریا پارسا ادامه می دهد خود آقای evan you فقط اسپانسر است. یکی از هدف های که آقای evan u ویو جی اس ساخت این بود که از فریم ورک انگولار راحت تر بسازد و تاجایی ویوجی اس خیلی شبیه به انگولار ساخته شده است و تا جایی مخصوصا composition api به react تا ۳۰ درصد تقریبا شبیه کرده است سازنده vite هم آقای evan you است که به صورت modules کار می کند که با vue cli webpack خیلی فرق می کند کهvite react svelte preact vuejs quasar nuxt 3 می توانید بسازید https://evanyou.me/ویو جی اس از دسامبر سال 2013 شروع کرد وبیشتر بیوگرافی خواندن evan u به این لینک مراجعه کنیدhttps://lnkd.in/eAmnJ2_wآقای evan u سازنده ویو جی است رشته تحصیلی اش هنر بود و برای این که در شرکت گوگل استخدام شود مدام افزونه های کروم درست می کرد و به قدری این افزونه های کروم درست کردن ادامه داد تا بالاخره در شرکت گوگل استخدام شد و فریم ورک انگولار کار کرد آقای evan u دید که انگولار فریم ورک ولایبری خیلی سخت است از شرکت گوگل خارج شد و ویو جی اس درست کرد که به صورت opensource کارش ادامه داد وبرای یادگیری ویوجی اس سایت vueschools.com درست کرد که به صورت آکادمی ویوجی اس آموزش دهد و با شرکت های مثل علی بابا در چین به صورت اسپانسر کار می کند والان که ناکس با David و پوریا پارسا ادامه می دهد خود آقای evan you فقط اسپانسر است. یکی از هدف های که آقای evan u ویو جی اس ساخت این بود که از فریم ورک انگولار راحت تر بسازد و تاجایی ویوجی اس خیلی شبیه به انگولار ساخته شده است و تا جایی مخصوصا composition api به react تا ۳۰ درصد تقریبا شبیه کرده است سازنده vite هم آقای evan you است که به صورت modules کار می کند که با vue cli webpack خیلی فرق می کند کهvite react svelte preact vuejs quasar nuxt 3 می توانید بسازید https://evanyou.me/ویو جی اس از دسامبر سال 2013 شروع کرد وبیشتر بیوگرافی خواندن evan u به این لینک مراجعه کنیدhttps://lnkd.in/eAmnJ2_wآقای evan u سازنده ویو جی است رشته تحصیلی اش هنر بود و برای این که در شرکت گوگل استخدام شود مدام افزونه های کروم درست می کرد و به قدری این افزونه های کروم درست کردن ادامه داد تا بالاخره در شرکت گوگل استخدام شد و فریم ورک انگولار کار کرد آقای evan u دید که انگولار فریم ورک ولایبری خیلی سخت است از شرکت گوگل خارج شد و ویو جی اس درست کرد که به صورت opensource کارش ادامه داد وبرای یادگیری ویوجی اس سایت vueschools.com درست کرد که به صورت آکادمی ویوجی اس آموزش دهد و با شرکت های مثل علی بابا در چین به صورت اسپانسر کار می کند والان که ناکس با David و پوریا پارسا ادامه می دهد خود آقای evan you فقط اسپانسر است. یکی از هدف های که آقای evan u ویو جی اس ساخت این بود که از فریم ورک انگولار راحت تر بسازد و تاجایی ویوجی اس خیلی شبیه به انگولار ساخته شده است و تا جایی مخصوصا composition api به react تا ۳۰ درصد تقریبا شبیه کرده است سازنده vite هم آقای evan you است که به صورت modules کار می کند که با vue cli webpack خیلی فرق می کند کهvite react svelte preact vuejs quasar nuxt 3 می توانید بسازید https://evanyou.me/ویو جی اس از دسامبر سال 2013 شروع کرد وبیشتر بیوگرافی خواندن evan u به این لینک مراجعه کنیدhttps://lnkd.in/eAmnJ2_wاین کلیپ در یوتوپ ببنیدhttps://www.youtube.com/watch?v=OrxmtDw4pVI

تغییرات در ناکس 3.5

pooria vakili — Thu, 18 May 2023 22:48:46 +0330

ناکس 3.5 هم از روز سه شنبه 16/05/2023 اومدتا vue.3.3 پشتیبانی می کندdefineOptionsکه در این options کامپونت به صورت جنریک بنویسید وdefine props در define options قراردهیدNitropack v2.4این نسخه netlify vercel,cloudflare پشتیبانی می کنداز مهم ترین تغییرات ناکس 3.5 به این عکس نگاه کرد که علاوه بر ssr ssg isr در پروژه هااضافه کردRich JSON payloadsحالا این Rich JSON payload serialisation استفاده کنید در این اجازه دارید ارایه ها ودر nuxt-server به صورت کلاینت قراردهیدبه عنوان مثال در این تکه خط کدThis is all possible due to Rich-Harris/devalue#58. For a long time, Nuxt has been using our own fork of devalue owing to issues serialising Errors and other non-POJO objects, but we now have transitioned back to the original.You can even register your own custom types with a new object-syntax Nuxt plugin:شما فعلا می توانید route هایی که در nuxt app می نوشتید به صورت ازمایشی درunplugin-vue-router بنویسدhttps://lnkd.in/dH-FK3ZFو از اینها هم میتوانید استفاده کنیدOut of the box, this will enable typed usage of navigateTo, , router.push() and more.You can even get typed params within a page by using const route = useRoute('route-name').Enable this feature directly in your nuxt.config:export default defineNuxtConfig({ experimental: { typedPages: true }})We now have full support within Nuxt for the bundler strategy of module resolution.We would recommend adopting this if possible. It has type support for subpath exports, for example, but more exactly matches the behaviour of build tools like Vite and Nuxt than Node16 resolution.nuxt.config.tsexport default defineNuxtConfig({ typescript: { tsConfig: { compilerOptions: { moduleResolution: 'bundler' } } }})کامل همین تغییرات ناکس 3.5 در این لینک بخوانیداین مقاله از این برگرفته و ترجمه شده استhttps://nuxt.com/blog/v3-5

تغییرات در vue 3.3

pooria vakili — Thu, 18 May 2023 22:42:26 +0330

ویوجی اس 3.3 چه تغییراتی کرده است؟این نسخه فوکوس یا اشاره کرده است که کسانی ویوجی اس با تایپ اسکریپت کار می کنندDependency UpdatesWhen upgrading to 3.3, it is recommended to also update the following dependencies:volar / vue-tsc@^1.6.4vite@^4.3.5@vitejs/plugin-vue@^4.2.0vue-loader@^17.1.0 (if using webpack or vue-cli)