Я принимал участие в Lighthouse Labs 21 Day Coding Challenge, в основном из-за того, что мне нужно было придерживаться рутины с кодированием, но первые несколько дней испытаний были довольно слабыми. Похоже, он был разработан для настоящих новичков.
Мне хотелось чего-то большего, поэтому я решил принять участие в конкурсе Javascript 30 – 30 Day Vanilla JS Coding Challenge от Wes Bos. Я слышал много хорошего об Уэсе, но до сих пор не проверял его курсы.
Я выбрал этот вызов, в частности, потому что я хочу по-настоящему зафиксировать многие основные концепции JS независимо от фреймворка или библиотек. Конечно, эти инструменты полезны и могут быть проще в большинстве случаев, но часто не учат вас, как все работает, они просто передают вам это и говорят, что это работает.
Во вступлении Уэс описывает несколько различных способов обучения с помощью задач, и я решил сделать паузу после демонстрации функциональности приложения/функции и попытался воссоздать ее оттуда.
После того, как все будет готово (или, по крайней мере, функционально), я посмотрю оставшуюся часть видео, чтобы узнать, какие еще приемы, советы и оптимизации я могу извлечь из него.
Задание 1 – набор ударных JavaScript
Забавное приложение для небольшой ударной установки. Стартовые файлы предоставляют вам всю разметку CSS и HTML, поэтому вам нужно сосредоточиться только на JavaScript, и это правильно.
Это было хорошее введение в «аудиоэлементы», с которыми я никогда раньше не сталкивался. Конечно, достаточно просто, чтобы с ним работать, но это приятный маленький сюрприз в том, что я мог бы чему-то научиться.
Я не боюсь признать, каких знаний мне не хватило и чему я научился, потому что это означает, что я все еще расту. Я никогда не узнаю всего, но прогресс, безусловно, является ключевым.
Что я узнал сегодня
- События keydown и нажатия клавиши имеют разные коды клавиш в JavaScript.
- Что событие «transitionend» существует и является гораздо более элегантным решением, чем использование setTimeout в этом случае.
- Как использовать и воспроизводить HTML аудиоэлементы
- Пользовательские атрибуты данных HTML
Отличный трюк
Вместо инкапсуляции соответствующего кода в условное выражение (if/else) вместо этого он использует противоположный случай и возврат для выхода из функции:
Вместо:
if (isTrue) {
someCode;
}
Он будет использовать:
if (!isTrue) return; someCode;
Не уверен, что это более эффективно, но изящный маленький трюк.
Итак, подведение итогов первого дня этого испытания. Я не уверен, что буду писать 30 постов, по одному каждый день, но это то, к чему я стремлюсь.
Все они будут не такими многословными, но сегодня я был в настроении писать.
