👉 @frontendInterview

Разбираемся с SVG Path!

SVG <path> — мощный, но сложный инструмент для создания кривых и фигур. Статья объясняет основы: как работает атрибут d, команды M (перемещение) и L (линия), и как они связываются в цепочку инструкций, словно рисование пером. Погрузитесь в интерактивное руководство и начните творить!

👉 @frontendInterview

Хватит писать «чистый» код. Пора писать понятный код

Да, это очередная статья по чистому коду. Но по разным источникам, соотношение времени, затрачиваемого на чтение и написание кода, может достигать 7 к 1 и даже больше. Когда вы исправляете ошибку, добавляете новую функциональность или проводите рефакторинг, вы сначала погружаетесь в логику, написанную другими людьми (или вами же, но несколько месяцев назад). Именно поэтому читаемость кода становится более важным фактором, чем скорость его первоначального написания. Нечитаемый код — это технический долг, который замедляет всю команду и увеличивает стоимость разработки в долгосрочной перспективе.

👉 @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

Data Structures & Algorithms with JavaScript

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

👉 @frontendInterview

Find numbers with 3 divisors

Ваша задача — написать функцию, которая принимает два целых числа n, m и возвращает отсортированный массив всех целых чисел от n до m включительно, имеющих всего 3 делителя (без учета 1 и самого числа).

Пример:

solution(2, 20) -> [16] // У 16 три делителя - 2, 4, 8

👉 @frontendInterview

👉 @frontendInterview

​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

Story Points или искусство делать ставку на выдуманные числа

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

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

👉 @frontendInterview

🧑‍💻Бэкенд сегодня — это целая экосистема, где от вас ждут скорости, надёжности и архитектурного мышления. Если вы пишете на 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