100% Open Source Version of Microsoft VS Code

https://vscodium.com

#editor #vscode #opensource

@ProGraphs

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

#interviewquestion #js

@ProGraphs

لیستی از وب اپلیکیشن‌های PWA

https://pwa.rocks/

#link #pwa #sample

@ProGraphs

جواب: "2,1"

بلاک finally بعد از بلاک try-catch استفاده می‌شود و دو ویژگی مهم دارد:
1- همیشه و تحت هر شرایطی اجرا می‌شود!
2- دقیقا بعد از try-catch و قبل از هر کد دیگری اجرا می‌شود.

این دو ویژگی، حتی زمانی که داخل try-catch عبارت‌هایی مثل return, continue, ... داریم هم صادق هستند.
همین موضوع باعث می‌شود که بلاک finally برای انجام عملیات مرتبط با clean-up مناسب باشد.

حالا دوباره به کد سوال دقت کنید:
در خط 12 تابع را صدا می‌کنیم و مقدار 1 از تابع return می‌شود.
اما گفتیم که بلاک finally، دقیقا بعد از try-catch و قبل از هر کد دیگری اجرا می‌شود. بنابراین دقیقا قبل از چاپ شدن مقدار خروجی تابع، بلاک finally اجرا می‌شود و عدد 2 در کنسول چاپ می‌شود! سپس (خط 12) مقدار خروجی تابع در کنسول چاپ می‌شود.
در نهایت ابتدا عدد 2 و سپس عدد 1 در کنسول چاپ شد.

این رفتار بلاک finally مفید است و باعث می‌شود که همیشه کدهای clean-up اجرا شوند.
اما در بعضی شرایط می‌تواند گیج کننده باشد. مثلا اگر داخل خود بلاک finally هم عبارت return داشته باشیم، مقدار خروجی تابع override می‌شود!

function a() {
    try {
        return 1;
    }
    finally {
        return 2;
    }
}
a(); // 2;

🔺یه منبع فارسی خوب برای یادگیری React

https://github.com/zohre1023/Persian-The-Road-to-learn-React


#link #react

@ProGraphs

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

در مطالب قبلی تبدیل نوع داده‌های مختلف به Number و String را بررسی کردیم.

حالا می‌خواهیم ساده‌ترین تبدیل، یعنی تبدیل به Boolean را بررسی کنیم:
در spec اکمااسکریپت، لیست کوتاهی از مقادیر، تحت عنوان falsy values تعریف شده است. اگر هر کدام از مقادیری که در این لیست هستند را به Boolean تبدیل کنیم، نتیجه مقدار false خواهد بود.
این لیست شامل مقادیر زیر می‌شود:
- false
- NaN
- 0
- ""
- undefined
- null
طبیعتا هر مقداری که داخل این لیست نباشد، به مقدار true تبدیل می‌شود.
در نتیجه آبجکت‌ها و آرایه‌های خالی هم به true تبدیل می‌شوند:
Boolean({}) // true
!![] // true

#quicktip #js #coercion

@ProGraphs

دقت کنید که برای تبدیل آبجکت‌ها به Boolean، نیازی نیست که آبجکت به primitive تبدیل شود (برخلاف اعداد و stringها). و همه‌ی آبجکت‌ها truthy هستند. اگر باور نمی‌کنید این کد رو اجرا کنید 😅:

let obj = Object.create(null);
Boolean(obj); //true;

در این کد آبجکتی ساختیم که هم خالی است و هم به آبجکت دیگری لینک نشده است. در نتیجه به متدهای valueOf و toString دسترسی ندارد. اما همچنان به مقدار true تبدیل می‌شود (به مطلبی که راجع به تبدیل آبجکت به primitive منتشر کردیم مراجعه کنید).

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

#interviewquestion #js

@ProGraphs

⚔️ Game of Thrones Spoiler Blocker 😅

https://chrome.google.com/webstore/detail/gameofspoils-game-of-thro/ipjhpmdippbajafafidlinjjmfkdamci?hl=en

#tool #blocker #chrome #extension

@ProGraphs

🔺 به راحتی بخش‌هایی از یک تصویر را محو، شطرنجی یا سیاه کنید.

https://marky.space/redacted/

#link #image

