Что такое примеси (mixins) в JS

Примесь — это набор методов, который вы «подмешиваете» в несколько разных классов, чтобы не дублировать код. Вместо того чтобы создавать огромный класс-«комбайн» или строить сложную цепочку наследования, вы берёте кусочек функциональности — примесь — и добавляете его туда, где он нужен.

Почему вообще понадобились примеси:
1. В JavaScript только одно наследование «по классам». Класс может расширять ровно один другой класс (extends). Если же необходимо поделиться возможностями между несколькими иерархиями, наследование начинает «скрипеть».
2. Составление (composition) гибче, чем наследование. Примеси позволяют «составлять» объект из маленьких независимых блоков логики, не связывая их жёстко цепочкой «родитель → потомок».

Как это выглядит в коде:

// 1. Описываем примесь как обычный объект с методами
const canLog = {
  log(message) {
    console.log(`[${this.name}] ${message}`);
  }
};

// 2. Функция-помощник, которая «подмешивает» методы
function applyMixin(targetClass, mixin) {
  Object.assign(targetClass.prototype, mixin);
}

// 3. Используем
class User {
  constructor(name) { this.name = name; }
}

applyMixin(User, canLog);

const u = new User('Анна');
u.log('Привет!'); // [Анна] Привет!

Вы только что сделали любого User умеющим писать лог в консоль, не меняя иерархию классов.

Начиная с ES2015, популярна форма, где примесь — это функция, возвращающая класс:

const TimestampMixin = (Base) => class extends Base {
  get createdAt() {
    if (!this._createdAt) this._createdAt = Date.now();
    return this._createdAt;
  }
};

class Article {}
class Comment {}

class ArticleWithTime extends TimestampMixin(Article) {}
class CommentWithTime extends TimestampMixin(Comment) {}

Так вы оборачиваете любой базовый класс, не трогая оригинальную цепочку extends.

Плюсы примесей:
1. Повторное использование кода. Один раз написали — применили в нескольких местах, избавившись от копипаста.
2. Гибкая композиция. Собираете объект как конструктор LEGO из маленьких блоков логики.
3. Изолированность обязанностей. Каждая примесь решает одну задачу, поэтому код легче читать и тестировать.

#простымисловами #javascript #основы

Большой сборник задач для фронтендеров

Тут собрано более 600 заданий по различным темам для проверки ваших знаний. А для удобства есть встроенный редактор, в котором можно проверить свой вариант решения, не переходя в другой редактор кода или IDE.

Проверить себя можно тут: https://bigfrontend.dev/

#фронтенд #инструменты

Анимация раскидывания частиц на чистом JavaScript

Вы наверняка встречали такой эффект, как на видео. Часто для его реализации используются уже готовые бибилотеки. Но в этот раз предлагаем вам посмотреть, как повторить такой эффект с помощью чистого JS-кода.

Подробнее: https://codepen.io/ma77os/pen/ExOKBay

#codepen

Уходит эпоха

Мини-Reddit в Telegram: бот + React-мини-апп за неделю

В этой статье показан полный путь создания сообщества «как на Reddit», но прямо в Telegram Mini App. Бот на node-telegram-bot-api управляет постами и голосами, мини-приложение на React рендерит древовидные комментарии и недельный ТОП, API-сервер на Express раздаёт данные, а MySQL и Redis держат хранилище. MVP подняли за одну рабочую неделю, активно используя ИИ для генерации 80–90 % кода.

#фронтенд #бэкенд #telegram

Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react

От Moment.js к Temporal: новый стандарт работы с датами в JavaScript

Унаследованный Date API путает тайм-зоны, мутирует объекты и требует громоздкого кода. В этой статье мы познакомимся с его альтернативами: Moment.js и date-fns, а затем посмотрим, как встроенный Temporal решает те же задачи — иммутабельность, наносекундная точность, богатая работа с тайм-зонами и разные календарные системы.

Вас ждут: наглядные примеры Temporal.PlainDate, ZonedDateTime, Instant, операции add/round/with и таблица сравнений с Moment.js и date-fns.

#фронтенд #javascript

Недавно узнали, что ОТП Банк меняет позиционирование и берет курс на смелость и дерзкую философию. А еще выяснили, что у них работает 700+ айтишников и за их работой можно наблюдать в этом канале.

