Настройка окружения для работы

Давно я уже не программировал с нуля проекты. Пришло время потрудиться и сделать вёрстку. До этого времени под руками была установлена visual studio 2019 и настроенная для работы с .NET-приложениями. Для вёрстки в 2020 году оказалось удобнее использовать vs code. Ниже опишу то, как у меня проходила настройка окружения для работы.

Сразу скажу, что эта заметка нужна для того, чтобы проанализировать моё возвращение в тему вёрстки, увидеть ошибки и попытки начать работать. Думаю, после этого я подготовлю на основе её уже инструкцию более детальную с содержанием и шагами, как я люблю.

Предыстория хотения верстать

Начну с предыстории. В команде недавно появился дизайнер Алёна (портфолио пока формируется, в обновлённой статье укажу на него ссылку) и нарисовала макет для моего проекта adzelka.by. Но звёзды начали сходиться, когда у меня за последнюю неделю услуги верстальщика запросили несколько раз. Спрос, значит, есть!

Для возвращения в тему вёрстки я решил пройти курс «Веб-верстальщик: начало» от проекта WAYUP. Базовый курс интересно сделан, понравилось то, что есть достаточное количество времени на прохождение и наличие уровней, пока не пройдёшь первое домашнее задание следующее не открывается. Быстро курс был пройден, если как и я вы раньше верстали, то его не рекомендую – тривиально всё. Из полезного узнал, как на сайте bootstrap подсмотреть пограничные значения ширины сайта для разных устройств.

Отвлечение тоже по теме

Во время прохождения у меня хватило времени для просмотра авторского курса «Джедай вёрстки #7» (далее – Д) от канала WebDesign Master, сейчас нахожусь на 4 видео из 17 – не слышал раньше о плагинах для меню. Втянуться не мешало бы, но при установке mmenu через bower структура плагина уже сильно отличается от той, которая описана в уроке, но попробую разобраться по другим источникам, если что-то есть полезное для меня, то пишите в комментарии.

Курс начал этот смотреть потому что именно в нём автор показывал то, как сверстать макет из Adobe XD. Экспорт в zeplin из adobe xd поддерживается только на макбуках (пробовал даже виртуалке с macOS установить, но всё не то). Остановились на том, что Алёна предоставила макет в Figma, а в нём уже есть плагин для импорта проекта в zeplin (этот инструмент мне порекомендовал ещё один дизайнер Виктор, который уже «собаку съел»).

Курс Д. Полезное.

Из курса Д я кое-что использовал для настройки ноута:

Шаг 1. Установить node.js, git, gulp, bower.

Установка GULP:

npm i gulp -g

p.s: до этого должен быть установлен NODE.JS

Создаём файл-манифест: package.json:

npm init

Задать пакетоиспользуемую версию GULP:

npm i gulp --save-dev

Gulp берёт какие-то файлы, делает с ними что-то, и сохраняет результат в папку.

Чтобы установить SASS:

npm i gulp-sass --save-dev

Установка BOWER:

npm install -g bower

BOWER будет устанавливать jQuery и плагин magnific-popup:

bower i jquery magnific-popup

Для сжатия кода:

npm i gulp-concat gulp-uglifyjs --save-dev

npm i gulp-cssnano gulp-rename --save-dev

npm i del --save-dev

npm i --save-dev gulp-imagemin imagemin-pngquant

npm i gulp-cache --save-dev

npm i gulp-autoprefixer --save-dev

SASS для самых маленьких

npm i -g gulp npm-check-updates

ncu

Шаг 2. Скачать VS Code и плагин для sass syler (он идёт первым в списке расширений при вводе слова sass).

Шаг 3. Скачать шаблон для вёрстки.

GitHub.com

Дальше для контроля версий не только вёрстки, но и всего проекта в целом я решил пользоваться github-ом. Для этого мне понадобятся команды из моей шпаргалки + тортоиз (для сложных в моём понимании моментов и решения их через графический интерфейс).

git clone «URL» — клонировать репозиторий

git status — узнать ветку

git add . — добавить все изменения в ветку

git commit -m «комментарий» — закоммитить

git push origin master — запушить изменения на GitHub в ветку мастер

Ссылка на проект, который теперь лежит на гитхабе (его делаю из шаблона курса Д): https://github.com/kolloss/optimizedhtml-start-template

2 мая 2020. Проверка окружения в бою.

Сегодня с утра ютюб мне подкинул классный мастер-класс из трёх частей по вёрстке от канала «Фрилансер по жизни — IT и фриланс» (далее – Ф). Автор классный, поэтому выше просто ссылка на его канал.

Дано:
1. vs code + плагины (настройка своя + то, что рекомендовал канал Ф).
2. Figma Desktop + плагин Zeplin (помним, что Алёна запарилась и перерисовала дизайн для figma).
3. Zeplin Desktop (ниже то, как выглядит открытый в zeplin проект дизайна для большого экрана).

Верстальщики начинают вёрстку с анализа макета, с zeplin это очень удобно, а я с отвлечения на основную работу о ней я немного писал в статье по подключению и настройке СМДО, скоро будет продолжение – занимаюсь интеграцией новой программы для документооборота и архивного делопроизводства.

Пока просто опишу задачу, с которой столкнулся: плагин mmenu подходит на первый взгляд для создания бургера и меню для сайта, но нужно значительно провести стилизацию его. Посмотрю, что говорит Женя с канала Ф, так как автор канала Д уже 2 года не проявлял активности. Свои мысли опишу после программирования шапки.