💎 معماری MVC چیست ؟ 💎

معماری MVC یا مدل-ویو-کنترلر درواقع یک معماری برنامه نویسی که نرم افزار شما رو به سه بخش مستقل تقسیم می‌کنه که به وضوح تفکیک وظایف و مدیریت بهتر کدها کمک می‌کنه

هر کدوم از این بخش ها چی هستند ؟ 🚀

🗂️ Model (مدل)

مدل وظیفه مدیریت دیتا و منطق مرتبط با اونها رو بر عهده داره. این بخش با پایگاه داده ارتباط برقرار می‌کنه و شامل توابعی هست که داده‌ها رو ذخیره، بازیابی و ... می‌کند.

خلاصش اینه که Model مدیریت و تعامل با دیتابیس رو بر عهده داره.

🖥️ View (ویو)

ویو یعنی بخش مربوط به نمایش رابط کاربری و در واقع این بخش میاد و دیتای پردازش‌شده رو از کنترلر دریافت میکنه و اونها را به کاربر نمایش می‌ده.

ویو معمولاً شامل قالب‌های HTML یا موتورهای قالب‌سازی مثل EJS یا Pug هستش که بهمون کمک میکنن دیتامون رو به صورت داینامیک نشون بدیم.

🎮 Controller (کنترلر)

این قسمت درواقع واسطه بین مدل و ویو هستش و درخواست‌های کاربر رو دریافت میکنه، دیتای مورد نیاز رو از مدل درخواست میکنه و در نهایت دیتای پردازش‌شده رو به ویو ارسال می‌کنه تا به کاربر نمایش داده شود.

مزایای استفاده از MVC چیه ؟ ✅

🛠️ تفکیک مسئولیت‌ها : هر بخش مسئولیت مشخصی داره و مدیریت کدها ساده تر میشه.

⚡ قابلیت نگهداری بهتر : همه تغییرات تو یک بخش و بدون تاثیر در بخش‌های دیگه انجام میشه.

📈 مقیاس‌پذیری : پروژه‌ها با ساختار MVC به سادگی مقیاس‌پذیرن.

اینم یه نمونه کاربردی از استراکچر mvc 🔻

mvc_project/
├── models/
│   └── userModel.js
├── views/
│   ├── users.ejs
│   ├── userDetail.ejs
│   └── error.ejs
├── controllers/
│   └── userController.js
├── routes/
│   └── userRoutes.js
├── public/
│   └── css/
│       └── style.css
├── server.js
└── app.js

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #WhtsThat #MVC #structure

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

لگسی‌کد ( legacy code ) چیست ؟

با چاشنی طنز ؛)

#️⃣ #WhtsThat #NEWPost #legacycode

🚀 @coolycode

#WhatsThat #javascript #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part1

یکی از روش‌های قدرتمند در جاوااسکریپت برای تعریف یا تغییر ویژگی‌های یک شیء به صورت دقیق و کنترل شده Object.defineProperty است. با استفاده از این متد، می‌توانید ویژگی‌های جدیدی به یک آبجکت اضافه کنید یا ویژگی‌های موجود را تغییر دهید و حتی رفتارهای سفارشی مدنظر خودتون رو برای آن‌ها تعریف کنید.

ویژگی های کلیدی Object.defineProperty 🚀

➊ کنترل کامل بر روی ویژگی‌ها : شما می‌توانید مشخص کنید که آیا یک ویژگی قابل خواندن، نوشتن یا حذف شدن است یا خیر.

➋ تعریف getter و setter : می‌توانید فانکشنالیتی کاستوم خودتون رو برای خواندن (getter) و نوشتن (setter) مقدار یک ویژگی تعریف کنید. این به شما اجازه می‌دهد تا عملیات پیچیده‌تری را قبل یا بعد از تغییر مقدار یک ویژگی انجام دهید.

➌ ایجاد ویژگی‌های غیر قابل تغییر : می‌توانید ویژگی‌هایی ایجاد کنید که پس از مقداردهی اولیه قابل تغییر نباشند ( در چالش قبلی از این این ویژگی استفاده شده بود ).

➍ بهینه سازی عملکرد : در برخی موارد، استفاده از Object.defineProperty می‌تواند به بهبود عملکرد کد کمک کند.

✅ ساختار کلی Object.defineProperty

Object.defineProperty(obj, prop, descriptor);

