🔺مفاهیم پایه‌ای طراحی آیکون رو در یک ساعت یاد بگیرید. 👌🏻

https://introtoicons.com/

#link #icon #course

@ProGraphs

🔺ورژن دوم Design blocks سایت Froala هم اومد. 😍✨

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

#link #designblocks #webpagebuilder

@ProGraphs

🔺 با سایت زیر از هر وب‌سایتی Screenshot بگیرید. ✨

https://screen.guru/

#link #mockup #screenshot

@ProGraphs

​​متد‌های جدید برای دستکاری DOM با جاوااسکریپت مانند append, prepend, after, before, remove, replaceWith که از jQuery الهام گرفته شده‌اند!

https://caniuse.com/#feat=dom-manip-convenience

#quicktip #dom #js

@ProGraphs

🔺تنها در چند ثانیه اشکال SVG بسازید.✌🏻

https://www.blobmaker.app/

#link #svg

@ProGraphs

مفهوم CSS box model و بخش‌های تشکیل دهنده آن را توضیح دهید

#interviewquestion #css

@ProGraphs

🔺شیت‌های Grid قابل چاپ برای طراحی Wireframe 📄

https://sneakpeekit.com/

#link #ui #ux #sketchsheet #wireframe

@ProGraphs

جواب:

در صفحات وب، هر عنصر HTML به صورت یک مستطیل ترسیم می‌شود که از چند لایه تشکیل شده‌ است. این لایه‌ها ابعاد، حاشیه، فاصله و ... هر عنصر را مشخص می‌کنند:

content edge:
ناحیه‌ای که محتوای عنصر مانند متن، عکس و ... را شامل می‌شود و در حالت پیش‌فرض با پراپرتی‌های width و height تعیین می‌شود.

padding edge:
فاصله‌ی داخلی عنصر که از محتوا تا border را شامل می‌شود و با پراپرتی padding تعیین می‌شود.

border edge:
حاشیه‌ی عنصر که با پراپرتی border تعیین می‌شود.

margin edge:
فاصله‌ی خارجی عنصر که فاصله‌ی عنصر با عناصر مجاورش را مشخص می‌کند و با پراپرتی margin تعیین می‌شود.

🔺یه سایت خوب برای ساخت آسان Mockup ✨

https://mockup.photos/

#link #mockup

@ProGraphs

​​جالب است بدانید که در CSS زمانی که padding یا margin را به صورت درصدی تعیین می‌کنیم، این مقدار در هر دو راستای عمودی و افقی به صورت درصدی از عرض نگهدارنده محاسبه می‌شود!

با استفاده از این ویژگی می‌توانیم عناصری با aspect ratio ثابت بسازیم.

#quicktip #css

@ProGraphs

🔺آیکون‌های SVG برای استفاده در وب👌🏻

https://svgicons.sparkk.fr/

#link #svg #icon

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺 یکی از بهترین‌های گرادینت هستن ایشون 🌈

https://gradient.shapefactory.co/

#link #color #gradient

@ProGraphs

جواب: عدد 6، 6 بار در کنسول چاپ می‌شود!

با دیدن این کد انتظار داریم که اعداد 0 تا 5 پشت سر هم در کنسول چاپ شوند. اما توابعی که داخل حلقه به setTimeout پاس می‌دهیم، همگی بعد از پایان کامل حلقه اجرا می‌شوند. و با توجه به مفهوم closure، به خود متغیر i دسترسی دارند و یک کپی از مقدار i در اختیار توابع نیست.

واضح است که پس از پایان حلقه، مقدار متغیر i عدد 6 خواهد بود. پس همه‌ی این توابع عدد 6 را در کنسول چاپ می‌کنند.

برای حل این مشکل باید کاری کنیم که به‌ازای هر iteration حلقه، یک scope جدید ایجاد شود و مقدار متغیر i در این scopeها ذخیره شود:

for (var i = 0; i < 6; i++) {
  (function(x) {
    setTimeout(function() {
      console.log(x);
    }, x * 500 );
  })(i);
}

کل setTimeout را داخل یک تابع دیگر قرار دادیم چون هر تابع یک scope جدید ایجاد می‌کند.
به عنوان یک راه حل ساده‌تر می‌توانید متغیر i را به جای var با let تعریف کنیم تا در هر iteration یک scope جدید ایجاد شود.

Why isn't it <style src>? 🤔

https://css-tricks.com/why-isnt-it-style-src/

#link #html

@ProGraphs

🔺منابع گرافیکی برای دانلود رایگان

https://pngtree.com/

#link #graphic #resource

@ProGraphs

​​در جاوااسکریپت، پراپرتی آبجکت‌ها فقط یک نام و مقدار نیستند.
هر پراپرتی مجموعه‌ای از attributeها دارد که رفتار آن پراپرتی را تعیین می‌کند. به این مجموعه از ویژگی‌ها property descriptor می‌گوییم.

نحوه‌ی تغییر دادن و خواندن مقدار descriptor را در تصویر می‌بینید. به این ترتیب می‌توانیم رفتار هر پراپرتی یک آبجکت را کنترل کنیم.

(در مطالب بعدی تک تک این ویژگی‌ها را دقیق‌تر بررسی خواهیم کرد)

#quicktip #js

@ProGraphs