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

#interviewquestion #js

@ProGraphs

⚔️ Game of Thrones Spoiler Blocker 😅

https://chrome.google.com/webstore/detail/gameofspoils-game-of-thro/ipjhpmdippbajafafidlinjjmfkdamci?hl=en

#tool #blocker #chrome #extension

@ProGraphs

🔺 به راحتی بخش‌هایی از یک تصویر را محو، شطرنجی یا سیاه کنید.

https://marky.space/redacted/

#link #image

@ProGraphs

جواب: 10

ابتدا کد را بررسی می‌کنیم:
دقت کنید که در این کد دو آبجکت داریم. یکی آبجکت proGraphs که یک پراپرتی read-only به نام prop دارد.
و دیگری آبجکت obj که به proGraphs لینک شده است.

در نتیجه پراپرتی prop داخل آبجکت proGraphs تعریف شده است. اما آبجکت obj هم به این پراپرتی دسترسی دارد. چون به proGraphs لینک شده است (به مطالبی که راجع به prototype chain منتشر کردیم مراجعه کنید).

حالا در خط 14, می‌خواهیم یک پراپرتی دیگر به نام prop تعریف می‌کنیم اما این بار در آبجکت obj.

انتظار داریم که این پراپرتی به راحتی به آبجکت obj اضافه شود و در خط 15 مقدار 20 را دریافت کنیم.

اما چرا 10 در کنسول چاپ شد؟
مشکل اینجاست که وقتی یک پراپرتی را read-only می‌کنیم، پراپرتی مورد نظر نه تنها در خود آبجکت، بلکه در کل prototype chain غیر قابل تغییر می‌شود.
پس چون پراپرتی prop در آبجکت proGraphs به صورت read-only تعریف شده است، هر آبجکتی که به proGraphs لینک شده باشد هم نمی‌تواند یک پراپرتی به نام prop داشته باشد!!

در نتیجه خط 14 هیچ اثری ندارد و مقدار پراپرتی 20 باقی می‌ماند.

سوال سختیه و ترکیبی از دو مفهوم پایه‌ای prototype و descriptor هست. اما بیش‌تر جواب‌ها درست بود 😁💪

مطالب مربوط به prototype و descriptorها رو میتونید اینجا مطالعه کنید:

-https://t.me/ProGraphs/131
-https://t.me/ProGraphs/277
-https://t.me/ProGraphs/290

ColorSlurp

🔺 بهترین نرم‌افزار Color picker برای Mac در جهان ✨

#tool #color #colorpicker

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺تصاویر شگفت انگیز خود را بسازید. ✨

https://iradesign.io/

#link #illustration

@ProGraphs

جواب: ‌2

در مطالب قبلی نحوه‌ی کارکرد this در جاوااسکریپت را بررسی کردیم و دیدیم که مقدار this فقط بر اساس نحوه‌ی صدا شدن تابع تعیین می‌شود. پس اینکه یک تابع کجا و چطور تعریف شده است، هیچ تاثیری در مقدار this ندارد.
به عنوان مثال به این کد دقت کنید:
let obj = {
func() {
console.log(this);
}
};
let func = obj.func;
func(); // window
همینطور که می‌بینید، با این که تابع داخل آبجکت تعریف شده است، مقدار this به آبجکت obj اشاره نکرد!
پس فقط نحوه‌ی صدا شدن تابع مقدار this را تعیین می‌کند و نه اینکه تابع کجا تعریف شده است.

حالا به کد سوال دقت کنید:
برای تعیین مقدار this فقط به خط 8 توجه می‌کنیم. در نگاه اول به نظر می‌رسد که تابع به صورت method call صدا شده است:
obj.func();
اما به عبارت داخل پرانتز در خط 8 دقت کنید. از این عبارت یک مقدار برمی‌گردد و این مقدار یک تابع است. سپس بلافاصله این تابع را به صورت معمولی صدا می‌کنیم.
در واقع کد داخل سوال با مثالی که در بالا بررسی کردیم کاملا یکسان است!
پس با توجه به اینکه تابع به صورت معمولی صدا شده است، مقدار this به آبجکت global اشاره می‌کند و مقدار window.title (عدد 2) در کنسول چاپ می‌شود.

در خط 8، داخل پرانتز از عملگر comma استفاده شده، که در این مطلب بررسی کردیم:
https://t.me/ProGraphs/398

مطالب مربوط به تعیین مقدار this رو هم اینجا می‌تونید مرور کنید:
https://t.me/ProGraphs/256

تو این مقاله هم می‌تونید خیلی کامل‌تر راجع به کد این سوال مطالعه کنید:
http://2ality.com/2015/12/references.html

بالاخره InVision Studio برای ویندوز به صورت رایگان منتشر شد.

https://www.invisionapp.com/studio

#tool #design #prototyping

@ProGraphs

🔺Free stock photography + Color palettes

https://kaboompics.com/

#link #stockphoto

@ProGraphs

​تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت پنجم):

در مطالب قبلی تبدیل انواع داده‌ها به string, number, boolean و همچنین تبدیل آبجکت به primitive را بررسی کردیم. و دیدیم که هر کدام از این تبدیل‌ها از قوانین مشخصی تبعیت می‌کنند.

