آیا در مورد Resetting و Normalizing در CSS شنیده‌اید‌‌؟ تفاوت آنها چیست‌؟

#interviewquestion #css

@ProGraphs

​​🔸 نتایج نظرسنجی از Developer ها در سال 2018 توسط سایت stackoverflow

https://insights.stackoverflow.com/survey/2018

#link #survey #overview

@ProGraphs

جواب:‌

مرورگر‌ها برای ایجاد ظاهر اولیه عناصر، استایل‌های پیشفرضی را اعمال می‌کنند. اما این استایل‌های پیشفرض در همه‌ی مرورگر‌ها یکسان نیستند. در نتیجه بعضی عناصر html در همه‌ی مرورگر‌ها ظاهر یکسانی نخواهند داشت.

برای حل این مشکل CSS Reset تقریبا تمام استایل‌های پیشفرض را بی‌اثر می‌کند. به این ترتیب عناصر ظاهر خاصی نخواهند داشت و باید از پایه ظاهر ‌آنها را بسازیم.

اما CSS Normalize برای تمام عناصر یک ظاهر اولیه می‌سازد با این هدف که در تمام مرورگر‌ها یکسان نمایش داده شوند. یعنی یا استایل‌های پیشفرض را حفظ می‌کند یا آنها را به صورتی تغییر می‌دهد که در تمام مرورگر‌ها یکسان باشند.

اینجا می‌تونید ببینید هر فونتی رو چه سایت‌هایی استفاده می‌کنند. 👇🏻

https://www.fontreach.com/

#link #font

@ProGraphs

​​فرض کنید می‌خواهیم همه‌ی لینک‌هایی که به یک فایل pdf اشاره می‌کنند را با یک رنگ خاص مشخص کنیم. این کار با کمک attribute selector ها به سادگی قابل انجام است ولی اگر پسوند فایل اشتباها با حروف بزرگ نوشته شده باشد (مثلا PdF) رنگ لینک تغییر نخواهد کرد.

برای حل این مشکل باید سلکتور را incase sensitive کنیم تا به کوچک و بزرگی حروف حساس نباشد. روش انجام این کار را در تصویر می‌بینید.

#quicktip #css

@ProGraphs

ویژگی‌هایی که قراره به زودی در Vue ببینیم 👌

https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf

#link #js #vue

@ProGraphs

آیا این دو تابع یک مقدار را return می‌کنند‌؟

#interviewquestion #js

@ProGraphs

🔺 مجموعه منابعی برای Adobe XD

https://xdresources.co/

#link #adobexd #ui #ux

@ProGraphs

جواب: خیر!

همانطور که می‌دانید استفاده از semicolon در جاوااسکریپت اختیاری است. در نتیجه خود زبان سعی می‌کند انتهای هر statement را حدس بزند.

بنابراین در تابع دوم که عبارت return و آبجکت در دو خط جدا قرار دارند اشتباها فکر می‌کند که دو عبارت جدا هستند، یک return خالی و یک آبجکت. به این ترتیب تابع دوم undefined را return می‌کند. تابع اول هم مشخصا به درستی آبجکت مورد نظر را return می‌کند.

نتیجه اخلاقی: مقداری که می‌خواهید از تابع return کنید را رو‌بروی return بنویسید و نه در خط بعد.

آشنایی با Houdini، یک پیشرفت انقلابی در CSS !

https://medium.com/norigintech/playing-with-houdini-css-bdca987b2f8

#link #css

@ProGraphs

🔺نقشه‌ راه برای UI/UX Designer شدن 👇🏻

https://github.com/togiberlin/ui-ux-designer-roadmap

#link #ui #ux #designer #roadmap

@ProGraphs

​​با استفاده از متد Object.preventExtensions می‌توانید از اضافه شدن پراپرتی جدید به یک آبجکت جلوگیری کنید. دقت کنید که پراپرتی‌های موجود تغییری نخواهند کرد و فقط امکان افزودن پراپرتی از بین می‌رود.

#quicktip #js

@ProGraphs

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

https://github.com/sulco/angular-developer-roadmap

#link #angular #roadmap

@ProGraphs

