Всё началось весной 2018 года

Мы сидели в дискорде с другом и я как-то случайно сказала, что хочу научиться создавать сайты. Он мне сразу же скинул ссылку на справочник html (язык разметки документов для просмотра веб-страниц в браузере).

После этого я начала самостоятельно изучать информацию, тогда её было не так много, как сейчас. Наткнулась на один канал на ютубе и стала смотреть его. Но некоторые ролики уже были устаревшими, меня это почему-то не оттолкнуло.

Я завела себе толстую тетрадь а4 и записывала всё туда, а потом сразу же старалась применить эти знания на практике. Смотрите мои записи ниже 👇🏻

Вот посмотрела плейлист по html, перешла к видео по css (формальный язык описания внешнего вида документа, написанного с использованием языка разметки)

После этого сделала свой первый «сайт». Просто в хаотичном порядке использовала там всё, что знала.

Через некоторое время я сделала для себя новое открытие! Оказывается, верстать надо по макету, а не так, как тебе хочется. Но что такое макеты? Где их брать? Кто их создаёт? Ничего из этого я не знала...

Через пару дней посмотрела мастер класс по вёрстке сайтов на канале от 0 до 1. И можно сказать, что это был переломный момент. Я нашла ответы на многие вопросы, узнала кучу новой информации, наконец-то поняла, зачем вообще нужны верстальщики и что они делают.

И это было только начало! Я стала изучать JavaScript (мультипарадигменный язык программирования). Искать макеты и верстать их. Поглощать новые знания и применять их на практике. (Свои первые сайты по макетам покажу в сторисах)

Но в какой-то момент я поняла, что это можно делать бесконечно долго. Я практикуюсь, верстаю, но у меня нет понимания того, что я делаю верно, а что нет. Не знаю где и какие ошибки допускаю. Я в этой сфере уже пару лет, а всё не могу сделать себе портфолио и начать зарабатывать.

А вы уже нашли своё дело? Расскажите в комментариях, как это было.

P.S на этом моя история не заканчивается, ждите продолжение!

Отвлечемся на вёрстку

Как вы знаете, я работаю верстальщиком на фрилансе. Мне нравится верстка и я стараюсь продолжать развиваться в этом направление.

Уже давно нужно было обновить свою Gulp сборку, внедрить новые фишки и добавить полезные плагины. Конечно же писать все самостоятельно я не стала. Поэтому взяла сборку у maxgraph и стала ее подстраивать под себя. На это ушло дня два.

Что глобально поменялось?

1️⃣ Стала использовать Webpack, чтобы можно было дробить js файлы. Я уже начинаю делать более большие проекты, подключаю более сложную логику, файл со скриптами все разрастается и разрастается, в нем становится сложнее ориентироваться

2️⃣ Добавила плагин, который конвертирует изображения в расширения avif и webp. И перешла на тег picture там, где это возможно

3️⃣ Заготовила шаблоны с кодом, который чаще всего использую. Например сделала заготовку для аккордиона, модального окна, кастомных чекбоксов, липкой шапки. Все плагины, которыми пользуюсь собрала в одном файлике, если мне нужно будет каким-то воспользоваться, то я просто расскоментирую пару строк кода

4️⃣ Стала активно использовать миксины. Создала отдельный файлик для простых, но часто используемых миксинов. Туда добавила шаблоны связанные с флексами, псевдоэлементами и фоновыми изображениями

#верстка

Изучаю доступность

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

Вот недавно прочитала статью про доступность в таблицах и вынесла от туда следующие полезности, которые буду стараться применять на практике:

1️⃣ С помощью тега caption можно добавлять заголовок к таблице

2️⃣ Для более сложных структур можно использовать теги thead, tfoot и tbody (tbody браузер создает всегда сам). Эти теги не помогают в доступности, но могут пригодиться при стилизации

3️⃣ Для ячеек, которые являются заголовками можно использовать атрибут scope. Он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца.

Лекции на ютубе тоже не игнорирую. Посмотрела доклад Вадима Макеева «Людоедский интерфейс», уже давно рекомендовали мне эту лекцию, но все уши не доходили). Неправильные правила по доступности — тоже шикарное видео от Вадима. Ещё понравилась лекция по тестированию Accessibility от Ольги

