​​یکی دیگر از ‌api های جالب chrome devtools تابع monitorEvents است. این تابع یک آبجکت DOM را دریافت می‌کند و هر بار یک event برای آن عنصر رخ می‌دهد، اطلاعات آن را در کنسول نمایش می‌دهد.

این تابع یک پارامتر دوم اختیاری هم دریافت می‌کند که می‌تواند نام یک event خاص و یا آرایه‌ای از eventها باشد که می‌خواهیم track کنیم.

همچنین می‌توانیم به جای نام یک event از عبارت‌هایی مثل mouse یا key استفاده کنیم تا تمامی event های مربوط به موس یا کیبورد را بررسی کنیم.

این api برای دیباگ کردن، پیدا کردن نام یک event و ... می‌تواند مفید باشد.

#quicktip #devtools

@ProGraphs

🔺 یه سایت خوب برای الهام گرفتن در حوزه دیجیتال 🎉✨

https://www.uplabs.com/

#link #inspiration #showcase

@ProGraphs

آیا با مفهوم closure در جاوااسکریپت آشنا هستید؟
یک مثال از کاربرد آن بزنید

#interviewquestion #js

@ProGraphs

🔺EMOJI CHEAT SHEET 🎉✨

https://www.webpagefx.com/tools/emoji-cheat-sheet/

#link #emoji #cheatsheet

@ProGraphs

جواب:

در جاوااسکریپت، توابع به scope‌ اطرافشان (lexical environmet) و متغیر‌هایی که در آن تعریف شده‌اند دسترسی دارند. حتی اگر یک تابع خارج از محیطی که در آن تعریف شده است صدا شود،‌ باز هم به متغیر‌های توابع بیرونی دسترسی دارد. به این کد دقت کنید:

function outer() {
    var data = 'outer scope data';
    function inner() {
        console.log(data);
    }

    return inner;
}
var inner = outer();
inner(); // 'outer scope data'

تابع inner را از تابع بیرونی return می‌کنیم و خارج از آن صدا می‌کنیم. اما چون داخل تابع outer تعریف شده است، همچنان به متغیر‌های تعریف شده در آن دسترسی دارد. به این مفهوم closure می‌گویند و با هر بار ایجاد یک تابع، یک closure هم ایجاد می‌شود.

کاربردهای زیادی برای closure وجود دارد. از جمله پیاده سازی data privacy، module pattern، ...

یکی از این کاربرد‌ها زمانی اتفاق می‌افتد که یک تابع را به تابع setInterval پاس می‌دهیم:

function outer() {
     var count = 0;
     setInterval(function() {
           count++;
     }, 1000);
}

تابع ما داخل تابع setInterval صدا می‌شود. ولی چون داخل تابع outer تعریف شده است، به متغیر count دسترسی دارد.

🔺Wunderlist | To-do list, Reminders, Errands 🎊

https://www.wunderlist.com/

#link #todolist #reminder #errand

@ProGraphs

🔺 یه Ganarator عالی برای گرادینت ✨

https://shapy.app/

#link #color #gradient #generator

@ProGraphs

​​مکانیزم this در جاوااسکریپت: (قانون چهارم و آخر)

زمانی که یک تابع را با کلمه کلیدی new صدا می‌کنیم،‌ این تابع، یک آبجکت جدید می‌سازد و آبحکت جدید را به عنوان مقدار this تعیین می‌کند (constructor call دو کار دیگر هم انجام می‌دهد. برای مطالعه‌ی بیشتر به مطالبی که راجع به prototype منتشر کردیم رجوع کنید).

دقت کنید که در جاوااسکریپت، مانند زبان‌های oop دیگر، تابع constructor نداریم و تقریبا همه‌ی توابع می‌توانند با new صدا شوند.

نحوه‌ی کارکرد this تنها با همین چهار قانون ساده قابل درک است.
همچنین اولویت این چهار قانون برعکس ترتیبی است که ما در کانال بررسی کردیم!
یعنی اگر قوانین دوم و سوم را هم‌زمان در یک call-site ببینیم، قانون سوم اعمال می‌شود.

#quicktip #js

@ProGraphs

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

آخر هفته منتظر یه سوال نسبتاً سخت از this باشید 😄

با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟

#interviewquestion #js

@ProGraphs

🔺 حذف پس‌زمینه تصویر 👌🏻
- در پنج ثانیه
- کاملا خودکار
- بدون یک کلیک

https://www.remove.bg/