​​این قطعه کد برای چک کردن وجود یا عدم وجود یک پراپرتی در یک آبجکت نوشته شده است.
آیا مشکلی در این کد می‌بینید؟ روش بهتری برای انجام این کار می‌شناسید‌؟

(سوال خیلی خوبیه، بیشتر بهش دقت کنید‌!)

#interviewquestion #js

@ProGraphs

این سایت کد جاوااسکریپتتون رو اجرا می‌کنه و هم‌زمان پشت پرده‌ی انجین جاوااسکریپت رو بهتون نشون میده. مثلا می‌تونید Scope و Execution Context و Closure و ... رو ببینید.
برای یادگیری عالیه 👌

https://tylermcginnis.com/javascript-visualizer/

#link #js

@ProGraphs

جواب:

برای جواب به این سوال، باید بدانید که اگر بخواهیم به یک پراپرتی از آبجکت دسترسی پیدا کنیم و آن پراپرتی در آبجکت وجود نداشته باشد، مقدار undefined را دریافت می‌کنیم.

دوباره به کد دقت کنید. در شرط if سعی می‌کنیم به پراپرتی مورد نظر دسترسی پیدا کنیم. اگر پراپرتی وجود نداشته باشد مقدار undefined را دریافت می‌کنیم که یک falsy value هست و نتیجه شرط به درستی false خواهد بود.
اما مشکل زمانی پیش می‌آید که پراپرتی مورد نظر وجود داشته باشد ولی مقدار آن undefined یا یک مقدار falsy دیگر مثل 0, null, NaN, false, ... باشد. در این شرایط با اینکه پراپرتی وجود دارد اما باز نتیجه شرط false خواهد شد.

روش بهتر استفاده از عمگر in یا متد hasOwnProperty هست. (به دلیل اهمیت موضوع، تفاوت این دو روش در مطالب بعدی بررسی خواهد شد)

if ('proGraphs' in obj)
if (obj.hasOwnProperty('proGraphs'))

​​یکی از دوستان یک پکیج مُدال برای Vue ساختند.
دمو و داکیومنت انگلیسی این پکیج رو میتونید اینجا ببینید:

https://eagle-design.ir/vue-eagle-modal/demo.html

اگه مشکل یا نظری هم داشتید میتونید از این طریق با نویسنده این پکیج در ارتباط باشید:

@eagledesign
@Greatui

#modal #vue

@ProGraphs

یک مجموعه کامل از cheatsheet های موضوعات مختلف
حتما ببینید سایت خیلی مفیدی هست

https://devhints.io/

#link #cheatsheet

@ProGraphs

​​گاهی پیش می‌آید که اطلاعات یک عنصر را می‌دانیم و می‌توانیم با جاوااسکریپت آن را select کنیم، ولی جای آن در صفحه را نمی‌دانیم و برای inspect گرفتن باید دنبال آن بگردیم. در این شرایط می‌توانیم از تابع inspect در قسمت console گوگل کروم استفاده کنیم.

این تابع یک DOM Node که توسط جاوااسکریپت انتخاب شده است دریافت می‌کند و بلافاصله عنصر مورد نظر را در حالت inspect element نمایش می‌دهد. (مانند تصویر)

دقت کنید که این تابع api خود کروم هست و نمی‌توانید از داخل اسکریپت آن را فراخوانی کنید‌(فقط از طریق کنسول google chrome).

(به شخصه خیلی از این api استفاده می‌کنم 😃)

#quicktip #devtools

@ProGraphs

تا حالا شده بخواهید یک کتابخانه جاوااسکریپت را تست کنید ولی حوصله ایجاد یک صفحه یا پروژه فقط برای تست آن کتابخانه را نداشته باشید ؟

این وبسایت مخصوص همین مواقع ایجاد شده است. کافی است کتابخانه مورد نظر را در لیست کتابخانه ها انتخاب کنید، کتابخانه انتخاب شده load می‌شود و به window اضافه می‌شود. به این‌صورت خیلی ساده می‌توانید کتابخانه مورد‌نظر را در console مرورگر تست کنید.

https://hyperconsole.itsarnavb.me/

#link #tool

@ProGraphs

تفاوت display: none و visibility: hidden در CSS چیست‌؟

#interviewquestion #css

@ProGraphs