یکی از رفقای عزیز چنل اشاره کرد که این عکس کلیه و میتونید از سایت roadmap.sh ، رودمپ Full Stack و زیر شاخه هاش رو به صورت جزئی ببینید 🔻

~> Frontend
~> Backend
~> Databases
~> DevOps

کتابخونه Material-UI چیه دقیقا ؟ Ⓜ️

کتابخانه Material-UI (یا همون MUI) یکی از محبوب‌ترین کتابخونه‌های ری‌اکتی برای ساخت رابط کاربریه که بر اساس استانداردهای Material Design گوگل طراحی شده. این کتابخونه یه سری کامپوننت آماده داره که بهتون کمک می‌کنه سریع‌تر و راحت‌تر رابط های کاربری تعاملی بسازید، بدون اینکه لازم باشه از صفر پیاده سازی کنید

✅ مزایای Material-UI

🎨 طراحی حرفه‌ای و استاندارد
چون این کتابخونه از Material Design پیروی می‌کنه، باعث می‌شه رابط کاربری نرم‌افزار مدرن، شیک و کاربرپسند باشه.

⚡ کامپوننت‌های قوی و انعطاف‌پذیر
همه‌ی اجزای MUI ماژولار، با قابلیت سفارشی‌سازی بالا هستن، یعنی هر کامپوننت رو می‌تونی مطابق نیاز خودت تغییر بدی و چندین بار استفاده کنی.

🚀 افزایش سرعت توسعه
با داشتن کلی کامپوننت آماده، لازم نیست وقتتو روی طراحی و پیاده سازی از صفر تلف کنی، که یعنی توسعه سریع‌تر و کم‌هزینه‌تر!

🏗 سازگار با معماری‌های مدرن
کامپوننت‌های MUI کاملاً با اصول مهندسی نرم‌افزار و معماری‌های مبتنی بر کامپوننت هماهنگ هستن، پس توسعه و نگهداری پروژه‌های بزرگ رو آسون‌تر می‌کنن.

🌙 پشتیبانی از DarkMode و تمینگ پیشرفته
این کتابخونه به‌صورت پیش‌فرض از Dark Mode و سیستم تمینگ انعطاف‌پذیر پشتیبانی می‌کنه، که برای یه تجربه کاربری حرفه‌ای خیلی مهمه.

❌ مشکلات و محدودیت‌های Material-Ui

📦 حجم بالا و تأثیر روی عملکرد یه کتابخونه
بزرگه و استفاده ازش می‌تونه باعث افزایش حجم باندل نهایی بشه که روی سرعت بارگذاری سایت تأثیر می‌ذاره، مخصوصاً تو پروژه‌های سنگین.

🎨 نیاز به سفارشی‌سازی زیاد
استایل‌های پیش‌فرض MUI تو بعضی پروژه‌ها ممکنه زیادی شبیه به هم باشن، و تغییر دادن بعضی از اون‌ها هم کار راحتی نیست و نیازمند تایم بیشتریه.

📚 نیازمند یادگیری بیشتر برای تنظیمات
پیشرفته استفاده از کامپوننت‌های آماده خیلی ساده‌ست، ولی اگه بخوای تنظیمات پیشرفته مثل سیستم تم، sx و styled-components رو یاد بگیری، باید یه مقدار وقت بذاری.

🎯 جمع‌بندی

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

اما اگه روی عملکرد و حجم باندل حساس هستید یا استایل خاصی رو برای پروژه مدنظر دارید، شاید مجبور بشید وقت بیشتری برای بهینه‌سازی بذارید و یا حتی میتونه گزینه بهتر استفاده از ui-kit های دیگه مثل shadcn باشه، که سعی میکنیم توی پست های دیگه بهشون بپرداریم.

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

#️⃣ #WhatsThat #libarary

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

دوستان من همیشه سعی میکنم تمامی پست ها به صورت کاملا تجربی باشن و خودم مطمئن باشم از مطالب و مورادی که میگم

پیشنهاد میکنم حتما مطالبی که میزارم رو کامل بخونید تا دید خیلی بهتری نسبت به اون مسئله و معایت و مزیت هایی که راجبش وجود داره داشته باشید 👌

سلام رفقا روزتون بخیر ✌️

ما برای مدیریت و تولید محتوای کولی‌کد و اینستا‌کد دنبال چند نفر رفیق پایه و باحال هستیم، اگر دوست دارید و فکر میکنید میتونید فعالیت کنید بهم پیام بدید که بیشتر راجبش گپ بزنیم ❤️

ID ~> @MohammadTazaroie

.
.
.

🚀 @coolycode

#website

مطمئنم خیلی از دوستان قبل از آشنایی با این سایت خفن ساعت ها وقت میزاشتن واسه طراحی اسکرول بار برای سایتشون
ولی دیگه با وجود این ابزار نیازی به این کار نیست

