sử dụng chrome extension web maker

Viết code trên Chrome sử dụng Chrome Extension Web Maker6 phút đọc

Bạn đang cần một trình soạn thảo code đầy đủ chức năng mà không cần phải thiết lập quá nhiều thứ, đồng thời lại vô cùng cơ động và tiện dụng ư.

Bài viết hôm nay sẽ hướng dẫn bạn sử dụng Chrome Extension Web Maker, một trình soạn thảo code hoàn hảo ngay trên trình duyệt Chrome.

Chrome Extension Web Maker là gì ?

sử dụng chrome extension web maker

Web Maker là một extension của trình duyệt Chrome, nó giúp bạn soạn thảo code HTML, CSS và Javascript ngay trên trình duyệt Chrome.

Nếu ai yêu thích và thường xuyên sử dụng Codepen mà gặp điều kiện mạng yếu hay không có kết nối mạng (ví dụ khi đi tàu điện ngầm như mình) thì có thể sử dụng Chrome Extension Web Maker để soạn thảo code rất tiện lợi.

Lợi ích khi sử dụng Chrome Extension Web Maker

Sử dụng Chrome Extension Web Maker sẽ mang lại cho bạn những trải nghiệm riêng.Trong quá trình sử dụng nó mình có nhận thấy vài điểm hay ho sau :

  • Sử dụng bình thường mà không cần kết nối internet
  • Giao diện đẹp, linh hoạt y như Codepen
  • Có thể  Live Preview sự thay đổi của code
  • Hỗ trợ nhiều thư viện CSS và Javascript phổ biến
  • Đưa code đã soạn thảo lên Codepen dễ dàng
  • Lưu code về máy nhanh chóng

Chức năng cơ bản của Chrome Extension Web Maker

Làm quen với giao diện

sử dụng chrome extension web maker ảnh 2

Sau khi tải Chrome Extension Web Maker về máy và mở lên bạn sẽ thấy một tab trình duyệt mới được mở ra.Giao diện có như trên là mình đã có tùy chỉnh qua một chút lên sẽ khác so với khi bạn mở Web Maker lên lần đầu tiên.

Ở góc trên cùng bên phải là nơi bạn có thể thay đổi tên dự án hay nói đúng hơn là tên file sẽ xuất ra sau này.Phía trên cùng bên phải bao gồm nhiều nút :

  • Add Library : thêm thư viện CSS / Javascript
  • +New : tạo mới một dự án mới
  • Save : nhấn để lưu lại file code đã soạn thảo
  • Open : mở hoặc xuất file dự án bất kì đã lưu trên hệ thống
  • Login / Signup : đăng nhập vào tài khoản

Phần màn hình màu đen ở giữa được chia làm 3 cột : HTML, CSS, Javascript.Đây là nơi bạn nhập code mà bạn muốn.

Phần màu trắng ngay bên dưới là nơi hiển thị kết quả của code bạn đã soạn thảo phía bên trên.

Phía dưới cùng bên phải nơi mình khoanh đỏ tính từ trái sang phải gồm các chức năng :

  • Tải code đã soạn thảo về máy để sử dụng (icon hình mũi tên cắm xuống dưới)
  • Đưa toàn bộ code lên Codepen để chia sẻ cho mọi người (icon codepen)
  • Chụp ảnh kết quả màn hình (icon hình máy ảnh)
  • Tiếp theo là các tùy chỉnh chế độ hiển thị màn hình soạn thảo code, bạn hãy nhấn vào thử để xem kết quả.
  • Xem thông báo những cập nhật của Web Maker (icon hình quả chuông)
  • Tùy chỉnh chức năng của Web Maker (icon hình bánh xe)

Thêm thư viện JS / CSS

sử dụng chrome extension web maker ảnh 3

Bạn nhấn vào nút Add Library thì một popup sẽ xuất hiện để bạn lựa chọn thư viện JS / CSS mà bạn muốn sử dụng.Đây toàn là những thư viện JS/CSS phổ biến nên sẽ rất tiện cho bạn nào thường xuyên làm việc với các thư viện kiểu này.

Hỗ trợ nhiều nhiều Preprocessors

sử dụng chrome extension web maker ảnh 4

Với mỗi ngôn ngữ sẽ hỗ trợ nhiều kiểu Preprocessors khác nhau.Ví dụ như với CSS sẽ hỗ trợ Preprocessors SCSS, SASS và biên dịch luôn mà không cần qua bất kì phần mềm trung gian nào khác.

Tùy chỉnh giao diện soạn thảo

sử dụng chrome extension web maker ảnh 5

Trong phần Settings bạn có thể tùy chỉnh rất nhiều thứ hay ho như theme, kích cỡ chữ..vv.Bạn hãy tìm hiểu rồi thay đổi giao diện Web Maker theo ý mình nhé.

Khi nào nên sử dụng Chrome Extension Web Maker ?

Trường học / trung tâm đào tạo tin học

Học code ở trường học hay các trung tâm đào tạo tin học thì việc vừa code thực hành vừa so sánh kết quả với thầy cô bạn bè là rất quan trọng.Để tránh những lỗi phát sinh do sử dụng trình soạn thảo khác nhau hay điều kiện mạng không đảm bảo thì sử dụng Chrome Extension Web Maker là lựa chọn tốt nhất.

Thực tế thì một số trung tâm đào tạo tin học ở Nhật mà mình tham dự cũng sử dụng Web Maker để hướng dẫn giảng dạy cho học viên của mình.

Tự học code ở nhà

Khác với những trình soạn thảo như Brackets hay Visual Studio Code bạn có thể sử dụng Chrome Extension Web Maker để soạn thảo code mà không cần thiết lập ban đầu như khai báo các thư viện, các thẻ cố định phần đầu cuối website.

Hơn thế nữa bạn còn có thể lưu trữ code đã soạn thảo lên Codepen chỉ bằng một cái nhấp chuột mà thôi.Quá tiện lợi phải không nào.

Kết luận

Sử dụng Chrome Extension Web Maker hoàn toàn miễn phí và vô cùng đơn giản.Nhưng hiệu quả mà nó mang lại cho những ai sử dụng nó là rất lớn.

Nếu bạn biết tận dụng nó vào công việc thì bạn sẽ tiết kiệm được rất nhiều thờ gian và công sức.

Đến lượt bạn

Để nhanh chóng thành thạo và nắm vững các kiến thức trong bài viết bạn nên thực hành ngay khi có thời gian rảnh.Bạn có thể tham khảo gợi ý dưới đây.

  • Cài đặt Chrome Extension Web Maker
  • Soạn thảo code và xem kết quả ở chế độ Live Preview
  • Lưu trữ code về máy và trên Codepen
  • Tùy chỉnh settings để có giao diện ưng ý nhất
Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x