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

Уже очевидно, что ВАЙБКОДИНГ — главный навык ближайших лет Посмотрите сами. ИИ уже забирает на себя работу целых команд: пишет код, закрывает задачи джунов и позволяет стартапам запускать продукты в 2–3 раза меньшим составом. То, на что раньше нужны были несколько разработчиков, сегодня всё чаще делает один человек с ИИ-агентами. И это только начало. Те, кто освоит вайбкодинг сейчас, смогут быстрее запускать проекты, автоматизировать огромный объём работы, увереннее конкурировать на рынке и зарабатывать больше тех, кто продолжает делать всё вручную. Начать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы. Подписывайтесь, нас уже 50 тысяч: @vibecoding_tg

У нас с начала этого года 36 человек перешли на удалёнку Зарабатывают в среднем 1200$ в месяц. Работают по свободному графику. А всё потому, что Роман Чернов более 12 лет зарабатывает на разработке сайтов, как fullstack-разработчик. И может простым языком объяснить, как это работает. Он не учит «жать на кнопки», а показывает, за что реально платят на рынке, и разбирает востребованные инструменты, включая нейросети для ускорения работы. Завтра у Романа стартует бесплатный 7-дневный практикум по Frontend-разработке. За 7 дней ты: - Соберёшь сайт на HTML и CSS - Оживишь его на JavaScript - Разберёшься в Angular - Подключишь Backend и выложишь сайт на хостинг - Сделаешь реальный заказ и поймёшь, как привлекать клиентов 👉 Успей ухватить бесплатно Доступ открыт до 22.08.

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер 13 августа(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Даниилу Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ Проект «TERMINAL» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков: • Практические курсы и задания • Книги и статьи известных авторов • Полезные инструменты и ресурсы • IT-новости и инсайды Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др. ⌨️ подписаться

TanStack Form: новый стандарт для работы с формами в JS Все знают TanStack Query (бывший React Query), который перевернул работу с запросами. Теперь команда разработчиков выпустила TanStack Form - библиотеку для управления формами, которая решает старые боли фронтендеров. Главные фишки: 🟢Агностицизм: работает не только с React, но и с Vue, Angular, Solid, Svelte и даже Vanilla JS. 🟢100% Type-Safe: глубокая интеграция с TypeScript. Ошибки в названиях полей или типах данных подсвечиваются прямо при написании кода. 🟢Валидация без привязки: можно использовать любую привычную библиотеку (Zod, Valibot, Yup) или писать кастомные функции. 🟢Производительность: библиотека обновляет состояние точечно, поэтому даже огромные формы с сотнями полей не будут тормозить интерфейс. Если вам надоело мучиться с настройкой сложных форм, TanStack Form - отличный кандидат на замену старым инструментам. 👉 @frontendInterview

«Летающий» фокус на View Transitions API Анимация перемещения фокуса между элементами (focus ring) делает интерфейс «живее» и помогает пользователю не терять активный элемент при навигации с клавиатуры. Раньше для этого высчитывали координаты через getBoundingClientRect, теперь всё делает браузер. Вместо анимации самой кнопки мы анимируем только рамку фокуса. Для этого каждому интерактивному элементу добавляется вспомогательный <span>. 1️⃣ CSS: Рамка фокуса получает уникальное view-transition-name только в тот момент, когда родительский элемент находится в состоянии :focus-visible. 2️⃣ JS: Переключаем фокус программно внутри startViewTransition. Браузер увидит, что элемент с именем focus-ring переместился и изменил размер, и сам создаст плавный переход. 👉 @frontendInterview

Кастомизация списков: от ::marker до @counter-style Современный CSS позволяет гибко управлять списками, не перегружая HTML лишними элементами. Разбираем три основных подхода. ✅ Псевдоэлемент ::marker Самый быстрый способ изменить стандартную точку или цифру. Что можно: менять color, font-size и font-family. Ограничение: нельзя задать фон или произвольное позиционирование. Нюанс: маркер выравнивается по базовой линии текста. При большом font-size он сместится вверх относительно строки. ✅ Директива @counter-style Инструмент для создания собственных систем нумерации (Baseline 2023). system: cyclic — позволяет зациклить любые символы или эмодзи (например, фазы луны 🌑🌓🌕). system: extends — модифицирует стандартные стили (например, заменяет точку после цифры на скобку: 1) вместо 1.). ✅ Полный контроль через ::before Когда возможностей ::marker не хватает для сложного дизайна. Доступность: при list-style: none обязательно добавляйте role="list" в HTML, иначе Safari перестанет озвучивать список корректно. Механика: используйте функции counter(list-item) для простых списков или counters(list-item, ".") для вложенной нумерации (1.1, 1.2). Верстка: через position: absolute маркеру можно задать любые размеры, фон и точное положение относительно текста. Источник: https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/ 👉 @frontendInterview

