"А не провести ли мне трансляцию с версткой какого-нибудь макета в прямом эфире🤔" — пришло мне в голову, пока я верстала 3 и 4 задания от Яндекс.Практикума (кстати, скоро расскажу что как)

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

Было бы вам интересно присоединиться к такой трансляции, поболтать и понаблюдать за процессом?

Яндекс.Практикум: спринт 2

Во-первых, как и обещала, рассказываю про правильный путь решения верстки из первого спринта.

Если смотреть видео с тем, как правильно было сверстать проект «Оно тебе надо», то получается, что несколько тегов span и разного letter-spacing было достаточно. И, не смотря на это, я что-то сделала очевидно с ошибкой. Раз моя первая релизация была такая же, однако не сработало.

Во-вторых, вовсю идет следующий. Новые задания ожидаемо стали немного сложнее.

Третье задание больше похоже было подготовку к жонглированию селекторами. Самое сложное — условия выполнения задания:
1) необходимость использования трех псевдоселекторов. Двух before и after для звездочки в заголовке и самого тултипа и одного для оверлея при отображении тултипа.
2) Нужно было использовать только 2 тега h1 и vidoe.
Следственно для реализации потребовалось использовать has().

Четвертое задание развивает степень жонглирования селекторами + добавляет работы с элементами формы.

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

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

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

*скрины тут)

Все еще хочу провести стрим с версткой какого-нибудь макета. Скоро придет время выбирать время и дату, а пока давайте определимся с самим макетом. В этом посте перечисление вариантов, а ниже будет голосование.

Сайт подкаста
Хайкинг лендос
Инженерные решения лендос
Соус для кофе лендос

Для меня есть интересное в каждом, так что не стесняйтесь выбирать)

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

#верстка - все что касается верстки
— что нужно знать о верстке
— про поток документа
— про доступность
— про семантику HTML
— вес CSS селекторов
#курсПоВерстке

#JS
— что нужно знать про JavaScript

#TS
— что нужно знать про TypeScript

Всякая всячина:
#планирование
#мотивация
#планРазвития

Про доступность интерфейса.

Доступность в верстке в целом интересный предмет. Вроде она есть, но браузер не будет ругаться, если ее нет. Да и в целом никто не будет ругаться. Не смотря на то, что ГОСТ про доступность существует и даже обновлялся несколько раз, я про него ни от заказчиков ни от руководства никогда не слышала. Хотя разрабатывала, и сайты с гос поддержкой, и приложения для банка. Когда я была частью команды разработки банка, с нами выходила на связь целая команда делающая аудиты доступности интерфейсов. В остальных проектах, к сожалению, про это даже никто не заговаривал. :(

Грубо говоря: уровень доступности = уровню эмпатичности верстальщика + чувство личной ответственности.

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

Давайте! А как? 🤔

Что входит в понятие доступности?

- Контрастность интерфейса. Для тех, кто плохо различает цвета или использует ваше приложение на солнце
- Поддержка экстра крупных шрифтов. Для слабовидящих
- Навигация по клавишам, с или без скринридеров. Для незрячих и тех, кто не может/не хочет использовать мышь
- Добавление описаний картинок, лейблов для элементов формы и подписи к кнопкам, содержащим только иконки.
- Отключение анимаций. Для пользователей, у которых стоит такая настройка в браузере (например, страдающих эпилепсией)

А как понять что я все сделал правильно? 🤯

Существует множество инструментов.

Проверить может ли пользователь попасть на определенное поле или кнопку, не стоит вообще ничего. Достаточно просто самому понажимать кнопку табуляции.

С помощью инструментов разработчика можно смоделировать проверку:
- контрастности (или использовать проверку контрастности на уровне дизайна в Figma),
- отключенных анимаций,
- версию для слабовидящих.

Можно использовать или установить скринридер (не во всех ОС есть предустановленные скринридеры) + использовать ту же кнопку табуляции (+ стрелочки и кнопку ввода), чтобы проверить:
- правило: «Все, что должно быть интерактивным для пользователя, должно быть реализовано подходящими тегами»
- Прочтение описаний картинок, лейблов и подписей к кнопкам, переключение по меню и ссылкам.

При этом то же переключение по табуляции не берется из головы. Для этого браузер строит отдельный Accessibility Object Model на основе знакомого нам уже DOM. Отсюда вытекает один из сюрпризов (см ниже).

Кроме некорректно используемых тегов и атрибутов влиять может еще и CSS!

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

Бонус для тех, кто дочитал — то, что стало сюрпризом для меня:
1) отключение маркеров списка (list-style-type: none), отключает для скринридера возможность обозначить переход на следующий элемент. Он будет читать это голым текстом.
2) можно оставлять текст для скринридера у кнопок-иконок, используя класс делающий невидимым элемент с текстом. (visibility: hidden, display: none или role=«hidden» скроют элемент от скринридера)
3) применение флексов и гридов также путает сринридер при переключении по табам. (поэксперементируйте например с row-reverse у флекса мне понравилось)
4) Что существует ГОСТ

