Thực hành HTML, CSS, Javascript tốt nhất: Tiện ích mở rộng Chrome

Đối với những người vừa hoàn thành Codecademy.

Khi bạn học lập trình, cách hiệu quả nhất để tự học là phát triển một sản phẩm. Cách tiếp cận này nhanh hơn nhiều so với việc tham gia bất kỳ khóa học lập trình nào để cải thiện kỹ năng lập trình của bạn.

Thông thường, mọi người bắt đầu học lập trình với HTML, CSS và Javascript cơ bản trong lập trình web, tuy nhiên, trước khi họ tiếp cận với phần phía máy chủ, điều đó rất khó để tạo ra một ứng dụng có ý nghĩa.

Vì vậy, tôi luôn cố gắng thuyết phục các sinh viên như thế này,

Sẽ rất vui nếu bạn bắt đầu học phía máy chủ và khởi chạy một số ứng dụng. Làm ơn, đừng bỏ cuộc.

nhưng nhiều sinh viên ngừng học lập trình trong khi ở giai đoạn HTML và CSS.

(Có lẽ, bắt đầu với HTML không phải là một ý tưởng hay để khuyến khích mọi người học lập trình.)

Một ngày nọ, tôi mở trình duyệt Chrome của mình để bắt đầu công việc. Sau đó, tôi nhận ra rằng tôi thực sự đã sử dụng ứng dụng tốt nhất mà bạn có thể xây dựng chỉ bằng HTML, CSS và Javascript.

Quán tính

Nói ngắn gọn, nếu bạn cài đặt tiện ích mở rộng này trên Chrome, mỗi khi bạn mở một tab mới sẽ có một thông điệp chào mừng qua một bức ảnh cực hay. Số lượng tải xuống đã là vài triệu. Nếu bạn đã sử dụng điều này, tôi khuyên bạn nên cài đặt nó. Có thể bạn chỉ sẽ trải nghiệm ứng dụng này trong 2 đến 3 giây cho mỗi tab mới, nhưng bạn có thể thư giãn trong giây lát đó.

Hãy cùng cố gắng sao chép ứng dụng này!

Giai đoạn 1: Những điều cần chuẩn bị

  • HTML
  • CSS
  • Javascript
  • Hình ảnh đẹp: từ unplash
  • manifest.json (sẽ được tải từ Chrome)

Cách tôi phát triển ứng dụng một cách nhanh chóng là bằng cách tập trung vào hiện tại, không phải tương lai. Tất nhiên, nó rất quan trọng để có một kế hoạch cụ thể khi nó không phải là dự án solo của bạn. Nhưng! Thời gian tự tạo động lực rất ngắn, vì vậy khi bạn cảm thấy muốn phát triển một thứ gì đó, bạn nên hoàn thành nó rất nhanh. Nếu bạn bắt đầu nghĩ về các lựa chọn khác sẽ cải thiện sản phẩm của mình, bạn sẽ không bao giờ hoàn thành dự án của mình.

Hãy để giữ cho nó đơn giản.

Chúng tôi làm một trang web với một hình ảnh lớn, một thông điệp chúc mừng lớn và có thể là thời điểm hiện tại.

Tìm một bức tranh

Nếu bạn truy cập trang web Bapt, bạn có thể tìm thấy vô số hình ảnh không có giấy phép thú vị.

Kể từ khi tôi ở Na Uy, tôi quyết định sử dụng bức tranh này.
Cảm ơn, Vidar Nordli-Mathisen. (Nó luôn luôn quan trọng để thừa nhận tài năng của họ.)

Ảnh của Vidar Nordli-Mathisen trên Bapt

Lập dự án

Đơn giản đơn giản Đơn giản

Một tệp HTML, một CSS, một Javascript và một tệp kê khai.

Đó là tất cả những gì chúng ta cần.

Được rồi, đây là phiên bản đầu tiên.

Đây là một trang web đơn giản. Bây giờ, để được tải từ Chrome, bạn phải thêm tệp manifest.json sau đây.

Chrome chrome_url_overrides 'là tài sản quan trọng nhất trong ứng dụng này.

Chuyển đến trang mở rộngNhấp vào Tải Tải nút UnpackedNhấn vào nút chọn trong thư mục dự án của bạnPhần mở rộng khiêm tốn của chúng tôiMỗi khi bạn mở tab mới, nó sẽ hiển thị trang web đơn giản của bạn.