#link #background

@ProGraphs

🔺To Do List & Task Manager ⏳

https://todoist.com/

#link #todolist

@ProGraphs

جواب: 19

اگر نوع مقداری که به عنوان key در یک آبجکت تعیین می‌کنیم، غیر از string باشد، مقدار تعیین شده به string تبدیل می‌شود.

در این کد، ابتدا یک پراپرتی با key از نوع آبجکت ایجاد می‌کنیم. اما می‌دانیم که key نمی‌تواند از نوع آبجکت باشد پس به صورت خودکار به string تبدیل می‌شود. یعنی تا اینجا یک پراپرتی به نام "[object object]" و مقدار 20 داریم.

حالا هر پراپرتی جدیدی که اضافه کنیم، اگر key‌ آن از نوع آبجکت باشد، نام آن به "[object object]" تبدیل می‌شود و به جای اینکه پراپرتی جدید ایجاد شود، مقدار پراپرتی قبلی تغییر می‌کند.
بنابراین در خط هفتم، در واقع مقدار پراپرتی قبلی را تغییر می‌دهیم و پراپرتی جدیدی ایجاد نمی‌کنیم.

در نهایت فقط یک پراپرتی با نام "[object object]" و مقدار 19 در آبجکت وجود دارد!

🔺فشرده‌سازی تصاویر با TinyPNG

https://tinypng.com/

#link #image #compressor

@ProGraphs

یکی از قابلیت‌های خیلی کاربردی chrome devtools امکان ثبت screenshot تمام صفحه از یک وب‌سایت است.

برای این کار command menu را باز می‌کنیم (Ctrl+Shift+P در ویندوز و Cmd+Shift+P در مک) و دستور capture full size screenshot را تایپ می‌کنیم.

#quicktip #devtools

@ProGraphs

🔺جامعه‌ای که زنان در خط مقدم آن قرار دارند. 👩🏻‍💻👩🏼‍🎓🧕🏻

با دیگر زنان سازنده در دنیا چت و به یکدیگر کمک کنید. 🤝

https://womenmake.com/

#link #women #community

@ProGraphs

با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟

#interviewquestion #thiskeyword

@ProGraphs

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

https://t.iss.one/ProGraphs/176

https://t.iss.one/ProGraphs/193

https://t.iss.one/ProGraphs/213

https://t.iss.one/ProGraphs/232

https://t.iss.one/ProGraphs/245

جواب: Form

اول خیلی کلی کد را بررسی می‌کنیم:
سه آبحکت داریم که هر کدام یک پراپرتی به نام title و یک تابع به نام printTitle دارند که this.title را چاپ می‌کند. همچنین دو آبجکت panel و form یک پراپرتی به نام child دارند که به یک آبجکت دیگر اشاره می‌کند. و در آخر یک تابع global به نام printChildTitle داریم که تابع this.child.printTitle را صدا می‌کند.

گفتیم که برای تعیین مقدار this فقط به قسمتی از کد که تابع در آن صدا شده است (call-site) توجه می‌کنیم و اصلا کاری به اینکه توابع کجا و چگونه تعریف شده‌اند نداریم:
اولین call-site در خط آخر قرار دارد که تابع printChildTitle صدا شده است. با توجه به اینکه تابع را با call صدا کرده‌ایم، مقدار this درون تابع printChildTitle آبجکت panel خواهد بود.

حالا آخرین call-site که داخل خود تابع printChildTitle قرار دارد: با توجه به این که مقدار this در تابع printChildTitle آبجکت panel است، تابع panel.child.printTitle صدا می‌شود (قانون دوم). بنابراین مقدار this درون تابع printTitle آبجکت panel.child یا همان آبجکت form خواهد بود!

(میدونم یه ذره گیج کننده و سخت بود و همچین کدی توی یه پروژه‌ی واقعی واقعا بد و غیر قابل فهم محسوب میشه! فقط خواستیم بعد از این یک ماه که مفهوم this رو بررسی کردیم، مطالبی که یاد گرفتیم رو تو یه کد نسبتا گیج کننده محک بزنیم 😉)

🔺مفاهیم پایه‌ای طراحی آیکون رو در یک ساعت یاد بگیرید. 👌🏻

https://introtoicons.com/

#link #icon #course

@ProGraphs

🔺ورژن دوم Design blocks سایت Froala هم اومد. 😍✨

https://www.froala.com/design-blocks-v2

#link #designblocks #webpagebuilder

@ProGraphs