1️⃣ obj : آبجکتی که می‌خواهید ویژگی آن را تعریف یا تغییر دهید.

2️⃣ prop : نام ویژگی‌ای که می‌خواهید تعریف کنید.

3️⃣ descriptor : یک آبجکت که ویژگی‌های مورد نظر برای ویژگی جدید را توصیف می‌کند.

⚡ در کل Object.defineProperty یک ابزار قدرتمند برای کنترل دقیق پروپرتی‌ها در جاوا اسکریپت است. با درک کامل این متد، می‌توانید کدهای تمیزتر و انعطاف‌پذیرتری بنویسید. هدف این پست صرفا معرفی این متد بود، توی پست های بعدی به صورت جزئی بخش های جزئی و حرفه ای تر این متد رو بررسی میکنیم ✅

⚠️ ( حتما به این نکته توجه کنید که استفاده بیش از حد از Object.defineProperty می‌تواند کد را پیچیده‌تر کند. بنابراین، بهتر است از آن در مواردی استفاده کنید که واقعا نیاز به کنترل دقیق بر روی ویژگی‌های یک شیء دارید )

Channel | YouTube | Instagram

این خیلی خوب بود 😍😂

ولی خب دور از شوخی حق میگه !
من خودم از اون کساییم که هیچوقت بحث نمیکنم در مورد اینکه دانشگاه رفتن درسته یا نه، فقط می‌خوام بگم صرفا با اتکا کردن به درس های دانشگاه یه حتی کلاس های حضوری و آنلاین برنامه نویسی به نقطه خفنی نمیرسید اگر میخواید پیشرفت کنید توی این حوزه باید خودتون برید دنبال چیزای جدید و از رو به رو شدن باهاشون نترسید و اجازه بدید به خودتون که خودتون تجربه کنید

#️⃣ #fun | #programming | #self_study

🚀 @coolycode

💎 بررسی tree shaking در جاوااسکریپت 💎

درواقع Tree Shaking در جاوااسکریپت یک تکنیک بهینه‌سازیه که کدهای استفاده نشده رو از باندل نهایی حذف می‌کنه و به طور خاص با ماژول‌های ES6 کار می‌کنه که از دستورهای import و export برای مدیریت وابستگی‌ها استفاده می‌کنند.

هدف اصلی tree shaking اینه که فقط کدی که واقعاً در برنامه استفاده میشود در باندل نهایی باقی بماند و کدهای اضافی حذف شوند 💥

چه مزایایی داره ؟ 🚀

با کاهش حجم باندل با حذف کدهای اضافی و استفاده‌نشده، حجم فایل نهایی کاهش پیدا می‌کنه و بارگذاری صفحات سریع‌تر می‌شه و همچنین باعث می‌شه تا منابع سیستم کمتر مصرف بشن.

نحوه کار Tree Shaking 📈

درواقع Tree shaking تنها با ماژول‌های ES6 کار می‌کنه، چون این ماژول‌ها به طور ایستا وابستگی‌های خودشونو مشخص می‌کنن ( برای درک بهتر این مقاله رو بخونید )، حالا وقتی که از کدهای import و export استفاده میکنیم، ابزارهایی مثل Webpack می‌تونن بفهمند کدوم بخش از کد ما مورد استفاده قرار نمی‌گیره و اونها را حذف کنند.

نکته ای که وجود داره اینه که جاوااسکریپت به تنهایی نمیتونه tree shaking رو فعال کنه و توسط bundler‌هایی مثل webpack و rollup انجام می‌شه !

نحوه فعال کردن tree shaking ✅

برای اطلاع از نحوه کارکرد tree-shaking در Webpack و Rollup میتونید از لینک های زیر استفاده کنید

🌐 Webpack

🌐 Rollup

توی این پست سعی کردم به طور کامل tree shaking رو بهتون توضیح بدم، اگر دوست داشتید با ری‌اکشناتون بهمون انرژی بدید ❤️

#️⃣ #WhtsThat #javascript #bundlesize #tree_shaking #webpack #rollup

🚀 @coolycode

🔸 وبسایت Npmtrends براتون این امکان رو فراهم کرده تا محبوبیت و میزان استفاده از پکیج‌های مختلف npm رو با نمودارهایی که داره باهم دیگه مقایسه کنید

