سایتی پر از تصاویر SVG زیبا که می‌توانید کاملاً رایگان آن‌ها را دانلود کنید.

https://undraw.co/illustrations

#link #svg #illustration

@ProGraphs

جواب: indigo
این سوال خیلی ساده با نکاتی که درباره Specificity مطرح کردیم قابل حل هست. تنها نکته ای که باید دقت کنید این است که اگر یک attribute selector به ویژگی Id اشاره کند ماهیت آن به Id Selector تبدیل نمی‌شود و هم‌چنان امتیاز یک attribute selector را دارد. (که البته منطقی هم هست).
امتیاز انتخابگر اول:‌ 0,0,2,0
امتیاز انتخابگر دوم: 0,0,3,0
بنابراین ruleset دوم اعمال می‌شود و رنگ اولین آیتم لیست ‌indigo خواهد بود

🔺نقشه‌ راه برای توسعه‌دهنده حرفه‌ای React شدن در سال 2018 👇🏻

https://github.com/adam-golab/react-developer-roadmap

#link #react #roadmap

@ProGraphs

​​نکات تکمیلی CSS Specificity

1) انتخابگر universal تأثيری بر Specificity ندارد. (قسمت ۱ تصویر)

2) شبه کلاس not جزو pseudo class ها محسوب می‌شود با این حال تأثيری بر Specificity نمی‌گذارد. اما انتخابگر‌هایی که داخل not می‌آیند Specificity را تغییر می‌دهند. (قسمت ۲ تصویر)

3)‌ اگر در یک دستور CSS از important استفاده کنیم، بدون توجه به قوانین Specificity آن دستور اعمال می‌شود. هرچند این کار در اکثر مواقع bad practice و دور زدن Specificity محسوب می‌شود. (قسمت ۳ تصویر)

#quicktip #css

@ProGraphs

​​یه دوره آموزشی کوتاه Figma مناسب برای مبتدیان

https://www.figmaforbeginners.com/

#link #tool #design #ui #figma

@ProGraphs

اگر هر‌دوی این ruleset ها به یک عنصر اعمال شوند. متن این عنصر چه رنگی خواهد بود ؟

#interviewquestion #css

@ProGraphs

یه بازی دیگه، این بار برای یاد گرفتن سلکتور‌ها توی CSS 😋

https://flukeout.github.io/

#link #css #selector

@ProGraphs

جواب:‌ tomato

در قدم اول Specificity هر دو را محاسبه می‌کنیم:
امتیاز انتخابگر اول:
0, 1, 3, 2
امتیاز انتخابگر دوم:
0, 1, 3, 2

امتیاز هر دو انتخابگر یکسان هست. در این شرایط استایلی که آخرتر آمده است اعمال می‌شود. در نتیجه رنگ متن tomato خواهد بود.

سوالات مرتبط با CSS Specificity در مصاحبه‌ها زیاد مطرح می‌شوند و معمولا برای چالش بیشتر از انتخابگر‌های طولانی‌تر استفاده می‌شود. ولی دقت کنید که استفاده از این انتخابگر‌های طویل در پروژه‌های واقعی مناسب نیست‌!

اگر در محاسبه Specificity مشکل دارید نکاتی که پیش‌تر در مورد Specificity مطرح کردیم را مطالعه کنید.

​​🔸آرشیوی از فونت‌های قابل دانلود رایگان

https://www.dafont.com/

#link #font

@ProGraphs

​​حتما از قابلیت‌های devtools برای تست کردن پروژه در ابعاد موبایل‌ها اطلاع دارید.
اما با chrome devtools می‌توانیم اینترنت و پردازنده ضعیف‌تر دستگاه‌های همراه را هم شبیه‌سازی کنیم.
این تنظیمات در تب Performance قرار دارند. برای مثال در تصویر اینترنت 3G و CPU با سرعت پردازش یک چهارم شبیه‌سازی شده است.

