درجه سختی زبان ها ⭐

⚫️بنظرتون جدی سی شارپ از جی اس ساده تره؟ از کاتلین چی؟ مقایسه اش درست انجام شده؟ بنظر خودم که فقط پایتون و سی پلاس پلاس جاشون درسته 🙂

#programming
☕️ @CodeExplore

🫢

#fun
☕️ @CodeExplore

📌همه میدونیم که Css3 هنوز داره اپدیت میشه و هی چیزای جدیدی بهش اضافه میشه، و خب جدیدا شنیدم که نستینگ ( Css nesting ) هم به خود Css اضافه شده، ( یعنی یکی از بزرگ ترین امکاناتی که Sass داشت برامون فراهم میکرد دیگه داخل خود Css موجوده، ولی با سینتکس متفاوت

الان شما دیگه راحت میتونین به صورت نستینگ استایل بدین:

.parent-rule {
  /* parent rule properties */
  .child-rule {
    /* child rule properties */
  }
}

یا حتی هاور و سلکتور های دیگه:

.parent-rule {
  /* parent rule properties */
  :hover {
    /* child rule properties */
  }
}

بخایم یکم عمیق تر بشیم داخلش، الان & اشاره داره به همون کلاس پرنت، یعنی تو هر مرحله، اشاره میکنه به کلاس بالاییش، الان این کد رو در نظر بگیرین:🌟

.card {
  /* .card styles */
  .featured & & & {
    /* .featured .card .card .card styles */
  }
}

🔥این کد در اصل داخل مرورگر اینطوری میشه:

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

حیفه یه مثال ازش نبینیم:😠

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

⚡️یه نکته خفن اینکه اگه از & داخل nested style ها استفاده نکنیم خب به چی اشاره میکنه؟ جوابش میشه اسکوپ اصلی! همون scoping root
مثلا:

& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

/* & => :scope */

✔️و طبق جدولی که درباره ساپورت مرورگر ها راجبش دیدم، اینطوریه که همه مرورگرا کاملا ساپورتش میکنن و مشکلی نداره ولی خب مربوط به نسخه میشه که چند تاشونو مینویسم:
-Chrome: 120
- Edge: 120
-Firefox: 117
-Opera: 106

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

#css #css_nesting
☕️ @CodeExplore

🔵چه ویژگی های جدیدی توی PHP 8.4 اضافه شده؟
توی این پست به ویژگی های جدید و جالبی که توی PHP 8.4 اضافه شده میپردازیم.

‏1. Property Hooks: این ویژگی به شما اجازه میده تا برای خواندن و نوشتن پراپرتی‌ها، هوک تعریف کنید و نیاز به Getter و Setter های تکراری رو از بین می‌بره.

‏2. Array Utility Functions: توابع جدیدی مثل array_find، array_find_key، array_any و array_all اضافه شده که کار با آرایه‌ها رو خیلی راحت‌تر می‌کنه.

‏3. DOM HTML5 Support: کلاس DOM\HTMLDocument اضافه شده که می‌تونه HTML5 رو به درستی پردازش کنه و مشکلات قبلی رو حل کنه.

‏4. Increased Bcrypt Cost: مقدار پیش‌فرض برای هش پسورد با Bcrypt به 12 افزایش پیدا کرده که امنیت پسوردها رو بیشتر می‌کنه.

‏5. Large XML Document Parsing: بهبودهایی در پردازش فایل های بزرگ XML صورت گرفته که دیگه مشکلی پیش نیاد.

‏6. New Multibyte Trimming Functions: توابعی مثل mb_trim، mb_ltrim و mb_rtrim اضافه شده که برای برش دادن رشته‌های چندبایتی استفاده می‌شن و این کار رو خیلی راحت‌تر می‌کنن.

‏7. Method Chaining Without Parentheses: این بهبود اجازه میده تا بدون نیاز به پرانتز اضافی، از متدهای زنجیره‌ای استفاده کنید و کدتون رو ساده‌تر و خواناتر می‌کنه.

‏8. JIT Improvements: بهبودهایی در کامپایلر JIT صورت گرفته که سرعت اجرا رو بالا می‌بره و مصرف حافظه رو کاهش می‌ده. همچنین، نحوه فعال و غیرفعال کردن JIT ساده‌تر شده.

‏9. Implicit Nullable Types Deprecation: رفتار پیش‌فرض که متغیرهای تایپ شده با مقدار پیش‌فرض null رو به صورت ضمنی nullable می‌کرد، حالا deprecated شده و باید به صورت صریح مشخص بشه.

#php #new #feature
☕️ @CodeExplore

سایت bundlephobia چیه؟ ⛔️

🙂ابزار Bundlephobia یه ابزار آنلاینه که به درد توسعه‌دهندگان جاوااسکریپت می‌خوره. وقتی می‌خوای یه پکیج npm رو به پروژه‌ت اضافه کنی، این سایت بهت نشون می‌ده که این پکیج چقدر حجمه و چه تأثیری روی زمان بارگذاری پروژه‌ت داره.

🔗 Bundlephobia

#bundlephobia
☕️ @CodeExplore

⚡️جیگرا بیاین بریم سراغ ادامه مباحث TailwindCss، میخایم وارد کار با فونت و متن ها بشیم شاید طول بکشه و اگه نیاز شد 2 پارتش کنیم

👑خب اول از همه اینکه فونت ها داخل تیلویند خیلی ساده هستن و به صورت دیفالت هم یسری فونت داخل خودش هست، میتونین هم داخل کانفیگ ها هر فونتی خاستین اضافه کنین( رنگ و سایز و.. هم میشه ولی هنوز دربارش صحبتی نکردیم )
خب شما اگه بخاین یه فونت به یه المنت اختصاص بدین روشش اینه:

font-fontName

مثلا

font-serif

بحث بعدی راجب وزن فونت هاس، یعنی همون font-weight که اونم خیلی راحت میتونین استفاده کنین:

font-thin
font-extralight
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black

به ترتیب از font weight های 100 تا 900 میره بالا

☄️خب برسیم سراغ اندازه فونت ها یا همون Font Size که اینسری با کلمه font شروع نمیشه به جاش از text استفاده میکنیم
برای اندازه فونت ها میتونین این کلاس هارو به المنتتون اضافه کنین:

text-xs => 12px
text-sm => 14px
text-base => 16px
text-lg => 18px
text-xl => 20px
text-2xl => 24px
...
text-9xl => 128px

البته در نظر داشته باشین این موارد یه line-height هم بهتون میدن نسبت به اندازشون

اما خب ما بخایم رنگ متن هارو عوض کنیم چی؟ خیلی راحت بعد از text بیاین و رنگ مورد نظرتون رو قرار بدین:

text-red-500
text-black
text-white

حالا برای کاستوم کردن text decoration چه کلاسایی داریم؟ خدمت شما:🌟

underline
overline
line-through
no-underline

دیگه اون اضافه هاش توسط تیلویند حذف شده و همین اصل کارش مونده
نکته خفن اینه که میتونین این decoration رو کاستوم کنین، رنگ و استایل بهش بدین مثلا!

decoration-green-800
decoration-solid
decoration-double
decoration-doted
decoration-dashed
decoration-wavy

حتی اصن ضخامتش هم تغییر بدین اصن همچی در اختیارتونه:🦦

decoration-0
decoration-1
decoration-2
decoration-4
decoration-8

اینا هرکدوم بر اساس پیکسله دیگه مثلا 4 میشه 4 پیکسل
برای استایل فونت هاتون هم میتونین از موارد زیر استفاده کنین:

italic 
not-italic

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

🔥خب این اموزش شاید خیلی ساده بود و فقط لیست کردیم ولی طولانی بشه دیگه خسته میشین پس بقیه کار با متن ها باشه برای آینده

#tailwind #tailwind_6
☕️ @CodeExplore

🎵3 تا پلی لیست جذاب که موقع برنامه نویسی میتونید گوش بدید.

Coding Mode

Music For Programming

Deep Focus

#programming #playlist
☕️ @CodeExplore

اگر می خواهید زندگی شاد داشته باشید، آن را به یک هدف گره بزنید، نه به مردم یا اشیاء.

" آلبرت انیشتین "

#motivational
☕️ @CodeExplore

فول استکا خود درگیری دارن؟😂

#fun
☕️ @CodeExplore

استفاده از Template Literals در جاوا اسکریپت ✌️

👀قبل از اینکه این ویژگی اضافه بشه، ترکیب کردن رشته‌ها با متغیرها یکم سخت و دست و پا گیر بود. مثلا:

const name = "Koorosh";
const age = 17;
const greeting = "Hello, my name is " + name + " and I am " + age + " years old.";
console.log(greeting);
// Hello, my name is Koorosh and I am 17 years old.

ولی حالا با استفاده از این ویژگی همین کد کافیه:

const name = "Koorosh";
const age = 17;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Hello, my name is Koorosh and I am 17 years old.

#javascript #js #trick
☕️ @CodeExplore

📚چند تا کتاب مفید و رایگان برای یادگیری لینوکس

‏🔢 The Linux Command Line

این کتاب برای مبتدیان مناسبه و اصول اولیه خط فرمان لینوکس را آموزش میده.

‏🔢 Introduction to Linux: A Hands on Guide

راهنمای عملی برای کاربران جدید لینوکس، شامل مثال‌ها و تمرینات کاربردی.

‏🔢 Advanced Bash-Scripting Guide

برای دوستانی که میخوان به صورت پیشرفته اسکریپت‌نویسی در Bash را یاد بگیرن.

‏🔢 Linux Fundamentals

مرجعی برای دستورات خط فرمان لینوکس و ابزارهای GNU

#linux #book
☕️ @CodeExplore

⚪️‏DevOps چیست؟

‏DevOps یک روش کاری در توسعه نرم‌افزار که به تیم‌های توسعه (Development) و عملیات (Operations) کمک میکنه تا با همکاری نزدیک‌تر و استفاده از ابزارهای خودکار، نرم‌افزارها را سریع‌تر و با کیفیت‌تر تولید و عرضه کنن. هدف اصلی DevOps افزایش سرعت تحویل نرم‌افزار و بهتر شدن کیفیت اون از طریق همکاری بهتر و اتوماسیون فرآیندهاست.

🟢 ویژگی‌های DevOps

همکاری و ارتباط: تیم‌های توسعه و عملیات باید به طور مداوم با هم در ارتباط باشن تا مشکلات سریع‌تر حل بشن.

اتوماسیون: استفاده از ابزارهایی که وظایف تکراری مثل ساخت، تست و استقرار نرم‌افزار رو به صورت خودکار انجام بدن.

یکپارچه‌سازی مداوم (CI): تغییرات کد به صورت مداوم و مرتب به سیستم اضافه می‌شن که کمک می‌کنه تا خطاها زودتر شناسایی و رفع بشن.

تحویل مداوم (CD): اطمینان از اینکه نرم‌افزار همیشه آمادست تا به دست کاربران برسه.

نظارت و پایش: بررسی مداوم عملکرد نرم‌افزار و جمع‌آوری گزارش‌ها برای شناسایی و حل مشکلات قبل از اینکه کاربران متوجه بشن.

انعطاف‌پذیری: سریع‌تر واکنش نشون دادن به تغییرات و نیازهای جدید.

⚙️از کاربرد های DevOps میتونیم به سریع‌تر شدن تحویل نرم‌افزار، بهبود کیفیت نرم‌افزار، کاهش زمان تا بازار، افزایش قابلیت اطمینان
و رضایت بیشتر کاربران اشاره کنیم.


💻 زبان هایی مثل Python, Ruby , Go و ... از زبان های محبوب و ابزار هایی مثل Git , Docker , Jenkins, Ansible و... هم از ابزار های رایج برای DevOps هستن.

رودمپ DevOps رو قبلا داخل چنل قرار دادیم و از این لینک میتونید بهش دسترسی داشته باشید.

#devops
☕️ @CodeExplore

🔥بریم سراغ قسمت بعدی از مباحث TailwindCss
همونطوری که میدونین ما توی اموزش قبلی درباره کار با متن ها صحبت کردیم و خب خیلی طولانی بود این مبحث و نصفش به این سمت افتاد که الان قراره توی این پست باهم پیش ببریمش

اول از همه راجب شکستگی متن ها میخایم صحبت کنیم یا همون text-wrap که اصولا خیلی اسون میتونه باشه براتون و یه همچین لیست کوتاهی از کلاس هارو سمت تیلویند برای استفاده ازش داریم:

text-wrap
text-nowrap
text-balance
text-pretty

✅و خب از اسمشون خیلی قشنگ مشخصه چیکار میکنن البته اینم بگم اسماش طوریه که صرفا خلاصه شده و میدونین که اینا همشون پراپرتی های css هستن

موضوع بعدی مربوط به مبحث فاصله underline از متنه یا همون unerline-offset
اول از همه برای ساخت یه خط زیر متن یا همون underline از همین کلاس underline استفاده میکنیم، و بعدش هم میتونیم فاصلش رو با offset تنظیم کنیم:

class="underline underline-offset-1"

اینم از 0 تا 8 داره و بر واحد پیکسله

💥خب حالا برای ترنسفورم متن ها که آپرکیس و... باشن هم کلاسای خیلی ساده‌ای داریم، از جمله:

uppercase 
lowercase
capitalize
normal-case // none

و خب قطعا باهاشون اشنایی دارین

قابلیت بعدی که تیلویند به ما میده برای مدیریت بیرون زدن متن هاس، یا همون text-overflow که بتونیم سه نقطه (...) اخر متن هامون که زیادی هستن و میزنن بیرون اضافه کنیم، ما سه تا کلاس قشنگ داریم:

truncate
text-ellipsis
text-clip

☄️دوتای پایین که مشخصه کارشون نسبت به پراپرتی css اونا قابل فهمه، ولی خب کلاس اولی جدیده و شامل سه تا استایل میشه سمت css ، یعنی شما وقتی از کلاس truncate استفاده کنین این کلاس ها به المنت شما داده میشه:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

خب حالا اگه بخایم به حرف معلمای انشا گوش بدیم و شروع متن هامون که اول بند هستن با یکم فاصله باشه، نیاز به یسری کلاس داریم تا بیایم اون فاصله از شروع متن رو اعمال کنیم:

indent-0.5
indent-1
...
indent-96

با این کلاس و اندازه ها شما هرطوری خاستین فاصله بدین

✨برای کاستوم کردن text-align هم راحت میتونین اول text بزنین بعدش هم جهت دلخواه، مثلا:

text-center
text-start
text-end

👑خب بچه ها سعی کردم توی این پست و پست قبلی درباره کار با متن ها اون نکات مهم و کاربردی رو بگم هرچند بازم کلاس های زیادی وجود داره

#tailwind #tailwind_7
☕️ @CodeExplore

🌐 دوستان تو سایت زیر می تونین تمام فعالیت هایی که سال قبل تو گیت هاب داشتید رو به صورت انیمیشن در بیارید.

🌐 https://githubunwrapped.com

🔥🔥🔥🔥🔥🔥🔥🔥
ولی خب احساس میکنم این سایت خطایی هم داره. مثلاً تو ویدیو بالا نباید زبان سوم این دوستمون امیرجان CSS باشه و باید Python باشه، ولی خب مشکلی نیست.

⚡️ شما هم فعالیت های گیت هابتون به صورت ویدیو در بیارید و تو کامنت ها بفرستید تا بیشتر باهاتون آشنا بشیم 🔥

#github #activity #video #animation
☕️ @CodeExplore

اگر موقع برنامه نویسی موزیک گوش میدید، توی کامنت های این پست موزیک های مورد علاقتون موقع برنامه نویسی رو بفرستید تا بقیه دوستان هم استفاده کنن 😃🎶

#پست_پیشنهادی
#programming #music
☕️ @CodeExplore

اعتماد کردم،اعتماد نکنین 😂❌

#fun
☕️ @CodeExplore

میدونستین با استفاده از enumerate میتونید به اندیس ها هم توی حلقه ها دسترسی داشته باشید؟ ⌨️

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

# به جای این:
index = 1
for value in some_list:
    print(index, value)
    index += 1

# می‌تونید از این استفاده کنید:
for index, value in enumerate(some_list):
    print(index+1, value)

⚠️البته که ما فرض کردیم شما لیستی به اسم some_list دارید و دیگه تعریفش نکردیم.

#enumerate #python
☕️ @CodeExplore

بی مقدمه میگم، برنامه نویسی مثل یه سفره که ته نداره 🙂
همه از یه جایی شروع میکنیم و کم کم پیشرفت میکنیم. این سفرمونم از جونیور شروع میشه و به سنیور ختم میشه. حالا میپرسن
جونیور چیه ؟ 😁
سنیور چیه؟ 😀
بیاید یه مروری بکنیم ببینیم دنیا دست کیه :
مرحله 1️⃣: وقتی جونیوریم، یه برنامه نویس تازه وارد و پرشوریم که تازه وارد دنیای برنامه‌نویسی شدیم، همه چیز برامون تازگی داره. کدها شبیه معماهای جذابی هستن که دوست داریم حلشون کنیم. هر روز یه چیز جدید یاد می‌گیریم و از هر موفقیت کوچیکی خوشحال میشیم.😔

یه جونیور معمولاً:
🌙 پر از شور و اشتیاقه
⚠️ دوست داره سریع یاد بگیره
‼️ از چالش‌های جدید استقبال می‌کنه
🚀 گاهی اوقات اشتباهات ساده می‌کنه
⭐️ نیاز به راهنمایی داره
⛔️ روی یادگیری پایه‌ها تمرکز می‌کنه

تو این مرحله، جونیورها معمولاً روی یادگیری زبان‌های برنامه‌نویسی، اصول اولیه طراحی نرم‌افزار و کار با ابزارهای پایه تمرکز می‌کنن. ممکنه گاهی احساس گیج شدن یا ناامیدی کنن، اما این بخشی از فرآیند یادگیریه ♥️

مرحله 2️⃣: مید‌لول، پل بین دو تا دنیای سنیور و جونیوره! بعد از چند سال، کم کم از مرحله جونیور خارج میشیم و وارد یه مرحله میانی میشیم که بهش میگن "مید‌لول". تو این مرحله:
🌙 تجربه‌مون بیشتر شده
⛔️ می‌تونیم پروژه‌های متوسط رو مدیریت کنیم
🟢 درک بهتری از معماری نرم‌افزار داریم
⚠️ می‌تونیم به جونیورها کمک کنیم
⚠️ هنوز چیزای زیادی برای یادگیری داریم
‼️ شروع می‌کنیم به پیدا کردن تخصص در یه زمینه خاص

داریم کم کم مسئولیت‌های بیشتری رو قبول می‌کنیم و یاد می‌گیریم که چطور با چالش‌های پیچیده‌تر کنار بیایم.🌙

مرحله 3️⃣: سنیور یا استاد همه فن حریف! بالاخره، بعد از سال‌ها تجربه و یادگیری، به مرحله سنیور می‌رسیم.
یه سنیور دولوپر:
✅ تسلط کاملی روی تکنولوژی‌های مختلف داره
✅ می‌تونه پروژه‌های بزرگ و پیچیده رو مدیریت کنه
✅ راه‌حل‌های خلاقانه برای مشکلات پیدا می‌کنه
✅ به عنوان منتور برای بقیه عمل می‌کنه
✅ درک عمیقی از اصول مهندسی نرم‌افزار داره
✅ می‌تونه تصمیمات استراتژیک بگیره

سنیورها معمولاً نقش رهبری فنی رو به عهده می‌گیرن و در تصمیم‌گیری‌های مهم پروژه‌ها نقش کلیدی دارن. اونا می‌تونن مشکلات پیچیده رو تحلیل کنن و راه‌حل‌های مناسب ارائه بدن.

تفاوت‌های کلیدی ⚡
حالا که با هر سه مرحله آشنا شدیم، بیاین چند تا از تفاوت‌های کلیدی رو مرور کنیم:

1️⃣حل مسئله:
جونیور: معمولاً روی حل مسائل کوچک و مشخص تمرکز می‌کنه.
مید‌لول: می‌تونه مسائل متوسط رو حل کنه و گاهی به راه‌حل‌های خلاقانه برسه.
سنیور: توانایی حل مسائل پیچیده و سیستمی رو داره و می‌تونه مشکلات رو از زوایای مختلف ببینه.

2️⃣ کدنویسی:
جونیور: کد می‌نویسه تا کار انجام بشه، گاهی بدون توجه به بهینه‌سازی.
مید‌لول: کد تمیزتر و بهینه‌تری می‌نویسه و به ساختار کد اهمیت میده.
سنیور: کد بسیار تمیز، ماژولار و قابل نگهداری می‌نویسه و به پرفورمنس و مقیاس‌پذیری توجه ویژه داره.

3️⃣ یادگیری:
جونیور: مشتاقانه هر چیز جدیدی رو یاد می‌گیره.
مید‌لول: یادگیری رو هدفمندتر دنبال می‌کنه و روی مهارت‌های خاص تمرکز می‌کنه.
سنیور: علاوه بر یادگیری مداوم، دانش خودش رو به دیگران منتقل می‌کنه.

4️⃣ مسئولیت:
جونیور: معمولاً وظایف مشخص و محدودی داره.
مید‌لول: مسئولیت‌های بیشتری قبول می‌کنه و گاهی رهبری تیم‌های کوچک رو به عهده می‌گیره.
سنیور: مسئولیت کل پروژه یا بخش‌های مهمی از اون رو به عهده داره.

5️⃣ ارتباطات:
جونیور: بیشتر با تیم فنی در ارتباطه.
مید‌لول: می‌تونه با سایر بخش‌ها هم ارتباط برقرار کنه.
سنیور: با همه سطوح سازمان، از مدیران ارشد تا مشتریان، ارتباط موثر برقرار می‌کنه.

نکته مهم: هر کدوم از این مراحل ارزش خودش رو داره ✅
جونیورها با انرژی و ایده‌های تازه‌شون می‌تونن به تیم روح تازه‌ای بدن. مید‌لول‌ها پل ارتباطی مهمی بین جونیورها و سنیورها هستن و نقش مهمی در پیشبرد پروژه‌ها دارن. و سنیورها با تجربه و دانششون، مسیر کلی رو مشخص می‌کنن و به عنوان منتور عمل می‌کنن.

یکمی این پست زیاد شد :(
ادامشو تو پست بعدی میگم 😶

#programming #level #پیشنهادی
☕️ @CodeExplorer

حالا چطور می‌تونیم در این مسیر پیشرفت کنیم و سنیور بشیم؟

1️⃣ یادگیری مداوم: دنیای تکنولوژی همیشه در حال تغییره. پس باید همیشه در حال یادگیری باشیم.

2️⃣ کار روی پروژه‌های متنوع: هر چقدر با پروژه‌های مختلف کار کنیم، تجربه‌مون بیشتر میشه.

3️⃣ مشارکت در پروژه‌های اپن سورس: این کار باعث میشه با کدهای واقعی و چالش‌های جدید روبرو بشیم.

4️⃣ شبکه‌سازی: ارتباط با سایر برنامه‌نویس‌ها می‌تونه دید ما رو گسترش بده و فرصت‌های جدیدی ایجاد کنه.

5️⃣ تمرین مهارت‌های نرم: مهارت‌هایی مثل ارتباطات، کار تیمی و مدیریت زمان به اندازه مهارت‌های فنی مهم هستن.

6️⃣ پذیرش مسئولیت: هر چقدر مسئولیت بیشتری قبول کنیم، سریع‌تر رشد می‌کنیم.

و در کل نتیجه چی میشه؟
چه جونیور باشیم، چه مید‌لول، و چه سنیور، همیشه با اشتیاق به یادگیری ادامه بدیم و سعی کنیم دنیای برنامه‌نویسی رو جای بهتری کنیم 😍
چون در نهایت، همه ما بخشی از این جامعه بزرگ و در حال رشدیم 🩵

#programming #level #پیشنهادی
☕️ @CodeExplore

دوتا کتاب مفید و رایگان برای یادگیری Java

‏1⃣ Think Java نوشته Allen B. Downey و Chris Mayfield

این کتاب مقدمه‌ای عالی برای مبتدیاس و مفاهیم پایه Java رو به شیوه‌ای ساده و قابل فهم توضیح میده.


‏🔢 Introduction to Programming Using Java نوشته David J. Eck

یکی از منابع آزاد و بسیار خوب برای یادگیری جاوا که تمامی مفاهیم پایه و پیشرفته رو پوشش میده.

#java #book
☕️ @CodeExplore

📌خب بچه ها امروز میخایم یکم کار با تیلویند رو جذاب تر کنیم و در ادامه مباحث TailwindCss به یسری قسمت های قشنگ تری برسیم

خب اول از همه باید بگم ما وقتی از تیلویند استفاده میکنیم دیگه نیاز نیست پاشیم بریم برای افکت های hover و focus جداگونه css بزنیم
و خیلی خیلی راحت میشه این افکت ها و سلکتور هارو داخل تیلویند به کار برد😂
توی مثال پایین براتون هاور و فکوس رو آوردم:

<button class="bg-sky-500 hover:bg-sky-700 hover:text-9xl focus:bg-red-500">
  Save changes
</button>

◀️خب الان ما گفتیم مثلا موقع هاور شدن این دکمه، بک گراندش عوض شه و سایز متنش بزرگ تر بشه، و وقتی هم روش عملیات فکوس رخ داد بک گراندش قرمز شه

حالا ما میتونیم بیایم مشخص کنیم وقتی مثلا فیلد هایی که داریم، required هستن یا disabled شدن، باز استایل هاشون عوض شه (یعنی وقتی اتریبیوت های مربوطه رو گرفتن)

<button class="bg-sky-500 disabled:opacity-50 required:text-red-500">
  Save changes
</button>

خیلی جالب تر میشه اگه بگم ما حتی میتونیم first-child و last-child و... هم مشخص کنیم!

<li class="flex py-4 first:pt-0 last:pb-0 even:bg-red-500 odd:bg-green-200">
      <img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
      <div class="ml-3 overflow-hidden">
        <p class="text-sm font-medium text-slate-900">{person.name}</p>
        <p class="text-sm text-slate-500 truncate">{person.email}</p>
      </div>
    </li>

✅اینا که چیزی نیست داداش، حتی به شبه المنت هایی مثل after و before المنت هم دسترسی داریم! مثال رو دقت کنین:

<div class="before::text-xl after:border"></div>

یه وقتایی هم پیش میاد که بخایم بگیم اره اگه فلان المنت راست چین یا چپ چین بود ( همون direction ) یسری استایل های متفاوت بگیره:

<div class="rtl:text-2xl ltr:bg-green-200"></div>

خب تا اینجا که هم اسون بود هم جذاب و منم فقط لیست کردم واستون
اما میخایم حالا راجب یه کار خفن دیگه صحبت کنیم باهم
🔥ببینین همه میدونیم یه وقتایی ما یسری المنت داریم که به هم مربوطن و گروهی کار میکنن، و میخام نسبت به هم یسری اتفاقا داخلشون بیوفته، یعنی اگه فلانی هاور شد این یکی یه اتفاق دیگه براش بیوفته، اینجاس که تیلویند اومده group هارو برامون ردیف کرده
شما اول از همه میاین یه گروه تشکیل میدین با استفاده از کلاس group و بعد از اون هم تگ هایی که داخل این گروه وجود دارن میتونن نسبت به هم گروهی هاشون واکنش نشون بدن
با مثلا راحت میشه درکش کرد و من این مثال رو از داک تیلویند میارم:

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

👑داخل این قسمت رو که نگاه کنین ما به تگ a یه کلاس group دادیم و اینطوری یه گرروه تشکیل دادیم از همه اینا، داخل این گروهمون دو جا کلاس group-hover رو میبینیم که خب اینطوری میشه معنیش کرد که وقتی کل این گروه ما(نه فقط یه المنت خاص) هاور شد، بیا متن فلان المنت رو سفید کن

ما این مورد رو فقط برای hover نداریم، برای focus و active و حتی odd و even هم داریمش فقط متنش عوض میشه و کاربردش که بلدین

این مبحث سلکتور ها خیلی خیلی طولانیه و اگر وقت شد در آینده باز هم دربارش توضیح میدیم

#tailwind #tailwind_8
☕️ @CodeExplore