👉 @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

altERnaTIng cAsE <=> ALTerNAtiNG CaSe

Создайте функцию, которая принимает строку и меняет регистр букв в этой строке.

Примеры:
"hello world".toAlternatingCase() === "HELLO WORLD"
"HELLO WORLD".toAlternatingCase() === "hello world"
"hello WORLD".toAlternatingCase() === "HELLO world"
"HeLLo WoRLD".toAlternatingCase() === "hEllO wOrld"
"12345".toAlternatingCase() === "12345" // Non-alphabetical characters are unaffected
"1a2b3c4d5e".toAlternatingCase() === "1A2B3C4D5E"
"String.prototype.toAlternatingCase".toAlternatingCase() === "sTRING.PROTOTYPE.TOaLTERNATINGcASE"

👉 @frontendInterview

CSS calc()

Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер. Это позволяет задавать значения основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно игнорируется.

Функция calc() принимает любую комбинацию значений размеров.

 {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20em); 
  height:    calc(100vh - 20rem); 
  padding:   calc(1vw + 15%); 
}

Допустимые математические операции
- сложение (width: calc(20px + 20px));
- вычитание (padding: calc(10% - 10px));
- умножение (height: calc(20% * 2))
- деление. На ноль делить запрещено (width: calc(100% / 3)).

Знаки плюс и минус должны отбиваться пробелами с двух сторон.

👉 @frontendInterview

Как работать с архитектурой больших Vue-приложений?

🟡 8 декабря в 20:00 состоится открытый урок «Архитектура больших Vue-приложений и лучшие практики».

На занятии мы:
- Узнаем, как можно структурировать код по мере роста приложения.
- Рассмотрим монолитную и модульную архитектуру приложения.
- Обсудим, какие приемы можно применить для снижения сложности разработки и сопровождения.
- Разберем хорошие практики и правила хорошего стиля.
- Поговорим про антипаттерны и чего следует избегать при разработке.

Занятие проведет Юрий Тимофеев, Senior Software Engineer и преподаватель в OTUS. После занятия еще больше приемов будет ждать вас на онлайн-курсе «Vue.js разработчик».

✍️ Для регистрации на вебинар пройдите вступительный тест https://otus.pw/p5y9/

CSS | Pointer-events

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

pointer-events: none предотвращает события указателя для элемента: hover, active, click и т.п., в том числе и JavaScript событие click.

pointer-events: auto восстанавливает стандартное взаимодействие указателя с элементом.

Применение pointer-events на практике:
Запретить пользователю клик правой кнопкой мыши по фото на сайте.
Выключить взаимодействие со странице во время обработки ajax-запроса.
Блокировать любой элемент страницы от взаимодействия с курсором.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Position sticky

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

Использование sticky требует определенной разметки и стилей блока, если блок не прилипает нужно проверить эти условия:
- блок имеет свойство top или bottom
- высота родителя больше высоты блока
- у родительских блоков, вплоть до html не стоит overflow: hidden
- для сафари прописано position: -webkit-sticky

Пример реализации прилипающего бокового меню по ссылке.

👉 @frontendInterview

🤖 НИКАКИХ СОБАЧЕК

На финтех-форуме мы показывали животных. А как строим финтех — расскажем на Alfa Digital Open.

Где? Онлайн, 13 декабря. Каждый год мы рассказываем про наши новые digital-сервисы, технологии и людей, которые делают Альфу 🧑🏻‍💻👩🏻‍💻

Что обсудим:

— Как перезапустили мобильный банк Альфа-Онлайн за месяц, а не за год.
— Как научили нейросети распознавать мошенников в 3 раза лучше людей.
— Сколько раз мы ошибались, пока делали приложение для сотрудников 📱

Это бесплатно? Да. Мы делимся знаниями бесплатно.

Где записаться? Прямо сейчас на сайте 👈

@alfabank

Fullstack GraphQL: The Complete Guide to Writing GraphQL Servers and Clients with TypeScript (2020)

Full stack GraphQL - это руководство для программистов по созданию серверной и клиентской логики на GraphQL с примерами на Node.js , React, TypeScript и Apollo.

👉 @frontendInterview

You're a square!

Создайте функцию, которая проверит, является ли число полным квадратом.
Полный квадрат, также точный квадрат или квадратное число, — число, являющееся квадратом некоторого целого числа.

Примеры:
isSquare (-1) // => false
isSquare 3 // => false
isSquare 4 // => true
isSquare 25 // => true
isSquare 26 // => false

👉 @frontendInterview

​outline

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

outline на самом деле шорткат — короткое свойство для записи сразу нескольких значений. Внутри себя оно содержит свойства outline-width, outline-style и outline-color.
Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку:

outline-width
Ключевые слова thin, medium, thick — задают тонкую, среднюю или толстую ширину. Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно.
Конкретный размер — размер в любых единицах измерения, доступных в вебе. Например, 10px или 0.2em.

outline-style
none — обводка не отображается, даже если задано значение для outline-width.
dotted — обводка будет состоять из точек. Круглых точек, вроде такого •••••
dashed — обводка будет в виде пунктирной линии.
solid — значение по умолчанию, если не задано иное. Сплошная линия.
double — двойная сплошная линия.
groove — обводка будет отображаться так, будто рамка объёмная, с вдавленной серединой и подсвечена. Цвет обводки (если он отличен от чёрного) станет двухцветным.
ridge — обводка отобразится объёмной, её центр будет приподнят. Противоположно groove.
inset — объёмная рамка, края направлены внутрь элемента.
outset — объёмная рамка, края направлены наружу элемента, противоположно inset.

outline-color
любое доступное значение цвета в вебе, включая ключевые слова transparent, currentColor
invert — ключевое слово, устанавливающее противоположный цвету фона элемента цвет обводки. Удобно для достижения максимальной контрастности.

👉 @frontendInterview

👉 @frontendInterview