Nếu bạn yêu thích mã hóa web, bạn có thể đã sử dụng ít nhất một sân chơi mã trong thời gian của mình. Đây không phải là những trình chỉnh sửa mã thông thường của bạn mà là những nơi bạn có thể kiểm tra mã của mình mà không cần lo lắng về việc thiết lập máy chủ phụ trợ. Codepen và JSFiddle là hai công cụ phổ biến nhất, nhưng có lẽ không có gì đáng ngạc nhiên (vì đối tượng mục tiêu của sân chơi mã web là những người có kỹ năng tự xây dựng sân chơi mã), có nhiều các lựa chọn thay thế.
Nếu bạn chỉ muốn tạo một ứng dụng HTML / CSS / JavaScript nhanh chóng và chơi với nó, thì sân chơi bạn chọn sẽ khá nhiều chỉ là vấn đề sở thích cá nhân. Tuy nhiên, nếu bạn muốn có nhiều tính năng hơn, chẳng hạn như mã hóa cộng tác trong thời gian thực, truy cập nhanh vào các khuôn khổ JS như React hoặc Vue, hỗ trợ back-end hoặc thậm chí chỉ là một cộng đồng sáng tạo đang hoạt động, bạn có thể muốn mua sắm một chút.
CodePen
Có lẽ sân chơi mã front-end phổ biến nhất hiện nay là CodePen, và vì lý do chính đáng:nó trực quan và dễ sử dụng, có một cộng đồng lớn và sôi động và đã trở thành một tiêu chuẩn được chấp nhận để nhúng mã web đang hoạt động vào các trang. Tính năng tự động cập nhật nhanh chóng và cửa sổ xem linh hoạt khiến nó trở nên khá phổ biến đối với những thứ như các dự án hoạt hình CSS. Nó có bộ xử lý trước CSS / JS và có thể dễ dàng kết nối với các tập lệnh bên ngoài (React, Vue và bất kỳ thứ gì khác có sẵn thông qua CDNjs) và thậm chí cả các bút khác.
Nhìn chung, CodePen xứng đáng với vị trí hàng đầu, đặc biệt là đối với các dự án và danh mục đầu tư front-end. Tuy nhiên, nó không được xây dựng cho back-end và một số tính năng của nó, như mã hóa cộng tác, nhiều dự án (trái ngược với từng bút riêng lẻ) và chế độ xem toàn trang trực tiếp (xem trực tiếp một phần trang miễn phí), yêu cầu một chuyên gia trả phí đăng ký.
JSFiddle
Trên cây vĩ cầm thứ hai (mặc dù theo thứ tự thời gian nó là một trong những cây đàn lâu đời nhất) trong thế giới sân chơi mã front-end là JSFiddle. Như tên có thể ngụ ý, nó hướng tới JavaScript, vì vậy nó cung cấp nhiều tính năng JS tiện ích hơn và ít theo cách của HTML / CSS hơn. (Theo nghĩa đen, nó có hỗ trợ mặc định cho Sass nhưng không hỗ trợ cho Less.) Tuy nhiên, đó không phải là một vấn đề lớn, vì với một chút công việc, bạn có thể thêm bất kỳ tính năng HTML / CSS / JS nào bạn cần và vì nó hỗ trợ mã gợi ý và tự động tải lại, nó thậm chí có thể tốt hơn CodePen một chút về khả năng mã hóa tổng thể.
Một điểm lớn trong sự ưu ái của JSFiddle là nó cung cấp chế độ cộng tác (bao gồm trò chuyện thoại và văn bản!) Miễn phí, cho phép bạn làm việc trên mã cùng lúc với những người khác. Tuy nhiên, nó không thực sự có nhiều khía cạnh cộng đồng và không giới thiệu các dự án thú vị, vì vậy nó thua CodePen về mặt đó.
Nhìn chung, nếu bạn có một dự án với nhiều JS hơn hoặc cần cộng tác viết mã, JSFiddle là một lựa chọn tuyệt vời. Tuy nhiên, nếu có điều gì đó khiến bạn khó chịu, thì có rất nhiều lựa chọn thay thế có cảm giác tương tự trong danh sách “Sân chơi khác” bên dưới.
Trục trặc
Được rồi, vì vậy bạn không chỉ muốn chơi với nội dung giao diện người dùng:bạn cần thứ gì đó mà bạn có thể xây dựng một ứng dụng web đầy đủ. Nhiều sân chơi mã chỉ cho phép bạn viết mã HTML / CSS / JS và tạo các trang web tĩnh, nhưng Glitch cung cấp cho bạn một chút dung lượng lưu trữ, 4000 yêu cầu một giờ và giúp bạn chạy mã phía máy chủ Node.js khá dễ dàng. Với mức giá hời tuyệt đối là $ 0,00, bạn sẽ có được một cách để xây dựng và triển khai ngay lập tức các dự án quy mô nhỏ, bất kể bạn có bao nhiêu kinh nghiệm.
Nó cũng đi kèm với một loạt các tính năng tuyệt vời khác:mã hóa cộng tác, kiểm soát phiên bản (được gọi là "tua lại"), nhiều tài nguyên học tập, tích hợp GitHub tốt, dễ dàng nhúng, một cộng đồng thân thiện, rất nhiều dự án mà bạn có thể phối lại và chơi cùng, và thậm chí tích hợp Visual Studio. Giao diện mã hóa front-end của nó có thể không đẹp như một số sân chơi khác, nhưng chức năng tổng thể của nó cũng tốt. Nếu bạn đang tìm kiếm một cách nhanh chóng và dễ dàng để thiết lập và chạy ứng dụng web (hoặc bạn đang cố gắng tìm hiểu cách thực hiện!), Glitch là điểm dừng đầu tiên tuyệt vời.
CodeSandbox
CodeSandbox thuộc cùng loại với Glitch nhưng phức tạp hơn một chút và đầy đủ tính năng. Trong đó Glitch tạo lớp giao diện khá tối giản trên chức năng khá mạnh mẽ của nó, CodeSandbox đưa tất cả sức mạnh đó ra ngoài bằng cách sử dụng cùng một Monaco Editor hỗ trợ VS Code. Do đó, những người cảm thấy thoải mái với IDE đó sẽ cảm thấy như ở nhà với CodeSandbox.
Nó cực kỳ linh hoạt và có thể tùy chỉnh, mã nguồn mở, cho phép bạn triển khai các ứng dụng web đầy đủ (mặc dù với một vài bước hơn so với Glitch), lưu trữ các tệp của bạn, có sự rung cảm cộng đồng và thực hiện nhiều công việc nền tảng cho bạn, giải phóng bạn viết mã và triển khai ứng dụng của bạn. Nó cũng có tích hợp GitHub và VS Code, Emmet (một phần mở rộng viết tắt) và rất nhiều tính năng khác mà người dùng thành thạo cũng như những lập trình viên ít kinh nghiệm sẽ đánh giá cao. Có thể là quá mức cần thiết nếu bạn chỉ làm lung tung, nhưng nếu dự án của bạn không còn phù hợp với CodePen nữa và bạn không bận tâm một chút về đường cong học tập, hãy xem CodeSandbox.
Repl.it
Sân chơi / IDE này không phải là cuối cùng vì nó là sân chơi ít yêu thích nhất của tôi (chắc chắn là không):đó là bởi vì Repl.it nằm trong một danh mục riêng của nó. Nó hỗ trợ một tấn của các ngôn ngữ, từ Python đến LOLCODE (ngôn ngữ lập trình ưa thích của Lolcats), có hỗ trợ mã front-end và back-end, cho phép bạn triển khai các trang web và ứng dụng, đi kèm với tích hợp GitHub rất chặt chẽ, tổ chức một cộng đồng nhà phát triển lớn và rất tích cực, và có giao diện trực quan cho thấy nó thực sự mạnh mẽ như thế nào.
Repl. dự án quy mô trung bình (miễn là bạn có kết nối Internet ổn định). Có thể hơi nhiều nếu bạn chỉ đang làm thiết kế giao diện người dùng hoặc nếu bạn mới làm quen với mã, nhưng nếu bạn thường xuyên lập trình thì rất đáng để khám phá.
Các sân chơi rất tuyệt vời khác để khám phá
Các sân chơi ở trên là mục tiêu cá nhân của tôi, nhưng còn rất nhiều sân chơi khác. Tất cả họ đều rất có khả năng thực hiện những điều cơ bản và mỗi người đều có những bước ngoặt riêng để đáp ứng một nhu cầu khác nhau. JSFiddle rõ ràng đã truyền cảm hứng cho nhiều người trong số họ, vì vậy nếu bạn đang tìm kiếm một giải pháp thay thế cho ứng dụng đó, bạn có thể tìm thấy nó tại đây.
- Liveweave:rất giống JSFiddle, nhưng thiên về thiết kế. Nó đặc biệt nổi bật nhờ CSS tích hợp sẵn, các công cụ tạo màu và trình chỉnh sửa vectơ.
- JSItor:một giải pháp thay thế JSFiddle có cảm giác rất giống và đáng chú ý là các ứng dụng Android / iOS.
- StackBlitz:một IDE dựa trên trình duyệt tuyệt vời được xây dựng với Monaco Editor hỗ trợ VS Code. Nó hơi giống CodeSandbox nhưng đơn giản hơn một chút vì nó không có hỗ trợ phụ trợ.
- Flems:trần trụi, sân chơi tối giản. Hoàn hảo nếu bạn muốn thứ gì đó không có nội dung vô nghĩa và / hoặc không gây mất tập trung.
- JSBin:một phiên bản JSFiddle tối giản hơn.
- CSSDeck:một sân chơi giao diện người dùng rất đơn giản. Nếu bạn muốn có một cách đơn giản để thử nghiệm một vài ý tưởng trong HTML / CSS và JS cơ bản thì đó là một lựa chọn tốt.
- ICECoder:đó là một sân chơi trực tuyến với các tính năng tương đương với nhiều sân chơi khác, nhưng điểm hấp dẫn chính của nó là cũng một chương trình có thể tải xuống chạy trong trình duyệt của bạn, về cơ bản biến nó thành một IDE dựa trên trình duyệt ngoại tuyến.
- Plunker:một công cụ giao diện người dùng cho phép bạn chơi với các tệp nhiều hơn một chút so với một số sân chơi khác và có tích hợp máy tính để bàn / GitHub tốt.
- Scrimba:được rồi, đây không hoàn toàn là một sân chơi mã - đó là một trang web có sự kết hợp giữa trình chỉnh sửa mã / video sáng tạo, mang đến cho bạn môi trường học tập và sân chơi đồng thời. Đáng để người học tham khảo!
- Web Maker:sân chơi giao diện người dùng tốt với chức năng ngoại tuyến và thậm chí tích hợp CodePen!
- Dabblet:sân chơi HTML / CSS / JS khá cơ bản nhưng thiết kế đẹp.
- PlayCode:một sân chơi HTML / CSS / JS cơ bản và hay. Nhược điểm lớn nhất:một thông báo khó chịu hiện lên cứ sau 60 giây yêu cầu bạn nâng cấp lên gói chuyên nghiệp.
Có quá nhiều! Tôi chọn cái nào?
Có, có một triệu sân chơi mã web, nhưng đừng mất công quyết định giữa chúng và để cho khoảng thời gian ngốn ngấu mà bạn có thể dành để thực sự tạo ra mọi thứ! Nếu bạn có một nửa ý tưởng về những gì bạn đang tìm kiếm trong môi trường viết mã trực tuyến, chỉ cần thu hẹp nó thành hai hoặc ba ứng dụng có các tính năng đó, thử làm việc với từng ứng dụng một chút và xem bạn tìm được ứng dụng nào cho mình hấp dẫn về phía. Nhiều người trong số họ dù sao cũng có tích hợp GitHub và / hoặc tính năng xuất / nhập, vì vậy, không có gì giống như bạn mãi mãi đưa mình vào một quyết định tồi.
Cá nhân tôi sử dụng CodePen cho các trang tĩnh đơn giản và thử nghiệm thiết kế và Glitch cho các dự án lớn hơn, mặc dù tôi đánh giá cao thiết kế VS Code của CodeSandbox và bảng điều khiển của Repl.it. Nếu tôi bỏ lỡ sân chơi yêu thích của bạn hoặc không đề cập đến một tính năng tuyệt vời, hãy bình luận bên dưới để những người khác có thể tìm thấy nó!