Amalan HTML, CSS, Amalan Javascript Terbaik: Sambungan Chrome

Bagi orang yang baru saja selesai Codecademy.

Apabila anda mengkaji pengaturcaraan, cara yang paling berkesan untuk belajar sendiri adalah mengembangkan produk. Pendekatan ini jauh lebih cepat daripada mengambil kursus pengaturcaraan untuk meningkatkan kemahiran pengaturcaraan anda.

Biasanya, orang mula belajar pengaturcaraan dengan HTML, CSS, dan Javascript asas dalam pengaturcaraan web, namun, sebelum mereka mencapai bahagian pelayan, sukar untuk membuat aplikasi yang bermakna.

Jadi, saya sentiasa cuba meyakinkan pelajar seperti ini,

Ia akan menjadi menyeronokkan jika anda mula belajar sisi pelayan dan melancarkan beberapa aplikasi. Tolong, jangan berputus asa.

tetapi ramai pelajar berhenti pengaturcaraan pembelajaran semasa di peringkat HTML dan CSS.

(Mungkin, bermula dengan HTML bukan idea yang baik untuk menggalakkan orang ramai mempelajari pengaturcaraan.)

Suatu hari, saya membuka pelayar Chrome saya untuk memulakan kerja. Kemudian saya menyedari bahawa saya sebenarnya telah menggunakan aplikasi terbaik yang anda boleh bina menggunakan hanya HTML, CSS, dan Javascript.

Momentum

Untuk ringkas, jika anda memasang pelanjutan ini pada Chrome, setiap kali anda membuka tab baru akan ada mesej ucapan pada gambar super sejuk. Jumlah muat turun sudah beberapa juta. Sekiranya anda tidak menggunakannya, saya sangat mengesyorkan anda memasangnya. Mungkin anda hanya akan mengalami aplikasi ini selama 2 hingga 3 saat setiap tab baru, tetapi anda boleh berehat untuk saat itu.

Mari cuba mengklon semula aplikasi ini!

Fasa 1: Perkara yang perlu disediakan

  • HTML
  • CSS
  • Javascript
  • Gambar bagus: dari unsplash
  • manifest.json (akan dimuatkan dari Chrome)

Cara saya mengembangkan aplikasi dengan cepat adalah dengan memberi tumpuan kepada masa kini, bukan masa depan. Sudah tentu, penting untuk mempunyai rancangan konkrit apabila ia bukan projek solo anda. Tetapi! Hayat motivasi seumur hidup sangat pendek, jadi apabila anda merasa seperti membangun sesuatu, anda lebih baik menyelesaikannya dengan cepat. Jika anda mula memikirkan pilihan lain yang akan meningkatkan produk anda, anda tidak akan dapat menyelesaikan projek anda.

Mari kita simpannya mudah.

Kami membuat satu laman web dengan satu gambar besar, satu mesej ucapan yang besar dan mungkin masa kini.

Cari gambar

Jika anda pergi ke laman web Unsplash, anda dapat menemui banyak imej tanpa lesen yang sejuk.

Kerana saya di Norway, saya memutuskan untuk menggunakan gambar ini.
Terima kasih, Vidar Nordli-Mathisen. (Ia sentiasa penting untuk mengakui bakat mereka.)

Foto oleh Vidar Nordli-Mathisen pada Unsplash

Buat projek

Mudah Mudah Mudah

Satu fail HTML, satu CSS, satu Javascript, dan satu fail nyata.

Itulah yang kita perlukan.

Okay, ini adalah versi pertama.

Ini adalah laman web yang mudah. Sekarang, untuk dimuatkan dari Chrome, anda perlu menambah fail manifest.json berikut.

"Chrome_url_overrides" adalah harta yang paling penting dalam aplikasi ini.

Pergi ke halaman sambunganKlik butang Klik butang pilih di dalam folder projek andaSambungan merendah diri kami ...Setiap kali anda membuka tab baru, ia akan menunjukkan halaman web mudah anda.

