11 ترفند Frontend که اکثر توسعه دهنده ها نمیدونن

در این مقاله با 11 ترفند Frontend که اکثر توسعه دهنده ها نمیدونن آشنا میشیم.
ترفند هایی وجود داره که توسعه دهنده ها ممکنه بهشون بر نخورده باشن!
در زیر تعدادی از ترفندها برای انجام کار با HTML / CSS / JavaScript .
که امیدوارم حداقل دو مورد در این لیست باشه که شما تا الان از اونا اطلاع نداشتین!
المنت Datalist
یکی از عناصر HTML که به هیچ وجه بدون دلیل استفاده از اونو نمیبینین!
از برچسب <datalist> برای تهیه ویژگی “تکمیل خودکار” برای عناصر <input> استفاده میشه.
به طوری که هنگام تایپ کردن ، یک لیست کشویی از گزینه های از پیش تعریف شده مشاهده میکنین.
مثال:
<input list=”animals” name=”animal” id=”animal”><datalist id=”animals”>
<option value=”Cat”>
<option value=”Dog”>
<option value=”Chicken”>
<option value=”Cow”>
<option value=”Pig”>
</datalist>
ویژگی id یک <datalist> باید برابر با ویژگی list اون <input> باشه ، این همون چیزی هست که اونا رو به هم وصل میکنه.
label قابل کلیک همراه checkbox
اگه یک label قابل کلیک برای checkbox باید از المنت label با اتربیوت “for” استفاده کنین.
به این شکل :
<input type=”checkbox” name=”checkbox” id=”checkbox_id” value=”value”>
<label for=”checkbox_id”>I agree</label>
در واقع میتونین برای انجام کار مورد نظر، المنتlabel رو در اطراف checkbox قرار بدین.
پس وقتی روی “”I agree کلیک کنین اون checkbox انتخاب میشه.
مثال:
<label><input type=”checkbox” name=”checkbox” id=”checkbox_id” value=”value”>I agree</label>
سلکتور های Child
احتمالاً بیشترین مورد استفاده در این لیست همینه، اما اکثر مردم خبر ندارن چه قدرتی دارن.
سلکتور هایChild برای مطابقت با تمام المنت هایی که فرزند یک المنت مشخص هستن استفاده میشه.
و رابطه بین دو عنصر رو نشون میده.
مثال ها:
/* 1st <li> element */
li:first-child {
color: red;
}/* Last <li> element */
li:last-child {
color: green;
}// Select All <li> elements but The First Three */
li:nth-child(n+4) {
color: yellow;
}/* Select only the first 3 <li> elemets */
li:nth-child(-n+3) {
color: green;
}/* Styles are elements that are not a <p> */
.my-class:not(p) {
display: none;
}
Writing mode
Writing mode کمی شناخته شده اما یک ویژگی CSS کاملاً قدرتمنده.
که اجازه میده تا متن به صورت عمودی به صورت زیر اجرا بشه:
کد انجام این کار بسیار ساده ست.
writing-mode: vertical-rl;
مثال کامل:
<style>
.sideway {
writing-mode: vertical-rl;
}
.normal {
width: 5%;
float: left;
}
</style>
<p class=”normal”>
Hi some paragraph text
</p>
<p class=”sideway”>
Hey I’m some sidway text
</p>
ویژگی Writing mode پنج حالت داره.
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
تابع calc ()
تابع calc () در CSS به شما اجازه میده تا هنگام تعیین مقادیر ویژگی CSS محاسبات رو انجام بدین.
مفیدترین توانایی calc () توانایی اون ادغام واحدها مثل درصد و پیکسل هست.
هیچ پیش پردازنده ای هرگز قادر به انجام چنین کاری نیست. این چیزی هست که باید در زمان ارائه اتفاق بیفته.
مثال ها:
width: calc(5px + 100px);
width: calc(6em * 8);
width: calc(100% – 50px);
گزینه های Math.round & Math.floor
شاید خواندش آسون تر نباشه اما هنوز هم یک ترفند جالبه.
از Math.floor() میتونید برای 0| استفاده کنین.
0|743.4343 // returns 743
Math.floor(743.4343) // returns 743
از Math.floor() میتونید برای +.5|0 هم استفاده کنین.
812.777+.5|0 // returns 813
Math.round(812.777) // returns 813
Console.table
امیدوارم که شما console.log () رو شنیده و استفاده کرده باشین، اما ممکنه Console.table رو نشنیده باشین.
تابع console.table () یک آرایه یا یک شی رو به خودش اختصاص میده.
این تابع یک جدول رو در نمای کنسول به روشی کاملاً شسته و رفته نمایش میده!
مثال آرایه:
let car1 = { name : “Audi”, model : “A4” }
let car2 = { name : “Volvo”, model : “XC90” }
let car3 = { name : “Ford”, model : “Fusion” }console.table([car1, car2, car3]);
Console.time
یکی دیگه از روش های مفید کنسول. console.time () هست که یک تایمر رو شروع میکنه.
این یک پارامتر رو به عنوان label میگیره.
و شما از console.timeEnd () با همون نام label استفاده میکنین و Console.time رو در میلی ثانیه
از زمانی که با console.time () و console.timeEnd () فراخوانی میکنین ، تولید میکنه.
مثال:
// Starts the timer
console.time(“MyTimer”);// Ends the timer and outputs the time in milliseconds
console.timeEnd(“MyTimer”);
عملگر In
اپراتور ” In” میتونه بررسی کنه که آیا ایندکس خاصی در آرایه وجود داره یا خیر.
مثال:
let cars = [‘Audi’, ‘BMW’, ‘Mini’, ‘Bentley’, ‘Porsche’];0 in cars // returns true
3 in cars // returns true
6 in cars // returns false
همچنین میتونه بررسی کنه که پراپرتی خاصی در یک شی وجود داره یا خیر.
مثال:
const person = { firstName : “Dave”, surname: “Smith”, age: 34 };‘firstName’ in person // returns true
‘surname’ in person // returns true
‘age’ in person // returns true
‘gendar’ in person // returns false
Chrome رو به یک ویرایشگر متن تبدیل کنین
شاید این مورد تو این لیست یکم نامربوط باشه.
اگه نوشته زیر رو در نوار URL کروم وارد کنین و کلید enter رو بزنین، این کار Chrome رو به دفترچه یادداشت تبدیل میکنه.
data:text/html, <html contenteditable>
چندین جمله در بلاک if بدون براکت های زیاد
ممکنه از این ترفند استفاده نکنین اما هنوز هم ترفندیه که افراد زیادی ازش اطلاع ندارن. ترفند، استفاده از ویرگول هست!
if (1 === 1)
alert(“Alert 1”), alert(“Alert 2”);
تمام موارد ذکر شده در این لیست ممکن است کاربردی ترین نباشن اما دونستن اونا میتونه کمک بزرگی باشه.
البته من مطمئن هستم که ترفندهای بسیار بیشتری هم وجود داره!
امیدوارم از خوندن این مقاله لذت برده باشین، دیگر مقاله های ما در سایت رو از دست ندین.
دیدگاهتان را بنویسید