این سایت کد جاوااسکریپتتون رو اجرا می‌کنه و هم‌زمان پشت پرده‌ی انجین جاوااسکریپت رو بهتون نشون میده. مثلا می‌تونید 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

​​از این سایت می‌تونین کد رنگ‌های برندهای معروف رو پیدا کنین 👌🏻

https://brandcolors.net/

#link #color

@ProGraphs

جواب:

1) زمانی که از display: none استفاده می‌کنید عنصر مورد نظر کاملا از جریان صفحه خارج می‌شود و در شرایط طبیعی، عناصر مجاور جای آن را می‌گیرند.
در حالی که visibility: hidden فقط عنصر را محو می‌کند ولی همچنان جای عنصر در صفحه باقی می‌ماند.

2) زمانی که عنصری را با visiblity: hidden محو می‌کنید، می‌توانید فرزندان آن عنصر را با استفاده از visiblity: visible ظاهر کنید.
در حالی که این امکان برای display: none وجود ندارد و فرزندان عنصر به تنهایی امکان ظاهر شدن را نخواهند داشت

🔺 آرشیو بزرگی از عکس‌های Transparent 👇🏻

https://www.kisspng.com/

#link #png #image

@ProGraphs

​​🔺 آواتار های بامزه خودتون رو بسازید و دانلود‌شون کنین 😋

https://personas.draftbit.com/

#link #avatar

@ProGraphs

​​تفاوت Prototypal OOP (در جاوااسکریپت) و Classical OOP (سایر زبان‌ها)

به جهت فلش‌ها دقت کنید. یکی کپی شدن ویژگی‌ها به سمت پایین‌‌ (کلاس‌های فرزند) و یکی Delegation به سمت بالا (آبجکت‌های Prototype)

درک این تفاوت‌ها نه‌ تنها خیلی از دردسر‌های پیاده سازی Classical OOP در جاوااسکریپت را حل می‌کند بلکه به پیاده سازی Pattern های مفید و ساده‌تر کمک می‌کند.

(این مطلب رو برای کسانی که از مشکلات OOP در جاوااسکریپت گله می‌کنند بفرستید 😁)

#quicktip #js #oop

@ProGraphs

یه سایت خیلی خوب دیگه برای گرادینت 👌🏻❤️

https://webkul.github.io/coolhue/

#link #color #gradient

@ProGraphs

آیا در مورد مفهوم BFC در CSS شنیده‌اید؟‌ ویژگی‌های آن چیست؟ چطور می‌توانیم یک BFC بسازیم؟

#interviewquestion #css

@ProGraphs

🔺یه مجموعه خوب از فریم‌های دستگاه‌‌ها و پلتفرم‌های مختلف برای کسانی که دوست دارند طرح پروژه را روی کاغذ پیاده کنند.

https://sneakpeekit.com/

#design #frame #sketch

@ProGraphs

جواب:

یک BFC یا Block Formatting Context، قسمتی از صفحه بندی در CSS است که بلاک‌های دیگر را در خود جای می‌دهد و جریان و جایگیری آن‌ها را مدیریت می‌کند.

مفهوم BFC را می‌توانیم از دو جنبه بررسی کنیم:
1)‌ چطور یک BFC درست کنیم:
عناصری که یکی از ویژگی‌های زیر را داشته باشند یک BFC محسوب می‌شوند و ساختار عناصر داخلشان را کنترل می‌کنند.
float - overflow (not visible) - inline-block display - absolute position - flex & grid display - multicolumn containers


2)‌ ویژگی‌های یک BFC:
یک BFC موقعیت بلاک‌های داخل خودش را مدیریت می‌کند و قوانین موقعیت بندی، فقط بین عناصر یک BFC اعمال می‌شود. یعنی عناصر دارای float برروی عناصر سایر‌ BFC ها تاثیر نمی‌گذارند و clearing داخل یک BFC فقط عناصر داخل همان BFC را clear می‌کند. همچنین margin collapsing بین عناصر دو BFC جدا از هم اتفاق نمی‌افتد.
همچنین عناصر داخل BFC باید به طور کامل داخل BFC جای بگیرند. در نتیجه وقتی یک عنصر دارای float از عنصر والد خود بیرون میزند، میتوانیم عنصر والد را BFC کنیم تا به درستی عناصر دارای float را در خود جای دهد.

یک کاربرد مهم BFC حل مشکل‌های float هست که در مطالب بعدی بررسی خواهیم کرد.

اگر کامل متوجه نشدید نگران نباشید!
این مفهوم یکی از مفاهیم نسبتا پیچیده CSS هست و درک کاملش یکمی زمان میبره. ولی وقتی خوب درکش کنید خیلی از رفتار‌های CSS براتون واضح‌تر میشه.

یه منبع خوب برای مطالعه بیشتر:

https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/

​​فرض کنید یک عنصر HTML را با جاوااسکریپت select کرده‌ایم و می‌خواهیم پراپرتی‌های آن را در کنسول ببینیم:
var prographs = document.querySelector('.prographs');
console.log(prographs);

اما می‌بینیم که خود عنصر html در کنسول چاپ شده است در حالی که ما می‌خواهیم عنصر و پراپرتی‌های آن را به صورت آبجکت جاوااسکریپت ببینیم (مانند تصویر).

برای حل این مشکل می‌توانیم برای تابع console.log فرمت مورد نظر را مشخص کنیم. به این‌ صورت:
console.log("%O", prographs)

به این ترتیب عنصر به صورت آبجکت در کنسول ظاهر می‌شود (مانند تصویر).

#quicktip #js

@ProGraphs

🔺 یه سایت عالی برای الهام گرفتن در طراحی Landing Page 👇🏻

https://www.lapa.ninja/

#link #Inspiration

@ProGraphs

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

#interviewquestion #js

@ProGraphs

​​🔺 پنج نکته برای بهتر نوشتن شرط‌‌ها درجاوا‌اسکریپت 👌🏻

https://scotch.io/bar-talk/5-tips-to-write-better-conditionals-in-javascript

#link #js #conditionals

@ProGraphs