🔺 تو یه ربع 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

​​🔺 یک ابزار مفید برای انتخاب میان فونت ها ✌🏻

https://wordmark.it/

#link #icon

@ProGraphs

جواب:

عملگر in پراپرتی مورد نظر را در کل prototype chain آبجکت چک می‌کند.

ولی متد hasOwnProperty پراپرتی را فقط در خود آبجکت چک می‌کند و کاری به prototype chain ندارد.

(اگر مفهوم prototype chain را فراموش کردید این مطلب را مرور کنید:‌ https://t.iss.one/ProGraphs/131)

🔺 یه مجموعه خوب از آیکون‌های قابل تنظیم و تغییر 🎉

https://www.ikonate.com/#content

#link #icon

@ProGraphs

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

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

روش دوم:
استفاده از Object.create. این متد یک آبجکت را به عنوان ورودی دریافت می‌کند و آبجکت جدیدی return می‌کند که از طریق [[prototype]] به آبجکت مورد نظر لینک شده است.
در تصویر می‌بینید که بدون استفاده از تابع و ‌new و ... خیلی ساده دو آبجکت را با [[prototype]] به هم لینک کردیم

روش اول پایه‌ی پیاده سازی مکانیزم‌های OOP در جاوااسکریپت هست که احتمالا زیاد با آن برخورد کردید.
ولی دقت کنید که لینک کردن آبجکت‌ها به یکدیگر با روش ساده‌تر که Object.create است در خیلی از مواقع بهتر و ساده‌تر است.

#quicktip #js

@ProGraphs

مفهوم prototype پایه‌ی خیلی از patternها و paradigmها در جاوااسکریپت است. ولی متاسفانه خیلی از دولوپر‌ها بدون درک درست این مفهوم ازش استفاده می‌کنند.
تو این سری مطالب سعی کردیم مفهوم کلی prototype رو بدون توجه به OOP و ... بررسی کنیم که وقتی pattern ها و paradigmهایی مثل OOP رو پیاده سازی می‌کنید از نحوه کارکرد مکانیزم‌های پایه‌ای مثل prototype, new, ... هم مطلع باشید.

اگر فکر می‌کنید بررسی خود patternهای قابل پیاده سازی با prototype میتونه مفید باشه. یا اگر اشکالی تو این مطالب دیدید و یا اگر هر نظر دیگه‌ای دارید میتونید از این طریق با ما در میون بذارید:

@HiProGraphsBot

​​​​📌 بایگانی‌ Roadmap های مختلف:

✅ نقشه‌ راه برای Web developer شدن در سال 2018
https://t.iss.one/ProGraphs/49
✅ نقشه‌ راه برای توسعه‌دهنده حرفه‌ای React شدن در سال 2018
https://t.iss.one/ProGraphs/64
✅ نقشه‌ راه برای توسعه‌دهنده حرفه‌ای Vue شدن در سال 2018
https://t.iss.one/ProGraphs/72
✅ نقشه‌ راه برای UI/UX Designer شدن
https://t.iss.one/ProGraphs/102
✅ نقشه‌ راه برای توسعه‌دهنده حرفه‌ای Angular شدن در سال 2018
https://t.iss.one/ProGraphs/104

🌹 این مطلب رو با دوستان خود به اشتراک بگذارید. 🌹

#archive #roadmap

@ProGraphs

​​احتمالا دقت کردید که برای ایجاد گرادینت در CSS باید گرادینت را در راستای شکلی خاص مانند خط (linear) یا دایره (radial) تعریف کنیم.

اما با ترفندی که در تصویر می‌بینید می‌توانیم با ترکیب چند گرادینت و blend-mode گرادینتی بدون شکل واضح درست کنیم‌ (مثل گرادینتی که احتمالا در صفحه ورود اینستاگرام دیدید)

#quicktip #css #trick

@ProGraphs

آیا با data attribute ها در html آشنا هستید؟
کاربرد آن‌ها چیست؟

#interviewquestion #html

@ProGraphs

​​قالب های Landing Page رایگان برای استارت‌آپ‌ها 🎉

https://cruip.com/

#link #landingpage #template

@ProGraphs