درواقع این ابزار با اطلاعاتی که بهتون می‌ده بهتون کمک می‌کنه تا پکیج مناسب رو برای پروژه خودتون پیدا کنید ✅

مثلا من توی این عکس پکیج react-hook-form رو با Formik مقایسه کردم و میتونید تمامی اطلاعاتشون رو ببینید مثل تعداد issue‌ها، تعداد نصب بر اساس تاریخ و ...

🌐 مشاهده وب‌سایت

#️⃣ #website #npm #npmtrends

🚀 @coolycode

💎 معرفی کتابخانه Tailwind Variants 💎

کتابخانه Tailwind Variants یک ابزار جانبی برای Tailwind CSS هستش که به شما کمک می‌کنه تا مدیریت کلاس‌های CSSای به شکل ساده تری انجام بشه و از شلوغی کد شما‌ جلوگیری میکنه 💥

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

توی پست های بعدی به بررسی قابلیت های این کتابخانه جذاب میپردازیم ✅

🌐 داکیومنت Tailwind Variants

#️⃣ #WhatsThat | #libarary | #tailwind

🚀 @coolycode

💎 جعبه ابزار جادویی Frontend دولوپرا 💎

یک ui kit خفن اوردم براتون که به ادعای خودش جادوییه، اسمش MagicUI هستش و بیش از ۵۰ کامپوننت animate ( انیمیشنی ) شده خفن داره که بهتون قول میدم اگر ببینیدش شما هم مجذوبشون میشید بس که جذابه.

حالا چرا میگم انقدر جذاب و خفنه ؟

به این دلیل که برای ایجاد انیمیشن ها از Framer Motion استفاده میکنه که واقعا بهش قدرت میبخشه و برای استایل دهی ام از tailwind استفاده می‌کنه.

فیلم چند نمونه از کامپوننت هاش رو گذاشتم میتونید ببینید، لینک سایتشم میزارم براتون حتما یه سر بهش بزنید 🚀

🌐 مشاهده وبسایت

#️⃣ #libarary | #uikit | #tools

🚀 @coolycode

#tools | #vscode | #extension

🎯 CSS Peek
مشاهده و ویرایش مستقیم استایل‌های CSS متصل به یک المنت HTML بدون نیاز به جستجو در فایل‌های CSS.
🌐 دانلود
🚀 Tabnine
تکمیل خودکار کد با استفاده از هوش مصنوعی برای پیشنهاد‌های دقیق‌تر و هوشمندتر که سرعت شمارو تو نوشتن کدها بالا می‌بره.
🌐 دانلود
🛜 Thunder Client
یک ابزار قدرتمند برای تست APIها به صورت مستقیم از وی‌اس‌کد و جایگزینی خوب برای Postman.
🌐 دانلود
🎨 Color Highlight
نمایش رنگ‌های استفاده شده در CSS به صورت بصری در کنار کد، به صورت بک‌گراند کد رنگی.
🌐 دانلود
📊 Git Graph
نمایش گرافیکی و تصویری تاریخچه گیت و شاخه‌های مختلف پروژه با امکان مدیریت کامیت‌ها و شاخه‌ها.
🌐 دانلود

🆔 Channel | Group | YouTube

●● معرفی ابزار cURL ●●

برنامه cURL یک ابزار تحت ترمیناله که برای ارسال درخواست‌های HTTP و تعامل با #Api ها خیلی استفاده می‌شه و طرفدارای زیادی داره. این ابزار به شما این امکان رو می‌ده تا درخواست‌های مختلفی مثل GET، POST، PUT و DELETE رو از طریق ترمینال ارسال کنید و پاسخ مد نظرتون رو دریافت کنید ⚡

نحوه نصب cURL 🔻
macOS

brew install curl

Linux

sudo apt update && sudo apt install curl

Windows

توی ویندوز 10 به بالا به صورت دیفالت نصبه ولی اگر نصب نبود از صفحه رسمیش میتونید دانلود کنید

برای نصبش از این لینک هم میتونید کمک بگیرید.

#tools | #CURL |  #Api

〰️〰️〰️〰️〰️〰️〰️️〰️〰️〰️

Channel | Group | YouTube

💎 تفاوت Box-Shadow و Drop-Shadow در CSS 💎

🌐 مشاهده ویدیو در اینستاگرام

#️⃣ #vs #css #shadow

🚀 @coolycode