Последние посты
Frontend Головного Мозга
22 сент., 07:59
🔴AI кодинг интервью с разработчиком из международного FinTech в четверг в 19:00ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовиться.Как это будет: 📂 Александр Дмитриев, разработчик из известного международного финтеха, ex-VK, ex-Ozon проведет вайбкодинг секцию разработчику-добровольцу; 📂 Александр будет задавать реальные вопросы с секций, которые проводил сам и комментировать ответы; 📂 В конце можно будет задать любой вопрос Александру.Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы.Перех
Frontend Головного Мозга
2 сент., 14:40
Как убрать «висячие» строки во Flexbox: flex-wrap: balance и flex-line-countКаждый фронтендер сталкивался с проблемой: настраиваешь flex-wrap: wrap, но при сужении экрана на последнюю строку перескакивает ровно один элемент. Раньше это костылили через медиазапросы. Теперь в Chrome есть нативные свойства flex-wrap: balance и flex-line-count.Автобалансировка: flex-wrap: balance Свойство распределяет элементы по строкам равномерно, убирая одиноких «сирот» в конце:CSS .channels { display: flex; flex-wrap: balance; justify-content: center; gap: 1rem; } Никаких сложных вычислений или JS — браузер всё делает сам.Контроль строк через flex-line-count Оно задает минимальное количество строк. Даже если места хватает для одного ряда, элементы принудительно распределятся по заданному числу:CSS
Frontend Головного Мозга
28 мая, 15:08
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 - отличный кандидат на замену старым
2,410Открыть в TelegramFrontend Головного Мозга
11 мая, 10:14
«Летающий» фокус на View Transitions APIАнимация перемещения фокуса между элементами (focus ring) делает интерфейс «живее» и помогает пользователю не терять активный элемент при навигации с клавиатуры. Раньше для этого высчитывали координаты через getBoundingClientRect, теперь всё делает браузер.Вместо анимации самой кнопки мы анимируем только рамку фокуса. Для этого каждому интерактивному элементу добавляется вспомогательный .1️⃣ CSS: Рамка фокуса получает уникальное view-transition-name только в тот момент, когда родительский элемент находится в состоянии :focus-visible.2️⃣ JS: Переключаем фокус программно внутри startViewTransition. Браузер увидит, что элемент с именем focus-ring переместился и изменил размер, и сам создаст плавный переход.👉@frontend_mind
2,120Открыть в TelegramFrontend Головного Мозга
18 мар., 19:39
CSS-анимация на примере аналоговых часовКлассический разбор того, как знание спецификации заменяет скрипты. Автор воссоздал реалистичные часы, используя только возможности CSS3.Адаптивность через em: Один font-size родителя масштабирует все часы пропорционально (включая тени и засечки).Реалистичный хром: Многослойные box-shadow (внешние и inset) создают объем и металлический блеск без картинок.Вложенные transform: rotate(): Умная расстановка минутных делений по кругу с помощью всего нескольких тегов .Тиканье стрелки: Анимация с animation-timing-function: steps(60) вместо плавного вращения.Понимание вложенных трансформаций и оптимизации рендеринга помогает делать производительные UI-анимации, не нагружая Main Thread.📖 Детали реализации на Хабре: https://habr.com/ru/articles/171015/👉@frontend_mind
Frontend Головного Мозга
27 янв., 10:47
Find the stray numberВам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число.Входной массив всегда будет верным! (нечетная длина >= 3)Примеры: [1, 1, 2] ==> 2 [17, 17, 3, 17, 17, 17, 17] ==> 3👉@frontend_mind
2,220Открыть в TelegramFrontend Головного Мозга
25 янв., 22:53
Программирование в алгоритмахИскусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.👉@frontend_mind
Frontend Головного Мозга
25 янв., 22:52
@frontend_mindFrontend Головного Мозга
9 янв., 11:58
Как реализовать перегрузку функции в 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()); } }👉@frontend_mind
1,730Открыть в TelegramFrontend Головного Мозга
11 дек. 2025 г., 01:52
Frontend Головного Мозга
11 дек. 2025 г., 01:52
@frontend_mindFrontend Головного Мозга
5 дек. 2025 г., 20:14
Story Points или искусство делать ставку на выдуманные числаСегодня я хотел бы в очередной раз поднять тему оценки задач, а конкретно оценки при помощи Story Points. Хотя мы давно применяем их в работе, оказалось, что команда по-разному трактует детали. Поэтому мы решили систематизировать и выровнять наши знания, собрать хорошие практики по работе со Story Points и попробовать улучшить процедуру оценки задач у нас.Результатом работы стал этот материал, которым я с радостью делюсь с вами. Он не претендует на откровения, но удобно собирает терминологию, практические советы и наш опыт — возможно, это сэкономит вам пару-тройку Story Points.👉@frontend_mind
Frontend Головного Мозга
4 дек. 2025 г., 14:18
CSS cвойство marginMargin задаёт внешние отступы вокруг элемента. Эти отступы не являются частью ширины/высоты элемента при любом значении box-sizing.Схлопывание Вертикальные отступы схлопываются друг с другом, горизонтальные – нет. То-есть, если два расположить в колонку (один под другим) и задать каждому margin: 20px 0, то расстояние между ними будет равняться 20px, а не 40px. При этом, если бы у верхнего элемента был задан отступ в 40px, а у нижнего - в 30px, то автоматически выбрался бы больший из них - 40px. Горизонтальные отступы при этом не схлопываются, а суммируются.Отрицательные значения Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.В CSS есть другой способ добиться похожего эффекта – а именно position:relative. Но между ними есть одно принципиальное различие: при сдвиге через margin соседние элементы занимают освободившееся1,400Открыть в TelegramFrontend Головного Мозга
28 нояб. 2025 г., 20:40
Frontend Головного Мозга
28 нояб. 2025 г., 20:40
@frontend_mind2,110Открыть в TelegramFrontend Головного Мозга
28 нояб. 2025 г., 20:39
👉@frontend_mind
1,950Открыть в TelegramFrontend Головного Мозга
13 нояб. 2025 г., 15:44
Find numbers with 3 divisorsВаша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).Пример: solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8👉@frontend_mind
2,070Открыть в TelegramFrontend Головного Мозга
11 нояб. 2025 г., 15:51
@frontend_mindFrontend Головного Мозга
11 нояб. 2025 г., 15:50
Data Structures & Algorithms with JavaScriptХорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.👉@frontend_mind
1,040Открыть в TelegramFrontend Головного Мозга
7 нояб. 2025 г., 16:07
Что делает babel?Babel – это транспилер для JavaScript, который преобразует современный код (ES6+ и JSX) в старый, совместимый с более старыми браузерами.Поддержка старых браузеров Некоторые браузеры (например, Internet Explorer) не поддерживают новые фичи JavaScript. Babel переводит код на более старый стандарт, чтобы он работал везде.Поддержка современных стандартов (ES6, ES7, ES8...) Позволяет использовать новые возможности JavaScript, даже если браузер их пока не поддерживает.Компиляция JSX Babel преобразует JSX (используется в React) в обычный JavaScript.Оптимизация и эксперименты Можно использовать нестандартные предложения для JavaScript, такие как плагины для новых фич.Как это работает? Babel делает три шага:Парсинг – разбор кода в абстрактное синтаксическое дерево (AST).
