Как можно вывести химическую формулу в браузере?

Тег <sub> позволяет выводить подстрочный текст, например, в химических формулах: H2O.

Пример
<p>
Вода — бинарное неорганическое
соединение с химической
формулой H<sub>2</sub>O.
</p>

👉 @frontendInterview

Дед Мороз получил твое письмо - зарабатывай 100к в месяц в новом году 🎁🎅

Велкам на курс "Профессия Frontend-разработчик с нуля до PRO" от Skillbox.

- Адаптированная программа под требования работодателей
- Вебинары с разработчиками из крупных компаний
- Командный проект в конце курса
- Гарантия трудоустройства (или вернут деньги)

🎄Новогодние скидки до 60% 🎄

Какие есть глобальные ключевые слова в CSS?

Для всех свойств CSS, помимо их стандартных значений, можно задать значения в виде ключевых слов:

initial
У каждого из свойств в CSS есть значение по умолчанию. Оно применяется ещё до того, как вы написали что-либо в вашем файле стилей.
Ключевое слово initial сбрасывает все указанные значения свойства для конкретного блока до этих самых значений по умолчанию.

inherit
CSS-свойства делятся на наследуемые и ненаследуемые.
Значения наследуемых свойств применяются не только к элементу, для которого прописаны, но и для всех вложенных дочерних элементов. Это очень удобно, чтобы не писать много одинаковых свойств для разных селекторов, перечисляя всех потомков.

unset
Это ключевое слово ведёт себя по-разному с наследуемыми и ненаследуемыми свойствами:
- С наследуемыми свойствами ключевое слово unset ведёт себя как inherit.
- С ненаследуемыми свойствами оно ведёт себя как initial.

revert
Это ключевое слово сбрасывает значение свойства до указанного в стилях браузера.

👉 @frontendInterview

Learning React (2020)

Если вы хотите научиться создавать эффективные веб-приложения на React, данная книга для вас. Эта обновленная версия также идеально подходит для веб-разработчиков и инженеров-программистов, которые знают основы JavaScript, CSS и HTML. В ней представлены передовые практики и шаблоны для написания современного кода на React. Никаких предварительных знаний о React или функциональном JavaScript не требуется.

👉 @frontendInterview

Number of Decimal Digits

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

Например, в числе 9 одна цифра, в числе 66 - 2 цифры.

👉 @frontendInterview

Как добавить HTML элементу обработчик события?

addEventListener() Добавляет элементу действие, которое будет выполнено после срабатывания события. Например, на клик мышки или нажатие клавиши.

Найдём первую кнопку на странице и будем выводить сообщение в консоль, когда произошёл клик по этой кнопке.
const element = document.querySelector('button')

element.addEventListener('click', function (event) {
console.log('Произошло событие', event.type)
})

При вызове функции, в неё передаётся специальный объект (в примере выше — event), который у разных типов событий разный. Например, у событий нажатия клавиши есть код клавиши, а у событий перемещения мыши — координаты.

👉 @frontendInterview

Расскажите про свойство display в CSS.

По умолчанию все элементы в HTML бывают блочными и строчными. Но в вёрстке часто бывает, что нам нужно сделать элемент не строчным, а блочным. И наоборот.

Тут на помощь приходит свойство display ✨

Помимо значений block (блочное отображение) и inline (строчное отображение) существует смешанное значение inline-block (строчно-блочное отображение).

Значения свойства, которые встречаются в работе чаще всего:
none — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
block — элемент ведёт себя как блочный.
inline-block — элемент ведёт себя снаружи как строчный, а внутри как блочный.
flex — элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами.
grid — элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки.
Остальные значения можно посмотреть в спецификации.

👉 @frontendInterview

Что такое скринридеры?

Сайтами и приложениями пользуются разные люди. Кто-то может это делать с любого устройства, а другим нужны вспомогательные технологии (assistive technology). Это такие программы и устройства, которые упрощают взаимодействие пользователей с особыми потребностями с контентом. К примеру, выносные кнопки, трекболы, брайлевские дисплеи, экранные лупы и скринридеры.

Скринридер (screen reader) — программа, которая превращает контент интерфейсов в речь или шрифт Брайля. Другие названия — программа экранного доступа или чтения, программа чтения с экрана и экранное считывающее устройство.

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

Слабовидящие пользователи могут сочетать скринридеры с другой вспомогательной технологией — экранной лупой (screen magnification). Она увеличивает контент на экране и тоже его озвучивает, если это нужно.

👉 @frontendInterview

👉 @frontendInterview

Эволюционная архитектура. Поддержка непрерывных изменений

Пора по-новому взглянуть на постулаты, остававшиеся неизменными на протяжении многих лет. Динамично меняющийся мир диктует свои правила, в том числе и в компьютерной архитектуре. Происходящие изменения требуют новых подходов, заставляют жесткие системы становиться гибкими и подстраиваться под новые условия. Возможно ли долгосрочное планирование, если всё непрерывно меняется? Как предотвратить постепенное ухудшение архитектурного решения с течением времени?
Здесь вы найдете ответы и рекомендации, которые позволят защитить самые важные характеристики проекта в условиях непрерывных изменений.

👉 @frontendInterview

Peak array index

Вам дан массив, состоящий из чисел. Напишите функцию, которая вернет индекс элемента, суммы чисел слева и справа от которого равны. Если такого элемента нет, то верните -1.

Примеры:
peak([1,2,3,5,3,2,1]) => 3
peak([1,12,3,3,6,3,1]) => 2
peak([10,20,30,40]) => -1

👉 @frontendInterview