Гледам цифровото представяне на часовник в десния ъгъл на моя лаптоп и си мисля случайни мисли за стари мексикански песни. Тази вечер трябва да пиша за процеса, изглежда, а времето изтича. Но не работи съвсем, нали? 52 внезапно се променя на 53 и това е: без истинско напрежение, без магия, без романтика.
Едно болеро започва да свири в стария джубокс в главата ми, El Reloj на Роберто Канторал. Потънал в болка сред живите китари на трио, той моли часовника да не за отбелязване на часовете. Той моли часовника да спре времето в ръцете му. Толкова страхотно: часовникът имаше стрелки и задържаше неумолимия ход на времето в тях, срещата ни със съдбата можеше да бъде изстрадана чрез поредица от звукови тик-тоци и...
Цифровият часовник става на 57. Без магия, вярно, но резултатът е същият: трябва да побързам, да свърша задачата, може би да си почина.
Предстоящата задача: опитайте се да напишете блог за процеса, докато започвам пътуването си да се науча как да кодирам в JavaScript от нулата. Изминаха малко по-малко от две седмици, откакто видях първия си ред от JavaScript код, така че можете да си представите колко малко знам. Но все пак писането за процеса на учене понякога помага на процеса на учене. Ще видим.
Едно от многото предизвикателства, с които се сблъсках в началния лагер за кодиране, е как да се опитам да отделя време да практикувам кодиране сам, как да измисля малки проекти, които правят процеса по-ангажиращ и по-свързан от безбройните лаборатории, които са ни възложени и които са предназначени да ни предизвикват и тласкат. Няма време да свършите цялата работа, цялото четене, всички блогове - и въпреки това всичко се събира само чрез практикуване на код извън рамката на програмата. В крайна сметка чувствам, че всичко се свежда до времето: има само определено количество от него, проклети да са цифровите часовници. Така че ние трябва да направим избор.
Избрах да прекарам времето, което бях отделил, за да проуча задължителна публикация в блога, която да практикувам, като кодирам сам много прост, много малък JavaScript. Ако времето позволява, хм, може дори да напиша за моя опит, правейки това. И така, ето ни и тръгваме. Какво направих?
Първо си дадох параметри. Нямаше да работя повече от пет часа върху това: всъщност, когато петте часа свършиха, спирах, където и да се намирах по това време. Следващото „правило“ беше, че ще се опитам да правя неща, които все още не съм правил в лаборатории и упражнения. Не че това трябваше да са сложни резултати, но исках да се науча как да правя нови неща, независимо дали в крайна сметка са прости или не. Най-важното от всичко е, че исках да видя дали можем да разкажем някаква история. Изгубен в гората на съкращенията и делегирането на събития, за момент загубих от поглед силата и възможностите, които този език предоставя на разработчика.
Можем ли да създадем някакъв вид интерактивен разказ за по-малко от пет часа, с по-малко от две седмици JavaScript и без идея за история? Това би било предизвикателството.
След като създадох основните правила, следващата стъпка в моя процес беше да измисля елементарен дизайн. В този случай се съсредоточих върху няколкото действия, в които вече научихме JavaScript да владеем: „слушане“ на събития от потребителя чрез мишката и клавиатурата, предоставяне на информация за това къде са елементите на екрана във връзка с тези събития и събиране информация от външни източници чрез URL адреси.
Поради ограничението във времето знаех, че външният вид трябва да бъде гол: нямаше много време за стилизиране, дизайн на интерфейса и логика на кодиране тук. Затова реших да създам приложение без реални инструкции, което чака и реагира на потребителя. Идеята би била празен екран (промених цвета на тъмнозелен), който чака потребителят да взаимодейства с него. Ако потребителят натисне някой клавиш, приложението ще предостави съвети, насочващи потребителя да комуникира с мишката.
След като добавих събитието за натискане на клавиш и поисках от браузъра да „слуша“ и да реагира при всяко натискане на клавиш, не бях доволен. Да, очевидно беше началото на някакво съвсем просто интерактивно изживяване. Но освен това, всеки път, когато показвахме текста (или добавяхме HTML елемента към div, ако сте в настроение за такъв език), той просто изскачаше на екрана. Е, това е малко грубо, помислих си. Не би ли било много по-хубаво, ако можем да избледняваме и избледняваме текста от екрана? Как бихме направили това?
Обаждам се на Google и Stack Overflow, звъня на приятелите си!
И разбира се има начин. Има много начини. Първо разгледах как да направя това с помощта на vanilla JS с помощта на непознат приятел Codepen, който носи името istref:
Е, това е страхотно. Но изглеждаше като много работа за нещо, което щяхме да използваме през цялото време. Така че продължих да търся и се натъкнах на библиотеката jQuery и нейните анимационни ефекти. След като прочетох документацията, продължих и инсталирах jQuery за този проект и готово, с прост fadeIn() имах това, от което се нуждаех.
Всъщност, въпреки че написах този кратък абзац за около петнадесет секунди, ми отне половин час да проуча различните начини за изчезване на елементи в JavaScript и след това да прочета jQuery, да го инсталирам и да получа fadeIn() и fadeOut (), за да работи правилно в контекста на моето малко приложение. Но си заслужаваше!
Добре: имаме приложението, което казва на потребителя какво да не прави и не е визуално грубо за това. Но какво се случва, когато потребителят щракне върху бутона на мишката? Трябва ли да е в конкретен div, в бутон, в span? Започнахме интерактивен разказ, като въведохме диалог проба-грешка, но след това какво? Не исках да използвам бутони, каквито имахме преди, реших, че би било страхотно да експериментирам малко с очакванията. Ако някой използван щракне върху екрана, където и да е на екрана, нищо не трябва да се появява, помислих си.
Може би ще вали.
Бях чел някъде, че има различни API за звукови библиотеки, музика и аудио ефекти. И разбира се, JavaScript трябва да има начини за обработка на аудио. Така че се върнах при Google… и Google се върна при мен. След като прочетох множество различни начини за обработка на аудио, попаднах на звуковата библиотека на Google в „Действия в Google“. Използвайки елемента HTML Audio във вашия код, можете след това да получите достъп до този API на звуци чрез URL адреси, които водят до конкретни звукови ефекти . Намерих хубав дъждовен ефект, получих URL адреса и след това създадох нов аудио елемент в моята програма, като го присвоих на променлива. След като имаме това, трябва само да .play() и .pause(), за да активираме звука или песента. Доста страхотно.
Част от процеса на обучение как да кодирате чрез правене е изразходване (инвестиране? губене?) на много време в търсене на грешните отговори на правилните места или за правилните отговори на грешните места. Това ми се е случвало много пъти и особено в този случай. След като разбрах как да включа звуковите ефекти на дъжда в приложението, исках звукът - да - да заглъхва и заглъхва. Разбрах, че не е толкова просто (поне за мен). След като разгледах различни решения за това и разбих кода по много начини, се отказах. Част от процеса, предполагам.
Точно както в предишните два примера, продължих да изследвам нови начини за правене на нещата със следващите няколко елемента в моето приложение: показване на елементи, където и да е щракнато с мишката, правене на конкретна част от създаден елемент „с възможност за щракване“, деактивиране на функции по време на изчакване. Някои от тях работеха, други не. Но тези, които не ме научиха дори повече от тези, които ме научиха.
Както може би усещате, дойде моментът да спра да пиша и да започна отново да кодирам — но ето ме тук, търся край. Ритъмът ме подвежда и затварянето ме дразни от разстояние. Стрелките на този стар часовник не спират за мен, за тази публикация в блога или за нещо друго. Леле мале. Един ден може би ще успея да седна и да напиша подходящ технически блог, може би.
