Что делает babel?
Babel – это транспилер для JavaScript, который преобразует современный код (ES6+ и JSX) в старый, совместимый с более старыми браузерами.
Поддержка старых браузеров
Некоторые браузеры (например, Internet Explorer) не поддерживают новые фичи JavaScript. Babel переводит код на более старый стандарт, чтобы он работал везде.
Поддержка современных стандартов (ES6, ES7, ES8...)
Позволяет использовать новые возможности JavaScript, даже если браузер их пока не поддерживает.
Компиляция JSX
Babel преобразует JSX (используется в React) в обычный JavaScript.
Оптимизация и эксперименты
Можно использовать нестандартные предложения для JavaScript, такие как плагины для новых фич.
Как это работает?
Babel делает три шага:
Парсинг – разбор кода в абстрактное синтаксическое дерево (AST).
Трансформация – изменение AST (например, замена
Генерация – создание нового кода из изменённого AST.
Пример работы Babel
Современный JavaScript (ES6+)
После транспиляции Babel (ES5)
👉 @frontendInterview
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
👍2
Data Structures & Algorithms with JavaScript
Хорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.
👉 @frontendInterview
Хорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.
👉 @frontendInterview
👍3
Find numbers with 3 divisors
Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).
Пример:
👉 @frontendInterview
Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).
Пример:
solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8
👉 @frontendInterview
Какое значение примет result?
Anonymous Quiz
10%
"undefined"
63%
"string"
19%
"number"
4%
"1"
3%
"null"
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
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
Сегодня я хотел бы в очередной раз поднять тему оценки задач, а конкретно оценки при помощи Story Points. Хотя мы давно применяем их в работе, оказалось, что команда по-разному трактует детали. Поэтому мы решили систематизировать и выровнять наши знания, собрать хорошие практики по работе со Story Points и попробовать улучшить процедуру оценки задач у нас.
Результатом работы стал этот материал, которым я с радостью делюсь с вами. Он не претендует на откровения, но удобно собирает терминологию, практические советы и наш опыт — возможно, это сэкономит вам пару-тройку Story Points.
👉 @frontendInterview
❤3
Зачем использовать семантические классы в CSS?
Anonymous Quiz
8%
Для ускорения рендеринга страницы
82%
Для создания читаемого и понятного кода, упрощающего поддержку и масштабирование
6%
Для автоматического подключения стилей к HTML-элементам
4%
Для замены CSS-препроцессоров
👍4
Как реализовать перегрузку функции в TypeScript?
TypeScript поддерживает перегрузку функций, но её реализация отличается от той, которую можно видеть в других языках. А именно, описывается лишь одна функция и некоторое количество её объявлений с разными параметрами. Когда такой код компилируется в JavaScript, в нём остаётся лишь одна функция. Этот механизм работает благодаря тому, что JS-функции можно вызывать с любым количеством параметров.
👉 @frontendInterview
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
Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.
👉 @frontendInterview
Find the stray number
Вам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число.
Входной массив всегда будет верным! (нечетная длина >= 3)
Примеры:
👉 @frontendInterview
Вам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число.
Входной массив всегда будет верным! (нечетная длина >= 3)
Примеры:
[1, 1, 2] ==> 2
[17, 17, 3, 17, 17, 17, 17] ==> 3
👉 @frontendInterview
Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа.
ИИ не убил профессию. Он убрал самое страшное — барьер входа.
Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.
Именно это мы и делаем на бесплатном 7-дневном практикуме.
Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.
Стартуем завтра.
👉 Приходи на бесплатный практикум
🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»
ИИ не убил профессию. Он убрал самое страшное — барьер входа.
Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю.
Именно это мы и делаем на бесплатном 7-дневном практикуме.
Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами.
Стартуем завтра.
👉 Приходи на бесплатный практикум
🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»
👎5
System Design - этап собеседования, на котором часто сыпятся даже сильные разработчики. Не потому, что они плохо пишут код, а потому что никогда не проектировали системы целиком и не знают, как уложить это в 40 минут собеса.
В одном из гайдов собрана база, без которой сложно пройти System Design интервью: что именно проверяют на таких собеседованиях, почему плохой архитектурный дизайн может уронить продукт, какие требования собирают перед проектированием и как инженеры подходят к построению систем уровня Amazon.
В первой части рассказывается:
- что такое системный дизайн и кому он нужен
- как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API
- какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие.
Во второй части планируют разобрать System Design во фронтенде, но для подготовки к собеседованию, по сути, достаточно уже первой.
Ссылка на видео: https://youtu.be/PgC7LzIG29k
В одном из гайдов собрана база, без которой сложно пройти System Design интервью: что именно проверяют на таких собеседованиях, почему плохой архитектурный дизайн может уронить продукт, какие требования собирают перед проектированием и как инженеры подходят к построению систем уровня Amazon.
В первой части рассказывается:
- что такое системный дизайн и кому он нужен
- как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API
- какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие.
Во второй части планируют разобрать System Design во фронтенде, но для подготовки к собеседованию, по сути, достаточно уже первой.
Ссылка на видео: https://youtu.be/PgC7LzIG29k
YouTube
Ультимативный гайд по System Design (все IT направления) / Пройти интервью на Middle+
➡️ Забирай разбор домашек, текстовую расшифровку курса и главу про системный дизайн в аналитике: https://boosty.to/m0rtymerr/posts/359aeeac-6216-42e6-803b-b26b0f233c2c
👉 Менторы, принявшие участие в записи курса:
Инара Гаврилина: https://t.me/find_it_m…
👉 Менторы, принявшие участие в записи курса:
Инара Гаврилина: https://t.me/find_it_m…
🧭 Разбираем 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
Современные 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
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
Классический разбор того, как знание спецификации заменяет скрипты. Автор воссоздал реалистичные часы, используя только возможности 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
Первый проект по фронтенду → +22 500₽.
🔥 С 2019 года Айтилогия помогает новичкам в IT с обучением, практикой, заказами на фрилансе и собеседованием.
👉 Забирай бесплатный 7-дневный курс по фронтенд-разработке с куратором
Реклама. ИП Чернова О. А., ИНН:771399721044
🔥 С 2019 года Айтилогия помогает новичкам в IT с обучением, практикой, заказами на фрилансе и собеседованием.
👉 Забирай бесплатный 7-дневный курс по фронтенд-разработке с куратором
Реклама. ИП Чернова О. А., ИНН:771399721044
Кастомизация списков: от
Современный CSS позволяет гибко управлять списками, не перегружая HTML лишними элементами.
Разбираем три основных подхода.
✅ Псевдоэлемент
Самый быстрый способ изменить стандартную точку или цифру.
Что можно: менять color, font-size и font-family.
Ограничение: нельзя задать фон или произвольное позиционирование.
Нюанс: маркер выравнивается по базовой линии текста. При большом font-size он сместится вверх относительно строки.
✅ Директива
Инструмент для создания собственных систем нумерации (Baseline 2023).
system: cyclic — позволяет зациклить любые символы или эмодзи (например, фазы луны 🌑🌓🌕).
system: extends — модифицирует стандартные стили (например, заменяет точку после цифры на скобку: 1) вместо 1.).
✅ Полный контроль через
Когда возможностей ::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
::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
Piccalilli
An in-depth guide to customising lists with CSS
Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.
This media is not supported in your browser
VIEW IN TELEGRAM
90% каналов про ИИ - пересказ чужих новостей.
А что если контент делают те, кто строит эти системы?
🥷🏻 NeuroNinja - канал, который ведёт команда инженеров из Яндекса, Тинькова, Озона и Сбера.
Не блогеры. Не инфобизнесмены. Практики, которые каждый день работают с ML, LLM и продуктовым AI.
Что внутри:
🔹 Разборы реальных кейсов из BigTech изнутри
🔹 Гайды по нейросетям от тех, кто их внедряет
🔹 Инструменты и лайфхаки, проверенные в бою
🔹 Честный взгляд на тренды без хайпа
Без рекламы. Без воды. Только то, что реально работает.
👉 Подписаться: https://t.me/+1VlUYn5LCBM0MmQ6
А что если контент делают те, кто строит эти системы?
🥷🏻 NeuroNinja - канал, который ведёт команда инженеров из Яндекса, Тинькова, Озона и Сбера.
Не блогеры. Не инфобизнесмены. Практики, которые каждый день работают с ML, LLM и продуктовым AI.
Что внутри:
🔹 Разборы реальных кейсов из BigTech изнутри
🔹 Гайды по нейросетям от тех, кто их внедряет
🔹 Инструменты и лайфхаки, проверенные в бою
🔹 Честный взгляд на тренды без хайпа
Без рекламы. Без воды. Только то, что реально работает.
👉 Подписаться: https://t.me/+1VlUYn5LCBM0MmQ6
1❤2👍1🔥1
😳 Нейросети уже заменяют людей
В моём канале ты найдёшь:
>> Как выйти на 100.000₽ на фрилансе делая сайты нейронкой?
>> Как находить клиентов за 1 день (чек-лист на 4 страницы) ?
>> Почему заказчикам выгоднее купить у тебя, а не делать самим?
Просто зайти или ныть, что мало денег? Выбор за тобой: https://t.me/+ZhenorxCLdw1YjA6
Пока ты тратишь время, другие забирают по 10-15к за заказ через нейросети
В моём канале ты найдёшь:
>> Как выйти на 100.000₽ на фрилансе делая сайты нейронкой?
>> Как находить клиентов за 1 день (чек-лист на 4 страницы) ?
>> Почему заказчикам выгоднее купить у тебя, а не делать самим?
Просто зайти или ныть, что мало денег? Выбор за тобой: https://t.me/+ZhenorxCLdw1YjA6
👎2