Di sana anda pergi, kami baru sahaja selesai projek pertama kami.

Anda boleh menggunakannya dengan hanya fungsi ini. Mungkin anda boleh mengedit teks untuk sesuatu yang anda ingin memotivasi diri anda, seperti "mustahil adalah apa-apa", "hanya melakukannya", "kita dunia", sesuatu-sesuatu. Atau mungkin anda boleh meletakkan foto keluarga anda sebaliknya.

Tetapi mari kita membuatnya lebih baik daripada ini.

Fasa 2: Perkara yang perlu ditambah

  • Masa semasa
  • Nama fungsi berubah
  • Fungsi menukar gambar

Untuk memasukkan tiga ciri baru ini, saya menukar fail HTML seperti di bawah.

CSS juga harus ditukar.

Kemudian halaman baru akan seperti di bawah.

Oh, saya fikir ia adalah Momentum :)

Mengemas kini manifest.json

Sekarang, kami akan menambah dua ciri.

Pertama sekali, kami akan menambah borang input untuk aplikasi ini supaya orang boleh meletakkan nama mereka di atasnya. Kami akan menambah borang ini di bawah mesej "Hello, Jungwon Seo".

Ini hodoh, mari kita selesaikannya

Gaya baru untuk tag input.

Okay, lebih baik.

Mulai sekarang, kita perlu memikirkan bagaimana untuk menyimpan maklumat ini.

Kami akan menggunakan "cookie", tetapi anda tidak boleh menggunakan "cookie" jika anda hanya membuka fail HTML dari Browser Chrome. Cuba untuk menguji selepas memuatkan sebagai sambungan Chrome.

Terdapat maklumat yang salah mengenai kebenaran storan di jawatan terdahulu. Anda tidak memerlukan kebenaran 'storan' untuk menggunakan 'Cookie'.

Juga, kerana saya masih lebih suka menggunakan jQuery, mari tambahnya.

Saya cuba menambah CDN jQuery, tetapi ...

Jangan bimbang, kita hanya perlu menambah satu lagi harta dalam manifest.json.

Baiklah, sekarang kami bersedia untuk memasukkan kod script.js.

Apa yang saya mahu lakukan adalah:

  1. Jadikan pengguna menaip nama mereka.
  2. Simpan ke dalam Cookie (mari kita gunakan kod yang paling popular)
  3. Pudar borang input dan pudar dalam mesej ucapan.

Kini, ini adalah kali pertama kita perlu berfikir seperti pemaju sebenar.

Kes 1: Apabila anda membukanya buat kali pertama.
Kes 2: Apabila anda membukanya selepas anda menaip nama anda.

Kita perlu membuat keputusan apa yang harus dilihat dan apa yang tidak sepatutnya.

Kes 1:
Masa: Masa semasa
Mesej ucapan: Apakah nama anda?
Borang input: Boleh dilihat

Kes 2:
Masa: Masa semasa
Mesej ucapan: Hello, !
Borang input: Tidak dapat dilihat

Dan, cara membezakan kedua-dua perkara ini adalah untuk memeriksa sama ada cookie mempunyai nama pengguna utama.

Dengan fungsi mengemas kini masa, script.js baru akan seperti di bawah.

Sebelum menaip namaSelepas menaip nama itu

Okay, nampaknya berfungsi.

Sudah tentu, ada beberapa perkara yang masih perlu diperbaiki, seperti kesan peralihan.

Tetapi, saya akan memberikannya kepada anda.

Sekarang, apa lagi?

Kita perlu menambah fungsi yang membolehkan pengguna menukar gambar mereka.

Unsplash API

Anda boleh mendaftarkan aplikasinya dengan mudah dan mendapatkan token dari halaman ini.

Untuk menggunakan API Unsplash, anda perlu mendaftarkan permohonan anda di halaman pemaju mereka.

