7 Thủ thuật có thể front-end developer còn chưa biết đến

1. Datalist

Thẻ này được dùng để autocomplete vào các thẻ input, thẻ này sẽ giúp cho các bạn định nghĩa sẵn ra các giá trị cho input và người dùng có thể chọn nó hoặc không.

VD:

<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>

Chạy Code

Trong đó: list attribute xác định id của datalist sẽ sử dụng.

2. Clickable label với checkbox input.

Thông thường, khi chúng ta muốn click vào label sẽ tác động đến checkbox input thì sẽ sử dụng thuộc tính for để xác định tác động vào input nào thông qua id của input.

VD:

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Tôi đã trên 18 tuổi rồi</label>

Chạy Code

Nhưng thực tế bạn chỉ cần đặt thẻ input vào trong thẻ label là cũng có thể làm được điều như trên rồi.

VD:

<label>
  <input type="checkbox" name="checkbox" value="value">
  Tôi đã trên 18 tuổi rồi
</label>

Chạy Code

3. CSS child selectors

Đa số mọi người đều biết đến child selector rồi, nhưng chưa chắc các bạn đã biết hết những tính năng mà nó cung cấp. Hầu hết mình chỉ thấy mọi người chủ yếu sử dụng 2 thuộc tính first-child (select phần tử con đầu tiên) và last-child (select phần tử con cuối cùng). Nhưng ít để ý rằng nó còn có thêm thuộc tính nth-child.

Thuộc tính nth-child(x) này giúp chúng ta select các phần tử con của một, hoặc nhiều đối tượng thỏa mãn điều kiện x.

VD: select phần tử con thứ 3 của thẻ ul.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com</title>
    <style>
    	.child-selector li:nth-child(3) {
            background : red
        }
    </style>
  </head>
  <body>
    <ul class="child-selector">
      <li>line 1</li>
      <li>line 2</li>
      <li>line 3</li>
      <li>line 4</li>
      <li>line 5</li>
      <li>line 6</li>
    </ul>
  </body>
</html>

Chạy Code

VD: Select 3 phần tử con đầu tiên của thẻ ul.

.child-selector li:nth-child(-n + 3) {
  background : red
}

Chạy Code

VD: Select các phần tử con của thẻ ul, trừ 3 phần tử đầu tiên.

.child-selector li:nth-child(n + 4) {
    background : red
}

Chạy Code

VD: Slect các phần tử con có thứ tự là bội số của 3.

.child-selector li:nth-child(3n) {
    background : red
}

Chạy Code

VD: Select các phần tử con chẵn, lẽ của thẻ ul.

// select các phần tử chẵn.
.child-selector li:nth-child(even) {
    background : red
}

//select các phần tử lẻ
.child-selector li:nth-child(odd) {
    background : green
}

Chạy Code

4. Writing mode.

Writing mode là một tính năng của CSS mà ít người biết đến, nó giúp chúng ta xác định kiểu hiển thị của text.

VD:

.default{
    writing-mode: horizontal-tb;
}
.vertical-lr {
    writing-mode: vertical-lr;
}

Chạy Code

5. Thay thế Math.round và Math.floor.

Trong javascript, các bạn có thể thay thế Math.floor() bằn cách sử dụng 0| trước biểu thức hoặc số cần làm tròn xuống.

VD:

Math.floor(4.7); // 4

0 | 4.7 // 4

Tương tự đối với Math.round() các bạn có thể sử dụng +0.5|0 vào sau biểu thức hoặc số cần làm tròn.

VD:

Math.round(4.13) // 4
4.13 +0.5|0 // 4

Cách này chỉ làm cho cool ngầu thôi, trên thực tế mình vẫn khuyên mọi ngươi dùng các method của Math object. Để đảm bảo coding convention

6. Biến một phần tử có thể edit được.

Để biết bất kì một element nào có thể edit được thì các bạn chỉ cần thêm attribute contenteditable="true" vào element là được.

VD:

<p contenteditable="true">Đây là một thẻ p, nhưng các bạn có thể chỉnh sửa được đoạn text này</p>

Chạy Code

7. Sử dụng nhiều lệnh trong câu lệnh điều kiện không có dấu ngoặc nhọn.

Như các bạn đã biết, nếu khai báo câu lệnh điều kiện không sử dụng dấu ngoặc nhọn "{}" thì nó chỉ thực thi 1 statement sau câu lệnh đó thôi.

VD:

if (false)
    alert(1)
    alert(2)

Chạy Code

Trong VD trên, như các bạn đã thấy cho dù mình đã indent vào rồi nhưng câu lệnh if vẫn thực thi alert(2) chứng tỏ là câu lệnh if khi không có dấu ngoặc nhọn thì nó chỉ thực thi một statement.

Để sử dụng được multi statement trong câu lệnh if không khai báo dấu ngoặc nhọn thì các bạn chỉ cần sử dụng trick ngăn cách giữa các statement dấu ",".

VD: