برای یادگیری و درک بهتر تابه IIFE مقاله را مطالعه کنید 💯

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

متد setInterval در جاوااسکریپت برای اجرای یک تابع یا کد مشخص به صورت مکرر با یک فاصله زمانی معین استفاده می‌شود. این متد به شما این امکان را می‌دهد که یک تابع را در فواصل زمانی مشخص (به میلی‌ثانیه) اجرا کنید.

▎ساختار متد setInterval

let intervalID = setInterval(callback, delay[, ...args]);

• بخش callback: تابعی که قرار است به صورت مکرر اجرا شود.

• بخش delay: زمان تاخیر (در میلی‌ثانیه) بین هر بار اجرای تابع.

• بخش ...args (اختیاری): آرگومان‌هایی که به تابع callback ارسال می‌شوند.

• بخش intervalID: شناسه‌ای که برای متوقف کردن اجرای مکرر تابع استفاده می‌شود.

▎مثال ساده

در اینجا یک مثال ساده از استفاده از setInterval آورده شده است:

let count = 0;

const intervalID = setInterval(function() {
    count++;
    console.log(count);
    
    // اگر شمارش به 5 رسید، متوقف کن
    if (count === 5) {
        clearInterval(intervalID);
    }
}, 1000); // هر یک ثانیه (1000 میلی‌ثانیه)

در این مثال، تابع هر یک ثانیه یک بار اجرا می‌شود و مقدار count را افزایش می‌دهد. وقتی که count به ۵ رسید، با استفاده از clearInterval اجرای مکرر متوقف می‌شود.

▎استفاده از Arrow Function

می‌توانید از Arrow Function نیز برای نوشتن کد خود استفاده کنید:

let count = 0;

const intervalID = setInterval(() => {
    count++;
    console.log(count);
    
    if (count === 5) {
        clearInterval(intervalID);
    }
}, 1000);

▎متوقف کردن setInterval

برای متوقف کردن setInterval، باید از تابع clearInterval استفاده کنید و شناسه‌ای که setInterval برمی‌گرداند را به آن پاس دهید:

clearInterval(intervalID);

▎نتیجه‌گیری

متد setInterval ابزاری قدرتمند برای اجرای کد در فواصل زمانی مشخص است. با استفاده از این متد، می‌توانید کارهایی مانند به‌روزرسانی صفحه، انیمیشن‌ها و یا هر نوع عملیات مکرر دیگری را انجام دهید. توجه داشته باشید که استفاده نادرست از setInterval می‌تواند منجر به بارگذاری بیش از حد CPU شود، بنابراین همیشه باید اطمینان حاصل کنید که شرایطی برای متوقف کردن آن وجود دارد.

برای یادگیری و درک بهتر متد setInterval مقاله را مطالعه کنید 💯

https://www.w3schools.com/jsref/met_win_setinterval.asp

متد setTimeout در جاوااسکریپت برای اجرای یک تابع یا کد مشخص پس از یک تأخیر زمانی معین (به میلی‌ثانیه) استفاده می‌شود. این متد به شما این امکان را می‌دهد که یک تابع را فقط یک بار و پس از گذشت مدت زمان مشخصی اجرا کنید.

▎ساختار متد setTimeout

let timeoutID = setTimeout(callback, delay[, ...args]);

• callback: تابعی که قرار است پس از تأخیر اجرا شود.

• delay: زمان تأخیر (در میلی‌ثانیه) قبل از اجرای تابع.

• ...args (اختیاری): آرگومان‌هایی که به تابع callback ارسال می‌شوند.

• timeoutID: شناسه‌ای که برای متوقف کردن اجرای تابع استفاده می‌شود.

▎مثال ساده

در اینجا یک مثال ساده از استفاده از setTimeout آورده شده است:

console.log("شروع");

setTimeout(function() {
    console.log("این پیام پس از 3 ثانیه ظاهر می‌شود");
}, 3000); // تأخیر 3000 میلی‌ثانیه (3 ثانیه)

console.log("پایان");

