​​جالب است بدانید که در 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

🔺لیست اندازه‌ صفحه نمایش و تراکم پیکسل برای Deviceهای محبوب

https://screensiz.es/

#link #viewport #screensize #pixeldensities

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺همه چیز در یک Bookmark manager ☁️

https://raindrop.io/

#link #bookmark #manager

@ProGraphs

جواب:

تنها نکته‌ی مهم این کد این است که متغیر error identifier در بلاک catch، فقط داخل همان بلاک در دسترس است (block scope).

بنابراین زمانی که می‌خواهیم مقدار متغیر x را بیرون بلاک catch در کنسول چاپ کنیم، error دریافت می‌کنیم.

اما متغیر y را با کلمه کلیدی var تعریف کرده‌ایم. بنابراین متغیر y گلوبال خواهد بود و حتی بیرون از بلاک catch هم می‌توانیم مقدار آن را در کنسول چاپ کنیم.

به این ترتیب با اجرای این کد ابتدا مقدار متغیر y که عدد 20 است چاپ می‌شود و سپس error دریافت می‌کنیم.

🔺منبع راز طراحان | کاری از InVision ✨

https://muz.li/

#link #design #inspiration

@ProGraphs

​​ویژگی download برای تگ a در HTML.

زمانی که روی یک لینک با ویژگی download کلیک می‌کنیم،‌ مرورگر به جای navigate کردن به آدرس موردنظر، آن را دانلود می‌کند!

همچنین با تعیین یک مقدار برای ویژگی download می‌توانیم نام فایل دانلود شده را تغییر دهیم.

#quicktip #html

@ProGraphs

Pasteapp: Fast, collaborative presentations for creative teams.

Paste makes slides simple so you can focus on what’s important. Try it free :)

https://pasteapp.com/

#link #presentation

@ProGraphs

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

#interviewquestion #js

@ProGraphs

🔺طرح‌های این مدلی رو از سایت زیر دانلود کنین. 🎊

https://www.drawkit.io/

#link #illustration

@ProGraphs

جواب:

عملگر typeof از قسمت‌هایی در جاوااسکریپت هست که خلاقیت فوق‌العاده‌ای در طراحی آن به کار رفته و سعی شده در شرایط مختلف ما را غافلگیر کند 😄.

کد این سوال می‌تواند در این شرایط برخلاف تصور ما عمل کند:

1- عملگر typeof مقدار null را به عنوان یک آبجکت تشخیص می‌دهد! در واقع این موضوع به عنوان یک باگ در جاوااسکریپت پذیرفته شده است.
typeof null; // "object"

2- آرایه‌ها در جاوااسکریپت نوعی از آبجکت‌ها هستند و درواقع subtype آبجکت محسوب می‌شوند. به همین دلیل عملگر typeof (به درستی) مقادیر از نوع آرایه را، به عنوان آبجکت شناسایی می‌کند.
typeof [1, 2]; // "object"

3- توابع هم مانند آرایه‌ها، نوع خاصی از آبجکت‌ها هستند و subtype آبجکت محسوب می‌شوند.اما عملگر typeof مقادیر از نوع function را برخلاف آرایه‌ها، به عنوان خود "function" شناسایی می‌کند (و نه "object").
typeof function(){}; // "function"

اما آیا روش بهتری برای چک کردن نوع مقادیر وجود دارد؟
بله، روش‌هایی زیادی برای این کار وجود دارد که 2 مورد از آن‌ها را در این مطلب بررسی می‌کنیم:

1- این کد برای مقادیر null و آرایه‌ها و توابع false برمی‌گرداند و فقط برای آبجکت‌ها (و نه subtype های آن) true برمی‌گرداند:
(proGraphs !== null) && (proGraphs.constructor === Object)

2- یکی دیگر از روش‌های مفید برای چک کردن نوع داده‌ها استفاده از متد toString است:
Object.prototype.toString.call({}); // [object Object]
Object.prototype.toString.call([]); // [object Array]

اینکه هر کدام از این روش‌ها دقیقا چطور کار می‌کنند و هرکدام در چه شرایطی مناسب‌تر هستند را در مطالب جداگانه بررسی می‌کنیم.