А вы часто задумываетесь о доступности ваших интерфейсов?

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

Всем привет, в голосовании за время проведения стрима с версткой большинство проголосовало за вечер 25 мая. Но так случилось, что я в этот день никак не смогу провести стрим.

Что скажете, если мы перенесем стрим 1 июня так же в 18:00 по МСК?
Ставьте 👍🏻 если придете и 👎🏻 если хотите быть на стриме, но нужно выбрать другой день и время.

Ну что, через пол часика запускаю стримец, ссылочку пришлю сюда) Кого ждать?)

Поверстать не поверсталось, зато приятно было поболтать. В следующий раз точно получится)

Всем привет)

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

Спасибо, что остаетесь со мной❤️

Приступила к подготовке новых постов, поскольку стало посвободнее дышать.

А пока вот что хотела вам напомнить. Делать что-то в первый раз или даже разы всегда сложно.

На днях увидела красивые сережки из бисера и захотелось мне сделать такие же. Инструкция есть, бисер купила, что еще надо. Но первые 5 попыток понять, как это все нужно делать окончились полным провалом. 5 раз мне хотелось бросить эту затею, начала болеть спина, руки не слушались, а схемы казались бесполезными.

Сплела все-таки, да самый простой узор, да выглядит наивно и ни разу не то, что я хотела изначально. НО делать что-то впервые всегда сложно, будь то рукоделие или задача с которой вы никогда раньше не сталкивались. Эффект один и причины одни и те же. В нашем мозгу пока нет связей, которые отвечают за решение новых задач. Создавать новые нейронные связи больно и тяжело, но если они создадутся, мы поумнеем)

Короче, мораль сей басни такова: не бросайте в порыве разочарования, просто пробуйте еще. Если вам интересно или нужно сделать, связь между нейронами вырастет и все получится

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

Что необходимо знать JS (осторожно! субъективное мнение)

Самое главное, JS — это хлеб насущный для фронта.

«Да никто не пишет на чистом JS.»

«Я лучше сразу научусь писать на React/Vue.»

«Во всех вакансиях вижу не JS, а TS».

Ха-ха.

В браузере интерпретируется только он — JavaScript.
TypeScript транспилируется в JS.
В основе фреймворков и библиотек лежит JS.
Так что постигать искусство владения JS придется.

Напомню, что JS не компилируемый, а интерпретируемый. Это значит, что он сразу как есть, ну почти, исполняется браузером. А значит реализация языка напрямую зависит от среды исполнения кода.

В связи с этим, ряд особенностей JS, такие, как hoisting, кажутся устаревшим рудиментом, что на первый взгляд справедливо, ведь теперь никто не использует var, а let и const ограниченны блоком кода. Однако, его наличие, как ни странно, продиктовано особенностями работы браузеров. Поэтому считать его рудиментом не верно.

Короче говоря, у всего странного в JS почти есть смысл и причина.
1. Понимая, как работает и выполняется JS будет проще найти ошибку или понять почему одно решение задачи вам подойдет лучше другого.
2. Если не пропускать такие моменты, как с хоистингом из-за бессмысленности, а понять, почему они существуют и в каком процессе браузера участвуют, вам будет проще их запомнить, переварить и принять. А значит время подготовки к каждому собесу сильно сократиться. Теперь же не надо заучивать.
3. Ну и опять же, фреймворки и библиотеки не работают на магии. Они работают на использовании того, что есть и встроено в JS, который зависит от среды в доме который построил Джек

Кстати, если вы уже приготовились парировать про зависимость JS от процессов браузера, что: «ваще-т есть JS для бэкенда» — то я вас расстрою или нет, там есть своя среда выполнения, которая имеет схожие особенности исполнения кода.