در این مثال، ابتدا "شروع" و سپس "پایان" چاپ می‌شود. بعد از 3 ثانیه، پیام "این پیام پس از 3 ثانیه ظاهر می‌شود" چاپ خواهد شد.

▎استفاده از Arrow Function

می‌توانید از Arrow Function نیز برای نوشتن کد خود استفاده کنید:

console.log("شروع");

setTimeout(() => {
    console.log("این پیام پس از 3 ثانیه ظاهر می‌شود");
}, 3000);

console.log("پایان");

▎متوقف کردن setTimeout

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

let timeoutID = setTimeout(() => {
    console.log("این پیام هرگز چاپ نخواهد شد");
}, 3000);

// متوقف کردن اجرای تابع
clearTimeout(timeoutID);

در این مثال، با استفاده از clearTimeout، تابعی که قرار بود پس از 3 ثانیه اجرا شود، متوقف می‌شود و هیچ پیامی چاپ نخواهد شد.

▎نتیجه‌گیری

متد setTimeout ابزاری مفید برای اجرای کد با تأخیر زمانی مشخص است. این متد می‌تواند در مواردی مانند ایجاد انیمیشن‌ها، تأخیر در نمایش پیام‌ها و مدیریت زمان‌بندی‌های دیگر کاربرد داشته باشد. توجه داشته باشید که setTimeout فقط یک بار اجرا می‌شود و اگر بخواهید یک تابع را به صورت مکرر اجرا کنید، باید از setInterval استفاده کنید.

برای یادگیری و درک بهتر متد setTimeout مقاله را مطالعه کنید 💯

https://www.w3schools.com/jsref/met_win_settimeout.asp

در برنامه‌نویسی، مفهوم "flag" (پرچم) به یک متغیر گفته می‌شود که برای نشان دادن وضعیت یا حالت خاصی استفاده می‌شود. در جاوااسکریپت و دیگر زبان‌های برنامه‌نویسی، پرچم‌ها معمولاً به صورت boolean (true/false) تعریف می‌شوند و برای کنترل جریان برنامه یا تصمیم‌گیری در مورد انجام عملیات خاص به کار می‌روند.

▎کاربردهای پرچم‌ها

1. کنترل جریان برنامه: پرچم‌ها می‌توانند به عنوان شرایطی برای اجرای بخش‌های خاصی از کد استفاده شوند. به عنوان مثال، می‌توانید از یک پرچم برای تعیین اینکه آیا یک کار خاص باید انجام شود یا خیر، استفاده کنید.

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

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

▎مثال

در زیر مثالی از استفاده از پرچم در جاوااسکریپت آورده شده است:

let isLoading = false;

function fetchData() {
    if (isLoading) {
        console.log("در حال حاضر داده‌ها بارگذاری می‌شوند.");
        return; // اگر در حال بارگذاری هستیم، تابع را متوقف می‌کنیم
    }

    isLoading = true; // پرچم را به true تغییر می‌دهیم
    console.log("بارگذاری داده‌ها...");

    // شبیه‌سازی عملیات بارگذاری با setTimeout
    setTimeout(() => {
        console.log("داده‌ها با موفقیت بارگذاری شدند.");
        isLoading = false; // پرچم را به false تغییر می‌دهیم
    }, 2000);
}

// فراخوانی تابع
fetchData();
fetchData(); // این بار پیغام "در حال حاضر داده‌ها بارگذاری می‌شوند." چاپ خواهد شد

▎توضیح مثال

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

2. وقتی تابع fetchData فراخوانی می‌شود، ابتدا بررسی می‌کند که آیا بارگذاری در حال حاضر انجام می‌شود یا خیر.

3. اگر isLoading برابر با true باشد، پیام مربوطه چاپ می‌شود و تابع متوقف می‌شود.

4. در غیر این صورت، پرچم به true تغییر می‌کند و عملیات بارگذاری شبیه‌سازی می‌شود.

5. پس از اتمام بارگذاری، پرچم دوباره به false تغییر می‌کند.

