سوال سختیه و ترکیبی از دو مفهوم پایه‌ای 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/

🔺یک منبع ساده و رایگان برای پیدا کردن استانداردهای بین المللی برای اندازه‌های کاغذ

https://papersizes.io/

#link #paper #size

@ProGraphs

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

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

عملگر + در جاوااسکریپت، دو کار متفاوت انجام می‌دهد: جمع کردن اعداد و concat کردن stringها.

❗️اما عملگر + چطور تشخیص می‌دهد که باید عملیات جمع را انجام دهد یا concat؟
a + b
1- اگر هردو متغیر a و b از نوع string باشند، عملیات concat اتفاق می‌افتد:
"hello" + "world"; // "helloworld

2- اگر یکی از این دو متغیر از نوع string باشد، متغیر دیگر هم به string تبدیل می‌شود و دو string با هم concat می‌شوند:
1 + "20"; // "120"

3- اگر هر دو متغیر از نوع string نباشند (و آبجکت هم نباشند)، ابتدا هر دو متغیر به عدد تبدیل می‌شوند و سپس عملیات جمع اتفاق می‌افتد:
1 + true; // 2

4- اگر یک یا هردو مقدار از نوع آبجکت باشند، باید ابتدا به primitive تبدیل شوند. حالا با توجه به اینکه آبجکت‌ها به string تبدیل شده‌اند یا نه، طبق 3 قانون بالا تعیین می‌کنیم که جمع اتفاق می‌افتد یا concat.

این 4 قانون را می‌توانیم در این جمله خلاصه کنیم:
❗️اگر یکی از دو مقدار از نوع string باشد، یا حتی آبجکتی باشد که بتواند به string تبدیل شود، عملیات concat اتفاق می‌افتد. در غیر این صورت عملیات جمع اتفاق می‌افتد.

❗️اما بیاید یک بار دیگر این چهار قانون را مرور کنیم و این بار تبدیل‌هایی که به صورت خودکار بین نوع داده‌ها اتفاق می‌افتد را بررسی کنیم:
‌1- در قانون یک، coercion اتفاق نمی‌افتد!
2- در قانون دو، یکی از دو مقدار از نوع string هست. و مقدار دیگر هم به صورت خودکار به string تبدیل می‌شود.
3- در قانون سه، اگر هر کدام از دو مقدار از نوع عدد نباشند، به صورت خودکار به عدد تبدیل می‌شوند.
4- در قانون چهار آبجکت‌ها به صورت خودکار به primitive تبدیل می‌شوند.

(اگر می‌پرسید "چطور" این تبدیل‌ها اتفاق می‌افتد؟، 5 مطلب قبلی راجع به coercion رو مطالعه کنید 😁)

#quicktip #js #coercion

@ProGraphs

با اجرا کردن این دو خط کد به صورت مستقیم در کنسول مرورگر، متوجه می‌شویم که خروجی آن‌ها دو مقدار متفاوت است!
دلیل این موضوع را توضیح دهید

#interviewquestion #js

@ProGraphs

یکی از دوستان این سری مقالات عالی راجع به برنامه نویسی functional رو شروع کردند.
قطعا خوندنش خالی از لطف نیست 👌

http://vrgl.ir/628wV

#link #article #functional #js