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”);

تمام موارد ذکر شده در این لیست ممکن است کاربردی ترین نباشن اما دونستن اونا میتونه کمک بزرگی باشه.

البته من مطمئن هستم که ترفندهای بسیار بیشتری هم وجود داره!

امیدوارم از خوندن این مقاله لذت برده باشین، دیگر مقاله های ما در سایت رو از دست ندین.

منبع