Построим: с помощью JavaScript

Выпадающие списки DIY и адаптивные меню

Первоначально опубликовано на сайте web-crunch.com 29 мая 2018 г.

Выпадающие меню и адаптивные меню - слишком распространенные компоненты в области веб-дизайна. Хотя я рекомендую экономно использовать раскрывающиеся меню, они не загромождают то, что может быть очень сложной навигацией. Адаптивные меню должны быть аккуратными для мобильных пользователей. Пользователи хотят быстро добраться туда, куда они направляются, а также при этом не терять удобство работы с ним. Опыт, если все сделано правильно, должен быть безболезненным и, по возможности, почти приятным.

Моя новая серия «Построим: с помощью JavaScript» посвящена повседневным задачам веб-дизайна и разработки, созданным с использованием чистого JavaScript. Вы пока не найдете здесь ни jQuery, ни каких-либо модных фреймворков. Следуйте инструкциям, чтобы понять суть JavaScript, пока мы пишем практические примеры!

Немного предыстории, прежде чем мы начнем

Недавно я разместил влог о том, что я отстой в JavaScript. Я пришел к языку в те дни, когда процветал jQuery. Даже тогда я обнаружил, что JavaScript - это трудный язык для понимания. Я хотел понимать язык так же, как CSS или HTML, кодировать которые было легко. К сожалению, имея так много разных способов достичь одной цели, я оказался в порочном круге того, что я называю синдромом JavaScript.

Мы все были там. Вы пытаетесь изучать вещи старомодным способом, но каждая статья или сообщение о переполнении стека указывают на решения jQuery и / или решения, использующие JavaScript, который раньше своего времени. Вздох…

Удивительно, но теперь мы можем использовать JavaScript как язык с полным стеком, охватывающий как интерфейсные, так и серверные приложения. Комбинированные технологии, такие как Node JS, Express и MongoDB, позволяют писать полные приложения на JavaScript. Это потрясающе, но, как и в случае с большинством «стеков», требуется крутая кривая обучения.

Теперь, когда язык немного расширился, я чувствую, что он стал лучше для новичков. После постоянной борьбы я решил раз и навсегда изучить JavaScript. Я прошел несколько курсов, чтобы учиться; Мое любимое творение Брэда из Traversy Media - Современный JavaScript с самого начала. Брэд подробно рассказывает о том, как и почему JavaScript, а также обсуждает эволюцию языка, что было для меня невероятно полезно. Вам не нужно знать язык, как во многих других учебных пособиях.

Так почему все видео от меня? Что ж, я считаю, что когда я учу, я учусь. Это так просто. Возможно, вы знаете меня по моим Руководствам по Ruby on Rails. Это я учился! Не волнуйтесь, если вы их поклонник, я все еще планирую внести свой вклад, но я хотел немного сменить тему.

Каркасы

Поначалу в этой серии мы не будем фокусироваться на фреймворках. Если я и буду исследовать что-то, это обязательно будет по мере того, как я узнаю больше. Некоторые фреймворки, которые приходят на ум, - это Vue.JS, а также стек типа Node / Express. Помните об этом во время просмотра!

Хорошо, хватит болтовни.

Некоторые вещи, на которые вы, вероятно, захотите сослаться

Скачать исходный код

Требования включают:

Обязательно инициализируйте свой проект после установки пряжи:

yarn init

Вот мой yarn скрипт, включающий все плагины, которые мы используем для Gulp.

yarn add gulp gulp-sass gulp-autoprefixer gulp-imagemin gulp-concat gulp-uglify gulp-watch gulp-sourcemaps gulp-connect --dev

Мой Gulpfile.js вы можете найти в репо здесь.

Видео

Часть 1 - Настройка проекта

Часть 2 - Кодирование HTML

Часть 3 - Кодирование SCSS

Часть 4 - Кодирование JavaScript

Спасибо за чтение / просмотр! ❤️

Если вы хотите помочь мне продолжить работу, у меня есть страница на Patreon, которую вы можете найти здесь: https://www.patreon.com/webcrunch

Если это не твой стиль, можешь также купить мне кофе ☕️ Купи мне кофе

Первоначально опубликовано на сайте web-crunch.com 29 мая 2018 г.