И рискнула я начать читать документацию про ARIA на английском! На русском вообще мало информации по доступности, а так ещё и английский прокачаю

#верстка #доступность #теория

Формы

Есть ещё одна тема, которая немного связана с доступностью — формы. Как правильно написать разметку в формах, чтобы пользователь скрин ридера понял, что от него хотят, а бекендерам было удобно работать с твоим кодом?

Я стала копать в эту сторону. Посмотрела пару видео, почитала несколько статей. И вот какие выводы для себя сделала.

1️⃣ С чекбоксами и радиокнопками нужно использовать атрибуты name и value. Тогда на сервер данные придут в таком формате. { “name” : “value” }. Стоит отметить, что у радиокнопок, которые относятся к одной группе должно быть одинаковое значение атриубута name. И этот формат сильно упростит жизнь бекенд разработчикам

2️⃣ Для группирования полей форм можно использовать тег fieldset, а чтобы озаглавить эту группу — тег legend. Думаю, что эти теги стоит использовать, даже если их нет в дизайне. С их помощью люди люди со скрин ридерами будут лучше понимать вашу структуру. И для семантики лишним тоже не будет

3️⃣ Мое правило, которому я следую очень давно — всегда использовать тег label. Если он не предусмотрен в дизайне, то его можно скрыть с помощью класса sr-only или visually-hidden, ведь есть ситуации, когда без него пользователь с ограниченными возможностями не поймет, что это за поле ввода и что туда нужно ввести. А если дизайн предполагает наличие такой «подсказки», то точно нужно использовать label. а не какой-нибудь там span или div, в таком случае это добавит удобства всем пользователям

#теория #доступность

Работа над крупным интернет-магазином

Хочу рассказать вам про работу и про проекты, но для этого нужно вернуться немного назад. Есть у вас машина времени?)

В июле мне написал один человек и предложил в работу проект. Я его выполнила в кратчайшие сроки (так как они горели) и за достаточно небольшой бюджет. Правок почти не было и, наверное, заказчика устроило качество выполненный работы, так как через пару дней он вернулся ко мне с ещё одним проектом. Как оказалось, это не совсем заказчик, а скорее посредник, но это не так важно, главное, что есть работа 😄 после второго проекта мне нужно было уехать на пару недель

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

Изначально нужно было исправииь три страницы: главная, каталог, страница товара и сдать их бекендерам (бек на Битриксе). Но исправить — это мягко сказано, мне пришлось полностью все переделывать (и не зря, как оказалось позже). Однако некоторые решения в коде были достаточно интересными и я переписала их на свой лад, ещё мне понравилась сборка — gulp + webpack, это подтолкнуло меня обновить свою текущую сборку

Макет не был полностью готов. Отсутствовали меню, выпадашки, модалки. Сам дизайн не подготовлен к вёрстке: дробные значения в размерах элементах и шрифтах, куча разных отступов и стилей. К дизайнеру накопился ряд вопросов, а он через пару дней просто перестал выходить на связь 🤦‍♀️

Когда главная страница была переделана, то мы стали показывать её заказчику. Тот сказал, что все слишком огромное и надо уменьшить раза в 2-3 все элементы. А я вот стесняюсь спросить, где же он был, когда принимал дизайн? Как он принял контенйер в 1700px и обычный шрифт в 24px?

Переделывать дизайн уже не было времени. Поэтому я стала вносить изменения прямо в вёрстку. Многое пришлось переделывать по третьему разу, но удалось уменьшить контейнер до 1300px

С такими мучениями нам удалось сдать эти три страницы. Сроки горят, дизайн кривой, заказчик с причудами, но продолжение следует...

#работа #верстка

Навигация

#инкубатор
#работа
#верстка
#дизайн
#теория
#книги

Темы:

#паттерны
#иммутабельность
#инструменты
#доступность
#цвет
#принципы
#архитектура
#fsd
#лексическоеОкружение
#замыкание
#this
#промисы
#оптимизация
#карты
#redux
#ts

Работа над крупным интернет-магазином продолжается

