چالش امروز جاوااسکریپتی 🧠

کد زیر رو نگاه کن:

console.log("۱");

setTimeout(() => {
  console.log("۲");
}, 0);

Promise.resolve().then(() => {
  console.log("۳");
});

console.log("۴");

به نظرت ترتیب چاپ کدوم گزینه‌ست؟


حرف گزینه‌ت رو تو کامنت‌ها بنویس! فردا جواب رو با توضیح کامل می‌فرستم.

نکته مهم: جواب این سؤال دقیقاً به تفاوت Microtask Queue و Macrotask Queue توی event loop جاواسکریپت برمی‌گرده.

اگه چالش رو دوست داشتی، برای یه دوست هم فوروارد کن 🔁

فردا توضیح رو میزارم براتون
ببینم چی جواب میدین

📌 حلقه‌ها در جاوااسکریپت؛ کدت رو چندباره کن بدون خستگی!

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

-----------------------------------------

🔁 for کلاسیک
وقتی تعداد دفعات مشخصه:
for (let i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}

🔁 while
وقتی شرط نامشخصه و ممکنه اصلاً اجرا نشه:

let n = 3;
while (n > 0) {
console.log(n--);
}

🔁 do...while
حداقل یک بار اجرا میشه، حتی اگر شرط غلط باشه:

let x = 10;
do {
console.log(x);
} while (x < 5); // چاپ ۱۰

🔁 for...of (مدرن)
برای آرایه‌ها و اشیاء قابل تکرار (iterable):

const colors = ['red', 'green', 'blue'];
for (let c of colors) {
console.log(c);
}

🔁 for...in
برای کلیدهای object (با احتیاط استفاده کن):

const user = {name: 'Ali', age: 25};
for (let key in user) {
console.log(key, user[key]);
}

-----------------------------------------

⚠️ نکته مهم:
از for...in روی آرایه استفاده نکن (ترتیب رو رعایت نمیکنه و خواص اضافی رو هم میاره). به جاش از for...of یا forEach استفاده کن.

✅ عملکرد:
حلقه‌های for و while سرعت بالایی دارن، ولی برای خوانایی کد، for...of و متدهای مدرن مثل map، filter رو ترجیح بده.

-----------------------------------------

💡 جمع‌بندی:
- تعداد مشخص → for
- شرط نامشخص → while
- حداقل یک بار → do...while
- آرایه/رشته → for...of
- آبجکت → for...in (با دقت)

حلقه‌ها رو درست انتخاب کن تا کدت هم سریع باشه هم خواناتر! 🚀

#جاوااسکریپت #حلقه #JavaScript #آموزش

@awat_dev

╭─ 🎨 AI IMAGE COMMANDS ─╮

🛍️ Marketing
"/product_ad" • "/banner" • "/promo" • "/sale"
"/offer" • "/new_product" • "/brand"

📱 Social Media
"/telegram_post" • "/story_ad" • "/thumbnail"
"/channel_cover" • "/quote" • "/announcement"

✨ Styles
"/luxury_ad" • "/minimal_ad" • "/cinematic"
"/3d_ad" • "/neon" • "/retro" • "/cyberpunk" • "/premium"

🍔 Specialized
"/food_ad" • "/fashion_ad" • "/cosmetic_ad"
"/tech_ad" • "/packaging" • "/logo_mockup"

📊 Info
"/infographic" • "/educational" • "/comparison"
"/before_after" • "/testimonial" • "/countdown" • "/giveaway"

🎯 Special
"/seasonal" • "/event" • "/viral" • "/isometric"

@awat_dev

╰─ ✦ Create • Design • Inspire ✦ ─╯

به شدت مفید برای بچه های designer

جواب چالش قبلی 👇

گزینه‌ی درست: B) 1 - 4 - 3 - 2

چرا؟ چون جاوااسکریپت تک‌رشته‌ایه و کدهای سینک (مثل console.log("۱") و console.log("۴")) همیشه اول اجرا می‌شن.

