Khi chúng ta triển khai các trang web ngày nay, chúng ta phải đối mặt với rất nhiều thứ cần phải xử lý. Lý tưởng nhất là chúng ta muốn có một trang web nhanh, an toàn, dễ truy cập và công bằng. Đồng thời, chúng ta muốn có một trang web tương tác với các bình luận, thăm dò ý kiến, video, ví dụ về mã và nhiều thứ khác nữa.
Cùng với một người bạn, tôi đã ra mắt một blog công nghệ vào năm ngoái và chúng tôi đã gặp phải chính xác vấn đề đó. Chúng tôi muốn có một giải pháp đơn giản để nhúng các ví dụ về mã HTML, CSS và JavaScript nhưng các giải pháp hiện có thường bao gồm theo dõi, cookie, rất nhiều tính năng hoặc hiệu suất kém. Sau một số nghiên cứu, chúng tôi nhận ra rằng chúng tôi phải xây dựng một giải pháp thay thế.
Hãy cùng xem:
https://indiepen.tech/embed/?url=https://indiepen.tech/example/
Indiepen là một giải pháp thân thiện với quyền riêng tư, nhẹ và dễ tiếp cận để nhúng các ví dụ về mã. Trên thực tế, chúng tôi không đặt bất kỳ cookie hoặc theo dõi nào!
Triển khai ví dụ mã với nhà cung cấp dịch vụ lưu trữ yêu thích của bạn (ví dụ: GitHub Pages, Netlify hoặc Vercel) và sao chép URL. Sau đó, hãy truy cập trang bắt đầu của chúng tôi và sử dụng trình tạo đoạn mã.
Mã được tạo trông như thế này:
Bây giờ bạn có thể sử dụng đoạn mã và tích hợp nó vào trang web của mình. Vậy là xong! Bây giờ bạn sẽ thấy ví dụ mã của mình bằng trình chỉnh sửa để khám phá mã.
Ngoài ra, chúng tôi có ba nút ở góc trên bên phải để chuyển đổi giữa các chế độ xem HTML, CSS và JavaScript. Bằng cách giới thiệu một khuôn khổ UI, chúng tôi không thể cung cấp một giải pháp nhẹ với kích thước dưới 20 kb. Đối với chúng tôi, đó là một bài học bổ ích, rằng các thư viện UI rất quan trọng trong công việc kinh doanh hàng ngày của chúng tôi nhưng chúng tôi nên cân nhắc kỹ lưỡng và đừng quên JavaScript vanilla cũ tốt.
Cuối cùng nhưng không kém phần quan trọng, tôi muốn đề cập rằng Indiepen có phạm vi hạn chế và chúng tôi muốn giữ cho nó đơn giản ngay từ khâu thiết kế. Nếu bạn cần xử lý các ví dụ mã phức tạp hơn, bộ xử lý trước cho CSS hoặc JavaScript, hoặc bạn muốn hưởng lợi từ một nền tảng để chia sẻ ý tưởng của mình, thì hãy cân nhắc các giải pháp phức tạp hơn như CodePen hoặc JSFiddle.
Chúc mọi người viết mã vui vẻ!
Cùng với một người bạn, tôi đã ra mắt một blog công nghệ vào năm ngoái và chúng tôi đã gặp phải chính xác vấn đề đó. Chúng tôi muốn có một giải pháp đơn giản để nhúng các ví dụ về mã HTML, CSS và JavaScript nhưng các giải pháp hiện có thường bao gồm theo dõi, cookie, rất nhiều tính năng hoặc hiệu suất kém. Sau một số nghiên cứu, chúng tôi nhận ra rằng chúng tôi phải xây dựng một giải pháp thay thế.
Hãy cùng xem:
https://indiepen.tech/embed/?url=https://indiepen.tech/example/
Indiepen là một giải pháp thân thiện với quyền riêng tư, nhẹ và dễ tiếp cận để nhúng các ví dụ về mã. Trên thực tế, chúng tôi không đặt bất kỳ cookie hoặc theo dõi nào!
Bắt đầu
Indiepen có thể xem trước mọi trang web tuân theo một quy ước rất đơn giản. Bạn cần cung cấp một trang web có cấu trúc tệp sau:
Mã:
.├── index.html├── main.js└── styles.cssMã được tạo trông như thế này:
Mã:
[URL]https://indiepen.tech/embed/?url=https%3A%2F%2Findiepen.tech%2Fexample%2F&tab=result[/URL]Under The Hood
Nghe có vẻ hơi lạ ngày nay nhưng chúng tôi chưa sử dụng bất kỳ khuôn khổ JavaScript nào như React hoặc Vue.js. Nó là HTML, CSS và JavaScript thuần túy với sự trợ giúp của Prism.js của Lea Verou để tô sáng cú pháp. Các thư viện đó rất hữu ích để triển khai và duy trì các ứng dụng web phức tạp nhưng trong trường hợp của chúng tôi, chúng tôi chỉ có ba tệp cần truy xuất và chuyển sang Prism.js.Ngoài ra, chúng tôi có ba nút ở góc trên bên phải để chuyển đổi giữa các chế độ xem HTML, CSS và JavaScript. Bằng cách giới thiệu một khuôn khổ UI, chúng tôi không thể cung cấp một giải pháp nhẹ với kích thước dưới 20 kb. Đối với chúng tôi, đó là một bài học bổ ích, rằng các thư viện UI rất quan trọng trong công việc kinh doanh hàng ngày của chúng tôi nhưng chúng tôi nên cân nhắc kỹ lưỡng và đừng quên JavaScript vanilla cũ tốt.
Lời kết
Indiepen là dự án nguồn mở đầu tiên của chúng tôi và chúng tôi rất vui khi được chia sẻ ý tưởng của mình với bạn. Chúng tôi rất muốn nhận được phản hồi và thảo luận về một trang web công bằng. Hãy liên hệ với tôi trên Twitter hoặc xem dự án trên GitHub.Cuối cùng nhưng không kém phần quan trọng, tôi muốn đề cập rằng Indiepen có phạm vi hạn chế và chúng tôi muốn giữ cho nó đơn giản ngay từ khâu thiết kế. Nếu bạn cần xử lý các ví dụ mã phức tạp hơn, bộ xử lý trước cho CSS hoặc JavaScript, hoặc bạn muốn hưởng lợi từ một nền tảng để chia sẻ ý tưởng của mình, thì hãy cân nhắc các giải pháp phức tạp hơn như CodePen hoặc JSFiddle.
Chúc mọi người viết mã vui vẻ!
Đọc thêm
- Chuyển đổi bằng điều khiển mới nhất của HTML
- Giới thiệu về hoạt ảnh cuộn CSS: Dòng thời gian tiến trình cuộn và xem
- Tạo số ngẫu nhiên duy nhất trong JavaScript bằng cách sử dụng Bộ
- Tiêu đề cố định và phần tử có chiều cao đầy đủ: Một sự kết hợp khó khăn
