Вопросы на собеседовании для middle frontend-разработчика в 2022 году (часть 2)

В части 1 были рассмотрены вопросы, которые достались мне в одной из компаний. В этом материале хочу поделиться с вами вопросами, которые достались моему коллеге. Погнали. 1️⃣ Что выведет консоль? Аргументируйте свой ответ.

2️⃣ Что выведет консоль? Аргументируйте свой ответ.

3️⃣ Создайте метод у объекта String, который многократно повторяет строку (не используя метод … подробнее

Вопросы на собеседовании для middle frontend-разработчика в 2022 году (часть 1)

Проходя собеседования в этом году на позицию middle frontend-разработчик, я решил собрать вопросы, которые сейчас задают наши с вами опытные коллеги. И так, поехали: 0️⃣ Что выведет консоль?

1️⃣ Что выведет консоль?

2️⃣ Классы, наследование, доступ к родительскому классу через super(); 3️⃣ Что такое new? 4️⃣ Что такое замыкание? 5️⃣ Рассказать про контекст … подробнее

Как перенести inline элемент на другую строку

Совсем не частый случай, тем не менее я с ним столкнулся и потратил определенное время на то, чтобы перенести inline элемент на другую строку. Кейс заключался в том, чтобы элементы списка, выстроенные в строку (горизонтальная менюшка), расположить в три строки: Разные варианты пробовал, но получилось следующим образом:

Потыкать пример можно ниже 🙂    

Как растянуть SVG картинку только по высоте при фиксированной ширине

Тема справедлива так же для растягивания ширины при неизменной высоте. На самом деле задача немного специфичная, ведь зачем сознательно искажать картинку/иконку, тем не менее случаи бывают разные. В моем случае нужно было сделать блок, который при наличии контента растягивался бы по высоте и его “уголок” был адаптивным. Саму рабочую конструкцию вставлять не буду, т.к. запись … подробнее

Префиксы для flexbox CSS (кросбраузерный flexbox)

В момент написания заметки поддержка flexbox браузерами составляет 86,3% без использования префиксов и 97,7% с ними. Данная заметка – шпаргалка по префиксам для свойств flex-контейнера и flex-элементов.

Данный кусочек относительно использования префиксов взят из объемной статьи по flexbox’ам с другого источника.

Почему не работает sub и sup в html

Теги <sub> и <sup> определяют подстрочный и надстрочный вариант написания текста, т.е. отображают шрифт в виде верхнего или нижнего индекса. Я данные теги использую в работе не часто и потому совсем из головы могла вылететь причина того, почему текст мог не поддаваться форматированию, другими словами в голове был один вопрос: какого хрена почему не работает <sub> … подробнее

Отступ справа от сайта (белый фон) на мобильных устройствах

Часто бывает так, что на мобильной версии сайта при просмотре на телефоне справа появляется непонятный отступ с белым фоном: Вроде и body и html при просмотре через webtools при наведении на них находятся в границах сайта, а отступ этот все равно находится за пределами body/html. Как правило, все дело во внутренних отступах, а именно в … подробнее

Как сделать ссылку некликабельной с помощью CSS

Не понимаю, почему так редко попадается информация о том, как сделать ссылку некликабельной при том, что это вполне штатное действие. Для этого нужно прописать CSS-свойство pointer-events для ссылки напрямую, через класс или id:

Ну и, соответственно, присваиваем ссылке класс .unclickable Пример: Ссылка Стоит заметить, что свойство pointer-events относится к спецификации CSS4, но в настоящий момент … подробнее

Как удалить пустые строчки в коде, написанном в SublimeText

На данном этапе работаю с одним сайтом на WorPress и столкнулся с одной проблемкой. Не то, чтобы это было проблемой, но мои перфекционистские замашки не дают мне покоя 🙂 Неприятность в том, что при работе с файлами через Sublime на хостинге, я получал после каждой строки кода 2-3 пустые строки. Порыскав в интернете сначала нашел … подробнее

Позиционирование блока через position:relative оставляет пустое пространство. Как убрать?

Половину дня потратил на решение проблемы с пустым пространством, возникающим вследствие позиционирования блока с помощью position:relative. В моем случае я перекрывал часть одного фона другим (такая вот дизайнерская задумка). Проблема заключалась в том, что после перемещения блока вверх, под ним появлялось пустое пространство, равное по высоте значению top. По некоторым ссылкам из поисковика натыкался на … подробнее