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

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

👉 @frontendInterview

Find numbers with 3 divisorsВаша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).Пример:solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8👉 @frontendInterview

Data Structures & Algorithms with JavaScriptХорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.👉 @frontendInterview

​Что делает babel?Babel – это транспилер для JavaScript, который преобразует современный код (ES6+ и JSX) в старый, совместимый с более старыми браузерами. Поддержка старых браузеров Некоторые браузеры (например, Internet Explorer) не поддерживают новые фичи JavaScript. Babel переводит код на более старый стандарт, чтобы он работал везде. Поддержка современных стандартов (ES6, ES7, ES8...) Позволяет использовать новые возможности JavaScript, даже если браузер их пока не поддерживает. Компиляция JSX Babel преобразует JSX (используется в React) в обычный JavaScript. Оптимизация и эксперименты Можно использовать нестандартные предложения для JavaScript, такие как плагины для новых фич. Как это работает? Babel делает три шага: Парсинг – разбор кода в абстрактное синтаксическое дерево (AST). Трансформация – изменение AST (например, замена const на var). Генерация – создание нового кода из изменённого AST. Пример работы Babel Современный JavaScript (ES6+) const greet = (name) => `Hello, ${name}!`;console.log(greet("Alice"));После транспиляции Babel (ES5) "use strict";function greet(name) { return "Hello, " + name + "!";}console.log(greet("Alice"));👉 @frontendInterview