▎نتیجه‌گیری

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

📌افزونه‌ای برای ذخیره آسان نکات از وبسایت‌ها

❓تا حالا شده یه مطلب خیلی خوب تو یه سایت پیدا کنی و بعداً یادت بره کجا دیدیش؟ یا مثلاً لازم باشه بری تو تاریخچه گوگل هی بگردی تا اون سایت رو پیدا کنی؟ خب، دیگه نگران نباش!

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

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

💠برای دانلود ضربه بزنید

همین الان یه سایت خیییلی خفن و عجیب پیدا کردم که منو نداره، فرم نداره و حتی دکمه هم نداره!
https://bruno-simon.com/

تو این سایت پورتفولیو، فقط یه ماشین هست!
یه جاده.
و یه دنیای سه بعدی عجیب !!

پروژه‌ها؟ کنار جاده پارکن.
دکمه‌ها؟ تابلوهای راهنما شدن.
و توی کل سایت؟ فقط با ماشین گاز میدی و کشف میکنی...

این یه سایت و پورتفولیو نیست.
یه بازیه.
یه تجربست.
یه یادآوریه که UX میتونه خنده بیاره، تعامل ایجاد کنه، و بره تو حافظه بلندمدت مغز.

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

تست نویسی front_end، فقط با انتخاب یک قسمت از صفحه در مرورگر.
وقتی هوش_مصنوعی ، تست نویسی فرانت رو برای ما خیلی آسون می کنه.

ابزار TestCraft، یه extension کروم هست که با استفاده از هوش مصنوعی، کار تست نویسی فرانت رو برای ما انجام میده.
خروجی که به ما میده کد تسته که در یکی از قالب های playwright ، cypress و selenium خواهیم داشت.
حتی زبان کد خروجی(مثلا js, ts, java, c sharp و...) و مدل هوش مصنوعی موردنظرمون رو هم می تونیم انتخاب کنیم.
به این صورت که(همونطور که تو این ویدیو می تونیم ببینیم) ما فقط یک قسمت از صفحه رو انتخاب می کنیم. بعد خودش می فهمه اون قسمت چیه و یکسری ایده ی تست به ما میده.
ما می تونیم چندتا از ایده هایی که به ما داده رو انتخاب کنیم و در انتها، کدش رو تو قالبی که انتخاب کردیم دریافت کنیم.
برای بررسی بیشتر هم می تونیم به آدرس زیر مراجعه کنیم:
https://home.testcraft.app/

👨‍💻 شورت‌کات‌های DevTools برای فرانت‌اندکارهای حرفه‌ای

🚀باز کردن سریع DevTools
F12 یا Ctrl + Shift + I

🗂 رفتن به تب Elements
Ctrl + Shift + C (همراه با فعال شدن ابزار Inspect)

🚛 ری‌لود صفحه با پاکسازی Cache
Ctrl + Shift + R

❓ سوییچ سریع بین تب‌های Elements، Console، Network و Sources
Ctrl + [ یا Ctrl + ]

