Сделал небольшой перерыв, чтобы повеселиться и попрактиковаться с совершенно бесплатным #JavaScript30 от Wes Bos, вот что я узнал и полюбил!

Продолжая свой предыдущий пост, я «ускорил» этот курс Vanilla JS от Веса Боса. Если вы не знакомы с курсом, я настоятельно рекомендую вам ознакомиться с ним. Это 30 дней мини-проектов или упражнений, написанных на ванильном JavaScript. Я бы сказал, что уровень сложности где-то от начального до среднего. Я упоминал, что это 100% БЕСПЛАТНО?

Я написал несколько кратких размышлений, реакций и заметок на будущее. Если вы пропустили первую половину этого путешествия, вы можете посетить Упражнения 1–15. Мой репозиторий на github размещен ЗДЕСЬ, и у меня все еще есть некоторые грандиозные планы по созданию небольшого портфолио всех проектов, смотрите это пространство (но не затаи дыхание)!

  • CSS Text Shadow Mouse: в данном случае делегирование событий работает против нас, мы прослушиваем элемент .hero, но не хотим получать данные из дочернего элемента H1, поэтому для проверки требуется некоторая логика. на какой элемент мы наводим курсор. Я знал, что в этом будет задействована математика, и это было неожиданно (просто немного линейной интерполяции).
  • Сортировка без артиклей. Здесь основное внимание уделяется методу Array.sort, но мы хотим игнорировать «The» или «A/An». Я набросал регулярное выражение для соответствия любой статье в верхнем регистре /The |A |An/ и использовал его для замены сравниваемых элементов в моей функции сортировки. Примечание Правильное регулярное выражение должно использовать символ ^ впереди, чтобы обеспечить поиск только в том случае, если элемент начинается с выражения. Затем с нашим новым массивом мы можем просто forEach добавить элементы к родительскому ul. Либо я выздоравливаю, либо это пока самое простое для меня. Чувствую себя хорошо!
  • Подсчитывайте время строк с помощью функции Reduce: О, я думал, что это будет легко, но это сложно. Первая хитрость заключается в том, что nodeList не является массивом. Второй трюк заключается в том, что набор данных находится в формате mm:ss, что не так уж и полезно! Прежде чем приступить к математике, давайте заменим этот «:» вызовом .split(":”)call. Затем немного веселья с разбором строк/поплавков и немного математики для вычисления часов/минут/секунд из float, но еще один я выполнил все самостоятельно! Сейчас, когда я смотрю видео, он решает это немного по-другому, но мне больше нравится мой способ :)
  • Нереальное веселье перед вебкамерой: Уэс снова уводит меня на неизведанную территорию в длинном видео. В основном я сделал это как код, так как есть много незнакомых мне методов и объектов, и, честно говоря, я не особо интересовался веб-камерой. Здесь не так много алгоритмического JS, просто представлено взаимодействие веб-камеры/видео и обновление на холсте HTML5. Однако бонусные баллы за npm/browser-sync!
  • Встроенное распознавание речи. Еще одна игра с взаимодействием, я не знаю, это тоже кажется немного бесполезным, но, по крайней мере, я узнаю, что возможно.

  • Геолокация: воспоминание о приложении FCC Weather! Для этого требуется либо симулятор iOS (только для Mac), либо телефон. Если у вас Mac, вы можете запустить симулятор в XCode через XCode->Open Developer Tool->Simulator. Это снова неизведанная территория для меня по большей части, захватывающие вещи! Не уверен, что мне это когда-нибудь пригодится, но, по крайней мере, я впервые попробовал iOS 😜
  • Переход по ссылкам: я с нетерпением ждал этого, эффектного маленького эффекта, который может быстро надоесть! Я начал все это неправильно, пытаясь просто добавить подсветку при наведении/отсутствии мыши. На самом деле он намеревался добавить выделение в DOM как span . Как только я избавился от некоторых опечаток и глупых ошибок, это был интересный способ узнать getBoundingClientRect(), который дает размеры для элемента. PS Мне очень нравится ловить ошибки Уэса раньше, чем он 😉

Ладно, я на самом деле очень устаю от них! Я определенно не рекомендую делать как можно больше за один день. Максимум 2–3, на здоровье!

  • Синтез речи. Здесь мы снова с другим конкретным API, который я могу просканировать на MDN: SpeechSynthesisUtterance, действительно слетает с языка, а? Пытался сделать немного сам, столкнулся с забавной вещью, когда getVoices будет возвращать пустой массив при загрузке страницы, поэтому нам нужно использовать прослушиватель событий voiceschanged для загрузки голосов. При написании собственного кода я узнал о «НЕЗАКОННОМ ВЫЗОВЕ», когда вы пытаетесь вызвать оконную функцию из прослушивателя событий. Это связано с тем, что обратный вызов перепривязывает this, но вам нужно, чтобы this было окном. Я смутно припоминаю, как Кайл Симпсон обсуждал это в «This and Object Prototypes», пора перечитать… Можно неаккуратно обойти, используя .call(), но лучше просто написать отдельную функцию. Я узнал больше, чем ожидал, и мы использовали несколько моих любимых возможностей JS (forEach, параметры по умолчанию, filter)
  • Sticky Nav: До этого, если мне нужна была липкая навигация, я делал position: fixed и немного других CSS-приколов, без JS. Но в этом руководстве показано, как сделать навигацию, которая находится в середине страницы, а затем остается липкой после того, как вы прокрутите ее. Также задействовано немного CSS. Когда элемент имеет position: fixed, он больше не занимает места в DOM. Еще одна хитрость CSS: вы не можете использовать transition для анимации width из 0 -> auto -> 0, поэтому вместо этого вам нужно изменить свойство max-width. В этом упражнении больше внимания уделялось CSS, чем в предыдущих, но мне не помешала практика.
  • Захват событий/распространение/бублинг и один раз: я помню Once из книги Allonge, давайте посмотрим, та же ли это идея. Если вы добавите прослушиватель событий, например прослушиватель кликов, к внутреннему элементу, когда он сработает, он вызовет события щелчка для всех родительских элементов (поскольку технически вы нажимаете на все элементы). Это пузырится, можно предотвратить через event.stopPropagation(). capture и once являются свойствами необязательного третьего аргумента для addEventListener. once заставит прослушиватель отвязаться после срабатывания.
  • Stripe Follow-Along Nav:Как и в случае со ссылкой, нам требуется небольшой переход от CSS. Мне не нравятся такие, где он пишет для вас кучу CSS, а потом вы должны выяснить, каковы были его намерения. Я гораздо лучше начинаю с нуля и иду вперед, чем заканчиваю начатый проект, да ладно! Это забавный маленький вспомогательный проект, который можно добавить для будущего сайта.

  • Нажмите и перетащите для прокрутки: TIL о свойстве scrollLeft элемента, которое находится в центре внимания этого задания. Мы уже видели scrollX scrollY в другом проекте. Об этом много не скажешь….!
  • Интерфейс контроллера скорости видео. Перед тем, как приступить к этому, я просмотрел свой код пользовательского видеопроигрывателя в поисках вдохновения. Я довольно близко подобрался к его фактическим решениям. Ошибки, которые я сделал: использование e.offsetY вместо e.pageY-this.offsetTop для получения местоположения щелчка мыши. Я немного ошибся в расчете скорости (линейная интерполяция). О, также я сделал свой по щелчку, а не по движению мыши. Но с гордостью могу сказать, что на 90% я справился сам!
  • Часы обратного отсчета: Вот дерьмо, я еще не сделал таймер Помодоро FCC, так что у меня есть шанс сделать это в основном до этого видео! Я смог провести вычисления, чтобы получить «время окончания» для данного таймера, но начал изо всех сил пытаться сделать часы обратного отсчета. Объект Date представляет собой p.i.t.a, выполняющий синтаксический анализ между UTC/миллисекундами для выполнения вычислений. У меня это немного заработало, но я не смог прервать цикл отрицательных чисел через clearInterval(). У меня такое ощущение, что он сделал это совсем иначе, чем я! Итак, TIL вы можете clearInterval изнутри самого setInterval. Другое дело, если вы обновляете таймер, вам нужно clearInterval в начале вашего обратного отсчета, иначе у вас работает сразу два таймера! В целом я очень горжусь (опять же!), потому что я так боялся этого проекта FCC, но смог выполнить большую часть этого упражнения. PS Вес Бос, 24 часа - лучшее время ;) Наконец, у меня есть ошибка, из-за которой в 10% случаев я получаю оставшееся время 0:0–1, если кто-то хочет помочь найти его !
  • Ударь крота: мы сделали это! Давайте начнем, у нас есть много веселья со случайностью и таймингами здесь. В этом приложении не так уж много, полезно знать о свойстве isTrusted в событии, чтобы избежать подделки клика.

Общие уроки:

  • Я определенно впечатлен тем, как легко вы можете создавать вещи в Vanilla JS, особенно когда так много людей используют большие библиотеки для небольших страниц.
  • Читайте MDN для любого нового API, с которым вы сталкиваетесь, это избавит вас от головной боли.
  • Console.log и console.dir все на каждом шагу, чтобы видеть, с чем вы работаете
  • Сделайте ваши функции как можно более универсальными/повторно используемыми, не делая их слишком длинными.
  • Воспользуйтесь потрясающим синтаксисом ES6 (конечно, с Babel), чтобы избежать циклов, сократить код, делать забавные вещи с массивами/объектами.
  • Я не рекомендую ускорять это, это утомляет, а вступительная музыка будет дергать вас после 10+ видео.
  • Только маленькийзамечание заключается в том, что заранее подготовлено много кода CSS, поэтому, чтобы полностью понять, что происходит с каждым проектом, вам нужно все прочитать перед началом. Хотя, думаю, в реальном мире так и будет :D

Прощай и вперед!