Если вы ждете прямо список, что учить, чтобы знать JS, то открывайте learn.javascript и вперед.
Разочарованы? Штош, иначе никак, это самый хороший источник для начинающих на мой взгляд, чтобы кто не думал про него. Там простым языком, периодически схематически, объясняется БАЗА.

Но для вас у меня есть кое-что. Не гайд и не список для подготовки к собеседованию. И да, это список не привязанный к ГРЕЙДу. Это то, к пониманию и знанию чего нужно прийти. Дальше, вы уже и сами будете ориентироваться, куда копнуть и что еще изучить. Этот список я бы хотела получить лет 6-7 назад)

Так что же необходимо знать в JS?
— Общая картина: Как работает? Где работает? Почему так произошло исторически? Не прочитать для галочки, а понять первопричины.
— EventLoop: Куда без него. Подробность знания может быть разного уровня, чем дальше вы будете погружаться в JS тем более четкое представление у вас появиться, но для начального этапа лучше схематично представлять путешествие исполняемого кода из вашего скрипта по нему. Отдельно про обожаемую мной тему я еще напишу потом. Вам не отвертеться.
— Разницу ссылочного и примитивных типов данных: Так будет поменьше сюрпризов и станет понятно, почему на собесах так докапываются до копирования и клонирования объектов.
— Конечно не обойтись без набора джентльмена: умение работать с массивами, объектами, условными операторами и операторами цикла — это Base.
— Типы переменных и особенности их приведения: Особенно стоит обратить внимание на принципиальную разницу null и undefined. В контексте рабочих задач это полезно понимать. Если вы еще и понимаете, почему ваш [ ] может превратиться в пустую строку — ваще умнички.
— Тот самый указатель контекста this. Его использование с функциями и объектами: На куда в какой момент указывает и что с этим делать. Так как язык интерпретируемый, браузеру просто необходимо понимать, что использовать в тот или иной момент и он использует указатель на контекст. А вам соответственно было бы не плохо понимать, на что браузер будет смотреть, чтобы ваш код работал более ожидаемо.
— Особенности стрелочных функций, тех самых, которые по началу могут пугать новичков. А почему? А потому что надо понимать, что такое callback. Спойлер, ничего страшного, коллбек — это просто функция, которая будет вызвана позже.
— Promise и прочая ассинхронщина: Promise — как много в этом слове. Не забывайте при изучении обращать больше внимания на его путешествие по EventLoop, до этого разберитесь для себя раз и навсегда что такое callback и будет вам счастье.
— Вызов функций при событиях на странице: Сейчас мало кто пишет на чистом JS, да и до фреймворков использовали jQuery. Однако стоит понимать, как мы можем писать скрипты и вызывать их по событию на каком-либо элементе разметки. (Открыть модалку по клику, добавить или удалить элемент списка. И все только с JS)
— Работа с конструкторами классов не менее важно, хотя бы потому что мы невольно используем встроенные конструкторы при использовании new Promise.

Еще лет 5 назад я бы точно написала, что наследование это супер важно, как и замыкание. Но тенденции немного изменились. Из «условно объектно-ориентированного» JS превратился в «функционально-ориентированный язык». И писать свои классы, наследовать и расширять их мы стали сильно меньше. Быть в курсе да, но до мелочей знать как этот механизм устроен на начальных этапах, пожалуй, я советовать не буду. Уверена, что найдутся люди, которые оспорят мое убеждение, и это прекрасно.

Так как в web-разработке фронтенд в вакууме редко существует, фронтендерам нужно уметь работать с API — прослойкой, позволяющей обмениваться данными с сервером. Практика наберется со временем, а чтобы поэкспериментировать с отправкой запросов, можно поискать отрытые API для обучения. Правда в них, скорее всего, будет доступен только метод GET, и соображений безопасности, конечно же.

* Минимум:
- методы запросов (GET, POST и т.д.),
- коды ответов (100, 200 и т.д),
- какие бывают заголовки запросов и как можно передать параметры запроса (через url или через body)

* Тут как раз самое частое применение ассинхронщины во всех ее проявлениях: async/awit, promise, setTimout, setInterval.
* Бонусом можно еще изучить разницу REST/REST full API, что там какие принципы как работают. Да, фронтендер вряд ли будет писать бэкенд, но осведомленность никогда не мешала (в моей практике как минимум)
* А если стало интересно разобраться, как например работают чаты, то webSocket и прочие радости тоже пригодятся.