بالاخره 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.iss.one/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 رو شروع کردند.
قطعا خوندنش خالی از لطف نیست 👌

https://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✨

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

#link #git #guide

@ProGraphs

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

#quicktip #devtools

@ProGraphs