Đến đó đi, chúng tôi vừa hoàn thành dự án đầu tiên.

Bạn có thể sử dụng nó chỉ với chức năng này. Có lẽ bạn có thể chỉnh sửa văn bản thành thứ gì đó mà bạn muốn thúc đẩy bản thân, chẳng hạn như không thể là gì, vì vậy, hãy làm điều đó. Hoặc có thể bạn có thể đặt ảnh gia đình của bạn để thay thế.

Nhưng hãy để Lừa làm cho nó tốt hơn thế này.

Giai đoạn 2: Những điều cần thêm vào

  • Thời điểm hiện tại
  • Chức năng thay đổi tên
  • Chức năng thay đổi hình ảnh

Để bao gồm ba tính năng mới này, tôi đã thay đổi tệp HTML như bên dưới.

CSS cũng nên được thay đổi.

Sau đó, trang mới sẽ như dưới đây.

Ồ, tôi nghĩ đó là Động lực :)

Đang cập nhật manifest.json

Bây giờ, chúng tôi sẽ thêm hai tính năng.

Trước hết, chúng tôi sẽ thêm một hình thức nhập vào ứng dụng này để mọi người có thể đặt tên của họ trên đó. Chúng tôi sẽ thêm biểu mẫu này dưới thông điệp Hello Hello, Jungwon Seo.

Điều này thật xấu xí, hãy để sửa chữa nó

Kiểu mới cho thẻ đầu vào.

Được rồi, tốt hơn nhiều.

Từ bây giờ, chúng ta cần suy nghĩ về cách lưu trữ thông tin này.

Chúng tôi sẽ sử dụng cookie cookie, nhưng bạn có thể sử dụng cookie cookie nếu bạn chỉ mở tệp HTML từ Trình duyệt Chrome. Hãy thử kiểm tra sau khi tải dưới dạng tiện ích mở rộng của Chrome.

Có thông tin không chính xác về sự cho phép lưu trữ trong bài viết trước. Bạn không cần phải có quyền permission lưu trữ để sử dụng ’Cookie.

Ngoài ra, vì tôi vẫn thích sử dụng jQuery, hãy để thêm nó.

Tôi đã cố gắng thêm jQuery CDN, nhưng

Đừng lo lắng, chúng ta chỉ cần thêm một thuộc tính nữa trong manifest.json.

Tốt, bây giờ chúng tôi đã sẵn sàng để mã trong tệp script.js.

Điều tôi muốn làm đầu tiên là:

  1. Làm cho người dùng gõ tên của họ.
  2. Lưu trữ vào Cookie (hãy để sử dụng chỉ mã phổ biến nhất)
  3. Làm mờ dần hình thức nhập và mờ dần trong thông điệp chào mừng.

Bây giờ, đây là lần đầu tiên chúng ta phải suy nghĩ như một nhà phát triển thực sự.

Trường hợp 1: Khi bạn mở nó lần đầu tiên.
Trường hợp 2: Khi bạn mở nó sau khi bạn nhập tên của bạn.

Chúng ta cần phải quyết định những gì nên được nhìn thấy và những gì nên được.

Trường hợp 1:
Thời gian: Thời gian hiện tại
Tin nhắn chúc mừng: Tên bạn là gì?
Hình thức nhập: Hiển thị

Trường hợp 2:
Thời gian: Thời gian hiện tại
Tin nhắn chúc mừng: Xin chào, !
Hình thức nhập: Vô hình

Và, cách để phân biệt hai trường hợp này là kiểm tra xem cookie có khóa ‘tên người dùng hay không.

Với chức năng cập nhật thời gian, script.js mới sẽ như dưới đây.

Trước khi gõ tênSau khi gõ tên

Được rồi, nó dường như đang làm việc.

Tất nhiên, có một số điều chúng ta vẫn cần cải thiện, chẳng hạn như hiệu ứng chuyển tiếp.

Nhưng, tôi sẽ đưa nó cho bạn.

Bây giờ, những gì khác?

Chúng tôi cần thêm chức năng cho phép người dùng thay đổi hình ảnh của họ.

API API

Bạn có thể dễ dàng đăng ký ứng dụng của mình và nhận mã thông báo từ trang này.

Để sử dụng API API, bạn phải đăng ký ứng dụng của mình trong trang nhà phát triển của họ.

Bằng cách nhấp vào ’Ứng dụng mới, bạn có thể đăng ký.