Знаем, что его ведет последователь Agile (собственно, этой методологии и придерживаются в Банке). Он делится вакансиями, статьями о том, как пилят фичи в Банке, финтех-новостями, экспертными комментами коллег. Да что уж там — в канале можно просто поболтать о насущном, и даже договориться о том, чтобы поучаствовать в батле с ребятами из ОТП.

Советуем подписаться и следить за их активностями. Пожалуй, один из немногих примеров, где с каждой итерацией видно, как ребята улучшают свои продукты.

Это #партнёрский пост

Курс: фулстек-разработка веб-сервиса

Иногда хочется не просто писать код, а собирать из него что-то по-настоящему большое и работающее — как целый сервис. И вот тут становится важным не только знать технологии, но и уметь соединять их в одну стройную архитектуру.

Этот курс — настоящая энциклопедия по созданию веб-сервисов: от дизайна и форм до логирования, базы данных и отправки писем. Всё на TypeScript, всё с нуля, всё по делу. За кулисами — полный стек, чистый код и никакой воды.

#курс #web #fullstack #ru

Если хотите сделать необычный сайт, то ловите идею

Разраб сделал сайт с миллионом шахматных досок. Возможно, вы уже видели что-то подобное. Например, сайт с миллионом чекбоксов или с одним, но доступным абсолютно каждому пользователю. Это сделал тот же автор.

На новой сайте вы можете сыграть сразу миллион шахматных партий с другими пользователями. При этом ходить можно в любой момент, а перемещать фигуры между всеми досками.

Как вам? Уже готовы сделать такие же шашки или придумали что-то интереснее?

#ненормальноепрограммирование

Зачем вам нужен Passive Event Listener

Passive Event Listener — это особый режим для обработчика событий, при котором браузер сразу знает, что внутри вы не будете вызывать preventDefault(). Узнав это заранее, движок может не ждать вашего решения и тут же приступать к прокрутке или другим действиям по умолчанию. В итоге интерфейс отзывается быстрее и анимация скролла становится плавнее. Это позволяет:

1. Бороться с «дёрганым» скроллом на мобильных устройствах. На touchstart/touchmove браузер вынужден приостанавливать прокрутку, пока не убедится, что вы не отменили её через preventDefault(). Если таких обработчиков много, задержка может достигать 100 мс и пользователь ощущает «тормоза». С passive: true пауза не требуется.

2. Снизить нагрузку на главный поток (main thread). Меньше блокирующих операций — меньше шансов, что UI «замёрзнет» на мгновение.

Как использовать:

Ключевой момент — в объекте опций passive: true.

function handleMove(e) {
  // Только читаем, не вызываем preventDefault
  const { clientX, clientY } = e.touches[0];
  // ...логика, например, показать координаты
}

window.addEventListener('touchmove', handleMove, { passive: true });

Если в пасcивном обработчике всё-таки написать e.preventDefault();, браузер выведет предупреждение в консоли и проигнорирует вызов. Поэтому добавляйте passive: true только там, где оно действительно безопасно, то есть где вы не собирались отменять действие по умолчанию.

Где это особенно полезно:
— touchstart и touchmove — для плавного скролла на мобильных.
— wheel и scroll — когда отслеживаете прокрутку, но не мешаете ей.
— Любые жесты, где вы просто читаете координаты.

#простымисловами #javascript

Адаптивный сайт значит, что пользователь может под него адаптироваться

RTK Query + OpenAPI: автоматически генерируем типобезопасные API-хуки для React

Забываем про ручные fetch и бесконечные типы — берём спецификацию OpenAPI, прогоняем через openapi-typescript-codegen, подключаем к RTK Query и сразу получаем готовые хуки: useGetPetsQuery, useCreatePetMutation и другие.

Полный путь показан в статье: настройка генератора, создание базового api, интеграция в Redux store и примеры рефакторинга, где количество кода сокращается в разы.

#фронтенд #react #api

Как сделать обтекание текста без лишней вёрстки

Используйте свойство shape-outside, которое позволяет добавить обтекание текста по фигуре. Весь текст вне обтекания сам подстроится под оставшееся место.

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

#советы #css

Как Node.js обрабатывает сотни тысяч запросов в одном потоке

Пошаговый разбор циклов событий, фаз timers → pending → poll → check → close и роли libuv. Вы узнаёте, кто будит коллбэки, почему промисы и таймеры попадают в разные очереди и как Node удерживает высокую производительность, оставаясь однопоточным.

#бэкенд #nodejs