Praktik HTML, CSS, Javascript Terbaik: Ekstensi Chrome

Untuk orang yang baru saja menyelesaikan Codecademy.

Ketika Anda mempelajari pemrograman, cara paling efisien untuk belajar mandiri adalah mengembangkan suatu produk. Pendekatan ini jauh lebih cepat daripada mengambil kursus pemrograman apa pun untuk meningkatkan keterampilan pemrograman Anda.

Biasanya, orang mulai belajar pemrograman dengan HTML, CSS, dan Javascript dasar dalam pemrograman web, namun, sebelum mereka mencapai bagian sisi server, sulit untuk membuat aplikasi yang bermakna.

Jadi, saya selalu berusaha meyakinkan para siswa seperti ini,

Akan menyenangkan jika Anda mulai mempelajari sisi server dan meluncurkan beberapa aplikasi. Tolong, jangan menyerah.

tetapi banyak siswa berhenti belajar pemrograman saat berada di tahap HTML dan CSS.

(Mungkin, memulai dengan HTML bukanlah ide yang baik untuk mendorong orang belajar pemrograman.)

Suatu hari, saya membuka browser Chrome saya untuk mulai bekerja. Kemudian saya menyadari bahwa saya sebenarnya telah menggunakan aplikasi terbaik yang dapat Anda bangun hanya dengan menggunakan HTML, CSS, dan Javascript.

Momentum

Singkatnya, jika Anda memasang ekstensi ini di Chrome, setiap kali Anda membuka tab baru akan ada pesan ucapan di atas gambar yang sangat keren. Jumlah unduhan sudah beberapa juta. Jika Anda belum pernah menggunakan ini, saya sangat menyarankan Anda untuk menginstalnya. Mungkin Anda hanya akan mengalami aplikasi ini selama 2 hingga 3 detik per tab baru, tetapi Anda dapat bersantai sejenak.

Mari kita coba mengkloning aplikasi ini!

Fase 1: Hal-hal untuk dipersiapkan

  • HTML
  • CSS
  • Javascript
  • Gambar yang bagus: dari unsplash
  • manifes.json (untuk dimuat dari Chrome)

Cara saya mengembangkan aplikasi dengan cepat adalah dengan berfokus pada saat ini, bukan masa depan. Tentu saja, penting untuk memiliki rencana konkret ketika itu bukan proyek solo Anda. Tapi! Masa hidup motivasi diri sangat singkat, jadi ketika Anda merasa ingin mengembangkan sesuatu, Anda lebih baik menyelesaikannya dengan sangat cepat. Jika Anda mulai memikirkan opsi lain yang akan meningkatkan produk Anda, Anda tidak akan pernah menyelesaikan proyek Anda.

Mari kita tetap sederhana.

Kami membuat satu situs web dengan satu gambar besar, satu pesan salam besar dan mungkin saat ini.

Temukan gambar

Jika Anda mengunjungi situs web Unsplash, Anda dapat menemukan banyak gambar keren yang bebas lisensi.

Karena saya di Norwegia, saya memutuskan untuk menggunakan gambar ini.
Terima kasih, Vidar Nordli-Mathisen. (Selalu penting untuk mengakui bakat mereka.)

Foto oleh Vidar Nordli-Mathisen di Unsplash

Buat proyek

Sederhana, Sederhana, Sederhana

Satu file HTML, satu CSS, satu Javascript, dan satu file manifes.

Hanya itu yang kami butuhkan.

Oke, ini versi pertama.

Ini adalah halaman web sederhana. Sekarang, untuk dimuat dari Chrome, Anda harus menambahkan file manifest.json berikut.

“Chrome_url_overrides” adalah properti paling penting dalam aplikasi ini.

Buka halaman ekstensiKlik tombol “Load unpacked”Klik tombol pilih di dalam folder proyek AndaPerpanjangan kami yang sederhana ...Setiap kali Anda membuka tab baru, itu akan menampilkan halaman web sederhana Anda.

