Что делает 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"
64%
"string"
19%
"number"
4%
"1"
4%
"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
🧑💻Бэкенд сегодня — это целая экосистема, где от вас ждут скорости, надёжности и архитектурного мышления. Если вы пишете на JavaScript и хотите перейти на следующий уровень — время освоить Node.js.
Курс «Node.js Developer» от OTUS — это практическое погружение в серверную разработку на современном стеке: Node.js, TypeScript, Express, GraphQL, Apollo, Nest.js, PostgreSQL, MongoDB, Docker и Kubernetes. Вы научитесь строить масштабируемые REST и GraphQL API, развертывать сервисы в контейнерах, подключать базы данных и писать чистый, поддерживаемый код.
🎄Новогодние подарки от OTUS для вас!Приобретайте 3 курса с выгодой до 30%! Покупая 1 курс вы получаете 15%, 2 курса - 25% скидки, 3 курса - максимальную скидку в 30%.
Заморозьте цены на обучение! Предложение действует до 26 декабря 2025 года.
💫Старт совсем скоро. Оставьте заявку и получите скидку на курс «Node.js Developer»: https://otus.pw/uMIg/
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
erid 2SDnjduQLcQ
Курс «Node.js Developer» от OTUS — это практическое погружение в серверную разработку на современном стеке: Node.js, TypeScript, Express, GraphQL, Apollo, Nest.js, PostgreSQL, MongoDB, Docker и Kubernetes. Вы научитесь строить масштабируемые REST и GraphQL API, развертывать сервисы в контейнерах, подключать базы данных и писать чистый, поддерживаемый код.
🎄Новогодние подарки от OTUS для вас!Приобретайте 3 курса с выгодой до 30%! Покупая 1 курс вы получаете 15%, 2 курса - 25% скидки, 3 курса - максимальную скидку в 30%.
Заморозьте цены на обучение! Предложение действует до 26 декабря 2025 года.
💫Старт совсем скоро. Оставьте заявку и получите скидку на курс «Node.js Developer»: https://otus.pw/uMIg/
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
erid 2SDnjduQLcQ
❤1
Айти “умирает”, вакансий нет, все говорят про кризис?
В канале “Frontend менторинг | Косилов” разбираю, что реально происходит на рынке и как всё-таки находить офферы.
Там: честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, без инфоцыганства и розовых обещаний. Я действующий фронтенд-разработчик и ментор, показываю, как адаптироваться к рынку, а не ждать “когда всё наладится”.
Для тех, кто придёт отсюда, — скидка 30% на менторство и разборы по промокоду Kosilov2026.
В канале “Frontend менторинг | Косилов” разбираю, что реально происходит на рынке и как всё-таки находить офферы.
Там: честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, без инфоцыганства и розовых обещаний. Я действующий фронтенд-разработчик и ментор, показываю, как адаптироваться к рынку, а не ждать “когда всё наладится”.
Для тех, кто придёт отсюда, — скидка 30% на менторство и разборы по промокоду Kosilov2026.
👎10❤1
Как реализовать перегрузку функции в 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
В канале “Frontend менторинг | Косилов” вы можете найти честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, обзор технологий и мысли по этому поводу.
Так же публикует в Инсте смешные ролики и полезный контент про АйТи.
https://www.instagram.com/kosilllov?igsh=MXN1ZWxvN3JhaW5uMg%3D%3D&utm_source=qr
Всем, кто подпишется и напишет в личку слово
Так же публикует в Инсте смешные ролики и полезный контент про АйТи.
https://www.instagram.com/kosilllov?igsh=MXN1ZWxvN3JhaW5uMg%3D%3D&utm_source=qr
Всем, кто подпишется и напишет в личку слово
js в инстаграме, пришлет список вопросов по JavaScript с собесов + даст краткие ответы/подсказки, как лучше отвечать.Telegram
Frontend менторинг | Косилов
Senior Фронтенд‑разработчик / ментор
Помогаю прокачаться во фронте и карьере в IT
Консультации, разбор кода, развитие навыков
Записаться: @kosilllov
Помогаю прокачаться во фронте и карьере в IT
Консультации, разбор кода, развитие навыков
Записаться: @kosilllov
👎3
Программирование в алгоритмах
Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.
👉 @frontendInterview
Искусство программирования представлено в виде учебного курса, раскрывающего секреты наиболее популярных алгоритмов. Освещены такие вопросы, как комбинаторные алгоритмы, перебор, алгоритмы на графах, алгоритмы вычислительной геометрии. Приводятся избранные олимпиадные задачи по программированию с указаниями к решению.
👉 @frontendInterview
Настроил чат-бота за пару часов → заработал 9 000₽.
Просто представь, кто-то стоит в очереди на маршрутку в 8 утра чтобы успеть на “любимую” работу.
А кто-то за 3-4 часа делает чат-бота со своего ноута без привязки ко времени.
Разница в зарплате: 200 тысяч.
И нет — не надо ничего программировать.
Зачем грузить мозги кодом, если можно собрать чат-бота для бизнеса на конструкторе.
Без опыта. За 3-4 часа.
💡 Суть проста:
Берёшь клиента → Собираешь бота по шаблону → Наставник всё проверяет → Сдаёшь работу и получаешь деньги.
В первый месяц обычно выходят на доход 50–80 тыс ₽/мес, а с опытом от 180 тыс ₽ и выше. Легко совмещается с работой, учёбой, рыбалкой, семейными хлопотами… график устанавливаешь самостоятельно.
Всё, что нужно для старта — запустить бота
👉 @other_digital_bot
Там пошаговый план как стартануть и гайд по клиентам.
До 1 февраля вход бесплатный.
Просто представь, кто-то стоит в очереди на маршрутку в 8 утра чтобы успеть на “любимую” работу.
А кто-то за 3-4 часа делает чат-бота со своего ноута без привязки ко времени.
Разница в зарплате: 200 тысяч.
И нет — не надо ничего программировать.
Зачем грузить мозги кодом, если можно собрать чат-бота для бизнеса на конструкторе.
Без опыта. За 3-4 часа.
💡 Суть проста:
Берёшь клиента → Собираешь бота по шаблону → Наставник всё проверяет → Сдаёшь работу и получаешь деньги.
В первый месяц обычно выходят на доход 50–80 тыс ₽/мес, а с опытом от 180 тыс ₽ и выше. Легко совмещается с работой, учёбой, рыбалкой, семейными хлопотами… график устанавливаешь самостоятельно.
Всё, что нужно для старта — запустить бота
👉 @other_digital_bot
Там пошаговый план как стартануть и гайд по клиентам.
До 1 февраля вход бесплатный.
Telegram
Влад Пурвиньш
ТГ канал @million_on_freelance
👎3
Find the stray number
Вам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число.
Входной массив всегда будет верным! (нечетная длина >= 3)
Примеры:
👉 @frontendInterview
Вам дан массив целых чисел нечетной длины, все из которых одинаковы, за исключением одного единственного числа. Завершите метод, который принимает такой массив и возвращает это единственное число.
Входной массив всегда будет верным! (нечетная длина >= 3)
Примеры:
[1, 1, 2] ==> 2
[17, 17, 3, 17, 17, 17, 17] ==> 3
👉 @frontendInterview
Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
Please open Telegram to view this post
VIEW IN TELEGRAM
Как frontend-разработчику получить оффер в Big Tech?
Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.
Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...
Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾
Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.
Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.
В своем канале:
👉Разбираю самые популярные и каверзные вопросы на собесах
👉Рассказываю как пройти фильтр HR
👉Борюсь с убеждениями, которые мешают развиваться
👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
Регулярно публикую полезные материалы:
▪️60 вопросов, которые точно помогут тебе на собеседовании.
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1
▪️Чек лист проверки своего резюме
Подписывайся, нас уже 4500 🤓: ссылка
Реклама, erid 2W5zFJveUGQ: ИП Галактионов Тихон Витальевич, ИНН 771618975809
Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.
Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...
Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾
Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.
Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.
В своем канале:
👉Разбираю самые популярные и каверзные вопросы на собесах
👉Рассказываю как пройти фильтр HR
👉Борюсь с убеждениями, которые мешают развиваться
👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров
Регулярно публикую полезные материалы:
▪️60 вопросов, которые точно помогут тебе на собеседовании.
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1
▪️Чек лист проверки своего резюме
Подписывайся, нас уже 4500 🤓: ссылка
Реклама, erid 2W5zFJveUGQ: ИП Галактионов Тихон Витальевич, ИНН 771618975809
❤1
Почему 90% фронтендеров никогда не выйдут на большие чеки?
Потому что бездумно потребляют «обучающий» контент. И топчутся в говне месяцами, рвут жопу за нищие копейки и терпят даунов-начальников, лишь бы не вылететь на улицу.
Хотя чтобы стать разработчиком, надо в первую очередь научиться думать как разработчик.
Хорошая новость в том, что тебе ничего кардинально менять не нужно, чтобы войти в «золотую десятку» самых успешных. Не надо бросать курсы или увольняться.
Достаточно заменить источник информации:
👉 Фронтенд
👉 Верстка
👉 Node.JS
10–15 минут в день смотри на реальные задачи, живой код, ошибки, подходы и паттерны, которыми топовые фронты пользуются прямо сейчас.
Это самый простой и дешёвый способ стать уважаемым специалистом, так что подписывайся.
Потому что бездумно потребляют «обучающий» контент. И топчутся в говне месяцами, рвут жопу за нищие копейки и терпят даунов-начальников, лишь бы не вылететь на улицу.
Хотя чтобы стать разработчиком, надо в первую очередь научиться думать как разработчик.
Хорошая новость в том, что тебе ничего кардинально менять не нужно, чтобы войти в «золотую десятку» самых успешных. Не надо бросать курсы или увольняться.
Достаточно заменить источник информации:
👉 Фронтенд
👉 Верстка
👉 Node.JS
10–15 минут в день смотри на реальные задачи, живой код, ошибки, подходы и паттерны, которыми топовые фронты пользуются прямо сейчас.
Это самый простой и дешёвый способ стать уважаемым специалистом, так что подписывайся.
👎4