اما چطور می‌توانیم این تبدیل‌ها را در عمل انجام دهیم؟
تبدیل بین نوع داده‌ها به دو صورت کلی اتفاق می‌افتد:

1- explicit coercion:
در این حالت به صورت مستقیم نوع داده را تغییر می‌دهیم و با دیدن کد، واضح است که می‌خواهیم نوع داده را تغییر دهیم:
Number("40"); // explicitly coerce to number

2- implicit coercion
به دلیل ذات داینامیک جاوااسکریپت، بعضی مواقع در نتیجه‌ی انجام یک عملیات خاص، به صورت خودکار coercion اتفاق می‌افتد.
مثلا در این کد برای انجام عملیات تفریق،‌ به صورت خودکار string به عدد تبدیل می‌شود:
"20" - 5; // 15

دقت کنید که در هر دو حالت، تبدیل‌ها از قوانینی که در مطالب قبلی بررسی کردیم تبعیت می‌کنند.
در مطالب بعدی، به صورت کامل قوانین implicit coercion و explicit coercion را بررسی می‌کنیم.

#quicktip #js #coercion

@ProGraphs

در مطالب قبلی قوانین تبدیل یک آبجکت به primitive را بررسی کردیم.

شاید بپرسید چرا برعکس این تبدیل، یعنی تبدیل primitive به آبجکت را بررسی نکردیم؟
جالب است بدانید که همیشه نتیجه‌ی coercion در جاوااسکریپت یک نوع داده‌ی primitive است. و نمی‌توانیم یک نوع داده‌ی primitive را به آبجکت coerce کنیم!

در واقع برای تبدیل primitive به آبجکت، از wrapper objectها استفاده می‌شود که ارتباطی به coercion ندارد و میتونید تو این مطلب راجع بهشون بخونید:
https://t.me/ProGraphs/376

🔺پلاگین unDraw برای منتقل کردن تصاویری مشابه تصویر زیر به Adobe XD✨

https://xd.undraw.co/

#tool #plugin #illustration #adobexd #xd

@ProGraphs

تفاوت این دو روش برای load کردن فایل‌ها چیست؟
(کاربرد ویژگی rel=preload)

#interviewquestion #html

@ProGraphs

🔺مجموعه‌ای از بهترین عادت‌های UI و UX

https://www.checklist.design/

#link #checklist #design

@ProGraphs

🔺Gradients and palettes! 🌈

https://www.colorffy.com/

#link #color

@ProGraphs

جواب:

با استفاده از preload می‌توانیم resourceهایی که می‌دانیم بعدتر به آن‌ها احتیاج داریم را زودتر load کنیم.

برای مثال می‌دانیم که فونت‌های یک صفحه فقط در صورتی دانلود می‌شوند که فونت مورد نظر داخل فایل css اعمال شده باشد. بنابراین مرورگر نمی‌تواند قبل از اجرا کردن فایل css، شروع به دانلود کردن فونت کند.

اما می‌توانیم با استفاده از preload، کاری کنیم که فایل فونت، زودتر دانلود شود:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

به این ترتیب وقتی داخل فایل css می‌خواهیم فونت را اعمال کنیم، فونت از قبل دانلود شده است و این موضوع می‌تواند باعث بهبود performance شود.
دقت کنید که باید نوع فایل را با استفاده از ویژگی as مشخص کنیم تا مرورگر بتواند اولویت دانلود فایل را مشخص کنید‌. این ویژگی مقادیر مختلف مثل: style, script, font ... را قبول می‌کند.

اما preload دقیقا چطور کار می‌کند؟
در واقع preload مرورگر را وادار می‌کند که یک فایل را بدون بلاک کردن رویداد onload دانلود کند. یعنی resource مورد نظر از load صفحه decouple می‌شود. در نتیجه با استفاده‌ی به جا از preload می‌توانیم زمان load صفحه را کاهش دهیم.

یک مثال از کاربرد preload برای بهبود performance:
می‌دانیم که فایل‌های css به صورت render-blocking اجرا می‌شوند.
این رفتار در بیشتر مواقع منطقی است.
چون css برای درست render شدن صفحه الزامی است.
اما می‌توانیم برای بهبود عملکرد، استایل‌هایی که برای render شدن صفحه الزامی نیستند را داخل یک فایل جدا قرار دهیم و با استفاده از preload این فایل را به صورت non-render-blocking دانلود کنیم:
<link rel="preload" as="style" onload="this.rel = 'stylesheet'" href="style.css">

به این ترتیب مرورگر بدون بلاک کردن رویداد onload فایل را دانلود می‌کند و بعد از load شدن فایل، مقدار ویژگی rel را تغییر می‌دهیم تا فایل css اجرا شود.
پس این فایل به صورت render-blocking اجرا نمی‌شود و زمان load شدن صفحه کاهش پیدا می‌کند. (بعد از اینکه مطالب performance رو شروع کردیم، بیشتر این ترفند را بررسی خواهیم کرد 😉)

تو این مقاله میتونید کاربردهای بیشتری از preload رو ببینید:
https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/