Через несколько дней к нам в команду добавили нового дизайнера, то есть дизайнершу. И она стала работать над остальными страницами, которых было ещё около 10-12

Тем временем я раз пять переделывала главную, каталог и страницу товара, так как заказчику не нравилось то, что он сам утвердил на этапе дизайна.

Потом я передала эстафету бекендерам. Но, к сожалению, это не означало, что я могу отдыхать или заниматься своими делами

Теперь работа прилетала с их стороны. В основном требовалось внести изменения под битрикс. Где-то добавить новый скрипт, где-то обработать отправку формы и тому подобное

И у меня это занимало прилично времени, потому что с js у нас тогда ещё не было дружеских отношений, под битрикс я верстаю первый раз и в такой команде работаю тоже первый раз. А ещё стоит учитывать тот факт, что с чужой сборкой работать все же не очень комфортно, хоть я и постаралась максимально подстроить ее под себя

--------------

Теперь хочу рассказать о некоторых сложностях, с которыми столкнулась на этапе вёрстки

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

Сами линии делала через svg тег, но это было не совсем корректным решением. Так как для каждого плюсика пришлось рисовать отдельную линию, подгонять её пиксель в пиксель (не забываем, что я уменьшала контейнер на 400px и все элементы соответственно) и копировать её svg код, а затем добавлять тоже в html

Сейчас я бы старалась это реализовать через canvas в javascript, но тогда я ещё не прочитала об этом в книге Javascript для детей))

И мега сложно было это адаптировать. Пришлось даже дублировать код и создавать тоже самое для мобильной версии. Наверное, я потратила на это дня 3

#работа #верстка

Теперь чуть-чуть вернемся назад, чтобы я могла вам рассказать про продолжение верстки крупного-интернет магазина

Через недельку - две завершилась работа над дизайном оставшихся страниц (напомню, их 10-15, вот те, что я вспомнила: история, о компании, контакты, сервис, доставка, сборка, установка). Теперь настала моя очередь

Я решила верстать их на своей новой сборке (пост про неё) С одной стороны, это хороший выбор, если бы я продолжила работать с таким объемом страниц на старой сборке от другого верстальщика, то я бы с ума сошла. Все же моя сборка лучше приспособлена для больших сайтов.

С другой стороны, я очень боялась, что потом будут конфликты, так как одна часть сайта сделана на одной сборке, а другая — на другой. И новую сборку я использую первый раз, поэтому при работе приходилось её ещё дорабатывать, модернизировать и фиксить некоторые баги

С работой я справилась дней за 10. Сейчас хочу рассказать о сложностях, с которыми столкнулась

1️⃣ «Аналог плюсиков». Естественно, я делала с учетом на то, что заказчик сможет менять количество и расположение этих кнопок, почти тоже самое, что и с плюсами (читайте в этом посте).

Дизайнер почему-то нарисовала все кнопки слишком огромными и разного размера. А ещё не будем забывать, что в верстке контейнер на 300px меньше. То есть мне нужно было разместить все таким образом, чтобы оно не наезжало друг на друга, смотрелось не слишком огромным и был соблюден масштаб

А при сдаче этой страницы заказчик стал возмущаться, что блок не помещается в экран (в этом блоке ещё есть текст над фото, который не попал на скрин). А как можно уместить текст и фото в одном экране, когда даже одно изображение еле-еле помещается. Но в дизайне же это тоже видно! Почему нужно было ждать верстку, чтобы сообщить об этом?!

2️⃣ Блок с главными датами. И сразу же вспоминаем про контейнер. К сожалению, этот блок у меня не получилось сделать гибким. То есть если количество строк текста будет разным, то все начнет ломаться. Но зато у меня получилось нормально его адаптировать. Как считаете, его действительно нельзя сделать динамичным или я не нашла подходящего способа?

3️⃣ Форма с прикреплением файла. Долго искала плагин, который позволит нормально застилизовать это инпут. Нашла, подключила, застилизовала... Оказалось, что на битрексе для этой задачи есть специальный модуль и нужно просто под некоторые классы написать стили

4️⃣ Бегущая строка. Тоже много времени потратила на писки решения. Зато найденное решение добавила в шаблон в сборке и теперь на подключение уйдет минут 5)

#работа #верстка