Привет, это HTML Academy!

Принесли вам скидку 50% на чёрную пятницу — это отличная возможность самостоятельно научиться веб-разработке и сменить профессию.

Если интересно — оставьте заявку по ссылке и мы с вами свяжемся.

👉 @frontendInterview

👉 @frontendInterview

​Ссылки против кнопок в современных веб-приложениях

Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками.

Кнопки
Могучая кнопка и правда крутая. Вот что она может:

1. Получать фокус с клавиатуры по умолчанию
2. Отправлять данные формы на сервер
3. Очищать форму
4. Блокироваться с помощью атрибута disabled
5. Давать подсказку скринридеру с помощью неявного атрибута role="button"
6. Показывать состояния ∶focus, ∶hover, ∶active, ∶disabled

Если добавить скрипта,кнопка идеальный элемент для:
1. Открывания модального окна
2. Вызова всплывающего меню
3. Переключения интерфейса

Ссылки
Вот несколько базовых возможностей ссылок, или якорей

1. Создавать гипертекст, сеть онлайн-ресурсов
2. Перевести пользователя на новую страницу или окно
3. Изменять URL
4. Вызвать браузерные перерисовку/перезагрузку
5. Переходить по якорям внутри страницы
6. Способны принимать фокус по умолчанию с помощью атрибута href
7. Регистрируют клик с помощью клавиши Enter
8. Не блокируются как кнопки (но их можно сделать неактивными с помощью tabindex="-1" и aria-hidden="true")

Лично для меня главное различие между ссылкой и кнопкой — то, что ссылки перемещают пользователя на новый ресурс, унося его из текущего контекста (внутренние ссылки — единственное исключение). Кнопка же переключает что-то в интерфейсе или вызывает новый контент в том же самом контексте.

👉 @frontendInterview

Production Ready GraphQL (2020)

Данная книга содержит полное описании того, что входит в создание GraphQL API: дизайн, архитектура, реализация и даже документации.
Примеры в книге не зависит от языка. Вместо этого они фокусируется на концепциях и шаблонах, которые реализуются независимо от того, как вы создаете сервер GraphQL.

👉 @frontendInterview

Largest Elements

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

Пример:
largest(2, [7,6,5,4,3,2,1])
// => [6,7]

👉 @frontendInterview

Всплытие событий

Принцип всплытия очень простой.
Когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.
Например, есть 3 вложенных элемента FORM > DIV > P с обработчиком на каждом:
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>

Клик по внутреннему <p> вызовет обработчик onclick:
1. Сначала на самом <p>.
2. Потом на внешнем <div>.
3. Затем на внешнем <form>.
И так далее вверх по цепочке до самого document.

Поэтому если кликнуть на <p>, то мы увидим три оповещения: p → div → form.

Этот процесс называется «всплытием», потому что события «всплывают» от внутреннего элемента вверх через родителей подобно тому, как всплывает пузырёк воздуха в воде.

Ключевое слово в этой фразе – «почти».
Например, событие focus не всплывает. Однако, стоит понимать, что это скорее исключение, чем правило.

YaTalks: 3-4 декабря

Уже совсем скоро состоится главная конференция Яндекса для IT-сообщества. Спикеры обсудят интересные проекты и жизнь индустрии в новой реальности.

На фронтенд-треке нас ждут:

🎯Дискуссия «Веб в 2022. Что изменилось?»
🎯 Доклад «Chrome DevTools — спрятанные полезности»
🎯Доклад «Яндекс Маркет, который вы не видите» об интерфейсах для логистов и другие темы.

Участники могут записаться на индивидуальные консультации с экспертами отрасли. Среди них, например, Алёна Батицкая, тимлид команды фронтенда в Дока, и Евгений Кот, director of development в Wrike.

Подробная программа и регистрация

👉 @frontendInterview

Как определить, поддерживается ли CSS свойство в браузере пользователя?

CSS директива @supports помогает разработчикам определять справится ли браузер пользователя с CSS свойством или нет.

Синтаксис директивы @supports такой же, как и у @media запросов:

 @supports(prop:value) {
   /* стили */
 }

Простая проверка свойства

 @supports (display: flex) {
   div { display: flex; }
 }

Ключевое слово not
@supports в паре со словом not осуществляет проверку на отсутствие поддержки какого-либо свойства:
@supports not (display: flex) {
div { float: left; }
}

👉 @frontendInterview

A?.Frontend х Selectel: приглашаем вас в гости frontend-сообщества 💌

Когда: 7 декабря (среда), в 19:00
Где: Санкт-Петербург, ул. Цветочная, д. 19

💡 «Добро пожаловать в Storybook Community»
Доклад Никиты Дукина, Frontend-разработчика в Альфа-Банке. Расскажем об инструменте Storybook.

💡 «Оптимизируем графику для веба like a boss»
Ведущий разработчик сайта в Selectel, Евгений Полосухин поделится секретами создания изображения для веб-приложений.

💡 «Патология вёрстки»
C Николаем Громовым, ведущим разработчиком интерфейсов в ООО «Наука», рассмотрим описание клинической картины и принципов лечения некоторых болезней вёрстки.

Модерирует встречу Ольга Болотова, руководитель направления JavaScript в Альфа-Банке.

Это ещё не все 🎄

🎅🏼 Будем вместе создавать новогоднее настроение, играть в «Тайного Санту».

Необходимо только зарегистрироваться https://alfa-digital-org.timepad.ru/event/2245478/ и для входа в офис захватить с собой паспорт.

Подписывайтесь на сообщество фронтенда: https://news.1rj.ru/str/alfa_frontend

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​Что такое ARIA-атрибуты?

ARIA-атрибуты — это группа дополнительных атрибутов из спецификации WAI-ARIA, которая состоит из свойств и состояний.
Состояния (states) описывают состояния элементов и отвечают на вопрос «В каком состоянии сейчас элемент?».
Свойства (properties) нужны для раскрытия дополнительных функций элементов. Отвечают на вопрос «Что ещё делает этот элемент?».

ARIA-атрибуты поддерживают роли и помогают браузерам и Accessibility API правильно обрабатывать элементы для вспомогательных технологий. Сами по себе, без CSS и JavaScript, они не изменяют внешний вид и функциональность элементов.

Общий синтаксис ARIA-атрибутов — aria-атрибут="значение".
Для примера сообщим скринридеру с помощью ARIA-атрибута, что у поля есть инструкция к нему.
<label for="psw">Пароль</label>
<input
type="password"
name="password"
id="psw"
aria-describedby="hint"
>
<span id="hint">Пароль должен содержать не меньше 20 знаков</span>

aria-describedby связывает с помощью одинакового ID два элемента — поле и подсказку из тега <span>. Скринридер озвучит текст подсказки после подписи и основной информации о поле.

👉 @frontendInterview

Beginning DevOps with Docker: Automate the deployment of your environment with the power of the Docker toolchain (2018)

Эта книга познакомит вас с основами Docker и DevOps, а также с тем как они интегрируются. Затем вы поймете, что такое контейнеры, как их создавать и управлять ими. Далее в книге описывается работа с файлом docker-compose и CLI. Затем будет произведена настройка сети с помощью инструмента docker-compose. Постепенно вы узнаете, как масштабировать конвейер доставки приложений с помощью Docker. Также, вы поймете концепцию оркестровки и научитесь реализовывать доставку приложений в контейнерах.

👉 @frontendInterview