جالب است بدانید که در CSS زمانی که padding یا margin را به صورت درصدی تعیین میکنیم، این مقدار در هر دو راستای عمودی و افقی به صورت درصدی از عرض نگهدارنده محاسبه میشود!
با استفاده از این ویژگی میتوانیم عناصری با aspect ratio ثابت بسازیم.
#quicktip #css
@ProGraphs
با استفاده از این ویژگی میتوانیم عناصری با aspect ratio ثابت بسازیم.
#quicktip #css
@ProGraphs
با اجرای این کد چه مقادیری در کنسول چاپ میشود؟ جوابتان را توضیح دهید
#interviewquestion #js
@ProGraphs
#interviewquestion #js
@ProGraphs
🔺 یکی از بهترینهای گرادینت هستن ایشون 🌈
https://gradient.shapefactory.co/
#link #color #gradient
@ProGraphs
https://gradient.shapefactory.co/
#link #color #gradient
@ProGraphs
gradient.shapefactory.co
Gradient by ShapeFactory | Chromatic Gradient Generator
This uniquely powerful tool uses the LAB color space to generate colorful, bright gradients. Find a beautiful gradient for your next project.
ProGraphs
با اجرای این کد چه مقادیری در کنسول چاپ میشود؟ جوابتان را توضیح دهید #interviewquestion #js @ProGraphs
جواب: عدد 6، 6 بار در کنسول چاپ میشود!
با دیدن این کد انتظار داریم که اعداد 0 تا 5 پشت سر هم در کنسول چاپ شوند. اما توابعی که داخل حلقه به setTimeout پاس میدهیم، همگی بعد از پایان کامل حلقه اجرا میشوند. و با توجه به مفهوم closure، به خود متغیر i دسترسی دارند و یک کپی از مقدار i در اختیار توابع نیست.
واضح است که پس از پایان حلقه، مقدار متغیر i عدد 6 خواهد بود. پس همهی این توابع عدد 6 را در کنسول چاپ میکنند.
برای حل این مشکل باید کاری کنیم که بهازای هر iteration حلقه، یک scope جدید ایجاد شود و مقدار متغیر i در این scopeها ذخیره شود:
به عنوان یک راه حل سادهتر میتوانید متغیر i را به جای var با let تعریف کنیم تا در هر iteration یک scope جدید ایجاد شود.
با دیدن این کد انتظار داریم که اعداد 0 تا 5 پشت سر هم در کنسول چاپ شوند. اما توابعی که داخل حلقه به setTimeout پاس میدهیم، همگی بعد از پایان کامل حلقه اجرا میشوند. و با توجه به مفهوم closure، به خود متغیر i دسترسی دارند و یک کپی از مقدار i در اختیار توابع نیست.
واضح است که پس از پایان حلقه، مقدار متغیر i عدد 6 خواهد بود. پس همهی این توابع عدد 6 را در کنسول چاپ میکنند.
برای حل این مشکل باید کاری کنیم که بهازای هر iteration حلقه، یک scope جدید ایجاد شود و مقدار متغیر i در این scopeها ذخیره شود:
for (var i = 0; i < 6; i++) {کل setTimeout را داخل یک تابع دیگر قرار دادیم چون هر تابع یک scope جدید ایجاد میکند.
(function(x) {
setTimeout(function() {
console.log(x);
}, x * 500 );
})(i);
}
به عنوان یک راه حل سادهتر میتوانید متغیر i را به جای var با let تعریف کنیم تا در هر iteration یک scope جدید ایجاد شود.
در جاوااسکریپت، پراپرتی آبجکتها فقط یک نام و مقدار نیستند.
هر پراپرتی مجموعهای از attributeها دارد که رفتار آن پراپرتی را تعیین میکند. به این مجموعه از ویژگیها property descriptor میگوییم.
نحوهی تغییر دادن و خواندن مقدار descriptor را در تصویر میبینید. به این ترتیب میتوانیم رفتار هر پراپرتی یک آبجکت را کنترل کنیم.
(در مطالب بعدی تک تک این ویژگیها را دقیقتر بررسی خواهیم کرد)
#quicktip #js
@ProGraphs
هر پراپرتی مجموعهای از attributeها دارد که رفتار آن پراپرتی را تعیین میکند. به این مجموعه از ویژگیها property descriptor میگوییم.
نحوهی تغییر دادن و خواندن مقدار descriptor را در تصویر میبینید. به این ترتیب میتوانیم رفتار هر پراپرتی یک آبجکت را کنترل کنیم.
(در مطالب بعدی تک تک این ویژگیها را دقیقتر بررسی خواهیم کرد)
#quicktip #js
@ProGraphs
🔺لیست اندازه صفحه نمایش و تراکم پیکسل برای Deviceهای محبوب
https://screensiz.es/
#link #viewport #screensize #pixeldensities
@ProGraphs
https://screensiz.es/
#link #viewport #screensize #pixeldensities
@ProGraphs
ProGraphs
با اجرای این کد چه مقادیری در کنسول چاپ میشود؟ #interviewquestion #js @ProGraphs
جواب:
تنها نکتهی مهم این کد این است که متغیر error identifier در بلاک catch، فقط داخل همان بلاک در دسترس است (block scope).
بنابراین زمانی که میخواهیم مقدار متغیر x را بیرون بلاک catch در کنسول چاپ کنیم، error دریافت میکنیم.
اما متغیر y را با کلمه کلیدی var تعریف کردهایم. بنابراین متغیر y گلوبال خواهد بود و حتی بیرون از بلاک catch هم میتوانیم مقدار آن را در کنسول چاپ کنیم.
به این ترتیب با اجرای این کد ابتدا مقدار متغیر y که عدد 20 است چاپ میشود و سپس error دریافت میکنیم.
تنها نکتهی مهم این کد این است که متغیر error identifier در بلاک catch، فقط داخل همان بلاک در دسترس است (block scope).
بنابراین زمانی که میخواهیم مقدار متغیر x را بیرون بلاک catch در کنسول چاپ کنیم، error دریافت میکنیم.
اما متغیر y را با کلمه کلیدی var تعریف کردهایم. بنابراین متغیر y گلوبال خواهد بود و حتی بیرون از بلاک catch هم میتوانیم مقدار آن را در کنسول چاپ کنیم.
به این ترتیب با اجرای این کد ابتدا مقدار متغیر y که عدد 20 است چاپ میشود و سپس error دریافت میکنیم.
ویژگی download برای تگ a در HTML.
زمانی که روی یک لینک با ویژگی download کلیک میکنیم، مرورگر به جای navigate کردن به آدرس موردنظر، آن را دانلود میکند!
همچنین با تعیین یک مقدار برای ویژگی download میتوانیم نام فایل دانلود شده را تغییر دهیم.
#quicktip #html
@ProGraphs
زمانی که روی یک لینک با ویژگی 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
Paste makes slides simple so you can focus on what’s important. Try it free :)
https://pasteapp.com/
#link #presentation
@ProGraphs
Wetransfer
WeTransfer | Send Large Files Fast - Up To 2GB Free
The simple, quick and secure way to send your files around the world without an account. Share your files, photos, and videos today for free.
این قطعه کد برای چک کردن اینکه یک متغیر آبجکت است یا نه نوشته شده است.
آیا مشکلی در این کد میبینید؟ روش بهتری برای این کار میشناسید؟
#interviewquestion #js
@ProGraphs
آیا مشکلی در این کد میبینید؟ روش بهتری برای این کار میشناسید؟
#interviewquestion #js
@ProGraphs
🔺طرحهای این مدلی رو از سایت زیر دانلود کنین. 🎊
https://www.drawkit.io/
#link #illustration
@ProGraphs
https://www.drawkit.io/
#link #illustration
@ProGraphs
ProGraphs
این قطعه کد برای چک کردن اینکه یک متغیر آبجکت است یا نه نوشته شده است. آیا مشکلی در این کد میبینید؟ روش بهتری برای این کار میشناسید؟ #interviewquestion #js @ProGraphs
جواب:
عملگر typeof از قسمتهایی در جاوااسکریپت هست که خلاقیت فوقالعادهای در طراحی آن به کار رفته و سعی شده در شرایط مختلف ما را غافلگیر کند 😄.
کد این سوال میتواند در این شرایط برخلاف تصور ما عمل کند:
1- عملگر typeof مقدار null را به عنوان یک آبجکت تشخیص میدهد! در واقع این موضوع به عنوان یک باگ در جاوااسکریپت پذیرفته شده است.
بله، روشهایی زیادی برای این کار وجود دارد که 2 مورد از آنها را در این مطلب بررسی میکنیم:
1- این کد برای مقادیر null و آرایهها و توابع false برمیگرداند و فقط برای آبجکتها (و نه subtype های آن) true برمیگرداند:
عملگر 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]
اینکه هر کدام از این روشها دقیقا چطور کار میکنند و هرکدام در چه شرایطی مناسبتر هستند را در مطالب جداگانه بررسی میکنیم.