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

Зачем нужен 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

Не пропустите! 23 июля в 20:00 пройдет бесплатный урок по теме "Зачем JavaScript-разработчику понимать бэкенд? От fetch до Node.js".

Запись по ссылке: https://clck.ru/3NDEru

Что будет на вебинаре?

- Как устроено взаимодействие фронтенда с сервером: API, запросы, заголовки, ответы.
- Почему поверхностные знания API тормозят рост и усложняют задачи.
- Что нужно знать о Node.js и серверной части, даже если вы не fullstack.
- Как уверенное понимание архитектуры влияет на производительность и автономность.
- Почему знание бэкенда усиливает вашу позицию на проекте и на рынке.

Что узнают участники?

- Как работает связка клиент–сервер: от запроса до ответа.
- Какие ошибки делают фронтендеры при работе с API — и как их избегать.
- Как знание Node.js помогает даже тем, кто пишет только клиентскую часть.
- Почему современный разработчик не может быть “только фронтом”.
- Как это знание влияет на скорость разработки.

Не забудьте записаться на урок и получить запись пред. вебинара: https://clck.ru/3NDEru

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
Erid 2SDnjcxcqRG

👉 @frontendInterview

Тултип

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

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

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

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

👉 @frontendInterview

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

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

👉 @frontendInterview

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

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

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

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

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

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

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

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

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

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

👉 @frontendInterview

How many arguments

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

Пример:

args_count(1, 2, 3) -> 3
args_count(1, 2, 3, 10) -> 4

👉 @frontendInterview

​Что такое прогрессивный рендеринг (progressive rendering)?

Чтобы понять что такое progressive rendering, нужно понимать отличие client-side rendering от server-side rendering.

При client-side rendering (CSR) контент отрисовывается на стороне клиента (в браузере). Такой подход используется в React, когда браузеру отсылается практически пустой HTML-документ, а потом запускается скрипт, который генерирует HTML в указанном скрипту теге. Как правило это <div id="root">. Пользователь будет видеть пустую страницу, пока JS-файл полностью не загрузится.

При server-side rendering (SSR) HTML-разметка генерируется на сервере, отсылается браузеру и после этого отрисовывается на клиенте. Пользователь увидит контент сразу же, но не сможет взаимодействовать со страницей, пока не загрузится JS-файл.

При использовании прогрессивного рендеринга, кусочки HTML генерируется на сервере и отсылаются браузеру в порядке их приоритетности. То есть, элементы с самым высоким приоритетом (например <header>, фон, главная интерактивная часть страницы) генерируются на сервере, отсылаются браузеру и отрисовываются в первую очередь. Это позволяет пользователю увидеть самый важный контент как можно скорее, не дожидаясь полной загрузки всего контента. То есть, progressive rendering что-то среднее между client-side rendering и server-side rendering.

Техники реализации прогрессивного рендеринга:
Ленивая загрузка (Lazy Loading). Загрузка контента по мере необходимости. Например, если страница достаточно большая, не нужно загружать изображения вне вьюпорта. Загрузка изображения стартует за некоторое время до того как она появится во вьюпорте. Эту же технику можно использовать для загрузки контента изначально скрытых элементов. Например, можно загрузить контент закрытого меню когда пользователь наводит курсор на кнопку открытия.

Приоритизация контента. Например, не загружать изначально все CSS-стили. Добавлять в <head> загрузку только тех стилей, которые нужны для текущей видимой области HTML-документа. Остальные стили можно добавить в <body>.

👉 @frontendInterview

👉 @frontendInterview

Настройка сайта для поисковиков и скринридеров

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

Для этого необходимо разобраться с тем, как различные сервисы, службы, приложения «читают» сайт, как подготовить его для них и как сделать это правильно.

👉 @frontendInterview