6 نکته در طراحی فرانت اند ( Frontend ) که احتمالا نمی دانید
بخش فرانت اند(front end) برنامه شما از نظر کاربر و مشتری به نوعی ویترین کار شما است و به همین دلیل اهمیت زیادی دارد. زبان هایی که در بخش فرانت اند استفاده می شود معمولا HTML, CSS, Javascript است. در این مطلب نکاتی را در فرانت اند معرفی می کنیم که استفاده از آنها می تواند به طراحی شما کمک کند. دقت داشته باشید که برخی از این قابلیت ها بر روی مرورگرهای موبایل قابل اجرا هستند.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
مخفی کردن یک المان HTML
آیا می دانید که چگونه بدون استفاده کردن از Javascript یک المان HTML را مخفی کنید؟ جواب این سوال بسیار آسان است با استفاده از خصوصیت hidden شما می تواند به راحتی یک المان را مخفی کنید به صورتی که المان در صفحه وب شما گذاشته شده است ولی نمایش داده نمی شود. کد زیر نحوه استفاده از این خصوصیت را نشان می دهد.
<p hidden>this paragraph is hidden</p>
کلمه inset در CSS
این کلمه یک کلمه اختصاری(shorthand) است. استفاده از این کلمات باعث می شود که کدهای CSS شما کوتاه تر و حجم کد کمتر شود. خصوصیت inset در CSS یک کلمه اختصاری برای چهار خصوصیت top, left, right, bottom است. یعنی شما می توانید به جای این که این چهارخصوصیت را مقداردهی کنید فقط خصوصیت inset را مقداردهی کنید کفایت می کند. البته این در صورتی است که چهار خصوصیت گفته شده همه یک مقدار داشته باشند. برای مثال به قطعه کدهای زیر نگاه کنید.
کد بد
div{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}
به جای این کد می توانید از کد زیر استفاده کنید که معادل کد بد بالا است.
div{
position: absolute;
inset:0;
}تشخیص سرعت اینترنت با جاواسکریپت
به راحتی با استفاده از شی navigator می توانید در جاواسکریپت سرعت اینترنت را تشخیص دهید. برای این کار باید از کد زیر استفاده کنید.
navigator.connection.downlink
دقت کنید که ممکن است در برخی مرورگرها این دستور کار نکند اما در مرورگر کروم به درستی کار می کند.
ویبره موبایل را با جاواسکریپت روشن کنید.
به راحتی با استفاده از متد vibrate در شی navigator می توانید ویبره گوشی را روشن کنید. کد زیر این کار را انجام می دهد.
window.navigator.vibrate(500);
در کد بالا گوشی شما به مدت 500 میلی ثانیه ویبره می زند.
قابلیت pull to refresh را ببندید
برخی مرورگرهای گوشی موبایل مانند کروم این قابلیت بسیار خوب را دارند که وقتی شما صفحه را به پایین می کشید صفحه refresh خواهد شد. حال می توانید با استفاده از یک خصوصیت CSS کاری کنید که این قابلیت غیرفعال شود. این قابلیت overscroll-behavior-y نام دارد. حال برای غیر فعال کردن قابلیت pull to refresh مقدار خصوصیت گفته شده را برابر contain قرار دهید. به شکل زیر
body{
overscroll-behavior-y:contain;
}نگذارید کاربر چیزی را paste کند
شاید زمانی inputی داشته باشید که نمی خواهید کاربر مقداری داخل آن paste کند و فقط باید تایپ کند. برای این کار می توانید از رویداد paste که در جاواسکریپت وجود دارد استفاده کنید. کد زیر را در نظر بگیرید.
<body>
<input type="text">
<script>
const input=document.querySelector('input');
input.addEventListener("paste",function(e){
e.preventDefault();
})
</script>
</body>
خواهید دید که با این کد دیگر قابلیت paste کردن غیرفعال خواهد شد.
با وب سایت tosinso همراه باشید.