Đối với sản phẩm demo, bạn sẽ được phép sử dụng tối đa 50 yêu cầu mỗi giờ. Và điều đó đủ cho chúng tôi.

Chỉ cần điền vào mẫu dưới đây theo cách bạn muốn.

Nhập bất kỳ tên nào

Nếu bạn tạo ứng dụng, bạn sẽ thấy phần ‘Chìa khóa từ trang web được chuyển hướng.

Tôi đã xóa ứng dụng này, vì vậy không có điểm nào để thử.

Bạn chỉ cần sao chép ‘Truy cập khóa khóa và gán vào biến javascript của bạn‘ ACCESS_KEY hồi.

Chúng tôi sẽ sử dụng API tìm kiếm.

Đây là kịch bản. Tất cả mọi người có lợi ích khác nhau. Vì vậy, tôi muốn hỏi sự quan tâm của họ trước, và sau đó tôi sẽ tìm kiếm hình ảnh đó bằng API API. Sau đó, tôi sẽ tiếp tục cập nhật hình ảnh cứ sau 12 giờ (cùng một từ khóa, hình ảnh khác nhau).

Vì vậy, hàm AJAX sẽ như dưới đây.

Và chức năng này sẽ được gọi sau khi bạn nhập sở thích của mình.

Sau đó, như bạn có thể mong đợi, chúng ta cần trở thành một nhà phát triển một lần nữa.

Trường hợp 1 Hậu1: Lần đầu tiên
Trường hợp 1 Tiếng2: Sau tên
Trường hợp 2: Sau khi bạn nhập lãi
Trường hợp 3: 12 giờ sau.

Được rồi, hãy để quyết định từng người một.

Trong trường hợp 1 Cảnh1, chúng ta chỉ cần ẩn tất cả các phần liên quan đến hình ảnh. Bỏ qua điều này.

Trong trường hợp 1 Lời2, chỉ hiển thị biểu mẫu đầu vào cho sự quan tâm.

Trong trường hợp 2, hãy gọi AJAX và lưu thông tin hình ảnh.

Trong trường hợp 3, hãy để Lôi chỉ đặt thời gian hết hạn thành 12 giờ và nếu cookie trống, hãy gọi lại yêu cầu AJAX.

Từ khóa: Luân Đôn

Vâng, nó làm việc.

Giai đoạn 3: Chạm cuối cùng

Nó không bắt buộc phải ghi có cho các nhiếp ảnh gia, nhưng tại sao không?

Chúng ta có thể viết thêm một vài dòng mã và ghi tên và trang của nhiếp ảnh gia vào phía trên bên trái.

Vì vậy, chúng tôi có thể sử dụng thông tin nhiếp ảnh gia khi bạn kiểm tra cookie lần đầu tiên.

Một điều nữa, nếu ai đó muốn có thể thay đổi sở thích của họ thì sao?

Hãy để thêm vào chức năng đó cho phép mọi người nhập lại sở thích của họ.

Trước khi bạn nhấp vào nút

Có bạn đi. Nếu bạn nhấp vào nút, hãy chọn một sở thích mới, nó sẽ kích hoạt để mở biểu mẫu nhập vào nơi bạn đã nhập sở thích trước đó.

Sau khi bạn nhấp vào nút

Giai đoạn 4: Tạo sản phẩm của riêng bạn.

Tôi chỉ muốn bạn trải nghiệm quá trình từ đầu đến cuối. Tuy nhiên, bạn cần phải tự mình phát triển điều này để thực sự tiếp thu kỹ năng mà bạn đã học được.

Phải có một số chức năng mà bạn nghĩ sẽ tốt nếu đưa vào như cách chọn ảnh ngẫu nhiên. Hoặc bạn có thể nghĩ rằng một số mã của tôi không hiệu quả. Bạn có thể cải thiện phiên bản của cùng một sản phẩm với mã tốt hơn.

Chúc may mắn và đừng bỏ cuộc!

Phiên bản hoàn chỉnh có thể được tìm thấy ở đây: https://github.com/thejungwon/MyChromExtension

Câu chuyện này được xuất bản trên Đáng chú ý, nơi hơn 10.000 độc giả đến mỗi ngày để tìm hiểu về con người & ý tưởng định hình các sản phẩm chúng tôi yêu thích.

Theo dõi ấn phẩm của chúng tôi để xem thêm các câu chuyện về sản phẩm và thiết kế được giới thiệu bởi nhóm Tạp chí.