Chia sẻ của nhà phát triển Gomcine trên trang tin tức yozmIT của Hàn Quốc.

Tiếp theo bài trước, Phương pháp tăng năng suất phát triển web, trong phần này tôi sẽ chia sẻ một vài mẹo giúp bạn rút ngắn thời gian phát triển web. Trong dự án phát triển web với lịch trình khắt khe, nếu có phần nào có thể cải thiện để rút ngắn dù chỉ một chút thời gian, chắc hẳn ta cũng nên cải thiện chúng. Cho dù mỗi ngày bạn chỉ rút ngắn được 1 phút trong thời gian phát triển, thì những lần “1 phút” ấy cũng sẽ dần dần gộp lại với nhau theo thời gian và chắc chắn sẽ tác động được đến cả quá trình phát triển. 

Có rất nhiều phương pháp để nâng cao năng suất, và mỗi nhà phát triển đều có những mẹo của riêng mình. Trong bài viết này, tôi sẽ chia sẻ những mẹo tôi có được từ kinh nghiệm phát triển web trong thời gian qua, trong đó có cả những mẹo mà cả nhóm front-end chúng tôi cùng áp dụng. 

Sử dụng Design Mode

1. Design Mode là gì?

Design Mode là tính năng hỗ trợ chỉnh sửa trang web tạm thời ngay trong trình duyệt. Giống như hình minh họa dưới đây, Design Mode cho phép bạn chỉnh sửa nội dung hiển thị và di chuyển các hình ảnh mà không cần chỉnh sửa mã nguồn trong Browser DevTools. Design Mode giúp bạn nhanh chóng chỉnh sửa nội dung hiển thị và tìm ra cách sắp xếp hợp lý nhất cho thành phần trên trang web.

2. Cách bật/tắt Design Mode

Bạn có thể sử dụng Design Mode ở phần lớn các trình duyệt web, trong đó có Chrome, Firefox, Safari và Edge. Design Mode được bật / tắt qua thuộc tính designMode trên đối tượng document. Bạn có thể mở console tab trong Browser DevTools, sau đó sử dụng lệnh document.designMode = “on” để bật và document.designMode = “off” để tắt Design Mode.

Mẹo với JavaScript

1. Đổi biến

Tiếp theo, tôi sẽ chia sẻ một vài mẹo giúp bạn tiết kiệm thời gian khi soạn thảo hoặc kiểm thử mã nguồn JavaScript. Đầu tiên là phương pháp đơn giản để đổi biến. Thông thường, khi thay đổi giá trị của biến, nhiều người sẽ sử dụng biến phụ temp. Tuy nhiên, bạn hoàn toàn có thể thay đổi giá trị biến mà không cần đến temp theo cách đơn giản sau:

// Exchange Variables 

let a = "Apple"; 
let b = "Banana"; 
[a,b] = [b,a] 

console.log(a,b) // Banana, Apple

2. Nối mảng và loại bỏ phần tử trùng lắp

Khi sử dụng JavaScript, bạn sẽ thường xuyên làm việc với mảng. Khi cần kết hợp (nối) hai mảng một chiều với nhau, bạn có thể sử dụng phương thức concate hoặc spread operator để thực hiện tác vụ một cách nhanh chóng. Ngoài ra, Set giúp bạn loại bỏ những phần tử trùng lắp trong mảng một cách dễ dàng. 

/* Merge array */
let arr1 = ["Apple", "Banana", "Tomato"];
let arr2 = ["TV", "Radio", "Phone"];

const mergeArray1 = arr1.concat(arr2);
console.log(mergeArray1); // ['Apple', 'Banana', 'Tomato', 'TV', 'Radio', 'Phone']

const mergeArray2 = [...arr1, ...arr2];
console.log(mergeArray2); // ['Apple', 'Banana', 'Tomato', 'TV', 'Radio', 'Phone']


