🔺ایجاد افکت‌هایی این چنینی بر روی عکس با سایت زیر ✨👇🏻

https://duotone.shapefactory.co/

#link #duotone

@ProGraphs

🔺 Typeform

- نظرسنجی و فرم‌ساز آنلاین ✌🏻🥳

https://www.typeform.com

#link #survey #form #builder

@ProGraphs

Simple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll! 😎✌🏻

https://github.com/alexfoxy/laxxx

#link #js #plugin #scroll

@ProGraphs

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

در مطلب قبلی، تبدیل نوع داده‌ها به string را بررسی کردیم و نحوه‌ی تبدیل آبجکت‌ها به string را هم دیدیم.

حالا می‌خواهیم نحوه‌ی تبدیل آبجکت‌ها به primitive را دقیق‌تر بررسی کنیم (نه فقط string):

❗️وقتی سعی می‌کنیم یک آبجکت را به یک نوع داده مثل number, string تبدیل کنیم (که نوع داده‌های primitive هستند)، باید ابتدا آبجکت به primitive تبدیل شود. اما چطور؟

1- اگر متدی به نام valueOf در آبجکت وجود داشته باشد و خروجی این متد از نوع primitive باشد، همین متد صدا می‌شود:

var obj = {
    valueOf() {
        return 2;
    }
};
obj -> 2

2- اگر از مرحله‌ی قبلی مقدار primitive تعیین نشود، متد toString صدا می‌شود:

var obj = {
    toString() {
        return "hi";
    }
};
obj -> "hi"

دقت کنید که این مراحل، توسط خود جاوااسکریپت و زمانی که می‌خواهیم یک آبجکت را به یک نوع داده‌ی primitive مثل string تبدیل کنیم انجام می‌شود.

❗️نکات تکمیلی:
- همانطور که در مطلب قبلی هم دیدیم، متدهای valueOf و toString در Object.prototype تعریف شده‌اند. بنابراین اگر خودمان این متدها را داخل یک آبجکت تعریف نکنیم، متدهای داخل Object.prototype برای تبدیل به primitive صدا می‌شوند (به مطالبی که راجع به prototype chain منتشر کردیم مراجعه کنید).

- گاهی ترتیب صدا شدن دو متد valueOf و toString برعکس چیزی است که در این مطلب دیدیم. دلیل این موضوع را در مطالب بعدی بررسی می‌کنیم. اما فعلا اهمیتی ندارد 😅

#quicktip #js

@ProGraphs

حالا که دانشمون از تبدیل آبجکت به primitive کامل‌تر شده، دوباره به مطلب قبلی برگردید:
https://t.iss.one/ProGraphs/434

تو قانون دوم گفتیم که برای تبدیل به string، متد toString صدا می‌شه. حالا مراحل کامل‌تر (valueOf و toString) و دلیل صدا شدن این متد رو بهتر درک می‌کنیم!

🔺نیازی به توضیح نیست، خودتون ببینید! 😅

https://www.pandacolors.com/

#link #color

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺2019 Design Trends Guide 🥳

https://kutt.it/3WylKt

#link #design #trend #guide

@ProGraphs

جواب: true

در چند مطلب اخیر، قسمتی از مفاهیم coercion در جاوااسکریپت را بررسی کردیم. حالا نتیجه‌ی این کد را با استفاده از این مفاهیم بررسی می‌کنیم:

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

**‌حالا باید آبجکت را به عدد تبدیل کنیم. اما قبل از تبدیل آبجکت به عدد، باید آبجکت به primitive تبدیل شود!
برای تبدیل آبجکت به primitive، متد valueOf داخل آبجکت صدا می‌شود. خروجی این متد عدد 20 است پس در نهایت آبجکت proGraphs به عدد 20 تبدیل شد و نتیجه‌ی شرط true است!

نتیجه‌ی این کد رو در 2 مرحله بررسی کردیم. اگر این 2 مرحله رو متوجه نشدید اصلا نگران نباشید 😁
هردوی این مراحل رو در مطالب قبلی عمیقا بررسی کردیم:

* https://t.iss.one/ProGraphs/432

** https://t.iss.one/ProGraphs/446

🔺Tastemaking: 2019 Design Trends ✨🎉

https://kutt.it/0i2RSE

#link #design #trend

@ProGraphs

تفاوت function و method و constructor در جاوااسکریپت چیست؟

#interviewquestion #js

@ProGraphs

🔺StickPNG - Free Transparent PNGs, Stickers, Clipart & more! 👌🏻

https://www.stickpng.com/

#link #transparent #png

@ProGraphs

بزرگترین مجموعه از تصاویر transparent png clipart رایگان

https://flyclipart.com/

#link #transparent #png

@ProGraphs

جواب:

در جاوااسکریپت، متدها مثل پراپرتی‌های معمولی هستند با این تفاوت که مقدار داخل آن‌ها یک تابع است. بنابراین متدها متفاوت از تابع‌های معمولی جاوااسکریپت نیستند. به همین دلیل به راحتی می‌توانیم این تابع را داخل یک متغیر بریزیم و ... :

let obj = {
  func() {}
};
let f = obj.func;

این موضوع برای constructorها هم صادق است. یعنی constructorهای Date, Error, Number, ... همگی توابع معمولی هستند.
در واقع تقریبا همه‌ی توابع جاوااسکریپت را می‌توانیم با کلمه کلیدی new صدا کنیم. در این صورت، تابع مورد نظر علاوه بر کدی که داخلش تعریف شده:
1- یک آبجکت جدید می‌سازد.
2- آبجکت جدید را به عنوان مقدار this تعیین می‌کند.
3- آبجکت جدید را به آبجکت func.prototype لینک می‌کند (این موضوع رو در مطالب مربوط به prototype بیشتر بررسی کردیم)
4- و در نهایت آبجکت تازه ساخته شده را return می‌کند.

function ProGraphs() {}
let a = new ProGraphs();
typeof a; // object

سایتی پر از تصاویر SVG زیبا که می‌توانید کاملاً رایگان آن‌ها را دانلود کنید.

https://gallery.manypixels.co/

#link #svg #illustration

@ProGraphs

Front-end Developer Handbook 2019 ✌️

https://frontendmasters.com/books/front-end-handbook/2019/

#link #guide #handbook

@ProGraphs

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

در مطلب قبلی نحوه‌ی تبدیل آبجکت‌ها به primitive را بررسی کردیم و دیدیم که هرگاه می‌خواهیم یک آبجکت را به یک نوع داده‌ی primitive مثل number و string تبدیل کنیم، باید ابتدا آبجکت به primitive تبدیل شود.

حالا می‌خواهیم بر پایه‌ی همین موضوع، نحوه‌ی تبدیل نوع داده‌های مختلف به Number را بررسی کنیم:
❗️تقریبا برای همه‌ی مقادیر primitive، حالت عددی از پیش تعیین شده است:
true -> 1
false -> 0
null -> 0
undefined -> NaN

❗️اگر مقدار داخل یک string غیر قابل تبدیل به عدد باشد، نتیجه NaN است:
"123" -> 123
"123AB" -> NaN

❗️برای تبدیل آبجکت‌ها (و subtypeهای آن مثل آرایه‌ها) ابتدا آبجکت به primitive تبدیل می‌شود.
سپس مقدار primitive با توجه به نکاتی که در بالا بررسی کردیم به عدد تبدیل می‌شود (کد داخل تصویر)

حالا در هر شرایط، و به هر روشی که یک مقدار را به عدد تبدیل کنیم، از این قوانین تبعیت می‌شود:
Number(false) -> 0
+false -> 0
false * 1 -> 0

#quicktip #js #coercion

@ProGraphs

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

تو این مقاله هم میتونید خیلی کامل‌تر راجع به این موضوع بخونید:

https://www.adequatelygood.com/Object-to-Primitive-Conversions-in-JavaScript.html

🔺 ابزار جستجوی فایل و فولدر‌ها با سرعتی بسیار بالا برای ویندوز

https://www.voidtools.com/

#tool #searchutility

@ProGraphs