بخش فرانت اند(front end) برنامه شما از نظر کاربر و مشتری به نوعی ویترین کار شما است و به همین دلیل اهمیت زیادی دارد. زبان هایی که در بخش فرانت اند استفاده می شود معمولا HTML, CSS, Javascript است. در این مطلب نکاتی را در فرانت اند معرفی می کنیم که استفاده از آنها می تواند به طراحی شما کمک کند. دقت داشته باشید که برخی از این قابلیت ها بر روی مرورگرهای موبایل قابل اجرا هستند.
آیا می دانید که چگونه بدون استفاده کردن از Javascript یک المان HTML را مخفی کنید؟ جواب این سوال بسیار آسان است با استفاده از خصوصیت hidden شما می تواند به راحتی یک المان را مخفی کنید به صورتی که المان در صفحه وب شما گذاشته شده است ولی نمایش داده نمی شود. کد زیر نحوه استفاده از این خصوصیت را نشان می دهد.
<p hidden>this paragraph is hidden</p>
این کلمه یک کلمه اختصاری(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 میلی ثانیه ویبره می زند.
برخی مرورگرهای گوشی موبایل مانند کروم این قابلیت بسیار خوب را دارند که وقتی شما صفحه را به پایین می کشید صفحه refresh خواهد شد. حال می توانید با استفاده از یک خصوصیت CSS کاری کنید که این قابلیت غیرفعال شود. این قابلیت overscroll-behavior-y نام دارد. حال برای غیر فعال کردن قابلیت pull to refresh مقدار خصوصیت گفته شده را برابر contain قرار دهید. به شکل زیر
body{
overscroll-behavior-y:contain;
}شاید زمانی inputی داشته باشید که نمی خواهید کاربر مقداری داخل آن paste کند و فقط باید تایپ کند. برای این کار می توانید از رویداد paste که در جاواسکریپت وجود دارد استفاده کنید. کد زیر را در نظر بگیرید.
<body>
<input type="text">
<script>
const input=document.querySelector('input');
input.addEventListener("paste",function(e){
e.preventDefault();
})
</script>
</body>
خواهید دید که با این کد دیگر قابلیت paste کردن غیرفعال خواهد شد.
با وب سایت tosinso همراه باشید.