​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

❔❔❔ JS-разработчик?

А насколько хорошо ты знаешь Vue.js? JS-разработчик? А насколько хорошо ты знаешь Vue.js?

✔️ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js Developer" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене!

⏰ Время прохождения теста ограничено 30 минут

🤑 Сейчас действуют новогодние скидки -23% на все курсы

✍️ПРОЙТИ ТЕСТ: https://otus.pw/rLTj/

.dataset

Свойство dataset позволяет считывать или устанавливать любые дата-атрибуты на HTML-элементе.
Дата-атрибут — это пользовательский атрибут на элементе, название которого начинается с data-, например data-testid. Дата атрибуты используются, чтобы хранить значения на элементах в HTML.

Обращение к свойству dataset вернёт объект со всеми дата-атрибутами, которые есть на элементе. Названиями полей в объекте будут имена дата-атрибутов после префикса data-. Например, если атрибут называется data-columns, то поле в объекте для этого атрибута будет называться columns.

<h1>Известные ситхи</h1>
<ul>
<li data-id="1541" data-episode="1">Дарт Мол</li>
<li data-id="9434" data-episode="4">Дарт Вейдер</li>
<li data-id="5549" data-episode="4">Дарт Сидиус</li>
</ul>

const items = document.querySelectorAll('li')

const firstItem = items[0]

console.log(firstItem.dataset)
// { id: '1541', episode: '1' }

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Хотите немного фронтенда этим прекрасным днём?
Залетайте на канал AvitoTech — ребята выпустили новый проект, где разрабы рассказывают о своих задачах. И о том, как их решали 🙂
Первый выпуск — об особенностях работы Unicode в JavaScript: clc.to/GxIVyQ
Разработчик Авито опишет процесс работы с кодовыми точками и на практике покажет, как можно посчитать длину текста.

Реклама. ООО «Авито Тех». JapBIcB7o

👉 @frontendInterview

Приглашаем JavaScript фронтенд и бэкенд-разработчиков прокачать навыки на вебинаре в OTUS!

🟡 22 декабря в 20:00 пройдет открытый урок «Pinia vs Vuex: Является ли Pinia хорошей заменой Vuex?» в рамках онлайн-курса «Vue.js разработчик».

На занятии мы разберем

1. Проведём сравнение между Pinia и Vuex.
2. Проанализируем настройку и сильные стороны: сообщества и производительность обоих стейт менеджеров.
3. Рассмотрим новые изменения в Vuex 5 по сравнению с Pinia 2.

Не упустите возможность протестировать курс и пообщаться с Михаилом Кузнецовым, fullstack разработчиком в международной финансовой корпорации ING.

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

navigation

Роль navigation создаёт ориентир на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню с ориентирами.
В большинстве случаев лучше использовать <nav> вместо роли navigation.

Пример
<header>
<span role="nav">
<ul>
<li>
<a href="/tapirs-life/">Где обитают тапиры</a>
</li>
<li>
<a href="/tapirs-food/">Как питаются тапиры</a>
</li>
</ul>
</span>
</header>

👉 @frontendInterview

Введение в теорию алгоритмов и структур данных

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

👉 @frontendInterview

parseInt() reloaded

Ваша задача - создать конвертер строки в число. Входящая строка представляет собой число, записанное словами.

Примеры:
"one" => 1
"twenty" => 20
"two hundred forty-six" => 246
"seven hundred eighty-three thousand nine hundred and nineteen" => 783919

👉 @frontendInterview

Область видимости в JavaScript

В JavaScript есть три области видимости:
1. глобальная
2. область видимости функции
3. блочная.

Глобальная переменная объявлена вне функции или блока и доступна в любом месте исходного кода:

 var num = 5;
 function foo() {
   console.log(num);
 }
 foo();                // 5
 console.log(num);     // 5
 {
   console.log(num);   // 5
 }

Локальная переменная доступна в любом месте внутри тела функции, в которой она была объявлена:
function foo() {
var num = 5;
console.log(num);
}
foo(); // 5
console.log(typeof num); // undefined

Блочная переменная объявляется с помощью ключевых слов let или const и доступна в любом месте внутри своего блока.
let num = 0;
{
let num = 5;
console.log(num); // 5
{
const num = 10;
console.log(num); // 10
}
console.log(num); // 5
}
console.log(num); // 0

👉 @frontendInterview

👉 @frontendInterview

Приглашаем JavaScript фронтенд и бэкенд-разработчиков прокачать навыки на вебинаре в OTUS!

🟡 22 декабря в 20:00 пройдет открытый урок «Pinia vs Vuex: Является ли Pinia хорошей заменой Vuex?» в рамках онлайн-курса «Vue.js разработчик».

На занятии мы разберем

1. Проведём сравнение между Pinia и Vuex.
2. Проанализируем настройку и сильные стороны: сообщества и производительность обоих стейт менеджеров.
3. Рассмотрим новые изменения в Vuex 5 по сравнению с Pinia 2.

Не упустите возможность протестировать курс и пообщаться с Михаилом Кузнецовым, fullstack разработчиком в международной финансовой корпорации ING.

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

🤑 Сейчас действуют новогодние скидки -23% на все курсы

CSS Counters, как стилизовать нумерацию блоков

Счетчики CSS похожи на "переменные". Значения переменных могут быть увеличены с помощью правил CSS (которые отслеживают, сколько раз они используются).
С помощью этих счетчиков удобно нумеровать абзацы, пункты лицензионных соглашений, шаги оформления заказа да и вообще всё где используется последовательная нумерация.

ul {
counter-reset: listNumber;
}
li:before {
counter-increment: listNumber;
content: "№ " counter(listNumber);
}

👉 @frontendInterview