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

(احتمال مطرح شدن این سوال در یک مصاحبه‌ی واقعی کمه و بیشتر جنبه‌ی چالشی و آموزشی داره!)

#interviewquestion #js

@ProGraphs

یه مطلب جالب راجع به کم‌رنگ شدن وابستگی به ابزار‌های توسعه فرانت‌اند، با پیشرفت تکنولوژی‌های پایه‌ای

https://css-tricks.com/front-end-development-is-not-a-problem-to-be-solved/

#link #frontend

@ProGraphs

یه پیش‌بینی جالب از ترند‌های وب در سال 2019

https://youtu.be/VLm3Y7Odb74

#link #trends

@ProGraphs

جواب: 16

در خط اول کد دو آیتم در آرایه داریم، پس تا اینجا length آرایه عدد 2 است. اما مسئله اصلی نحوه‌ی عملکرد خط دوم است.

می‌دانیم که آرایه‌ها در جاوااسکریپت در واقع نوع خاصی از آبجکت‌ها هستند. بنابراین علاوه بر index های عددی، می‌توانند key هایی از نوع string داشته باشند. در حالت معمول این key ها مقدار length آرایه را تغییر نمی‌دهند ولی اگر مقدار این string بتواند به عدد دسیمال convert شود، جاوااسکریپت تصور می‌کند که قصد داریم index عددی اضافه کنیم و نه یک string key!

اگر دوباره به خط دوم کد دقت کنید می‌بینید که داریم یک string key به آرایه اضافه می‌کنیم. ولی مقدار این key در واقع عدد 15 است. پس یک آیتم جدید در موقعیت 15ام آرایه اضافه می‌شود.
حال یک آرایه sparse داریم که آیتم‌های آن پشت سر هم نیستند. در این حالت، مقدار پراپرتی length یکی بیشتر از بزرگترین index آرایه (یعنی 15+1) است.

همینطور که می‌بینید اضافه کردن string key به آرایه یا sparse کردن یک آرایه پیچیدگی‌های زیادی ایجاد می‌کند. بنابراین بهتر است از آرایه‌ها فقط به عنوان لیست‌هایی با index عددی و آیتم‌های پشت سر هم استفاده کنیم.

به زودی تغییرات خوبی خواهیم داشت و قصد داریم مطالب بیشتر و بهتری رو پوشش بدیم.
اما قبلش با جواب دادن به این چند سوال به ما کمک کنید که این تغییرات هر چه بیشتر همسو با نظر شما باشه 🙏

اگر هر نظر دیگه‌ای هم دارید از این طریق با ما در میون بگذارید:

@HiProGraphsBot

کدام دسته از مطالب کانال برای شما مفید‌تر است؟

نظر شما راجع به تعداد مطالب کانال چیست؟

فکر می‌کنید توانسته‌ایم در این مدت کمتر از سه ماه برای شما مفید واقع شویم؟

به نظر شما مطالب باید بیشتر در چه زمینه‌ای باشند؟

🔺 بهبود تمرکز و افزایش بهره‌وری با صدای پس‌زمینه ✨
صدا‌های مختلف را ترکیب کنید و بهترین محیط خودتان را بسازید. 👌🏻

https://www.noisli.com/

#link #focus #productivity #noise

@ProGraphs

​​مکانیزم this در جاوااسکریپت: (قانون دوم)

اگر یک تابع را از طریق یک آبجکت صدا کنیم (یعنی obj.func) مقدار this، خود آبجکت خواهد بود.

همچنین اگر برای دسترسی به تابع، از چند آبجکت استفاده کنیم، آبجکت آخر مقدار this را تعیین می‌کند. (به کد تصویر اول دقت کنید)

نکته آخر و خیلی مهم اینکه این فقط نحوه‌ی صدا شدن تابع است که مقدار this را تعیین می‌کند و نه اینکه این تابع درون آبجکت تعریف شده است.
یعنی اگر یک متد داخل آبجکت را در یک متغیر گلوبال بریزیم و آن را صدا کنیم، مقدار this با توجه به قانون اول تعیین می‌شود. (به تصویر دوم دقت کنید)

#quicktip #js

@ProGraphs

این کد ساده‌ی CSS چه کاری انجام می‌دهد؟
آیا مشکلی در این کد می‌بینید؟

#interviewquestion #css

@ProGraphs

شما هم Octocat خودتون رو بسازین. 👌🏻❤️

https://myoctocat.com/build-your-octocat/

#link #funny #octocat

@ProGraphs

جواب:

ویژگی box-sizing برای تعیین نحو‌ه‌ی اندازه‌دهی به عنصر استفاده می‌شود. در این کد مشخص کرده‌ایم که اندازه‌ای که برای عنصر تعیین می‌کنیم برای محتوا، فاصله‌ی داخلی و حاشیه عنصر در نظر گرفته شود و border و padding باعث تغییر اندازه‌ی عنصر نشوند.
خود این موضوع به تنهایی نکته‌ای مثبت است و باعث قابل پیش‌بینی‌تر شدن طراحی ما می‌شود.

اما مشکل در نحوه‌ی اعمال این ویژگی است. وقتی از عملگر * برای اعمال این ویژگی استفاده می‌کنیم، این ویژگی برای همه‌ی عناصر در نظر گرفته می‌شود و در نتیجه‌ امکان ارث‌بری در CSS را از بین می‌بریم. بنابر‌این اگر بخواهیم box-sizing قسمتی از صفحه را تغییر دهیم مجبوریم مقدار جدید را برای تک تک عناصر مورد نظر تعیین کنیم.
روش بهتر به این‌صورت است:

html {
     box-sizing: border-box;
}
* {
    box-sizing: inherit;
}

به این ترتیب اگر بخواهیم box-sizing قسمتی از صفحه را تغییر دهیم، کافی است مقدار مورد نظر را فقط برای بیرونی‌ترین والد اعمال کنیم تا تمام فرزندان عنصر این مقدار را به ارث ببرند.

مورد دیگری که می‌توان اشاره کرد این است که انتخابگر universal شبه عناصر before و after را انتخاب نمی‌کند. پس برای تغییر box-sizing آن‌ها باید انتخابگر را به این شکل تغییر دهیم:
*, *::after, *::before

🔺 کیفیت برنامه‌نویسی خودت رو بسنج ... ✨

https://wakatime.com

#link #plugin #programmingmetrics

@ProGraphs

​​همانطور که می‌دانید با css می‌توانیم گرادینت‌هایی با شکل linear و radial ایجاد کنیم. اما به تازگی نوع جدیدی از گرادینت‌ها به نام conic gradients به css اضافه شده است.

تفاوت conic-gradient و radial-gradient در این است که radial-gradient (به صورت پیشفرض) از مرکز دایره به سمت بیرون ایجاد می‌شود. ولی conic-gradient دور یک دایره شکل می‌گیرد و شکل یک مخروط را درست می‌کند (مانند تصویر).

سینتکس آن هم تقریبا مشابه radial-gradient است با این تفاوت که قبل از color-stop ها می‌توانیم درجه شروع گرادینت و مرکز آن را مشخص کنیم (مانند تصویر).

برای تست کردن این ویژگی فعلا از نسخه‌های جدید گوگل کروم استفاده کنید.

#quicktip #css

@ProGraphs

🔺Simply beautiful open source icons 🎉

https://feathericons.com/

#link #icon

@ProGraphs

🔺مدل‌های محصول خودتون رو به راحتی با این سایت بسازید. 🎉✨

https://artboard.studio

#link #mockup #productmockup

@ProGraphs

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

#interviewquestion #js

@ProGraphs