#quicktip #devtools

@ProGraphs

🔺نقشه‌ راه برای توسعه‌دهنده حرفه‌ای Vue شدن در سال 2018 👇🏻

https://github.com/marekbrainhub/vue-developer-roadmap

#link #vue #roadmap

@ProGraphs

تفاوت undefined و undeclared در جاوااسکریپت چیست ؟

#interviewquestion #js

@ProGraphs

بهترین منابع رایگان برای دریافت فیلم‌های Stock:

https://www.coverr.co/
https://www.videvo.net/
https://mazwai.com/#/grid
https://www.motionplaces.com/
https://www.stockio.com/free-videos/
https://videos.pexels.com/
https://pixabay.com/videos/
https://www.videezy.com/browse
https://www.videomonkey.co/
https://www.veed.io/vyoo/

🔺اگه شما هم منابع خوب دیگه‌ای می‌شناسین، می‌تونین از طریق @HiProGraphsBot بهمون معرفی کنین 😎

#link #stockvideo #footage

@ProGraphs

جواب:
زمانی که یک متغیر تعریف شده باشد ولی مقداری نداشته باشد، مقدار آن undefined خواهد بود. در واقع می‌توان گفت که undefined عدم وجود value را به ما نشان می‌دهد.
اما undeclared به این معنی است که اصلا متغیر تعریف نشده است.

ممکن است این سوال را هم مطرح کنند که اصلا undefined از نظر قواعد در جاوااسکریپت چه چیزی محسوب می‌شود ؟ (دیگه خیلی باید گیر باشن که این سوال رو بپرسن 😃)
در واقع undefined در جاوااسکریپت یک نوع داده است که یک مقدار دارد و آن هم خود کلمه کلیدی undefined هست !

این جمله آخر رو بگین دیگه درجا تو مصاحبه قبولتون می‌کنن 😄

ابزار ساده‌ی ساخت سریع Mockup برای طرح اپلیکیشن یا وب‌سایت شما

https://app.shotsnapp.com/

#link #mockup

@ProGraphs

​​اگر از گوگل کروم در گوشی‌های اندرویدی استفاده کرده باشید، احتمالا متوجه شده‌اید که بعضی وبسایت‌ها رنگ تم خود گوگل کروم را تغییر می‌دهند.
این کار خیلی ساده و با متا تگ زیر انجام می‌شود:

<meta name="theme-color" content="#fb3449">

#quicktip #html #chrome

@ProGraphs

یه بازی دیگه برای یاد گرفتن فلکس‌باکس 👌🏻

https://www.flexboxdefense.com/

#link #css #flexbox

@ProGraphs

تفاوت pseudo-class و pseudo-element در CSS چیست ؟

#interviewquestion #css

@ProGraphs

Google, but for colors. 😎

https://picular.co/

#link #color

@ProGraphs

جواب:
شبه کلاس یا pseudo-class ها با علامت دو نقطه (:) مشخص می‌شوند و عناصر را تحت شرط خاصی انتخاب می‌کنند. مثلا عنصری که موس روی آن قرار دارد. یا عنصری که اولین فرزند والدش هست.
چند نمونه از pseudo-class ها:
:placeholder-shown, :first-child, :hover, :invalid

شبه عناصر یا pseudo-element ها با دو تا دو نقطه (::) مشخص می‌شوند و عناصر مجازی ایجاد می‌کنند که در DOM وجود ندارند. برای مثال فرض کنید می‌خواهیم اولین خط یک متن را انتخاب کنیم، شبه عنصری به نام first-line وجود دارد که به ما اجازه می‌دهد به اولین خط یک متن مانند یک عنصر HTML استایل بدهیم. در حالی که در حقیقت اولین خط متن درون یک عنصر نیست و این عنصر به صورت مجازی ایجاد شده است.
چند نمونه از pseudo-element ها:
::placeholder, ::first-letter, ::before, ::after