Dengan mengklik 'Aplikasi Baru', anda boleh mendaftarkan anda.

Untuk produk demo, anda dibenarkan menggunakan sehingga 50 permintaan sejam. Dan itu cukup untuk kita.

Hanya isi borang di bawah tetapi anda mahu.

Taip mana-mana nama

Jika anda membuat permohonan itu, anda akan melihat bahagian 'Kunci' dari laman web yang diarahkan semula.

Saya telah memadam aplikasi ini, jadi tidak ada gunanya untuk cuba.

Anda hanya perlu menyalin 'Access Key' dan masukkan ke dalam pembolehubah javascript anda 'ACCESS_KEY'.

Kami akan menggunakan API carian.

Inilah senario. Semua orang mempunyai minat yang berbeza. Jadi saya ingin bertanya minat mereka terlebih dahulu, dan kemudian saya akan mencari imej itu menggunakan API Unsplash. Selepas itu, saya akan terus mengemas kini imej setiap 12 jam (kata kunci yang sama, gambar yang berbeza).

Jadi fungsi AJAX akan seperti di bawah.

Dan fungsi ini akan dipanggil selepas anda menaip minat anda.

Kemudian, seperti yang anda jangkakan, kita perlu menjadi pemaju lagi.

Kes 1-1: Sangat pertama kali
Kes 1-2: Selepas nama itu
Kes 2: Selepas anda menaip minat anda
Kes 3: 12 jam kemudian.

Baiklah, mari kita tentukan satu demi satu.

Dalam Kes 1-1, kita hanya perlu menyembunyikan semua bahagian berkaitan imej. Langkau ini.

Dalam Kes 1-2, hanya menunjukkan borang input untuk kepentingan tersebut.

Dalam Kes 2, panggil AJAX dan simpan maklumat imej.

Dalam Kes 3, mari kita tetapkan masa tamat tempoh hingga 12 jam dan jika kuki kosong, hubungi permintaan AJAX lagi.

Kata kunci: London

Ya, ia berfungsi.

Fasa 3: Sentuhan akhir

Ia tidak wajib untuk memberi kredit kepada jurugambar, tetapi mengapa tidak?

Kita boleh menulis beberapa baris lagi kod dan kredit nama dan halaman jurugambar ke bahagian kiri atas.

Supaya kami boleh menggunakan maklumat jurugambar apabila anda menyemak cookie untuk kali pertama.

Satu lagi perkara, bagaimana jika seseorang mahu menukar minat mereka?

Mari tambahkan fungsi yang membolehkan orang menaip semula minat mereka.

Sebelum anda mengklik butang

Itupun dia. Jika anda mengklik butang "Memilih minat baru", ia akan mencetuskan untuk membuka borang input di mana anda menaip minat anda sebelum ini.

Selepas anda mengklik butang

Fasa 4: Buat produk anda sendiri.

Saya hanya mahu anda mengalami proses ini dari awal hingga akhir. Namun, anda perlu membangunkan ini dengan sendirinya untuk benar-benar menyerap kemahiran yang anda pelajari.

Terdapat beberapa fungsi yang anda fikir akan menjadi baik untuk dimasukkan seperti cara untuk memilih gambar rawak. Atau anda mungkin berfikir beberapa kod saya tidak cekap. Anda boleh meningkatkan versi produk yang sama dengan kod yang lebih baik.

Nasib baik dan jangan berputus asa!

Versi lengkap boleh didapati di sini: https://github.com/thejungwon/MyChromeExtension

Kisah ini diterbitkan dalam Penting, di mana 10,000+ pembaca datang setiap hari untuk belajar tentang orang-orang & idea-idea membentuk produk yang kita cintai.

Ikuti penerbitan kami untuk melihat lebih banyak cerita produk & reka bentuk yang diketengahkan oleh pasukan Jurnal.