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

#interviewquestion #js

@ProGraphs

آموزش‌های مفید و ساده برای تکنولوژی‌ها و ابزارهای حوزه‌ی وب 👌

https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg

#link #tutorial #youtube

@ProGraphs

🔺Dukto

- ابزاری برای انتقال فایل‌ها بین کامپیوتر و گوشی
- انتقال فایل‌ها بین لینوکس، مک و ویندوز
- جایگزینی برای SHAREit

https://sourceforge.net/projects/dukto/

#tool #filetransfer

@ProGraphs

جواب: 2

یکی از عملگرهای کم‌تر شناخته شده در جاوااسکریپت، عملگر "," (یا comma operator)‌ است.
❗️وقتی این عملگر را بر روی چند expression اعمال می‌کنیم، همه‌ی expressionها را اجرا می‌کند و مقدار آخرین expression را return می‌کند:

(x = 1, y = 2, x += y, 10) // 10
در این کد همه‌ی expressionها از چپ به راست اجرا می‌شوند (به مطلبی که راجع به Associativity منتشر کردیم مراجعه کنید) و در نهایت مقدار 10، return می‌شود.

حالا به کد سوال دقت کنید:
در خط 4، ابتدا عبارت ++x اجرا می‌شود و مقدار متغیر x به 2 تغییر می‌کند. سپس مقدار متغیر x از تابع return می‌شود.
به این ترتیب عدد 2 در کنسول چاپ می‌شود!

❗️اما این عملگر در عمل (!)‌ چه کاربردی دارد؟
بیش‌ترین کاربرد این عملگر زمانی است که می‌خواهیم چندین expression را در جایگاه یک expression استفاده کنیم.
- این کد را در نظر بگیرید:
for (let i = 0; i < 10; i++, j++) {}
در قسمت سوم حلقه فقط مجاز به استفاده از یک expression هستیم. اما با استفاده از عملگر ","، مقدار دو متغیر را تغییر دادیم.

یه نمونه کاربرد دیگه از comma operator که ابزارهای minifier می‌تونن استفاده کنند.

🔺 موزه طراحی وب ✨

- عکس بالا از سایت توییتر در سال 2007 میلادی است.

https://www.webdesignmuseum.org/

#link #web #design #webdesign

@ProGraphs

​با استفاده از تب Code Coverage در گوگل کروم می‌توانیم بررسی کنیم که چند درصد و چه قسمت‌هایی از کدها در یک صفحه اجرا می‌شوند و چه قسمت‌هایی اجرا نمی‌شوند.

همچنین از نسخه‌ی 73 که به زودی منتشر خواهد شد، امکان ذخیره‌ی نتایج Code Coverage در یک فایل json اضافه می‌شود. (به این ترتیب می‌توانیم اطلاعات ذخیره شده را به عنوان ورودی برای ابزارهایی که کد را modify می‌کنند استفاده کنیم)

#quicktip #devtools

@ProGraphs

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

#interviewquestion #js

@ProGraphs

​یه مجموعه پادکست جالب با موضوع جاوااسکریپت 👌

https://devchat.tv/js-jabber/

#link #podcast #js

@ProGraphs

🔺Free Open Source Illustrations 🎉

https://lukaszadam.com/illustrations

#illustration

@ProGraphs

جواب: Error

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

❗️اما چرا فقط "بعضی" از متدهای آرایه‌ها؟
با بررسی دقیق‌تر متدهای آرایه‌ها متوجه می‌شویم که این متدها به دو دسته تقسیم می‌شوند:
1- متدهایی که خود آرایه را تغییر می‌دهند:
[].push(1); // modifies the existing array

2 - متدهایی که یک آرایه جدید برمی‌گردانند:
[].reverse(); // returns a new array

❗️از طرفی، stringها (و همه‌ی نوع داده‌های primitive) در جاوااسکریپت immutable هستند. یعنی بعد از ساخته شدن یک string، مقدار آن غیر قابل تغییر است (برعکس آبجکت‌ها).
بنابراین فقط متدهای دسته دوم برای کار با stringها قابل استفاده هستند.

حالا دوباره به کد سوال دقت کنید:
در خط 3، یک string را به متد reverse پاس می‌دهیم. سپس متد reverse سعی می‌کند مقدار خود string را تغییر دهد! در حالی که stringها immutable و غیرقابل تغییر هستند.
بنابراین قبل از اینکه به خط 5 برسیم،‌ Error دریافت می‌کنیم!

دو تا مقابله خوب برای مطالعه بیشتر راجع به Immutability:

https://www.sitepoint.com/immutability-javascript/
https://itnext.io/immutable-vs-immutable-js-d524bf515bcd

🔺 Avataaars Generator 🥳

https://getavataaars.com/

#link #avatar #generator

@ProGraphs

🔺یه ابزار مدیریت پروژه خفن 👌🏻

https://kutt.it/vQ58Y6

#link #projectmanagement #software

@ProGraphs

​در یکی از مطالب قدیمی‌تر تفاوت پراپرتی‌های transform و left/right را برای ایجاد انیمیشن در CSS بررسی کردیم. و دیدیم که مرورگر برای render کردن تغییرات در صفحه، چند مرحله (style - layout - paint - composite) را طی می‌کند.

اما در بعضی شرایط، تغییر ظاهر یک عنصر، بر روی سایر عناصر هم تاثیر می‌گذارد و مرورگر را مجبور به انجام محاسبات اضافه برای سایر عناصر می‌کند.

با استفاده از پراپرتی جدید contain در CSS می‌توانیم عملیات style و layout و paint را فقط به یک بخش از صفحه محدود کنیم.

https://developers.google.com/web/updates/2016/06/css-containment

#quicktip #css #performance

@ProGraphs

منظور از "callback hell" در جاوااسکریپت چیست؟ چه زمانی این اتفاق می‌افتد؟ راه حل این مشکل چیست؟

#interviewquestion #js

@ProGraphs

🔺به کمک سایت زیر می‌تونین ببینین رنگ پس‌زمینه‌ی انتخابی با رنگ متن و عکس‌های دلخواه شما چقدر 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 و ... رو بررسی می‌کنیم و دوباره به این سوال برخواهیم گشت 😉