چون میتونین خیلی ساده مثل فتوشاپ اسکرول بارتون رو با آپشن هایی که موجوده کاستومایز کنین و بعدش هم سورس کد CSS اون رو کپی کنین و توی پروژتون استفاده کنین

🌐 لینک سایت : scrollbar.app

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

#golden_sentence

💎 یه folder structure خوب و مرتب؛ توسعه پروژه رو چندین برابر راحت تر میکنه
نادیده نگیرینش :)

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

سلام دوستان، خب به هر حال تونستیم یه جایی رو بگیریم تا بتونیم یه سری کارای باحال ر. با هم انجام بدیم.


در حقیقت ما سعی کردیم یه کامیونیتی Computer Scientific داشته باشیم به طوری که از منابع و کتاب های دسته اول به شکل میز گرد استفاده کنیم . و کم کم چند نفر دیگه رو هم همراه خودمون کنیم تا بتونیم با هم مباحث low level و basic و کاربردی computer science رو درک کنیم و یاد بگیریم.

این مباحث میتونن ابزار هایی مثل زبان c یا ++C باشن و یا حتی میتونن موضوعاتی مثل CS50X و کتاب هایی مثل CODE THE HIDDEN LANGUAGE و GROKKING THE ALGORITHM و ... باشند که هر کدوم به نوبه خودشون باحالن و میتونیم کلی با هم در موردشون حرف بزنیم و یاد بگیریم.

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

این یعنی داستان کامیونیتی این شکلی هست که ممکنه برای سینیور های عجیب غریب جذاب نباشه ولی برای NOVICE ها و تازه کار ها جذابه.


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

ادامه پست

لینک گروه تلگرام:
https://t.me/ccismywife

رفقا فرهان و شایان دارن یه حرکت باحالی میزنن و به نظر خودم واقعا با ارزشه، از اونجایی که خیلی کم به علوم کامپیوتر بها داده میشه یه همچین اتفاقی میتونه به جا‌های خوبی برسه، اگر علاقه مند بودید میتونید بیشتر باهاشون صحبت کنید ✌️❤️

#تبلیغ_نیست

تمپلیت انجین‌ها چی هستند ؟ 🛠️

تمپلیت انجین یه ابزاره که به ما کمک می‌کنه با قابلیت هایی که داره صفحات Dynamic ( پویا ) بسازیم. یعنی چی ؟ یعنی یه قالب درست می‌کنی که بخش‌های ثابت (مثل ساختار HTML) و بخش‌های متغیر (مثل اسم کاربر) داره. بعد موقع اجرا، اون قسمت‌های متغیر با داده‌های واقعی جایگزین می‌شن.


چه قابلیت هایی دارن ؟ 🚀

🧩 پشتیبانی از ساختار منطقی
🔸 امکان استفاده از دستورات شرطی و حلقه‌ها رو فراهم می‌کنه تا بر اساس داده‌های دریافتی، نمایش محتوا به صورت منطقی و متغیر صورت بگیره.

🚀 ایجاد محتوای دینامیک
🔸 با وارد کردن داده‌های متغیر در قالب‌ها، محتوای پویا تولید می‌شه.

📁 وراثت قالب‌ها
🔸 قالب‌های اصلی رو تعریف می‌کنید و توی قالب‌های دیگه ازشون بهره می‌برید، یه جورایی میشه همون لی‌اوت‌ اصلی و قسمت‌های شیر مثل Header و Footer، که باعث کم شدن کدهای تکراری میشه.

🔃 فرمت‌دهی و فیلتر دیتا
🔸 میتونید داده‌ها رو قبل از نمایش فرمت‌دهی کنید با قابلیت‌های خود تمپلیت انجین، مثل تنظیم قالب تاریخ یا اعداد.

🗃️ پشتیبانی از داده‌های پیچیده
🔸 امکان کار با داده‌های پیچیده مثل آرایه‌ها و objectها رو می‌ده تا اطلاعات به شکل بهتری نمایش داده بشه.

چجوری کار میکنه ⁉️

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

مثلاً توی EJS، برای حلقه نوشتن می‌تونی🔻

<% items.forEach(item => { %>
  <li><%= item %></li>
<% }) %>

محبوب‌ترین تمپلیت انجین‌ها ✅

Node.js : EJS ~> Pug ~> Handlebars

Python : Jinja2 ~> Mako

PHP : Twig ~> Blade

Java : Thymeleaf ~> FreeMarker

💬 تا حالا از تمپلیت انجین استفاده کردی؟ اگه آره، تجربه خودت رو بهمون بگو 👇

#WhatsThat

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

➖➖➖➖➖➖➖➖➖

سلام رفقا حتما مطالعه‌ کنید، کامل مبحث template engine رو باز کردیم و بررسی کردیم که چیه، چیکار میکنه و چه قابلیت هایی داره و در نهایت تمپلیت انجین های مختلف رو معرفی کردیم ✌️❤️
.
.
.

🚀 @coolycode