Frontend Interview - собеседования по Javascript / Html / Css

Построение пользовательских интерфейсов

Интерфейс — лицо электронного продукта. Лицо успешных сайтов, приложений и программ вызывает у пользователей доверие и симпатию. Построение пользовательских интерфейсов — интересная и многогранная работа. Эта книга будет полезна всем, кто участвует в работе над созданием электронных продуктов. Вы начинающий дизайнер интерфейсов? Книга поможет углубить и расширить знания о профессии. Вы практикующий UI/UX-дизайнер? Из книги вы почерпнёте инструменты и методики, которые позволят увеличить эффективность вашей работы. Вы менеджер, глава студии или стартапа? Эта книга поможет вам наладить и систематизировать процессы в команде.

👉 @frontendInterview

Как браузер понимает что картинка является картинкой?

Браузер понимает, что файл является картинкой, благодаря MIME-типу, расширению файла и контексту его использования в HTML. Рассмотрим подробнее.

MIME-тип (Media Type)
MIME-тип (Multipurpose Internet Mail Extensions) сообщает браузеру, какой тип контента загружается. Например:
- image/png → PNG
- image/jpeg → JPEG
- image/svg+xml → SVG
- image/gif → GIF
- image/webp → WebP

Content-Type: image/png

Расширение файла
Хотя MIME-тип важнее, браузер также может ориентироваться на расширение файла (.jpg, .png, .gif).

<img src="picture.jpg" alt="Картинка">

HTML-теги и атрибуты
Когда браузер встречает в коде такие теги, как <img>, <picture>, <canvas>, он ожидает, что внутри будет изображение.

<img src="image.png" alt="Пример картинки">

Формат и сигнатура файла
Даже если расширение и MIME-тип указаны неверно, браузер может проверить сигнатуру файла (первые байты). Например:
- PNG-файл всегда начинается с байтов 89 50 4E 47 (что означает "PNG" в ASCII).
- JPEG — FF D8 FF.
- GIF — 47 49 46 38 (GIF89a).

👉 @frontendInterview

Разработчик и обучающий видос

👉 @frontendInterview

У тебя уже есть знания, проекты в портфолио, резюме, ты учишь вопросы с собеседований. Но офферов всё нет.
Что не так?

📌 У меня было так же. Думал, что всё дело в навыках — а оказалось, что у меня не было стратегии поиска.

Не понимал, с чего начать, как выделиться среди других, что говорить на собеседовании и как вообще туда попасть.
Пробовал наугад — откликался на всё подряд, писал одно и то же, расстраивался, когда не отвечали.

💡 Потом наткнулся на бесплатный гайд с пошаговым планом: как построить стратегию поиска работы от Яндекс Практикума — и многое стало понятно.
Там простыми словами объясняют:
– как перейти от обучения к поиску работы,
– как составить резюме, которое цепляет,
– как написать так, чтобы HR заметил,
– как вести себя на интервью,
– как устроен найм изнутри.

Кроме этого, у Практикума есть еще большая подборка видео с рекомендациями от HR и примерами реальных собеседований.
👉 Гайд в прикреплённом файле. Советую начать с него, а потом еще и видео с экспертами посмотреть, чтобы получить заветный оффер. 

Реклама, АНО ДПО “Образовательные технологии Яндекса”, ИНН 7704282033

Шаг за шагом проектируем сокращатель ссылок

В этой статье я хочу показать, что из себя представляет System Design. На примере простого и очень популярного насобеседованиях сервиса «Сокращатель ссылок», мы рассмотрим стадии System Design и в конце у нас будет готова схема системы со всеми расчетами.

👉 @frontendInterview

Тултип

Это небольшая всплывающая подсказка с дополнительной информацией о функциях интерактивного элемента. Появляется при наведении курсора на элемент или взаимодействии с ним с клавиатуры. Это распространённый паттерн в веб-интерфейсах.

Тултип полезен, когда у элемента нет подписи, только иконка. Или когда нужно подробнее раскрыть его назначение.

Тултип может быть двух типов:
- статичный — будет показываться только с одной, заранее выбранной, стороны;
- адаптивный — будет появляться сверху, справа, снизу и слева от элемента в зависимости от наличия свободного места на экране.

В статье разберём три способа создания тултипа:
- Статичный.
- Адаптивный на основе Intersection Observer.
- Адаптивный на основе Popover API и CSS Anchor Positioning.

👉 @frontendInterview