◀️ رفتن به تب Console
Ctrl + Shift + J (در Mac: Cmd + Option + J`)

🗑 پاک کردن سریع Console
Ctrl + L

📸 اگه می‌خوای از کل یه سایت اسکرین‌شات بگیری، راهش اینجاست!

⬅️معمولا توی مرورگر فقط یه قسمت از صفحه رو می‌بینیم و برای دیدن بقیه مطالب باید اسکرول کنیم. ولی بعضی وقتا لازمه از کل صفحه یه عکس بگیری.

⬅️برای این کار، می‌تونی از افزونه GoFullPage توی کروم استفاده کنی. بعد از نصبش، یه دکمه با آیکون دوربین توی نوار ابزار مرورگرت ظاهر می‌شه. هر وقت خواستی اسکرین‌شات بگیری، فقط کافیه روی اون کلیک کنی.

⬅️وقتی شروع به گرفتن اسکرین‌شات می‌کنی، صفحه به‌صورت خودکار اسکرول می‌شه و یه نوار پیشرفت با تم Pac-Man ظاهر می‌شه که داره مربعا رو می‌خوره!

🌐برای دانلودش اینجارو کلیک کن

طرح داشبورد (40$) - دانلود رایگان از پیکسل پروگرمر!
💻 دوست دارید UI بعدی در رابطه با چه چیزی باشه؟

یه قالب آماده و تمیز ۵ صفحه ای برای فروشگاه آنلاین قهوه، ساخته شده با TailwindCSS.

🔗 گیت‌هاب:
👉 https://github.com/mehrshad2020/Coffeo---Coffee-Online-Shop-Pages-tailwind-

مقایسه Tailwind css و Bootstrap و یافتن مناسب ترین فریم ورک براساس نیاز شما

انتخاب بین Tailwind CSS و Bootstrap بستگی به نیازها و ترجیحات شما دارد. در اینجا برخی از مزایا و معایب هر کدام را بررسی می‌کنیم:

▎ فریمورک Tailwind CSS

مزایا:

• سفارشی‌سازی بالا: Tailwind به شما این امکان را می‌دهد که به راحتی استایل‌های خود را سفارشی کنید بدون اینکه به کلاس‌های از پیش تعریف شده وابسته باشید.

• مدولار: شما می‌توانید فقط کلاس‌هایی را که نیاز دارید استفاده کنید، که منجر به کاهش حجم فایل CSS نهایی می‌شود.

• طراحی مدرن: به شما اجازه می‌دهد تا طراحی‌های مدرن و پیچیده‌تری بسازید.

معایب:

• یادگیری اولیه: ممکن است برای مبتدیان دشوار باشد تا با مفاهیم Utility-first آشنا شوند.

• کلاس‌های زیاد: ممکن است در HTML شما کلاس‌های زیادی وجود داشته باشد که ممکن است خوانایی را کاهش دهد.

▎ فریمورک Bootstrap

مزایا:

• ساده و سریع: Bootstrap شامل کامپوننت‌های از پیش ساخته شده است که به شما کمک می‌کند تا به سرعت صفحات وب بسازید.

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

• رایج بودن: بسیاری از توسعه‌دهندگان با Bootstrap آشنا هستند، بنابراین همکاری با دیگران آسان‌تر است.

معایب:

• سفارشی‌سازی محدود: ممکن است سفارشی‌سازی عمیق‌تر نیاز داشته باشید که ممکن است با Bootstrap دشوار باشد.

• شکل و شمایل مشابه: وب‌سایت‌هایی که از Bootstrap استفاده می‌کنند ممکن است شبیه به یکدیگر به نظر برسند.

▎ نتیجه‌گیری

اگر به دنبال سفارشی‌سازی و طراحی مدرن هستید، Tailwind CSS ممکن است گزینه بهتری باشد. اما اگر می‌خواهید به سرعت یک پروژه را راه‌اندازی کنید و از کامپوننت‌های از پیش ساخته شده استفاده کنید، Bootstrap می‌تواند انتخاب مناسبی باشد.

👨‍💻 شورتکات‌های کاربردی در Postman برای برنامه‌نویس‌ها

🔍 اگه با Postman زیاد سروکار داری (به‌خصوص اگه فول‌استکی یا بک‌اندکار)، این شورتکات‌ها نجاتت می‌دن!


🚀اجرای سریع درخواست (Send)

Ctrl + Enter

🗂 ذخیره سریع درخواست

Ctrl + S

©️ کپی کردن cURL دستور

Ctrl + Alt + C

❌ بستن تب

Ctrl + W

💬 کامنت کردن کد در اسکریپت Pre-request یا Tests

Ctrl + /

🛁 پرش مستقیم به نوار آدرس

Ctrl + L

🚀 با استفاده از این شورتکات‌ها سرعت تست API‌هات تا چند برابر بیشتر می‌شه!

معرفی سایت‌های کاربردی برای طراحی آنلاین فلوچارت و دیاگرام 📈


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

لیست سایت :
1️⃣سایت diagrams - ابزاری ساده و کاربردی برای کشیدن فلوچارت، دیاگرام کلاس و... بدون نیاز به نصب!

2️⃣سایت Umlet – ابزاری سبک برای رسم دیاگرام‌های UML با امکانات پایه و کاربردی

3️⃣سایت Excalidraw – محیطی تعاملی با سبک طراحی دست‌نویس؛ مناسب برای ایده‌پردازی و آموزش.

4️⃣سایت Whimsical – طراحی فلوچارت، وایرفریم و نقشه‌های فکری با رابط کاربری مدرن و ساده.

5️⃣سایت Lucidchart – پلتفرمی حرفه‌ای با امکانات پیشرفته و قابلیت همکاری تیمی آنلاین.



⚙ این ابزارها به شما کمک می‌کنند تا ساختار کد، پایگاه داده یا روندهای اجرایی را به صورت شفاف و قابل درک ارائه دهید



#️⃣#معرفی_سایت #معرفی_ابزار #برنامه‌_نویسی #هوش_مصنوعی



➖➖➖➖➖➖➖➖
✅ @PIXEL_PROGRAMMERR | پیکسل پروگرمر

با قابلیت جدید Chrome می‌تونی مستقیماً داخل CSS از if() استفاده کنی — بدون نیاز به JS یا Sass!
یه قدم بزرگ برای انعطاف‌پذیری و قدرت بیشتر توی طراحی استایل‌ها

https://developer.chrome.com/blog/new-in-chrome-137#if

➖➖➖➖➖➖➖➖
✅ @PIXEL_PROGRAMMERR | پیکسل پروگرمر

🌟 معرفی نسخه بتای سایت جدید: English Vocabulary in Use Quiz 🌟

سلام به همه دوستان برنامه‌نویس‌ 👋

امروز با افتخار نسخه بتای وب‌سایت جدیدم را به شما معرفی می‌کنم. این سایت بر اساس کتاب معروف 📚 "English Vocabulary in Use" ناشر Cambridge Dictionary طراحی شده است و به شما امکان می‌دهد تا دایره واژگان زبان انگلیسی خود را از طریق سوالات و پاسخ‌های تعاملی تقویت کنید. 💪

ویژگی‌های سایت:

• سوالات چندگزینه‌ای: ❓ با استفاده از سوالات متنوع، می‌توانید واژگان جدید را یاد بگیرید و آنها را در جملات مختلف تمرین کنید. ✍️

• دسته‌بندی موضوعی: 📂 واژگان بر اساس موضوعات مختلف مرتب شده‌اند تا بتوانید به راحتی روی حوزه‌های خاصی که به آن‌ها نیاز دارید، تمرکز کنید. 🎯

• روند پیشرفت: 📈 با گذراندن سوالات و مشاهده نتایج، می‌توانید پیشرفت خود را دنبال کنید و نقاط قوت و ضعف خود را شناسایی کنید. 🔍

نکته مهم:

این نسخه بتا است و ما به مرور زمان ویژگی‌های بیشتری به آن اضافه خواهیم کرد. 🛠️ نظرات و پیشنهادات شما برای ما بسیار ارزشمند است و به ما کمک می‌کند تا تجربه بهتری برای کاربران فراهم کنیم. 🙏

لینک دسترسی:

لینک وب‌سایت

از نظرات و پیشنهادات شما در مورد این پروژه خوشحال می‌شوم. 💬 لطفاً تجربیات خود را با ما در میان بگذارید!

با تشکر ❤️
[پیکسل پروگرمر] 😊

➖➖➖➖➖➖➖➖
✅ @PIXEL_PROGRAMMERR | پیکسل پروگرمر

#کوته_نیوز

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

➖➖➖➖➖➖➖➖
✅ @PIXEL_PROGRAMMERR | پیکسل پروگرمر

حرفی ندارم 🧑🏻‍💻

➖➖➖➖➖➖➖➖
✅ @PIXEL_PROGRAMMERR | پیکسل پروگرمر