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

#interviewquestion #js

@ProGraphs

🔺 حذف پس‌زمینه تصویر 👌🏻
- در پنج ثانیه
- کاملا خودکار
- بدون یک کلیک

https://www.remove.bg/

#link #background

@ProGraphs

🔺To Do List & Task Manager ⏳

https://todoist.com/

#link #todolist

@ProGraphs

جواب: 19

اگر نوع مقداری که به عنوان key در یک آبجکت تعیین می‌کنیم، غیر از string باشد، مقدار تعیین شده به string تبدیل می‌شود.

در این کد، ابتدا یک پراپرتی با key از نوع آبجکت ایجاد می‌کنیم. اما می‌دانیم که key نمی‌تواند از نوع آبجکت باشد پس به صورت خودکار به string تبدیل می‌شود. یعنی تا اینجا یک پراپرتی به نام "[object object]" و مقدار 20 داریم.

حالا هر پراپرتی جدیدی که اضافه کنیم، اگر key‌ آن از نوع آبجکت باشد، نام آن به "[object object]" تبدیل می‌شود و به جای اینکه پراپرتی جدید ایجاد شود، مقدار پراپرتی قبلی تغییر می‌کند.
بنابراین در خط هفتم، در واقع مقدار پراپرتی قبلی را تغییر می‌دهیم و پراپرتی جدیدی ایجاد نمی‌کنیم.

در نهایت فقط یک پراپرتی با نام "[object object]" و مقدار 19 در آبجکت وجود دارد!

🔺فشرده‌سازی تصاویر با TinyPNG

https://tinypng.com/

#link #image #compressor

@ProGraphs

یکی از قابلیت‌های خیلی کاربردی chrome devtools امکان ثبت screenshot تمام صفحه از یک وب‌سایت است.

برای این کار command menu را باز می‌کنیم (Ctrl+Shift+P در ویندوز و Cmd+Shift+P در مک) و دستور capture full size screenshot را تایپ می‌کنیم.

#quicktip #devtools

@ProGraphs

🔺جامعه‌ای که زنان در خط مقدم آن قرار دارند. 👩🏻‍💻👩🏼‍🎓🧕🏻

با دیگر زنان سازنده در دنیا چت و به یکدیگر کمک کنید. 🤝

https://womenmake.com/

#link #women #community

@ProGraphs

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

#interviewquestion #thiskeyword

@ProGraphs

برای مرور نحوه‌ی کارکرد this میتونید این پست‌ها رو مطالعه کنید:

https://t.iss.one/ProGraphs/176

https://t.iss.one/ProGraphs/193

https://t.iss.one/ProGraphs/213

https://t.iss.one/ProGraphs/232

https://t.iss.one/ProGraphs/245

جواب: Form

اول خیلی کلی کد را بررسی می‌کنیم:
سه آبحکت داریم که هر کدام یک پراپرتی به نام title و یک تابع به نام printTitle دارند که this.title را چاپ می‌کند. همچنین دو آبجکت panel و form یک پراپرتی به نام child دارند که به یک آبجکت دیگر اشاره می‌کند. و در آخر یک تابع global به نام printChildTitle داریم که تابع this.child.printTitle را صدا می‌کند.

گفتیم که برای تعیین مقدار this فقط به قسمتی از کد که تابع در آن صدا شده است (call-site) توجه می‌کنیم و اصلا کاری به اینکه توابع کجا و چگونه تعریف شده‌اند نداریم:
اولین call-site در خط آخر قرار دارد که تابع printChildTitle صدا شده است. با توجه به اینکه تابع را با call صدا کرده‌ایم، مقدار this درون تابع printChildTitle آبجکت panel خواهد بود.

حالا آخرین call-site که داخل خود تابع printChildTitle قرار دارد: با توجه به این که مقدار this در تابع printChildTitle آبجکت panel است، تابع panel.child.printTitle صدا می‌شود (قانون دوم). بنابراین مقدار this درون تابع printTitle آبجکت panel.child یا همان آبجکت form خواهد بود!

(میدونم یه ذره گیج کننده و سخت بود و همچین کدی توی یه پروژه‌ی واقعی واقعا بد و غیر قابل فهم محسوب میشه! فقط خواستیم بعد از این یک ماه که مفهوم this رو بررسی کردیم، مطالبی که یاد گرفتیم رو تو یه کد نسبتا گیج کننده محک بزنیم 😉)

🔺مفاهیم پایه‌ای طراحی آیکون رو در یک ساعت یاد بگیرید. 👌🏻

https://introtoicons.com/

#link #icon #course

@ProGraphs

🔺ورژن دوم Design blocks سایت Froala هم اومد. 😍✨

https://www.froala.com/design-blocks-v2

#link #designblocks #webpagebuilder

@ProGraphs

🔺 با سایت زیر از هر وب‌سایتی Screenshot بگیرید. ✨

https://screen.guru/

#link #mockup #screenshot

@ProGraphs

​​متد‌های جدید برای دستکاری DOM با جاوااسکریپت مانند append, prepend, after, before, remove, replaceWith که از jQuery الهام گرفته شده‌اند!

https://caniuse.com/#feat=dom-manip-convenience

#quicktip #dom #js

@ProGraphs

🔺تنها در چند ثانیه اشکال SVG بسازید.✌🏻

https://www.blobmaker.app/

#link #svg

@ProGraphs

مفهوم CSS box model و بخش‌های تشکیل دهنده آن را توضیح دهید

#interviewquestion #css

@ProGraphs

🔺شیت‌های Grid قابل چاپ برای طراحی Wireframe 📄

https://sneakpeekit.com/

#link #ui #ux #sketchsheet #wireframe

@ProGraphs

جواب:

در صفحات وب، هر عنصر HTML به صورت یک مستطیل ترسیم می‌شود که از چند لایه تشکیل شده‌ است. این لایه‌ها ابعاد، حاشیه، فاصله و ... هر عنصر را مشخص می‌کنند:

content edge:
ناحیه‌ای که محتوای عنصر مانند متن، عکس و ... را شامل می‌شود و در حالت پیش‌فرض با پراپرتی‌های width و height تعیین می‌شود.

padding edge:
فاصله‌ی داخلی عنصر که از محتوا تا border را شامل می‌شود و با پراپرتی padding تعیین می‌شود.

border edge:
حاشیه‌ی عنصر که با پراپرتی border تعیین می‌شود.

margin edge:
فاصله‌ی خارجی عنصر که فاصله‌ی عنصر با عناصر مجاورش را مشخص می‌کند و با پراپرتی margin تعیین می‌شود.

🔺یه سایت خوب برای ساخت آسان Mockup ✨

https://mockup.photos/

#link #mockup

@ProGraphs

​​جالب است بدانید که در CSS زمانی که padding یا margin را به صورت درصدی تعیین می‌کنیم، این مقدار در هر دو راستای عمودی و افقی به صورت درصدی از عرض نگهدارنده محاسبه می‌شود!

با استفاده از این ویژگی می‌توانیم عناصری با aspect ratio ثابت بسازیم.

#quicktip #css

@ProGraphs