Ini dia, kami baru saja menyelesaikan proyek pertama kami.

Anda dapat menggunakannya hanya dengan fungsi ini. Mungkin Anda dapat mengedit teks dengan sesuatu yang Anda ingin memotivasi diri Anda sendiri, seperti "tidak mungkin apa-apa", "lakukan saja", "kami adalah dunia", sesuatu-sesuatu. Atau mungkin Anda bisa meletakkan foto keluarga sebagai gantinya.

Tapi mari kita membuatnya lebih baik dari ini.

Fase 2: Hal-hal yang harus ditambahkan

  • Waktu saat ini
  • Fungsi penggantian nama
  • Fungsi penggantian gambar

Untuk memasukkan ketiga fitur baru itu, saya mengubah file HTML seperti di bawah ini.

CSS juga harus diubah.

Maka halaman baru akan seperti di bawah ini.

Oh, saya pikir itu adalah Momentum :)

Memperbarui manifest.json

Sekarang, kami akan menambahkan dua fitur.

Pertama-tama, kami akan menambahkan formulir input ke aplikasi ini sehingga orang-orang dapat menuliskan namanya di sana. Kami akan menambahkan formulir ini di bawah pesan "Halo, Jungwon Seo".

Ini jelek, mari kita perbaiki

Gaya baru untuk tag input.

Oke, jauh lebih baik.

Mulai sekarang, kita perlu memikirkan cara menyimpan informasi ini.

Kami akan menggunakan "cookie", tetapi Anda tidak dapat menggunakan "cookie" jika Anda hanya membuka file HTML dari Browser Chrome. Cobalah untuk menguji setelah memuat sebagai ekstensi Chrome.

Ada informasi yang salah tentang izin penyimpanan di pos sebelumnya. Anda tidak perlu ‘penyimpanan’ untuk menggunakan ‘Cookie’.

Juga, karena saya masih lebih suka menggunakan jQuery, mari kita tambahkan.

Saya mencoba menambahkan jQuery CDN, tapi ...

Jangan khawatir, kami hanya perlu menambahkan satu properti lagi di manifest.json.

Bagus, sekarang kami siap untuk kode dalam file script.js.

Yang ingin saya lakukan pertama adalah:

  1. Buat pengguna mengetikkan nama mereka.
  2. Simpan ke dalam Cookie (mari kita gunakan hanya kode yang paling populer)
  3. Fade out formulir input dan fade dalam pesan ucapan.

Sekarang, ini adalah pertama kalinya kami harus berpikir seperti pengembang sungguhan.

Kasus 1: Saat Anda membukanya pertama kali.
Kasus 2: Ketika Anda membukanya setelah Anda mengetik nama Anda.

Kita perlu memutuskan apa yang harus terlihat dan apa yang tidak seharusnya.

Kasus 1:
Waktu: Waktu saat ini
Pesan Salam: Siapa nama Anda?
Formulir input: Terlihat

Kasus 2:
Waktu: Waktu saat ini
Pesan Salam: Halo, !
Formulir input: Tidak terlihat

Dan, cara untuk membedakan kedua kasus ini adalah dengan memeriksa apakah cookie memiliki kunci 'nama pengguna'.

Dengan fungsi memperbarui waktu, script.js baru akan seperti di bawah ini.

Sebelum mengetik namaSetelah mengetik nama

Oke, sepertinya berhasil.

Tentu saja, ada beberapa hal yang masih perlu kita perbaiki, seperti efek transisi.

Tetapi, saya akan memberikannya kepada Anda.

Sekarang, apa lagi?

Kita perlu menambahkan fungsionalitas yang memungkinkan pengguna untuk mengubah gambar mereka.

Cabut API

Anda dapat dengan mudah mendaftarkan aplikasi Anda dan mendapatkan token dari halaman ini.

Untuk menggunakan Unsplash API, Anda harus mendaftarkan aplikasi Anda di halaman pengembangnya.

