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

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

🔺کمتر از سه ساعت دیگه تا شروع Google I/O 2019


امروز ۱۷ اردی‌بهشت، ساعت ۲۱:۱۵

🔸از طریق لینک زیر لایو ببینید:

https://youtu.be/lyRPyRKHO8M

🔺fontain = a font-collection (and a font-collection-system)

https://www.fontain.org/

#link #font

@ProGraphs

جواب:

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

❗️ابتدا خط اول را بررسی می‌کنیم:
در خط اول یک آبجکت خالی داریم و یک آرایه خالی (که یک نوع آبجکت است). پس قبل از هر چیز باید هر دو مقدار به primitive تبدیل شوند:
1- برای تبدیل آرایه به primitive متد toString صدا می‌شود. می‌دانیم که متد toString که برای آرایه‌ها تعریف شده است، همه‌ی آیتم‌های آرایه را به صورت string برمی‌گرداند:
[1, 2].toString(); // "1,2"
اما چون آرایه خالی است، تبدیل به string خالی می‌شود.
تا اینجا آرایه خالی به string خالی تبدیل شد.

2- برای تبدیل آبجکت به primitive هم متد toString صدا می‌شود. اما متد toString که برای آبجکت‌های معمولی تعریف شده است، این string را برمی‌گرداند (در مطالب بررسی دقیق‌تر بررسی می‌کنیم که کابرد این string خاص چیست):

let b = {};
b.toString(); // "[object Object]"

پس آبجکت خالی هم به یک string تبدیل شد.

حالا چون دو string داریم، عملیات ‌concat انجام می‌شود:
"" + "[object Object]"

❗️اما چرا نتیجه‌ی خط دوم با خط اول متفاوت است؟
در خط دوم، عبارت را با {} را شروع کرده‌ایم. به همین دلیل جاوااسکریپت {} را به عنوان یک بلاک خالی می‌بیند و نه یک آبجکت!
پس خط دوم در واقع فقط یک آرایه خالی و عملگر + unary است (و نه عملگر جمع):
+[]

عملگر + unary روی یک مقدار اعمال می‌شود و آن را به عدد تبدیل می‌کند. پس باید آرایه خالی را به عدد تبدیل کنیم:
برای تبدیل آرایه به عدد ابتدا آرایه به صورت خودکار به primitive تبدیل می‌شود. در بالا به صورت کامل مراحل تبدیل آرایه خالی به primitive را دیدیم، پس می‌دانیم که آرایه خالی به string خالی تبدیل می‌شود. حالا string خالی به عدد تبدیل می‌شود:
[] -> "" -> 0
پس در خط دوم عدد 0 چاپ می‌شود.

تا حالا 6 مطلب راجع به coercion در جاوااسکریپت منتشر کردیم و سعی کردیم خیلی کامل و دقیق مکانیزم coercion رو بررسی کنیم.

اگر این سوال رو کامل متوجه نشدید، حتما یه نگاه به 6 مطلب قبلی راجع به coercion بندازید 😉

🔺راهنمای ساده‌ی git✨

http://rogerdudler.github.io/git-guide/

#link #git #guide

@ProGraphs

با استفاده از قابلیت workspaces در گوگل کروم می‌توانیم کاری کنیم که تغییراتی که در devtools انجام می‌دهیم،‌ در فایل‌های پروژه اعمال شوند.

#quicktip #devtools

@ProGraphs

🔺مجموعه ای از تصاویر رایگان برای landing page

https://landingstock.com/

#link #stockphoto

@ProGraphs

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

یکی دیگر از عملگرهایی که باعث می‌شود نوع داده‌ها به صورت خودکار تغییر کنند، عملگر مقایسه‌ای ">" است.
این عملگر می‌تواند به دو صورت مختلف مقایسه را انجام دهد:
1- مقایسه‌ی ریاضی:
1 < 2; // true

2- مقایسه‌ی alphabetic:
"aa" < "ab"; // true
"1" < "02"; // false
همانطور که می‌بینید در این حالت تک تک حروف string به صورت alphabetic مقایسه می‌شوند. یعنی 'a' از 'b' کوچک‌تر است.

❗️اما عملگر ">" چطور تشخیص می‌دهد که به کدام روش مقایسه را انجام دهد و چه زمانی نوع داده‌ها را تغییر می‌دهد (implicit coercion)؟
طبق spec اکمااسکریپت، این عملگر برای انجام مقایسه این مراحل را طی می‌کند:

