У Anime.js вышло крупное обновление

Библиотека для создания сложных анимаций в вебе на чистом JS получила обновление под номером 4.0. Кроме нового номера библиотека обзавелась поддежкой Web Animation API, новой модульной архитектурой, анимацией прокрутки и многим другим.

Все подробности на сайте проекта: https://animejs.com

#новости #библиотека #javascript #animejs

Как Google обрабатывает JavaScript в процессе индексации веб-страниц

Не всё, что рендерится на фронте, попадает в поисковую выдачу. Google обрабатывает JavaScript не сразу — сначала HTML, потом очередь на рендер, потом только индекс.

В статье разбирается, как именно работает этот процесс:
— как влияет задержка рендера;
— почему важно не прятать важный контент за JS;
— и как ускорить индексацию динамичных страниц.

Если вы пишете SPA или SSR — точно стоит прочитать.

#javascript

Небольшая шпаргалка по методам для работы с массивами

Визуализация, которая лучше тысячи слов показывает, что делает каждый из методов.

#javascript #шпаргалка

10 JavaScript трюков, которые стоит знать в 2025 году

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

Здесь от optional chaining до деструктуризации с умолчаниями — эти приёмы помогут писать более чистый и эффективный код.

#javascript

Изучаем JavaScript, создавая игру

Погрузитесь в JavaScript, создавая 2D-игру с нуля. Этот бесплатный курс поможет вам освоить основы программирования через практику.

#javascript #gamedev

Преобразуйте JavaScript-код в блок-схемы

Библиотека js2flowchart позволяет автоматически создавать SVG-схемы из вашего кода. Отличный инструмент для визуализации логики и документации.

Сохраняйте, чтобы не потерять!

#javascript #библиотека #инструменты

Bun – быстрый JS-рантайм, который заменит Node.js?

Познакомьтесь с Bun — движком выполнения JavaScript, который набирает популярность благодаря своей скорости. Он совмещает в одном инструменте сервер, менеджер пакетов и сборщик, работая значительно быстрее привычного Node.js-стека.

В статье рассказывается, зачем появился Bun, какие проблемы он решает и как начать его использовать. Статья не новая, но очень хорошая для первого знакомства.

Как считаете, вытеснит ли Bun привычный Node.js? Пробовали уже в своих проекте?

#javascript@tproger_web #nodejs@tproger_web #bun@tproger_web

​Создаём портфолио в формате 2D-игры на JavaScript

Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.

Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom

#javascript

Освойте Promises в JavaScript: пошаговое руководство

Асинхронный код — неотъемлемая часть современного JavaScript. Промисы (Promise) помогают управлять такими операциями, обеспечивая чистый и понятный синтаксис. В этом руководстве вы узнаете, как создавать промисы, обрабатывать их состояния (pending, fulfilled, rejected) и использовать методы .then(), .catch() и .finally() для управления результатами асинхронных операций. Примеры кода и наглядные схемы помогут закрепить материал и применять его на практике.

#фронтенд #javascript #асинхронность

Без сборщика: подключаем JS-библиотеку напрямую

Чтобы притянуть стороннюю библиотеку в проект, не обязательно городить Webpack или Vite. Здесь разбираются три вида файлов, которые обычно лежат в npm-дистрибутиве: модули ES, «классические» глобальные переменные и CommonJS, способы находить нужный вариант в dist, писать компактный import map и подключать сложные модули даже без Node.

В довесок — чек-лист инструментов (esm.sh, download-esm, JSPM) и подсказки, как определить тип файла за пару секунд.

#фронтенд #javascript

Что такое примеси (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 #основы

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

Зачем вам нужен 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

«Список покупок за 2 часа»: как AI сгенерировал дизайн, код и голосовой ввод на лету

Автор этой статьи поделился своим опытом разработки приложения с помощью ИИ, Он бросил в Google Stitch один промпт, а через 30 секунд получил готовый Figma-макет и HTML. Дальше — чистый JS без фреймворков, WebSocket-синхронизация, голосовой ввод через Gemini 2.5 Pro и живое демо, которым удобно пользоваться на телефоне. Теперь мы можем пошагово изучить промпты, архитектуру ванильного SPA и нюансы интеграции AI-моделей прямо в браузере.

#фронтенд #javascript #ai

Эффект выгорающей кинопленки

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

Посмотреть код можно здесь: https://codepen.io/kiranpate1/pen/MWMGKdv

#codepen #css #javascript

blur в JavaScript: что это такое

Событие blur не стоит путать с CSS-свойством. В JavaScript оно срабатывает на элементах, которые могут получать фокус в случаях, когда эти элементы фокус теряют. Например, пользователь «ушёл» с этого элемента и переключил внимание на что-то другое (другой элемент, окно или вкладку).

Когда происходит blur:

1. Клик мышью в другое место.
2. Переход клавишей Tab.
3. Смена вкладки или окна.

Когда может пригодиться blur:

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

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

<input id="email" placeholder="Введите e-mail" />

<script>
  const emailInput = document.getElementById('email');

  emailInput.addEventListener('blur', () => {
    console.log('Поле e-mail потеряло фокус — проверяем данные.');
    // Здесь может быть ваша валидация или отправка на сервер
  });
</script>

Важные нюансы:

— blur не всплывает вверх по дереву DOM. Если нужно отследить потерю фокуса на контейнере, слушайте событие focusout: оно ведёт себя так же, но всплывает.
— Порядок событий. Когда элемент теряет фокус, сначала срабатывает focusout, затем blur. Это редко важно, но полезно знать при сложной логике.

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

Проверка совместимости JavaScript-кода с окружением за секунды

Runtime-compat — это инструмент, который позволяет проверить, какие фичи вашего кода поддерживаются в разных средах выполнения, а какие — нет.

Запустите его и он покажет, что будет работать, например, с Node.js, а что придется переписать. Сейчас инструмент поддерживает Node.js, Deno, Bun, Cloudflare Workers и другие среды выполнения.

#инструменты #javascript

Одна переменная на три мира: как синхронизировать значение между HTML, CSS и JavaScript

В статье Крис Койер показывает, как установить переменную size в Pug и передать её одновременно в HTML (для генерации сетки), CSS (через --size для настройки grid-template-columns) и JavaScript (через window.size для навигации по стрелкам). Простой приём, который позволяет управлять интерфейсом из одного источника данных.

#фронтенд #pug #css #javascript