Eng yaxshi HTML, CSS, Javascript amaliyoti: Chrome kengaytmasi

Codecademy-ni endigina tugatgan odamlar uchun.

Dasturlashni o'rganayotganda, o'z-o'zini o'rganishning eng samarali usuli bu mahsulotni ishlab chiqishdir. Ushbu yondashuv sizning dasturlash qobiliyatingizni oshirish uchun har qanday dasturlash kursidan ko'ra tezroq.

Odatda, veb-dasturlashda odamlar HTML, CSS va asosiy Javascript yordamida dasturlashni o'rganishni boshlaydilar, ammo server tomoniga etib borishdan oldin mazmunli dasturni amalga oshirish qiyin.

Shunday qilib, men har doim talabalarni shunga ishontirishga harakat qilardim,

Agar siz server tomonini o'rganishni boshlasangiz va qandaydir dasturni ishga tushirsangiz, juda qiziqarli bo'ladi. Iltimos, taslim bo'lmang.

ammo ko'pchilik talabalar HTML va CSS bosqichida dasturlashni o'rganishni to'xtatadilar.

(Ehtimol, HTML-dan boshlash odamlarni dasturlashni o'rganishga undash uchun yaxshi fikr emasdir.)

Bir kuni ish boshlash uchun Chrome brauzerimni ochdim. Shunda men faqat HTML, CSS va Javascript-dan foydalanib yaratishingiz mumkin bo'lgan eng yaxshi dasturdan foydalanayotganimni angladim.

Momom

Qisqacha aytganda, agar siz ushbu kengaytmani Chrome-ga o'rnatadigan bo'lsangiz, har safar yangi yorliqni ochganingizda juda ajoyib rasm orqali tabriklash xabari keladi. Yuklab olishlar soni allaqachon bir necha millionga teng. Agar siz buni ishlatmagan bo'lsangiz, uni o'rnatishingizni maslahat beraman. Ehtimol, siz ushbu ilovani har bir yangi yorliqda 2-3 soniya davomida sinab ko'rishingiz mumkin, ammo shu daqiqada dam olishingiz mumkin.

Ushbu ilovani klonlashga urinib ko'raylik!

1-bosqich: Tayyorlanadigan narsalar

  • HTML
  • CSS
  • Javascript
  • Chiroyli rasm: ajratilmagan joydan
  • manifest.json (Chrome-dan yuklab olinadi)

Ilovani tezda qanday ishlab chiqqanim, kelajakka emas, balki hozirgi kunga e'tibor qaratish orqali edi. Albatta, sizning shaxsiy loyihangiz bo'lmasa, aniq rejangiz bo'lishi juda muhimdir. Ammo! O'z-o'zini motivatsiya qilish muddati juda qisqa, shuning uchun biror narsani rivojlantirish kabi his qilsangiz, uni juda tez yakunlang. Agar siz mahsulotingizni yaxshilaydigan boshqa variantlar haqida o'ylashni boshlasangiz, o'zingizning loyihangizni hech qachon tugata olmaysiz.

Buni sodda saqlaylik.

Biz bitta katta rasm, bitta katta tabrik xati va ehtimol hozirgi vaqtda bitta veb-saytni yaratmoqdamiz.

Rasmni toping

Agar siz "Unsplash" veb-saytiga kirsangiz, u holda juda ko'p miqdorda litsenziyasiz rasmlarni topishingiz mumkin.

Men Norvegiyada bo'lganim uchun ushbu rasmdan foydalanishga qaror qildim.
Rahmat, Vidar Nordli-Matsisen. (Ularning iste'dodlarini tan olish har doim muhimdir.)

Vidar Nordli-Matsisen surati Unsplash-da

Loyihani amalga oshiring

Oddiy oddiy oddiy

Bitta HTML-fayl, bitta CSS, bitta Javascript va bitta manifest.

Bizga faqat shu kerak.

OK, bu birinchi versiya.

Bu oddiy veb-sahifa. Endi Chrome-dan yuklab olish uchun quyidagi manifest.json faylini qo'shish kerak.

"Chrome_url_overrides" bu ilova uchun eng muhim xususiyatdir.

Kengaytma sahifasiga o'tingLoyihaviy papkangiz ichidagi Bizning kamtarona kengaytmamiz ...Har safar yangi oynani ochganingizda, u oddiy veb-sahifangizni ko'rsatadi.

Siz boring, biz birinchi loyihamizni tugatdik.

Siz uni faqat ushbu funksiya bilan ishlatishingiz mumkin. Ehtimol, siz o'zingizni o'zingiz motivatsiya qilishni xohlagan narsaga, masalan, "mumkin emas hech narsa", "shunchaki buni amalga oshiring", "biz dunyomiz" kabi narsalar bilan tahrirlashingiz mumkin. Yoki buning o'rniga oilaviy rasmingizni qo'yishingiz mumkin.

Ammo buni bundan ham yaxshiroq qilaylik.

2-bosqich: qo'shilishi kerak bo'lgan narsalar

  • Joriy vaqt
  • Ismni o'zgartirish funktsiyasi
  • Tasvirni o'zgartirish funktsiyasi

Ushbu uchta yangi xususiyatni o'z ichiga olish uchun men HTML faylini quyidagicha o'zgartirdim.

CSS-ni ham o'zgartirish kerak.

Keyin yangi sahifa quyida bo'lgani kabi bo'ladi.

Oh, bu Momentum deb o'yladim :)

Manifest.json yangilanmoqda

Endi biz ikkita xususiyatni qo'shamiz.

Avvalo, biz ushbu ilovaga odamlar o'z nomlarini qo'yishlari uchun kirish shaklini qo'shamiz. Ushbu shaklni "Salom, Jungwon Seo" xabari ostida qo'shamiz.

Bu chirkin, tuzataylik

Kirish yorlig'i uchun yangi uslub.

Yaxshi.

Bundan buyon biz ushbu ma'lumotni qanday saqlash haqida o'ylashimiz kerak.

Biz "cookie" faylidan foydalanamiz, ammo HTML faylini Chrome brauzeridan ochsangiz, "cookie" dan foydalana olmaysiz. Chrome kengaytmasi sifatida yuklangandan keyin sinab ko'ring.

Oldingi yozuvda saqlash ruxsati haqida noto'g'ri ma'lumotlar mavjud edi. "Cookie" dan foydalanish uchun sizga "saqlash" ruxsatnomasi kerak emas.

Bundan tashqari, men hali ham jQuery-dan foydalanishni afzal ko'rganim sababli, uni qo'shib qo'yaylik.

Men jQuery CDN qo'shishga harakat qildim, ammo ...

Xavotir olmang, manifest.json-da yana bitta mulk qo'shishimiz kerak.

Yaxshi, endi biz script.js faylida kod kiritishga tayyormiz.

Avval nima qilishni xohlayman:

  1. Foydalanuvchilar o'z nomlarini kiriting.
  2. Cookie-ga saqlang (keling, eng mashhur koddan foydalanaylik)
  3. Kirish formasini yo'q qiling va tabriknomada yo'qoling.

Endi biz birinchi marta haqiqiy ishlab chiquvchi kabi o'ylashimiz kerak.

1-holat: Siz uni birinchi marta ochganingizda.
2-masala: Ismingizni yozgandan keyin uni ochganda.

Ko'rinadigan va nima bo'lmasligi kerakligini aniqlashimiz kerak.

1-masala:
Vaqt: joriy vaqt
Tabriknoma: ismingiz nima?
Kirish shakli: Ko'rinadi

2-masala:
Vaqt: joriy vaqt
Tabriknoma: salom, !
Kirish shakli: Ko'rinmas

Ikkala holatni farqlash usuli, cookie-da "foydalanuvchi nomi" kaliti bor-yo'qligini tekshirish.

Vaqtni yangilash funktsiyasi bilan yangi script.js quyidagicha bo'ladi.

Ismni kiritishdan oldinIsmni yozgandan keyin

OK, ishlayotganga o'xshaydi.

Albatta, biz hali ham yaxshilashimiz kerak bo'lgan ba'zi narsalar mavjud, masalan, o'tish effektlari.

Ammo, men sizga beraman.

Endi yana nima?

Foydalanuvchilarga rasmlarini o'zgartirishga imkon beradigan funktsiyani qo'shishimiz kerak.

Unsplash API

Siz ushbu ilovadan osongina ro'yxatdan o'tishingiz va belgi olishingiz mumkin.

Unsplash API-dan foydalanish uchun siz dasturni ularning ishlab chiquvchilar sahifasida ro'yxatdan o'tkazishingiz kerak.

Namoyish mahsuloti uchun siz soatiga 50 tagacha so'rovlardan foydalanishingiz mumkin. Va bu biz uchun etarli.

Faqat kerakli shaklni to'ldiring.

Har qanday nomni kiriting

Agar siz dasturni yaratsangiz, qayta yo'naltirilgan veb-saytdan "Tugmalar" qismini ko'rasiz.

Men ushbu dasturni o'chirib tashladim, shuning uchun sinab ko'rishning hojati yo'q.

Siz 'Kirish Kalitini' nusxalashingiz va javascript '' ACCESS_KEY 'o'zgaruvchisiga belgilashingiz kerak.

Biz qidiruv API-sidan foydalanamiz.

Mana senariy. Hamma odamlarning qiziqishlari turlicha. Shuning uchun men avval ularning qiziqishini so'ramoqchiman, keyin Unsplash API-dan foydalanib ushbu tasvirni qidiraman. Shundan so'ng, rasmni har 12 soatda yangilab turaman (bir xil kalit so'z, boshqa rasm).

Shunday qilib, AJAX funktsiyasi quyidagi kabi bo'ladi.

Va bu funktsiya sizning qiziqishingizni yozgandan so'ng chaqiriladi.

Keyin, kutganingizdek, yana dasturchi bo'lishimiz kerak.

Holat 1-1: Juda birinchi marta
Vaziyat 1-2: Nomdan keyin
2-holat: qiziqishingizni yozgandan so'ng
3-ish: 12 soatdan keyin.

Keling, birma-bir qaror qilaylik.

1-1 holatda biz rasm bilan bog'liq barcha qismlarni yashirishimiz kerak. Buni o'tkazib yuboring.

1-2 vaziyatda shunchaki qiziqish uchun kirish shakli ko'rsatilgan.

2-holatda, AJAX-ga qo'ng'iroq qiling va rasm haqidagi ma'lumotlarni saqlang.

3-holatda, amal qilish muddatini atigi 12 soatga belgilaymiz va agar cookie-fayllar bo'sh bo'lsa, yana AJAX so'rovini chaqiring.

Kalit so'z: London

Ha, ishlamoqda.

3-bosqich: Yakuniy ta'sir

Fotosuratchiga kredit berish shart emas, lekin nima uchun?

Biz yana bir nechta kod satrini yozishimiz va fotosuratchining ismini va sahifasini yuqori chap tomonda ta'kidlashimiz mumkin.

Shunday qilib, avvalgi izni tekshirayotganingizda fotosuratchining ma'lumotidan foydalanishimiz mumkin.

Yana bir narsa, agar kimdir ularning qiziqishini o'zgartirmoqchi bo'lsa-chi?

Odamlarga o'z qiziqishlarini qayta yozishga imkon beradigan ushbu funksiyani qo'shamiz.

Tugmani bosishdan oldin

Siz u yerga borasiz. Agar siz "Yangi qiziqishni tanlang" tugmachasini bossangiz, u ilgari qiziqishingizni kiritgan kirish formasini ochishga olib keladi.

Tugmani bosgandan so'ng

4-bosqich: O'zingizning mahsulotingizni qiling.

Men shunchaki jarayonni boshidan oxirigacha boshdan kechirishingizni istayman. Shunga qaramay, siz o'zingiz o'rgangan mahoratni o'zlashtirish uchun buni o'zingiz yaratishingiz kerak.

Tasodifiy rasmni tanlash usulini o'z ichiga olgan ba'zi funktsiyalar bo'lishi kerak. Yoki mening ba'zi kodlarim samarasiz deb o'ylaysiz. Xuddi shu mahsulotning versiyasini yanada yaxshi kod yordamida yaxshilashingiz mumkin.

Omad tilaymiz va taslim bo'lmang!

To'liq versiyasini bu erda topish mumkin: https://github.com/thejungwon/MyChromeExtension

Ushbu hikoya diqqatga sazovor joylarda nashr etilgan, unda har kuni biz sevadigan mahsulotni shakllantiradigan odamlar va g'oyalar haqida ma'lumot olish uchun 10000 o'quvchi tashrif buyuradi.

Jurnal jamoasi tomonidan taqdim etilgan mahsulot va dizayn haqida ko'proq ma'lumot olish uchun bizning nashrimizni kuzatib boring.