بعدش نوبت Microtask Queue می‌رسه؛ یعنی Promise.then ها، که زودتر از هر تایمر اجرا می‌شن، حتی اگه setTimeout با ۰ میلی‌ثانیه صدا زده شده باشه.

در آخر نوبت Macrotask Queue، یعنی setTimeout، می‌رسه.

نکته مهم: setTimeout(fn, 0) یعنی «فوری» نیست؛ یعنی «هر وقت stack و microtask queue خالی شدن». این سؤال کلاسیک مصاحبه‌های فرانت‌اندیه، حتماً حفظش کن 😉

اگه گزینه‌ی درست رو زده بودی، تو کامنت‌ها بگو! فوروارد هم یادت نره 🔁

Happy 130 😍🍻

رفقا دمتون گرم تا اینجای کار همراه تیم آوات بودید ، به مناسبت 130 تایی شدنمون هر هفته 10 تا سایت کاربردی میگیم که مربوط به حوضه FrontEnd میشه 🔥❤️

🚀 ۱۰ سایت کاربردی که هر فرانت‌اندکار مبتدی بهتره بشناسه

یادمه اوایل کدنویسی، همیشه سردرگم بودم که آموزش رو از کجا دنبال کنم. این لیست همون چیزیه که کاش زودتر پیدا می‌کردم؛ سیوش کن، به دردت می‌خوره 👇

1️⃣ مرجع کامل HTML، CSS و JavaScript
developer.mozilla.org

2️⃣ آموزش و راهنمای Performance سایت
web.dev

3️⃣ مقاله‌ها و منابع کاربردی CSS
css-tricks.com

4️⃣ یادگیری JavaScript از صفر تا مباحث پیشرفته
javascript.info

5️⃣ بررسی سازگاری ویژگی‌ها با مرورگرها
caniuse.com

6️⃣ تمرین‌های واقعی و پروژه‌محور Front-End
frontendmentor.io

7️⃣ محیط آنلاین برای تست و اشتراک‌گذاری کد
codepen.io

8️⃣ آموزش‌های رایگان و پروژه‌محور
freecodecamp.org

9️⃣ ساخت و مدیریت پالت‌های رنگی
coolors.co

🔟 فونت‌های رایگان مناسب استفاده در وب
fonts.google.com

💡 نکته مهم:
لازم نیست همه این سایت‌ها رو هم‌زمان دنبال کنی. هر هفته روی یکی از اون‌ها تمرکز کن و واقعاً ازش استفاده کن؛ نتیجه خیلی محسوس‌تره.

اگه به دردت خورد، سیوش کن و برای یه فرانت‌اندکار دیگه هم بفرست 🙌

@awat_dev

دوستان این فایل رو extract کنید و توی مسیر C:\Program Files بریزید
فایل Register.cmd کلیک راست کنید و گزینه run as administrator بزنید بعد از پنج ثانیه ویندوز شما شیشه ای میشه

کاملا سازگار با ویندوز های 10 و 11

چجوری توی تیلویند کامپوننت ایجاد کنیم؟

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

برای ایجاد کامپوننت توی تیلویند سی اس اس به سند input.css باید بریم و اونجا کامپوننت های خودمون رو بزاریم
حالا چجوری ؟
ما باید با کد زیر مشخص کنیم که میخوایم کامپوننت ایجاد کنیم:

@layer  components {}

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

@layer  components {
 .btn{
   display:flex;
   justify-content: center;
   align-items: center;
}
}

با سی اس اس خام مثل مثال بالا میتونید استایلتون رو بدید و کلاس btn رو به سکشن یا دکمتون بدید
اگر میخواید استایل هاتون رو توی کامپوننت هم بصورت تیلویند باشه باید با @apply این کار رو انجام بدید مثالش رو پایین براتون میزنم:

@layer  components {
 .btn{
@apply flex justify-center items-center;
}
}

میتونید مثل کد بالا استایلتون رو بصورت تیلویند تعریف کنید.
اگ کاربردی بود براتون لایک کنید حتمی
باتشکر.

خب دوستان یه مقاله داریم راجب ساخت header و footer توی جاوا اسکریپت و قرار دادن توی همه صفحات سایت

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