🔺ZType: A typing game 👩🏻‍💻👨🏻‍💻

https://zty.pe/

#typing #game

@ProGraphs

جواب: 250px

وقتی کد این سوال را بررسی می‌کنیم به یک سوال پایه‌ای‌تر و مهم می‌رسیم:

❗️آیا مقادیر درصدی برای پراپرتی‌های width و left و ... همیشه نسبت به عنصر والد محاسبه می‌شوند؟
نه!‌ اگر بخواهیم دقیق‌تر بررسی کنیم، مقدار درصدی برای پراپرتی‌هایی که اندازه و موقعیت عنصر را مشخص می‌کنند، نسبت به عنصری به نام containing block مشخص می‌شود.

❗️حالا فقط باید عنصر containing block را مشخص کنیم:
در اکثر مواقع، عنصر والد containing block است و width و ... نسبت به آن محاسبه می‌شود. اما همیشه اینطور نیست!

به کد سوال دقت کنید:
عرض عنصر child به صورت درصدی تعیین شده است، پس باید containing block را پیدا کنیم تا مقدار درصدی را نسبت به آن محاسبه کنیم.

برای تعیین کردن containing block برای عناصر دارای position absolute، دنبال نزدیک‌ترین والد عنصر میگردیم که position آن هر مقداری غیر از static (مقدار پیشفرض) باشد.
در نتیجه عرض عنصر child نسبت به عنصر grand-parent محاسبه می‌شود و نه عنصر parent!

🔺SurveyMonkey 🐵

محبوب‌ترین ابزار رایگان نظرسنجی آنلاین در جهان

https://www.surveymonkey.com/

#link #tool #survey

@ProGraphs

از جواب‌ها مشخصه که بیشترمون این موضوع رو بلدیم 🙂💪

ولی اگه لازم شد، اینجا میتونید بیشتر راجع به containing blockها بخونید:

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

🔺تصاویر سوررئال رایگان برای Landing pages ✨

https://absurd.design/

#link #illustration #landingpage

@ProGraphs

​وقتی در یک صفحه اشتباها وارد حلقه بی‌نهایت می‌شویم، تب مرورگر کاملا freeze می‌شود و گاهی حتی بسته هم نمی‌شود!

در این شرایط، در chrome devtools، با ترفندی که در تصویر می‌بینید می‌توانیم صفحه را از حالت freeze خارج کنیم.

#quicktip #devtools

@ProGraphs

🔺یه سایت خوب برای تست و مشاهده‌ی Responsive بودن وب‌سایت شما ✌🏻

https://responsiv.eu/

#link #responsive

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺 Origami Studio

- اپلیکیشنی برای ساخت Prototype
- محصول شرکت Facebook
- کاملا رایگان
- برای کسانی که از Mac OS استفاده می‌کنند.

https://origami.design/

#tool #design #prototyping

@ProGraphs

جواب: 4

در مطالب قبلی pass by reference/value را بررسی کردیم و دیدیم که در جاوااسکریپت، آبجکت‌ها با reference به تابع پاس داده می‌شوند و مقادیر primitive، با value.

اما wrapper objectها چطور؟ آیا با استفاده از wrapper objectها می‌توانیم کاری کنیم که مقادیر primitive هم با reference به تابع ارسال شوند؟

به کد سوال دقت کنید:
در خط 5 یک wrapper object می‌سازیم که مقدار عددی 4 داخل آن قرار دارد. و با توجه به اینکه wrapper objectها از نوع آبجکت هستند، پس با reference به تابع پاس داده می‌شوند.
اما مشکل اینجاست که وقتی داخل تابع (خط 2) object wrapper را با یک عدد جمع می‌کنیم، جاوااسکریپت به صورت خودکار wrapper object را به یک عدد معمولی تبدیل می‌کند تا بتواند عملیات را روی آن انجام دهد (اصطلاحا مقدار primitive را unbox/unwrap می‌کند).
به این ترتیب دوباره یک مقدار primitive داریم که تغییرات آن در بیرون تابع تاثیر نمی‌گذارد!

پس حتی با این ترفند هم نمی‌توانیم مقادیر primitive را با reference به تابع ارسال کنیم.

در کل تنها راه برای اینکه تغییرات روی مقادیر primitive، در بیرون تابع هم قابل مشاهده باشد این است که مقدار primitive را به صورت یک پراپرتی معمولی داخل یک آبجکت تعریف کنیم:

function proGraphs(x) {
    x.num = x.num + 1;
}
var obj = { num: 4 };
proGraphs(obj);
obj.num; // 5

این سوال خیلی نکته جدیدی نداشت و بیشتر ترکیبی بود از دو مفهوم خیلی مهم reference/value و wrapper objectها.

که البته این دو مفهوم رو قبلا با هم بررسی کردیم:

1- pass by reference/value:
https://t.iss.one/ProGraphs/315

2- wrapper objects:
https://t.iss.one/ProGraphs/376
https://t.iss.one/ProGraphs/229

🔺رزومه خود را با resume builder سایت Canva بسازید. 👌🏻

https://www.canva.com/templates/resumes/

#link #resume #template

@ProGraphs

​در مطالب قبلی دیدیم که متدهای آرایه‌ها (مثل map و ...) در جاوااسکریپت، داخل آبجکتی به نام Array.prototype تعریف شده‌اند.

بنابراین به راحتی می‌توانیم از بعضی از این توابع، برای کار با نوع داده‌های دیگر مثل stringها استفاده کنیم! (به کد داخل تصویر دقت کنید)

#quicktip #js

@ProGraphs

A Visual Studio Code extension that discourages you while you work 😈

https://github.com/sepehr500/vscode-discourage

#link #vscode #plugin #fun

@ProGraphs

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

#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