👉 @frontendInterview

Зачем нужен docker?

Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации.

Решает проблему "работает у меня, но не у тебя"
В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере.

Автоматизирует развертывание
Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер.

Легко масштабировать
Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes).

Разделяет зависимости
Каждое приложение работает в изолированной среде, и конфликты библиотек исключены.

Работает везде (Windows, Mac, Linux, серверы, облако)
Контейнер можно запустить где угодно, где установлен Docker.

Как работает Docker?

Создаем Dockerfile (инструкция для сборки контейнера)
Пример для Node.js-приложения

# Базовый образ с Node.js
FROM node:18

# Устанавливаем рабочую директорию
WORKDIR /app

# Копируем файлы проекта
COPY package.json ./
RUN npm install
COPY . .

# Запускаем приложение
CMD ["node", "server.js"]

Собираем образ Docker (создаем "упакованный" контейнер)

docker build -t my-app .

Запускаем контейнер

docker run -p 3000:3000 my-app

👉 @frontendInterview

Highest and Lowest

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

Примеры:

highAndLow("1 2 3 4 5");   // return "5 1"
highAndLow("1 2 -3 4 5");  // return "5 -3"
highAndLow("1 9 3 4 -5");  // return "9 -5"

👉 @frontendInterview

Learning JavaScript Design Patterns: A JavaScript and React Developer's Guide (2023)

Вы хотите писать красивый, структурированный и удобный JavaScript, применяя современные паттерны проектирования? Вам нужен чистый, эффективный, управляемый код? Хотите быть в курсе последних передовых практик? Если да, то это обновленное второе издание книги - идеальное место для начала работы.

👉 @frontendInterview

​env()

Если «бровки» и «чёлки» устройства заслоняют контент — env() придёт на помощь.

Функция env() используется для вставки значения переменной среды, определенной юзер-агентом, в ваш CSS. Это почти то же самое, что и var() в CSS, но env() переменные определяются агентом пользователя, не самим пользователем. Эти переменные имеют глобальную область действия.

🕵️Агентами пользователя часто называют браузеры.

Свойство уже поддерживается во всех современных браузерах. А если нужно добавить поддержку для старых версий, можно использовать плагин PostCSS Preset Env – он преобразует современные CSS-функции в полифилы.

Пример

.element {
  margin-bottom: env(safe-area-inset-bottom, 16px);
}

Второе значение в скобках — запасное. Если переменная не определена, значение будет равно 16px.

Переменные safe-area-inset-* изначально появились в iOS, чтобы разработчики могли располагать контент в безопасной зоне — там, где его точно не обрежет экран. Сейчас они полезны и на других устройствах с необычными формами экрана.

Частая проблема, которую решает env() — это всплывающие уведомления (пуши), которые могут перекрывать элементы интерфейса. Если задавать фиксированные блоки с учётом env(), они останутся в видимой области и не будут перекрыты.

env() можно применять и в PWA. Такие приложения используют пространство окна по максимуму, включая область, где обычно находится заголовок окна. Переменные titlebar-area-* позволяют размещать элементы прямо в этой зоне, не мешая системным кнопкам.

А переменные keyboard-inset-* сообщают, где на экране появилась виртуальная клавиатура. С их помощью можно узнать отступы от краёв и адаптировать интерфейс так, чтобы элементы не прятались за клавиатуру.

👉 @frontendInterview

Доверяй, но проверяй

👉 @frontendInterview

Программирование как разработка теорий: почему senior-разработчики стали ценны как никогда?

В 1985 году учёный Питер Нур будто зрил в будущее, написав свою работу под названием «Programming as Theory Building», которая сегодня стала весьма актуальной. Мы всё чаще видим, как начинающие разработчики бездумно принимают сгенерированный ИИ код, который толком не понимают, а кодовые базы разрастаются лишёнными теоретических основ реализациями. В свете всего этого чётко вырисовывается основная идея Нура: «программа — это не её исходный код».

👉 @frontendInterview

Скелетон

Скелетон — это временная «заглушка». Он показывается вместо основного контента страницы на время загрузки данных. Пользователь видит не пустоту, а однотонные блоки, похожие на будущее содержимое: текст, кнопки или картинки. Часто их анимируют, что создаёт эффект загрузки. Это распространённый паттерн в веб-интерфейсах.

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

В рецепте разберём создание анимированного скелетона для карточки статьи.

👉 @frontendInterview