جواب:

یک 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

​​کلی Theme برای Editor‌ها و IDE‌های مختلف 🎉

https://rainglow.io/

#link #tool #editor #theme

@ProGraphs

جواب:

به تابع foo دقت کنید. در این تابع مقدار متغیر proGraphs را دریافت می‌کنیم و در کنسول چاپ می‌کنیم. اگر داخل scope خود تابع متغیری به این نام وجود داشته باشد، مقدار همان متغیر، و در غیر این‌صورت مقدار متغیر proGraphs در global scope در کنسول چاپ می‌شود. همچنین داخل تابع foo از eval استفاده شده است و می‌دانیم که eval می‌تواند scope تابع را در زمان اجرا تغییر دهد.

حالا فقط باید بررسی کنیم که آیا eval در زمان اجرا متغیری به نام proGraphs در scope تابع foo ایجاد می‌کند یا خیر:

1) در حالت strict mode تابع eval در یک scope کاملا جدا اجرا می‌شود و اجازه‌ی دستکاری scope را ندارد بنابراین در حالت strict mode مقدار متغیر proGraphs در global scope در کنسول چاپ می‌شود که عدد 20 هست.

2)‌ در حالت non-strict تابع eval متغیری به نام proGraphs و با مقدار 19 داخل‌ scope تابع می‌سازد. بنابراین مقدار متغیر ساخته شده توسط eval در کنسول چاپ می‌شود که 19 هست.

با استفاده از سایت زیر انواع Board ها رو می‌تونید بسازید. 👌🏻
بورد‌هایی مثل بوم مدل کسب و کار، فلوچارت، Kanban و ...

https://realtimeboard.com

#link #whiteboard

@ProGraphs

🔺 تو یه ربع Sass رو یاد بگیر!

https://tutorialzine.com/2016/01/learn-sass-in-15-minutes

#link #sass

@ProGraphs

​​توضیح مفهوم کلی prototype در جاوااسکریپت (بخش اول)

تقریبا تمامی آبجکت‌ها در جاوااسکریپت یک پراپرتی internal به نام [[prototype]] دارند که به یک آبجکت دیگر اشاره می‌کند. (این پراپرتی مختص انجین هست)

حال اگر بخواهیم به یک پراپرتی از یک آبجکت دسترسی پیدا کنیم و آن پراپرتی در آبجکت موجود نباشد، انجین جاوااسکریپت [[prototype]] آبجکت را دنبال می‌کند و پراپرتی مورد نظر را در آبجکت بعدی جستجو می‌کند. این پروسه تا جایی ادامه پیدا می‌کند که یا پراپرتی مورد نظر پیدا شود یا زنجیره‌ی prototype ها به اتمام برسد.

این مجموعه از آبجکت‌ها که توسط [[prototype]] به هم متصل هستند با نام prototype chain شناخته می‌شوند.

انتهای prototype chain های معمول، آبجکتی به نام Object.prototype هست که utility های پر استفاده آبجکت‌ها مانند toString در آن تعریف شده است.

#quicktip #js

@ProGraphs

برنامه ریزی کار های شخصی با اپلیکیشن و وب اپلیکیشن Any.do

https://www.any.do

#link #todolist

@ProGraphs

در تصویر می‌بینید که زمانی که فرزندان عنصر نگهدارنده float می‌گیرند دیگر ارتفاع نگهدارنده از ارتفاع فرزندانش تبعیت نمی‌کند. راه حل شما برای این مشکل چیست؟

#interviewquestion #css

@ProGraphs

جواب سوال رو طبق روال همیشگی فردا ساعت 18:15 در کانال قرار میدیم.

تا اون موقع اگر مفهوم BFC رو فراموش کردید مطلبی که در این باره نوشتیم رو دوباره مطالعه کنید 😉 :
https://t.iss.one/ProGraphs/121

یکی از دوستان این کار رو زدن و برای ما فرستادن.
کار جالبی هم شده 👌

https://codepen.io/arashmilani/pen/WYGyWO

@ProGraphs

🔺 تو ۱۰ دقیقه مبانی Less رو یاد بگیر!

https://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less

#link #less

@ProGraphs

جواب:

روش اول:
متاسفانه جوابی که در اکثر منابع می‌بینید صرفا استفاده از چند پراپرتی به صورت حفظی و بدون دلیل است. مثلا این که عنصر نگهدارنده را overflow: hidden کنیم یا به خود عنصر نگهدارنده float بدهیم.
اما اگر مطلبی که درباره‌ی BFC ها منتشر کردیم را مطالعه کرده باشید می‌دانید که برای حل این مشکل فقط کافیست عنصر نگهدارنده را یک BFC کنید به همین سادگی 😁
حالا می‌توانید از هریک از روش‌های مطرح شده برای تبدیل کردن یک عنصر به BFC استفاده کنید. در واقع این پراپرتی‌هایی که به صورت حفظی مطرح می‌شوند هم عنصر نگهدارنده را BFC می‌کنند.

روش دوم:
استفاده از clearfix
فقط کافیست یک عنصر بعد از همه‌ی فرزندان عنصر نگهدارنده قرار دهید و به آن ویژگی clear: both را بدهید.
البته روش اصولی تر استفاده از شبه عنصر ::after است:

.container::after {
    content: '';
    display: table;
    clear: both;
}

​​با Drag & Drop قالب سایت مورد نظر خودتونو بسازید و کد HTML اونو دانلود کنید. 👌🏻

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

#link #designblocks #webpagebuilder

@ProGraphs

​​توضیح مفهوم کلی prototype در جاوااسکریپت (بخش دوم):

در مطلب قبلی پراپرتی [[prototype]] را بررسی کردیم که فقط مختص انجین جاوااسکریپت است و به عنوان لینک بین آبجکت‌ها استفاده می‌شود. حالا می‌خواهیم ببینیم که خودمان چطور می‌توانیم آبجکت‌ها را با [[prototype]] به هم لینک کنیم:

روش اول:
میدانیم که توابع در جاوااسکریپت در واقع نوع خاصی از آبجکت هستند و میتوانند پراپرتی داشته باشند. همه‌ی توابع پراپرتی به نام prototype دارند که کاملا public و قابل تغییر است. حالا این چه ارتباطی به لینک شدن آبجکت‌ها به هم دارد؟

فرض کنید تابعی به نام foo داریم. می‌دانیم که این تابع پراپرتی به نام prototype دارد. اگر این تابع را با new صدا کنیم. یک آبجکت جدید return می‌کند که از طریق [[prototype]] به foo.prototype لینک شده است. به این ترتیب می‌توانیم یک آبجکت جدید بسازیم که به آبجکتی دیگر (foo.prototype) لینک شده است. (به کد داخل تصویر دقت کنید)

نکته خیلی خیلی مهم اینکه این پراپرتی prototype توابع با پراپرتی [[prototype]] آبجکت‌های معمولی کاملا متفاوت هستند و کاربرد آن‌ها هم همانطور که دیدیم متفاوت است (میدونم گیج کنندست ولی یه کم کار کنید عادی میشه 😁).

#quicktip #js

@ProGraphs

تفاوت این دو روش برای چک کردن وجود یا عدم وجود یک پراپرتی در آبجکت چیست؟

#interviewquestion #js

@ProGraphs

​​🔺 بررسی و مقایسه تکنولوژی‌های مختلف با سایت StackShare 🎉

https://stackshare.io/

#link #community

@ProGraphs