Најбоље ХТМЛ, ЦСС, Јавасцрипт пракса: Цхроме проширење

За људе који су управо завршили Цодецадеми.

Када проучавате програмирање, најефикаснији начин само-учења је развој производа. Овај приступ је много бржи од похађања било којег курса програмирања ради побољшања ваших вештина програмирања.

Обично људи почну да уче програмирање помоћу ХТМЛ, ЦСС и основног Јавасцрипта у веб програмирању, међутим, пре него што дођу до дела сервера, тешко је направити смислену апликацију.

Увек сам покушавао да убедим студенте као што је овај,

Биће забавно ако почнете да учите на страни сервера и покренете неку апликацију. Молим вас, не одустајте.

али многи студенти престају да уче програмирање док су у фази ХТМЛ и ЦСС.

(Можда започињање ХТМЛ-ом није добра идеја како би се охрабрили људи да студирају програмирање.)

Једног дана отворио сам свој Цхроме претраживач како бих почео са радом. Тада сам схватио да заправо користим најбољу апликацију коју можете да направите користећи само ХТМЛ, ЦСС и Јавасцрипт.

Моментум

Да будем кратак, ако инсталирате ово проширење на Цхроме, сваки пут када отворите нову картицу, појавит ће се честитка преко супер цоол слике. Број преузимања је већ неколико милиона. Ако то нисте користили, топло препоручујем да га инсталирате. Можда ћете доживети ову апликацију само 2 до 3 секунде по новој картици, али можете се опустити за тај мали тренутак.

Покушајмо да клонирамо ову апликацију!

Фаза 1: Ствари које треба припремити

  • ХТМЛ
  • ЦСС
  • Јавасцрипт
  • Лепа слика: од непласка
  • манифест.јсон (учитава се са Цхроме-а)

Начин на који сам брзо развио апликацију био је фокусирањем на садашњост, а не на будућност. Наравно, важно је имати конкретан план када то није ваш соло пројекат. Али! Животни начин самомотивације је врло кратак, па када се осећате као да развијате нешто, боље је да то брзо завршите. Ако почнете да размишљате о другим опцијама које ће побољшати ваш производ, никада нећете завршити свој пројекат.

Нека буде једноставно.

Правимо једну веб страницу са једном великом сликом, једном великом поздравном поруком и можда тренутним временом.

Пронађите слику

Ако одете на веб локацију Унспласх, можете наћи тоне сјајних слика без лиценци.

Пошто сам у Норвешкој, одлучио сам да користим ову слику.
Хвала, Видар Нордли-Матхисен. (Увек је важно признати њихов таленат.)

Фотографија Видар Нордли-Матхисен на Унспласх-у

Направите пројекат

Једноставно Једноставно Једноставно

Једна ХТМЛ датотека, један ЦСС, један Јавасцрипт и једна датотека манифеста.

То је све што нам треба.

Ок, ово је прва верзија.

Ово је једноставна веб страница. Сада, да бисте се учитали са Цхроме-а, морате да додате следећу датотеку манифест.јсон.

„Цхроме_урл_оверридес“ је најважнија особина у овој апликацији.

Идите на страницу са проширењимаКликните на дугме „Учитај непакирано“Притисните дугме за одабир унутар фасцикле вашег пројектаНаше скромно проширење ...Сваки пут када отворите нову картицу, она ће приказати вашу једноставну веб страницу.

Управо смо завршили свој први пројекат.

Можете га користити само са овом функцијом. Можда можете да уредите текст нечим на шта желите да се мотивирате, попут „немогуће је ништа“, „само уради то“, „ми смо свет“, нешто-нешто. Или можда уместо ње можете ставити породичну фотографију.

Али нека је боље од овога.

Фаза 2: Ствари које треба додати

  • Тренутно време
  • Функција промене имена
  • Функција промене слике

Да бих укључио те три нове функције, променио сам ХТМЛ датотеку као ниже.

ЦСС такође треба да се промени.

Тада ће нова страница бити као испод.

Ох, мислио сам да је то тренутак :)

Ажурирање манифест.јсон

Сада ћемо додати две функције.

Пре свега, овој апликацији ћемо додати образац за унос како би људи могли да јој додају своје име. Овај облик ћемо додати под поруком „Здраво, Јунгвон Сео“.

Ово је ружно, исправимо то

Нови стил за улазну ознаку.

Ок, много боље.

Од сада морамо размишљати о томе како похранити ове информације.

Користићемо „колачић“, али не можете да користите „колачић“ ако само отворите ХТМЛ датотеку из Цхроме прегледача. Покушајте да тестирате након учитавања као Цхроме додатак.

