CodePen: Được xây dựng, Kiểm tra, Chia sẻ và Khám phá HTML, CSS và JavaScript

Codepen: Xây dựng, thử nghiệm và khám phá mã giao diện người dùng

Một thách thức với hệ thống quản lý nội dung là thử nghiệm và sản xuất các công cụ theo tập lệnh. Mặc dù đó không phải là yêu cầu đối với hầu hết các nhà xuất bản, với tư cách là một nhà xuất bản công nghệ, tôi thích chia sẻ các kịch bản làm việc theo thời gian để giúp đỡ những người khác. Tôi đã chia sẻ cách sử dụng JavaScript để kiểm tra độ mạnh của mật khẩuLàm thế nào để kiểm tra cú pháp địa chỉ email bằng Biểu thức chính quy (Regex), và gần đây nhất đã thêm cái này máy tính để dự đoán tác động bán hàng của các bài đánh giá trực tuyến. Tôi hy vọng sẽ thêm hàng tá công cụ trên trang web nhưng WordPress không thực sự có lợi cho việc xuất bản như thế này… đó là một hệ thống nội dung, không phải là một hệ thống phát triển.

Vì vậy, để các tập lệnh nhỏ của tôi hoạt động, tôi thích sử dụng CodePen. CodePen là một công cụ được tổ chức gọn gàng với bảng điều khiển HTML, bảng điều khiển CSS, bảng điều khiển JavaScript, Bảng điều khiển và bản xuất bản mã kết quả. Mỗi bảng điều khiển có thông tin khi bạn di chuột qua các phần tử để bạn hiểu những gì có thể xảy ra, cũng như mã hóa màu sắc HTML, CSS và JS của bạn để giúp bạn chỉnh sửa và viết dễ dàng hơn.

CodePen là một môi trường phát triển xã hội. Về cơ bản, nó cho phép bạn viết mã trong trình duyệt và xem kết quả của nó khi bạn xây dựng. Một trình soạn thảo mã trực tuyến hữu ích và giải phóng cho các nhà phát triển bất kỳ kỹ năng nào và đặc biệt trao quyền cho những người học viết mã. CodePen tập trung chủ yếu vào các ngôn ngữ giao diện người dùng như HTML, CSS, JavaScript và các cú pháp tiền xử lý biến thành những thứ đó.

Giới thiệu về CodePen

Với CodePen, tôi có thể thực hiện tất cả các công việc cần thiết để xuất bản máy tính Tôi đã nhúng vào trang web. Hầu hết các sáng tạo trên CodePen là công khai và mã nguồn mở. Họ là những sinh vật sống mà người khác và cộng đồng có thể tương tác, từ nghe đơn giản, để lại nhận xét, rèn luyện và thay đổi theo nhu cầu của chính họ.

CodePen - máy tính để dự đoán tác động bán hàng của các bài đánh giá trực tuyến

Với CodePen, bạn có thể thay đổi chế độ xem của mình nếu bạn muốn các ngăn ở bên trái, bên phải hoặc dưới cùng khi bạn làm việc… hoặc xem HTML trong một tab mới. Chế độ xem song song hoạt động cực kỳ hiệu quả để kiểm tra cài đặt đáp ứng của bạn vì bạn có thể điều chỉnh kích thước của ngăn có thể xem.

Bạn có thể sắp xếp từng tập lệnh làm việc của mình thành Bút, kết hợp chúng thành Dự án (trình chỉnh sửa nhiều tệp) hoặc thậm chí xây dựng bộ sưu tập. Về cơ bản, nó là một trang web portfolio hoạt động cho mã front-end, nơi bạn có thể theo dõi các tác giả khác, chuyển các dự án được chia sẻ công khai khác thành của riêng bạn để sửa đổi và thậm chí học cách thực hiện một số nội dung thú vị thông qua các thử thách.

Bạn có thể lưu dưới dạng GitHub Gist, xuất dưới dạng tệp zip và thậm chí nhúng cây bút trong một bài báo như thế này:

Xem bút
Tác động bán hàng dự đoán của các bài đánh giá trực tuyến
by Douglas Karr (@douglaskarr)
on CodePen.


Một trong những hạn chế của trình soạn thảo Pen là khối lượng mã quá lớn. Bạn có thể không bao giờ gặp phải vấn đề này, vì trình soạn thảo sẽ ổn với hàng trăm hoặc thậm chí hàng nghìn dòng mã. Nhưng khi họ bắt đầu đạt từ 5,000 - 10,000 dòng mã trở lên, bạn sẽ thấy trình chỉnh sửa bắt đầu không thành công. Tuy nhiên, bạn có thể thêm các tham chiếu bên ngoài vào bảng định kiểu hoặc JavaScript được lưu trữ ở nơi khác!

Tôi khuyến khích bạn đăng ký. Bạn sẽ được đăng ký nhận email hàng tuần của họ và cũng có thể thêm nguồn cấp dữ liệu vào nguồn cấp dữ liệu RSS của bạn để bạn có thể xem những cây bút mới được xuất bản. Và, nếu bạn bắt đầu tìm kiếm hoặc duyệt qua các cây bút công cộng ở đó, bạn sẽ tìm thấy một số dự án đáng kinh ngạc… những người dùng khá tài năng!

Theo Douglas Karr trên Codepen

Phiên bản trả phí, CodePen Pro, cung cấp rất nhiều tính năng bổ sung để cải thiện chức năng hoặc nhóm - bao gồm cộng tác, quy trình, lưu trữ tài sản, chế độ xem riêng tư và thậm chí cả các dự án đã triển khai với miền hoặc miền phụ của riêng bạn. Và, tất nhiên, CodePen cung cấp một kho lưu trữ tuyệt vời với tích hợp Github, nơi toàn bộ nhóm của bạn có thể làm việc. Nếu bạn chỉ muốn thử nghiệm một số mã đơn giản như tôi, thì CodePen là một công cụ vô giá.

Bạn nghĩ gì?

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.