1- برای انجام مقایسه هر دو مقدار باید primitive باشند. بنابراین اگر مقادیری که مقایسه می‌شوند از نوع آبجکت باشد، باید به primitive تبدیل شود (به مطلبی که راجع به تبدیل آبجکت به primitive منتشر کردیم مراجعه کنید)

2- حالا که مطمئنیم هر دو مقدار primitive هستند، اگر هر دو مقدار string باشند، مقایسه به صورت alphabetic انجام می‌شود.

3- اگر حتی یکی از دو مقدار از نوع string نباشد، هر دو مقدار به صورت خودکار به عدد تبدیل می‌شوند و مقایسه‌ی عددی انجام می‌شود (به کد داخل تصویر دقت کنید).

#quicktip #js #coercion

@ProGraphs

در گوگل کروم می‌توانیم داخل یک پنجره‌ی devtools، یک devtools دیگر باز کنیم (یعنی devtools برای devtools)!

در این ویدیو با استفاده از این قابلیت فریم‌های کند برنامه را پیدا می‌کنیم.

#quicktip #devtools #trick

@ProGraphs

🔺از سایت Color Designer در ساخت پالت‌های رنگی برای محصول کمک بگیرید.

https://colordesigner.io/

#link #color #palette #generator

@ProGraphs

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

#interviewquestion #js

@ProGraphs

یه ابزار مناسب دولوپرهایی که به حجم بالای پروژه‌های جاوااسکریپتی حساسند 😄

https://bundlephobia.com/

#tool #performance

@ProGraphs

جواب: 'false-false'

زمانی که دو طرف تساوی از یک نوع داده هستند، عملگرهای == و === دقیقا یکسان عمل می‌کنند.
بنابراین با توجه به اینکه هر دو مقدار از نوع آبجکت هستند. جواب نمی‌تواند true-false یا false-true باشد!

از طرفی وقتی دو آبجکت را مقایسه می‌کنیم، صرفا reference آن‌ها مقایسه می‌شود. و نه تک تک پراپرتی‌های آن‌ها.

به کد سوال دقت کنید:
دو آبجکت متفاوت داریم (referenceهای متفاوت دارند) که پراپرتی‌های آن‌ها دقیقا یکسان است.
اما گفتیم که پراپرتی‌های دو آبجکت اصلا مقایسه نمی‌شوند و برای برابر بودن دو آبجکت باید reference آن‌ها یکسان باشد.

بنابراین دو بار عبارت 'false' در کنسول چاپ می‌شود.

🔺نتایج نظرسنجی برنامه‌نویسان در سایت StackOverflow (سال 2019)

https://kutt.it/dHsOax

#link #survey

@ProGraphs

Real-time visualizer for React lifecycle methods

https://github.com/Oblosys/react-lifecycle-visualizer

#tool #react #visualizer

@ProGraphs

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

در انتهای مطالب coercion، عملگر "==" را بررسی می‌کنیم. همانطور که در مطالب قبلی دیدیم، اگر دو مقداری که با استفاده از عملگر "==" مقایسه می‌کنیم، از یک نوع داده نباشند، به صورت خودکار نوع داده‌ی مقادیر تغییر می‌کند تا مقایسه بین دو مقدار با نوع داده‌ی یکسان انجام شود.

❗️این موضوع در بعضی موارد نتایج کاملا گیج کننده‌ای را رقم می‌زند.
برای مثال:
20 == true; // false

در این کد یک مقدار از نوع boolean است و مقدار دیگر از نوع عدد. طبیعتاً انتظار داریم عدد 20، به مقدار true تبدیل شود و نتیجه‌ی مقایسه true شود.

اما با مراجعه به spec اکمااسکریپت، متوجه می‌شویم که اگر یک مقدار دیگر را با true یا false مقایسه کنیم، به جای اینکه مقدار مورد نظر به boolean تبدیل شود، مقدار boolean به عدد تبدیل می‌شود!
پس در این کد ابتدا مقدار true به عدد 1 تبدیل می‌شود و سپس عدد 1 و 20 مقایسه می‌شوند و نتیجه‌ی مقایسه false می‌شود.

❗️اما گاهی این کارکرد عملگر "=="، منطقی و مفید است.
برای مثال:
null == undefined; // true
همانطور که در این کد می‌بینید، وقتی با استفاده از عملگر "==" مقایسه را انجام می‌دهیم، دو مقدار null و undefined می‌توانند به یکدیگر تبدیل شوند.
به این ترتیب لازم نیست برابر بودن یک مقدار را هم با null و هم با undefined چک کنیم (به کد داخل تصویر دقت کنید)

#quicktip #js #coercion

@ProGraphs