У претходном посту су биле нетачне информације о дозволи складиштења. За употребу „колачића“ вам није потребна дозвола за „складиштење“.

Такође, пошто још увек радим да користим јКуери, додајмо га.

Покушао сам додати јКуери ЦДН, али ...

Не брините, само морамо додати још један ентитет у манифест.јсон.

Добро, сада смо спремни за код у датотеку сцрипт.јс.

Оно што прво желим да урадим је:

  1. Нека корисници унесу своје име.
  2. Чувајте у колачићима (узмимо само најпопуларнији код)
  3. Искључите образац за унос и изблиједите у поздравној поруци.

Ово је први пут да морамо размишљати као прави програмери.

Случај 1: Када га отворите први пут.
Случај 2: Када га отворите након што укуцате своје име.

Морамо одлучити шта треба бити видљиво а шта не би требало бити.

Случај 1:
Време: Тренутно време
Поздравна порука: Како се зовете?
Образац за унос: Видљиво

Случај 2:
Време: Тренутно време
Поздравна порука: Поздрав, <име>!
Образац за унос: Невидљиво

Начин разликовања ова два случаја је провера да ли колачић има кључ „корисничко име“.

Са функцијом ажурирања времена, нови сцрипт.јс биће као у наставку.

Пре него што откуцате имеНакон што сте уписали име

Ок, изгледа да дјелује.

Наравно, постоје неке ствари које још увек морамо да побољшамо, попут ефеката транзиције.

Али, даћу вам га.

Шта још?

Морамо додати функцију која омогућава корисницима да мењају слику.

Унспласх АПИ

Можете лако да региструјете апликацију и добијете токен са ове странице.

Да бисте користили Унспласх АПИ, морате да региструјете апликацију на њиховој страници за програмере.

Кликом на 'Нова апликација' можете регистровати своју.

За демо производ биће вам дозвољено да користите до 50 захтева на сат. И то је довољно за нас.

Само попуните доњи образац колико желите.

Упишите било које име

Ако направите апликацију, видећете део „Кључеви“ са преусмереног веб локације.

Избрисао сам ову апликацију, тако да нема смисла покушавати.

Треба само да копирате „Приступни кључ“ и доделите вам јавасцрипт променљиву „АЦЦЕСС_КЕИ“.

Користићемо АПИ за претрагу.

Ево сценарија. Сви људи имају различита интересовања. Зато прво желим да их питам, а затим ћу претражити ту слику помоћу Унспласх АПИ-ја. Након тога, слика ћу ажурирати сваких 12 сати (иста кључна реч, другачија слика).

Дакле, АЈАКС функција ће бити као испод.

А ова функција ће бити позвана након што укуцате интерес.

Тада, као што можете очекивати, морамо поново да будемо програмер.

Случај 1–1: Врло први пут
Случај 1–2: После имена
Случај 2: Након што откуцате свој интерес
Случај 3: 12 сати касније.

Ок, одлучимо један по један.

У случају 1–1 само морамо сакрити сав део који се односи на слику. Прескочи.

У случају 1–2, само приказује образац за унос камате.

У случају 2, позовите АЈАКС и сачувајте податке о слици.

У случају 3, само поставимо време истека на 12 сати, а ако је колачић празан, поново позовите АЈАКС захтев.

Кључна реч: Лондон

Да, делује.

Фаза 3: Финални додири

Није обавезно кредитирати фотографа, али зашто не?

Можемо написати још пар редова кода и доделити име и страницу фотографа горњој левој страни.

Тако да можемо да користимо податке фотографа када први пут прегледате колачић.

Још једна ствар, шта ако неко жели да промени своје интересовање?

Додајмо ту функционалност која омогућава људима да поново унесу интересовање.

Пре него што кликнете на дугме

Ето га. Ако кликнете на дугме „Одаберите нови интерес“, покренуће се да отворите образац за унос у који сте претходно уписали интерес.

Када кликнете на дугме

Фаза 4: Направите властити производ.

Само желим да искусите процес од почетка до краја. Ипак то морате сами да развијете како бисте заиста стекли знање које сте научили.

Морате постојати неке функције за које мислите да би било добро укључити такве као што је начин избора случајне слике. Или можда мислите да су неки од мојих кодова неефикасни. Своју верзију истог производа можете побољшати бољим кодом.

Сретно и не одустајте!

Комплетна верзија се може наћи овде: хттпс://гитхуб.цом/тхејунгвон/МиЦхромеЕктенсион

Ова прича објављена је у часопису Нотевортхи, где свакодневно долази 10.000+ читалаца како би упознали људе и идеје који обликују производе које волимо.

Пратите нашу публикацију да бисте видели више производа и прича о дизајну које је представио тим часописа.