/* Remove Duplicates in the array */
const removeDuplicatesInArray = arr => [...new Set(arr)];
console.log(removeDuplicatesInArray([1, 1, 2, 3, 4, 4])); // [1, 2, 3, 4]

Với những phương pháp trên, bạn có thể viết mã nguồn đơn giản và không cần vòng lặp khi làm việc với mảng trong JavaScript.

3. Kiểm tra hiệu năng mã nguồn 

Khi bạn viết nhiều phiên bản mã nguồn, bạn sẽ cần kiểm tra hiệu năng của chúng. Trong trường hợp này, bạn có thể sử dụng phương thức performance.now() như dưới đây để kiểm tra hiệu năng một đoạn mã nguồn JavaScript. Ngoài now(), đối tượng performance còn có nhiều phương thức hữu ích khác, bạn có thể tìm hiểu chúng tại MDN Web Docs.

// JavaScript Code Performance Check

const start = performance.now();

// doSomething();

const end = performance.now();

console.log(`It takes ${end - start} milliseconds.`);

Cách debug web hiệu quả

1. Sử dụng VS Code + Live Server

Có nhiều IDE để lập trình, nhưng gần đây các nhà phát triển chủ yếu sử dụng VS Code khi phát triển ứng dụng web. Nếu bạn viết mã nguồn ứng dụng web với VS Code, bạn nên cài đặt thêm Live Server extension để có thể debug một cách hiệu quả hơn. Live Server cung cấp cho bạn môi trường local thể hiện ngay lập tức những thay đổi trên cả trang web tĩnh và web động trong thời gian thực, từ đó giúp bạn tiết kiệm thời gian đáng kể.

2. Mẹo debug trên Browser DevTools

Khi debug trên front-end, các nhà phát triển thường sử dụng hàm console.log() trong các công cụ dành cho nhà phát triển, chẳng hạn như DevTools trên Chrome. Tuy nhiên, việc sử dụng từng hàm console.log() một sẽ trở nên bất tiện khi bạn cần theo dõi và log nhiều giá trị. Lúc này, bạn có thể sử dụng breakpoint trong công cụ dành cho nhà phát triển, nhưng lệnh debugger sẽ giúp bạn debug một cách nhanh chóng và dễ dàng hơn.

Sử dụng Browser Console

1. Những tính năng đa dạng của Console

Như nội dung phần trước, bạn nên sử dụng debugger thay vì console.log() khi cần debug nhiều đối tượng. Tuy nhiên, cũng có rất nhiều trường hợp bạn muốn sử dụng hàm console.log() đơn giản. Trong những trường hợp này, những phương thức như console.table() hoặc console.dir() sẽ giúp bạn debug một cách trực quan và tiện lợi hơn.

2. Mẹo sử dụng Console

Nếu bạn thường xuyên sử dụng console, bạn có thể áp dụng phương pháp sử dụng console.log() ngắn gọn như đoạn mã dưới đây. Mặc dù phương pháp này chỉ tiết kiệm được một vài ký tự, nhưng bạn nên cân nhắc áp dụng nó nếu bạn sử dụng console.log() một cách thường xuyên và lặp đi lặp lại. 

// console log tip
var c = console.log.bind(document);

const a = 1;
const arr1 = [4, 5, 6];
const obj1 = {key:'id', value:'name'};

c(a); // 1
c(arr1); // [4, 5, 6]
c(obj1); // {key:'id', value:'name'};

Kết

Trên đây, tôi đã chia sẻ 4 mẹo giúp bạn tiết kiệm thời gian khi phát triển web. Có thể nhiều nhà phát triển đã biết những mẹo này rồi, nhưng tôi vẫn hy vọng những thông tin này có thể giúp nhà phát triển nào đó rút ngắn thời gian phát triển, cho dù chỉ là một người. 

The original article: 웹 개발 시간을 줄여주는 팁 4가지
The translated article above belongs to the author Gomcine and yozmIT (요즘IT). Metacoders commits not to use this content for any commercial purpose.