🔺به کمک سایت زیر می‌تونین ببینین رنگ پس‌زمینه‌ی انتخابی با رنگ متن و عکس‌های دلخواه شما چقدر Contrast دارند.

https://color.review/

#link #tool #color #contrast

@ProGraphs

🔺eCommerce Website Design Gallery & Tech Inspiration ✨

https://ecomm.design/

#link #Inspiration #ecommerce #design

@ProGraphs

جواب:

معمولا برنامه‌های جاوااسکریپتی ما، از نظر زمانی به قسمت‌های مختلف تقسیم می‌شوند. مثلا زمانی که نتیجه‌ی یک درخواست را از سرور دریافت می‌کنیم. یا زمانی که کاربر بر روی یک دکمه کلیک می‌کند.
یکی از پترن‌ها برای انجام عملیات async در جاوااسکریپت، callbackها هستند:

setTimeout(() => {
    doSomething();
}, 1000);

همچنین برای انجام عملیات به صورت مرحله مرحله، مجبور می‌شویم callbackهای مختلف را داخل هم nest کنیم که به عنوان "callback hell" شناخته می‌شود.

اما آیا تنها مشکل callbackها nest شدن آن‌ها داخل هم و کاهش خوانایی کد است؟
خیر! callbackها مشکلات پایه‌ای و مهم‌تری هم ایجاد می‌کنند.

برای مثال با توجه به اینکه callback را به یک تابع دیگر ارسال می‌کنیم و تابع مورد نظر، callback را صدا می‌کند، عملا کنترل callback از دست ما خارج می‌شود. در نتیجه ممکن است تابع مورد نظر، callback را بیش از یک بار صدا کند، اصلا صدا نکند و یا حتی گاهی به صورت async و گاهی به صورت synchronous صدا کند.
همچنین این مساله مشکلاتی در زمینه separation of concerns ایجاد می‌کند.

یکی از راه حل‌های این مشکلات، promiseها هستند که اکثر این مشکلات را حل می‌کنند.

برای مثال promiseها فقط یک بار می‌توانند resolve شوند. به این ترتیب، مشکل بیش از یک بار صدا شدن callbackها را حل می‌کنند.

همچنین در کار با promiseها، کنترل ادامه‌ی برنامه، به یک تابع دیگر داده نمی‌شود، بنابراین مشکلات مربوط به separation of concerns تا حد زیادی حل می‌شوند.

این سوال رو بیش‌تر به عنوان مقدمه‌ای برای مباحث مربوط به برنامه‌نویسی async در جاوااسکریپت مطرح کردیم.

تو مطالب بعدی به مرور مفاهیم پایه‌ای‌تر async مثل concurrency, event loop, micro/macro tasks و ... رو بررسی می‌کنیم و دوباره به این سوال برخواهیم گشت 😉

​در گوگل کروم می‌توانیم برای زمانی که attribute یک عنصر تغییر می‌کند، breakpoint تعریف کنیم.

به این ترتیب مثلا می‌توانیم بررسی کنیم که یک افکت، دقیقاً در چه قسمتی از کد و چطور پیاده‌سازی شده است!

#quicktip #devtools

@ProGraphs

تاریخچه‌ی کوتاهی از GraphQL از زبان یکی از سازنده‌هاش!

https://youtu.be/F-OizdRJh1U

#link #talk #graphql

@ProGraphs

🔺Figma Freebies - Free UI Kits & Figma Resources 🎉

https://www.figmafreebies.com/

#link #figma #freebie #resource

@ProGraphs

سال نو همگی مبارک 🌹

تو 2/3 روز آینده، خبرای خوبی داریم 😉

بالاخره بعد از یه وقفه‌ی نسبتا طولانی تغییراتی که قولش رو داده بودیم شروع کردیم 😉:

نسخه‌ی اولیه سایت از امروز آماده‌اس!

البته سایت رو با الهام از Brendan Eich تو 10 روز آماده کردیم😅
و حتما (فعلا) بدون ایراد و کامل نیست!

www.prographs.ir

فعلا دو قسمت آرشیو منابع مفید و سوالات مصاحبه تو سایت هست که به مرور کامل‌تر می‌شوند.

تو قسمت آرشیو منابع، شما می‌تونید لینک ابزارها و سایت‌های مفیدی که می‌شناسید رو برای ما بفرستید تا به مرور یه آرشیو ارزشمند از منابع تهیه بشه ✌️

میتونید وب سایت/اپلیکیشن ProGraphs رو روی دستگاهتون نصب کنید تا به بعضی قسمت‌ها به صورت آفلاین دسترسی داشته باشید.

(تو ویدیو نصب شدن سایت/اپلیکیشن روی mac, android, windows, ios رو می‌بینید)

به لطف Background Sync می‌تونید زمانی که به اینترنت متصل نیستید هم لینک‌هاتون رو تو سایت ثبت کنید تا هر وقت دوباره متصل شدید برای ما ارسال شوند.

بعد از نصب، می‌تونید یک لینک رو مستقیما از appهای نیتیو (مثل یوتیوب) با ما share کنید!

(فعلا فقط اندروید و گوگل کروم 71+)

و از امروز در کنار مطالب کانال، به صورت منظم توی صفحه‌ی اینستاگرام هم آموزش‌های ویدیویی کوتاه خواهیم داشت.

instagram.com/prographs

🔺Color scale generator 🌈

https://hihayk.github.io/scale/

#link #color #generator

@ProGraphs

تفاوت == و === در جاوااسکریپت چیست؟

(اونقدر که به نظر میرسه جواب واضح نیست 😅)

#interviewquestion #js

@ProGraphs

جواب:

احتمالا جواب اکثر دولوپرها به این سوال، این جمله است:
عملگر == فقط مقدار را چک می‌کند. ولی عملگر === علاوه بر مقدار، نوع داده‌ را هم چک می‌کند.

اما این تعریف در جاوااسکریپت دقیق نیست!
❗️در واقع عملگر == هم نوع‌داده را چک می‌کند و اگر نوع داده‌ی دو مقدار یکسان نباشد، یک یا هردوی مقادیر را تغییر می‌دهد (coercion) تا بتواند مقدار آن‌ها را مقایسه کند.
در نتیجه برعکس چیزی که از تعریف اول به نظر می‌رسد، عملگر == کار بیشتری از عملگر === انجام می‌دهد!

اما دانستن تعریف دقیق‌تر چه کمکی به ما می‌کند؟
این عبارت را در نظر بگیرید:

let obj = {
  toString() {
    return "hi";
  }
};
"hi" == obj // true!

1- وقتی با تعریف اول این عبارت را بررسی می‌کنیم، کاملا غیرمنطقی و گیج کننده به نظر می‌رسد!

2- اما وقتی با تعریف دقیق‌تر این عبارت را بررسی می‌کنیم، می‌دانیم که دو مقدار از نوع‌داده‌ی یکسان نیستند، پس عملگر == سعی می‌کند obj را تبدیل به string کند تا بتواند دو مقدار را مقایسه کند (برای تبدیل obj به string، متد toString صدا می‌شود).

(اینکه چطور obj به string تبدیل شد، و در کل coerce شدن نوع داده‌های مختلف به یکدیگر را مطالب بعدی بررسی می‌کنیم)