@ProGraphs

جواب: 10

ابتدا کد را بررسی می‌کنیم:
دقت کنید که در این کد دو آبجکت داریم. یکی آبجکت proGraphs که یک پراپرتی read-only به نام prop دارد.
و دیگری آبجکت obj که به proGraphs لینک شده است.

در نتیجه پراپرتی prop داخل آبجکت proGraphs تعریف شده است. اما آبجکت obj هم به این پراپرتی دسترسی دارد. چون به proGraphs لینک شده است (به مطالبی که راجع به prototype chain منتشر کردیم مراجعه کنید).

حالا در خط 14, می‌خواهیم یک پراپرتی دیگر به نام prop تعریف می‌کنیم اما این بار در آبجکت obj.

انتظار داریم که این پراپرتی به راحتی به آبجکت obj اضافه شود و در خط 15 مقدار 20 را دریافت کنیم.

اما چرا 10 در کنسول چاپ شد؟
مشکل اینجاست که وقتی یک پراپرتی را read-only می‌کنیم، پراپرتی مورد نظر نه تنها در خود آبجکت، بلکه در کل prototype chain غیر قابل تغییر می‌شود.
پس چون پراپرتی prop در آبجکت proGraphs به صورت read-only تعریف شده است، هر آبجکتی که به proGraphs لینک شده باشد هم نمی‌تواند یک پراپرتی به نام prop داشته باشد!!

در نتیجه خط 14 هیچ اثری ندارد و مقدار پراپرتی 20 باقی می‌ماند.

سوال سختیه و ترکیبی از دو مفهوم پایه‌ای prototype و descriptor هست. اما بیش‌تر جواب‌ها درست بود 😁💪

مطالب مربوط به prototype و descriptorها رو میتونید اینجا مطالعه کنید:

-https://t.me/ProGraphs/131
-https://t.me/ProGraphs/277
-https://t.me/ProGraphs/290

ColorSlurp

🔺 بهترین نرم‌افزار Color picker برای Mac در جهان ✨

#tool #color #colorpicker

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺تصاویر شگفت انگیز خود را بسازید. ✨

https://iradesign.io/

#link #illustration

@ProGraphs

جواب: ‌2

در مطالب قبلی نحوه‌ی کارکرد this در جاوااسکریپت را بررسی کردیم و دیدیم که مقدار this فقط بر اساس نحوه‌ی صدا شدن تابع تعیین می‌شود. پس اینکه یک تابع کجا و چطور تعریف شده است، هیچ تاثیری در مقدار this ندارد.
به عنوان مثال به این کد دقت کنید:
let obj = {
func() {
console.log(this);
}
};
let func = obj.func;
func(); // window
همینطور که می‌بینید، با این که تابع داخل آبجکت تعریف شده است، مقدار this به آبجکت obj اشاره نکرد!
پس فقط نحوه‌ی صدا شدن تابع مقدار this را تعیین می‌کند و نه اینکه تابع کجا تعریف شده است.

حالا به کد سوال دقت کنید:
برای تعیین مقدار this فقط به خط 8 توجه می‌کنیم. در نگاه اول به نظر می‌رسد که تابع به صورت method call صدا شده است:
obj.func();
اما به عبارت داخل پرانتز در خط 8 دقت کنید. از این عبارت یک مقدار برمی‌گردد و این مقدار یک تابع است. سپس بلافاصله این تابع را به صورت معمولی صدا می‌کنیم.
در واقع کد داخل سوال با مثالی که در بالا بررسی کردیم کاملا یکسان است!
پس با توجه به اینکه تابع به صورت معمولی صدا شده است، مقدار this به آبجکت global اشاره می‌کند و مقدار window.title (عدد 2) در کنسول چاپ می‌شود.

در خط 8، داخل پرانتز از عملگر comma استفاده شده، که در این مطلب بررسی کردیم:
https://t.me/ProGraphs/398

مطالب مربوط به تعیین مقدار this رو هم اینجا می‌تونید مرور کنید:
https://t.me/ProGraphs/256

تو این مقاله هم می‌تونید خیلی کامل‌تر راجع به کد این سوال مطالعه کنید:
http://2ality.com/2015/12/references.html

بالاخره 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.me/ProGraphs/376