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

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