10 mẹo Codepen cho người mới bắt đầu

Codepen là một trang web siêu dễ dàng và phổ biến để cây bút xuống một kết hợp mã mặt trước làm việc ngay lập tức. Nếu bạn không biết Codepen là gì hoặc chưa từng nghe về nó trước đây, thì về cơ bản nó là một sân chơi mã nguồn trực tuyến (hãy gọi nó là OSCP để âm thanh mọt sách hơn) cho ba chàng lính ngự lâm của tiền mã hóa; HTML, CSS và JavaScript.

Ngoài ra còn có các OSCP tương tự khác như JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen chắc chắn là một trong những nhà phát triển front-end nổi tiếng nhất. Nếu không có thêm rắc rối, hãy nhảy ngay vào một số lời khuyên cơ bản và hữu ích để sử dụng Codepen.

1. Nút chạy

Nếu bạn không phải là người hâm mộ cách đầu ra mã của bạn trong Codepen tiếp tục làm mới trong khi bạn đang gõ, bạn có thể từ chối “Xem trước tự động cập nhật” Tùy chọn, và lấy nút Run thay thế. Khi bạn nhấp vào nó, bạn sẽ có thể xem và cập nhật đầu ra mã của bạn bất cứ khi nào bạn muốn.

Đây cũng là một tùy chọn tuyệt vời nếu bạn đang làm việc với một mã đầu ra trải qua rất nhiều thay đổi về bố cục, và sơn lại mỗi khi nó được cập nhật, dẫn đến chậm.

2. Tăng / giảm số

Tăng hoặc giảm số trong mã của bạn trong Codepen không cần nhập số mới. Tất cả bạn phải làm là sử dụng tổ hợp phím Ctrl / Cmd và Mũi tên lên và xuống.

3. Nhiều con trỏ

Bạn có thể đặt con trỏ tại nhiều điểm trong mã nguồn, sau đó nhập hoặc chỉnh sửa tại tất cả các điểm đó cùng một lúc. Điều này chỉ hoạt động nếu bạn nhập cùng một thông tin và giảm nhu cầu dán sao chép. Chỉ cần giữ phím Ctrl / Cmd trong khi nhấp vào nhiều điểm đó.

4. Thông báo bảng điều khiển màu khác nhau

Các Bảng điều khiển Đối tượng JavaScript có một vài phương pháp nữa ngoài ra log () cho phép bạn in những thứ trong bảng điều khiển web.

Bạn có thể dùng thông tin (), cảnh báo() và lỗi() phương pháp cho thông tin, cảnh báo và lỗi. Thông thường, bảng điều khiển web tô màu các thông báo này theo kiểu thông minh hoặc sẽ hiển thị một biểu tượng thích hợp bên cạnh chúng (như dấu hiệu cảnh báo cho thông báo cảnh báo) để nhận biết dễ dàng hơn.

Codepen có bàn điều khiển riêng mà bạn có thể mở bằng cách nhấp vào nút Console ở góc dưới bên trái. Đó là lý tưởng để kiểm tra nhanh các tin nhắn bàn điều khiển mà không cần phải mở giao diện điều khiển của trình duyệt. Bảng điều khiển này phân biệt các loại thông báo bảng điều khiển khác nhau với màu nền khác nhau.

5. Xuất khẩu

Sau khi lưu, một cây bút (một thực thể Codepen) có thể được xuất dưới dạng tệp ZIP với tất cả mã HTML, CSS và JS trong các tệp. Ngoài ra còn có một tùy chọn để lưu bút như một ý chính của Github (một kho lưu trữ Git). Bạn có thể tìm thấy nút Xuất ở góc dưới cùng bên phải của mỗi cây bút.

6. Tìm và thay thế

Tìm thay thế - một hoạt động thiết yếu cho những người có xu hướng đổi tên tên biến của họ mọi lúc mọi nơi. Ctrl / Cmd + Shift + F là tổ hợp phím mở “Tìm thay thế” hộp thoại.

7. Kích hoạt tab Emmet

Bạn có biết về trình kích hoạt tab cho mã hóa Emmet không? Emmet là một công cụ năng suất cho các nhà phát triển front-end cho phép bạn gõ mã bộ xương mà sau này được mở rộng. Để thực hiện việc này trong Codepen, chỉ cần nhanh chóng nhập từ viết tắt thích hợp vào trình chỉnh sửa, nhấn phím Tab và mã hoàn chỉnh xuất hiện cùng một lúc. Chỉ có sẵn cho HTML ở Codepen.

8. Nhận tập tin mã cá nhân

Nếu bạn sử dụng tùy chọn Xuất như đã đề cập trước đó, bạn sẽ nhận được cả ba tệp (HTML, CSS và JS) của cây bút của mình. Nhưng nếu bạn quan tâm đến chỉ một hoặc hai trong số các tệp đó, và muốn tải xuống riêng lẻ, cũng có một tùy chọn cho điều đó trong Codepen.

Sau khi đăng nhập vào Codepen, hãy chuyển đến bút của bạn và nhấp vào nút Thay đổi Chế độ xem ở góc trên cùng bên phải. Ở dưới cùng của danh sách thả xuống, bạn sẽ thấy liên kết tải xuống trực tiếp cho các tập tin cá nhân.

9. Kiểm tra các biến JavaScript

Khi bảng điều khiển JavaScript của Codepen kết nối với JavaScript được lưu trong bút của bạn, bạn cũng có thể sử dụng nó để nhanh chóng kiểm tra JavaScript của mình. Tính năng này đặc biệt tiện dụng trong kiểm tra các biến JS, theo cách này bạn không phải chèn thêm bàn điều khiển hoặc tin nhắn cảnh báo vào mã gốc chỉ dành cho mục đích thử nghiệm.

10. Biến bút thành mẫu

Nếu bạn có xu hướng bắt đầu hầu hết các bút của bạn với cùng một bộ mã, bạn có thể sử dụng một mẫu để lưu những mã lặp lại. Để biến một cây bút thành mẫu, đánh dấu vào tùy chọn Mẫu trong menu Cài đặt. Khi bạn tạo một cây bút mới, bạn có thể bắt đầu với mẫu đã lưu của bạn bằng cách nhấp vào mũi tên xuống ở phía bên phải của nút Bút mới. Nó sẽ mở danh sách thả xuống với tất cả các mẫu đã lưu của bạn để chọn.