CSS-анимация на примере аналоговых часов Классический разбор того, как знание спецификации заменяет скрипты. Автор воссоздал реалистичные часы, используя только возможности CSS3. Адаптивность через em: Один font-size родителя масштабирует все часы пропорционально (включая тени и засечки). Реалистичный хром: Многослойные box-shadow (внешние и inset) создают объем и металлический блеск без картинок. Вложенные transform: rotate(): Умная расстановка минутных делений по кругу с помощью всего нескольких тегов <i>. Тиканье стрелки: Анимация с animation-timing-function: steps(60) вместо плавного вращения. Понимание вложенных трансформаций и оптимизации рендеринга помогает делать производительные UI-анимации, не нагружая Main Thread. 📖 Детали реализации на Хабре: https://habr.com/ru/articles/171015/ 👉 @frontendInterview

🧭 Разбираем React вместе с Podlodka React Crew Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами. Базового понимания фреймворка становится недостаточно для результативной работы. 💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React». С 23 по 27 марта ее участники: ⚙️ узнают, как устроен рендер и внутренние механизмы в современном React 🧠 познакомятся с архитектурой приложений, где применяются React Server Components 📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak 🛠️познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами. Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇 🎟Забрать early-bird билет: https://podlodka.io/reactcrew

System Design - этап собеседования, на котором часто сыпятся даже сильные разработчики. Не потому, что они плохо пишут код, а потому что никогда не проектировали системы целиком и не знают, как уложить это в 40 минут собеса. В одном из гайдов собрана база, без которой сложно пройти System Design интервью: что именно проверяют на таких собеседованиях, почему плохой архитектурный дизайн может уронить продукт, какие требования собирают перед проектированием и как инженеры подходят к построению систем уровня Amazon. В первой части рассказывается: - что такое системный дизайн и кому он нужен - как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API - какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие. Во второй части планируют разобрать System Design во фронтенде, но для подготовки к собеседованию, по сути, достаточно уже первой. Ссылка на видео: https://youtu.be/PgC7LzIG29k

Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа. ИИ не убил профессию. Он убрал самое страшное — барьер входа. Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю. Именно это мы и делаем на бесплатном 7-дневном практикуме. Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами. Стартуем завтра. 👉 Приходи на бесплатный практикум 🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»

Find the stray number Вам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число. Входной массив всегда будет верным! (нечетная длина >= 3) Примеры: [1, 1, 2] ==> 2 [17, 17, 3, 17, 17, 17, 17] ==> 3 👉 @frontendInterview

Программирование в алгоритмах Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению. 👉 @frontendInterview

Как реализовать перегрузку функции в TypeScript? TypeScript поддерживает перегрузку функций, но её реализация отличается от той, которую можно видеть в других языках. А именно, описывается лишь одна функция и некоторое количество её объявлений с разными параметрами. Когда такой код компилируется в JavaScript, в нём остаётся лишь одна функция. Этот механизм работает благодаря тому, что JS-функции можно вызывать с любым количеством параметров. class Foo { myMethod(a: string); myMethod(a: number); myMethod(a: number, b: string); myMethod(a: any, b ? : string) { alert(a.toString()); } } 👉 @frontendInterview

Story Points или искусство делать ставку на выдуманные числа Сегодня я хотел бы в очередной раз поднять тему оценки задач, а конкретно оценки при помощи Story Points. Хотя мы давно применяем их в работе, оказалось, что команда по-разному трактует детали. Поэтому мы решили систематизировать и выровнять наши знания, собрать хорошие практики по работе со Story Points и попробовать улучшить процедуру оценки задач у нас. Результатом работы стал этот материал, которым я с радостью делюсь с вами. Он не претендует на откровения, но удобно собирает терминологию, практические советы и наш опыт — возможно, это сэкономит вам пару-тройку Story Points. 👉 @frontendInterview

​CSS cвойство margin Margin задаёт внешние отступы вокруг элемента. Эти отступы не являются частью ширины/высоты элемента при любом значении box-sizing. Схлопывание Вертикальные отступы схлопываются друг с другом, горизонтальные – нет. То-есть, если два <div> расположить в колонку (один под другим) и задать каждому margin: 20px 0, то расстояние между ними будет равняться 20px, а не 40px. При этом, если бы у верхнего элемента был задан отступ в 40px, а у нижнего - в 30px, то автоматически выбрался бы больший из них - 40px. Горизонтальные отступы при этом не схлопываются, а суммируются. Отрицательные значения Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места. В CSS есть другой способ добиться похожего эффекта – а именно position:relative. Но между ними есть одно принципиальное различие: при сдвиге через margin соседние элементы занимают освободившееся пространство в отличие от position: relative, при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым». 👉 @frontendInterview

👉 @frontendInterview