Dengan mengklik ‘Aplikasi Baru’ Anda dapat mendaftarkan diri Anda.

Untuk produk demo, Anda akan diizinkan untuk menggunakan hingga 50 permintaan per jam. Dan itu sudah cukup bagi kita.

Cukup isi formulir di bawah ini sesuai keinginan Anda.

Ketikkan nama apa saja

Jika Anda membuat aplikasi, Anda akan melihat bagian ‘Keys’ dari situs web yang dialihkan.

Saya telah menghapus aplikasi ini, jadi tidak ada gunanya mencoba.

Anda hanya perlu menyalin Key Kunci Akses ’dan menetapkan ke dalam variabel javascript Anda‘ ACCESS_KEY ’.

Kami akan menggunakan API pencarian.

Inilah skenarionya. Semua orang memiliki minat berbeda. Jadi saya ingin menanyakan minat mereka terlebih dahulu, dan kemudian saya akan mencari gambar itu menggunakan Unsplash API. Setelah itu, saya akan terus memperbarui gambar setiap 12 jam (kata kunci yang sama, gambar berbeda).

Jadi fungsi AJAX akan seperti di bawah ini.

Dan fungsi ini akan dipanggil setelah Anda mengetikkan minat Anda.

Kemudian, seperti yang Anda harapkan, kami harus menjadi pengembang lagi.

Kasus 1–1: Pertama kali
Kasus 1–2: Setelah nama
Kasus 2: Setelah Anda mengetikkan minat Anda
Kasus 3: 12 jam kemudian.

Oke, mari kita putuskan satu per satu.

Dalam Kasus 1–1, kita hanya perlu menyembunyikan semua bagian terkait gambar. Lewati ini.

Dalam Kasus 1–2, cukup tunjukkan formulir input untuk minat.

Dalam Kasus 2, panggil AJAX dan simpan informasi gambar.

Dalam Kasus 3, mari kita atur waktu kedaluwarsa menjadi 12 jam dan jika cookie kosong, hubungi permintaan AJAX lagi.

Kata kunci: London

Ya, itu berfungsi.

Fase 3: Sentuhan akhir

Tidak wajib memberi kredit pada fotografer, tetapi mengapa tidak?

Kami dapat menulis beberapa baris kode lagi dan memberi kredit nama dan halaman fotografer ke sisi kiri atas.

Sehingga kami dapat menggunakan informasi fotografer saat Anda memeriksa cookie untuk pertama kalinya.

Satu hal lagi, bagaimana jika seseorang ingin mengubah minat mereka?

Mari kita tambahkan fungsionalitas yang memungkinkan orang untuk mengetik ulang minat mereka.

Sebelum Anda mengklik tombol

Ini dia. Jika Anda mengklik tombol "Pilih minat baru", itu akan memicu untuk membuka formulir input tempat Anda mengetik minat Anda sebelumnya.

Setelah Anda mengklik tombol

Fase 4: Buat produk Anda sendiri.

Saya hanya ingin Anda mengalami proses dari awal hingga akhir. Namun, Anda harus mengembangkan ini sendiri untuk benar-benar menyerap keterampilan yang telah Anda pelajari.

Pasti ada beberapa fungsi yang menurut Anda akan baik untuk dimasukkan seperti cara memilih gambar acak. Atau Anda mungkin berpikir beberapa kode saya tidak efisien. Anda dapat meningkatkan versi produk yang sama dengan kode yang lebih baik.

Semoga beruntung dan jangan menyerah!

Versi lengkapnya dapat ditemukan di sini: https://github.com/thejungwon/MyChromeExtension

Kisah ini diterbitkan di Noteworthy, di mana 10.000 pembaca datang setiap hari untuk belajar tentang orang-orang & ide-ide membentuk produk yang kita sukai.

Ikuti publikasi kami untuk melihat lebih banyak produk & kisah desain yang ditampilkan oleh tim Jurnal.