​Как работает сборка мусора в JS?

Управление памятью в JavaScript выполняется автоматически и незаметно. Мы создаём примитивы, объекты, функции… Всё это занимает память.
Но что происходит, когда что-то больше не нужно? Как движок JavaScript обнаруживает, что пора очищать память?

Основной концепцией управления памятью в JavaScript является принцип достижимости.
Если упростить, то «достижимые» значения – это те, которые доступны или используются. Они гарантированно находятся в памяти.

1. Существует базовое множество достижимых значений, которые не могут быть удалены.
Например:
- Выполняемая в данный момент функция, её локальные переменные и параметры.
- Другие функции в текущей цепочке вложенных вызовов, их локальные переменные и параметры.
- Глобальные переменные.
- (некоторые другие внутренние значения)
Эти значения мы будем называть корнями.

2. Любое другое значение считается достижимым, если оно доступно из корня по ссылке или по цепочке ссылок.
Например, если в глобальной переменной есть объект, и он имеет свойство, в котором хранится ссылка на другой объект, то этот объект считается достижимым. И те, на которые он ссылается, тоже достижимы. Далее вы познакомитесь с подробными примерами на эту тему.

В движке JavaScript есть фоновый процесс, который называется сборщиком мусора. Он отслеживает все объекты и удаляет те, которые стали недоступными.

👉 @seniorFront

Projects Carousel

Карусель с автоматическим переключением слайдов, анимированная на SCSS.

👉 @seniorFront

​React по умолчанию — и это убивает инновации во фронтенде

React стал "дефолтом" не за счёт техник, а из-за привычки. Это тормозит всю фронтенд-экосистему: команды берут React "потому что все знают", игнорируя альтернативы. А фреймворки вроде Svelte, Solid и Qwik с реальными инновациями остаются в тени.

React хорош для многих задач, но проблема в мышлении "React по умолчанию".

Потолок инноваций
Виртуальный DOM (2013) — устаревшая overhead, как отметил Рич Харрис. Хуки упростили классы, но добавили боли с зависимостями и эффектами. Серверные компоненты ускоряют, но усложняют архитектуру. React Compiler — признак: оптимизируем вокруг лимитов модели.

Альтернативы: Svelte 5 с Runes упрощает реактивность на компиляции; Solid — тонкая реактивность без VDOM; Qwik — возобновляемость вместо гидратации. Это новые модели, а не патчи.
Инновации без внедрения — ноль. А внедрение душит привычка.

Технический долг, который все несем
Reconciliation и рантайм — скрытые расходы. Время уходит на рендеры и эффекты, а не на ценность. JS дорог на критическом пути (The Cost of JavaScript). Бенчмарки: Solid в 2–3 раза быстрее React в реактивных сценариях.

Мы фокусируемся на "паттернах React", теряя переносимость навыков и упуская альтернативы.

Фреймворки, чьё развитие душат

SVELTE: Революция компиляторов
Компиляция без VDOM — минимальный рантайм, прямые DOM-операции. Менталка как у веба.
Пример: The Guardian ускорил фронт, Wired: Шон Ван сократил сайт с 187 КБ (React) до 9 КБ (Svelte). Минус: "мало вакансий" — искусственный барьер.

SOLID: Тонкая реактивность
JSX + сигналы = обновления только изменённого. Меньше reconciliation, проще состояние.
Отзывы: эффективность + упрощение кода. Масштаб ждёт, но потенциал огромен.

QWIK: Возобновляемость
Мгновенный старт: загружает только нужное, без гидратации. Идеал для больших сайтов/медленных сетей.
Ранние кейсы: резкий рост скорости. Низкое распространение — из-за дефолта.


API React шире и сложнее: хуки, контекст, мемоизация — баги от зависимостей. Пример: сбой Cloudflare 12.09.2025 из-за useEffect. Альтернативы проще, снижают когнитивку.

👉 @seniorFront

​Как не нужно запускать стартап или как я полюбил работу на дядю

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

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

С тех пор утекло много воды, нервных клеток и денег, а опыт этого проекта стал одновременно очень болезненным и полезным, обойдясь почти в 4 года и 5+ миллионов рублей. Хочу поделиться с вами выводами из этого пути в самотерапевтических целях.

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

👉 @seniorFront

Fullscreen layout with columns

Свёрстано и анимировано на HTML и CSS. Логика раскрытия реализована в JS.

👉 @seniorFront

Wavy Circle Animation Effects

В этом видео создается 3D анимация на чистом CSS.

👉 @seniorFront

Можно косячить дальше

👉 @seniorFront

Elastic neon radio buttons

Внутри кнопки находится SVG картинка, анимированная при помощи библиотеки GSAP.

👉 @seniorFront

3D CSS Rotation with mouse tracking

Параметры поворота устанавливаются через CSS переменные. Значения для переменных устанавливаются в JS.

👉 @seniorFront

To Do List App

В этом видео создается небольшое приложение на HTML, CSS и JS.

👉 @seniorFront

Scroll Driven Animation

Реализовано на чистом CSS при помощи свойства animation-timeline со значением scroll.

👉 @seniorFront

I love big nums and I cannot lie

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

Примеры:

 [1, 2, 3] --> "321" (3-2-1)
 [3, 30, 34, 5, 9] --> "9534330" (9-5-34-3-30)

👉 @seniorFront

Performance monitor и не только: продолжаем тестировать производительность в Chrome DevTools

Продолжаем разбирать малоизвестные, но крайне полезные фичи Chrome DevTools.Сегодня мы поговорим об утилите Performance monitor, инструменте Chrome Task Manager и о том, как вывести FPS сайта на экран.

👉 @seniorFront

​Когда использовать useEffect, а когда useLayoutEffect?

Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются
useEffect выполняется после рендера и отрисовки в браузере.
useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере.

То есть useLayoutEffect блокирует рендер, а useEffect — нет.

useEffect выполняется асинхронно, после того как браузер отрисовал страницу.
Используется для:
- Запросов к API.
- Подключения WebSocket'ов или таймеров.
- Логирования данных.
- Изменения заголовка страницы (document.title).

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Вы кликнули ${count} раз`;
  }, [count]); // Запускается после рендера

  return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}

useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения.
Используется для
- Синхронных манипуляций с DOM.
- Измерения размеров элементов (getBoundingClientRect).
- Анимаций (например, при расчёте позиций).

import { useEffect, useLayoutEffect, useState } from "react";

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const box = document.getElementById("box");
    setWidth(box.offsetWidth);
  }, []);

  return (
    <div>
      <div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
      <p>Ширина: {width}px</p>
    </div>
  );
}

👉 @seniorFront

Т-Технологии зовут на Стековку

1 ноября в Екатеринбурге, Новосибирске и Нижнем Новгороде стартует квест для ИТ-специалистов — с городским интерактивом, задачами на знание кода и смекалку.

Что нужно делать?
Решать онлайн- и офлайн-задания и получать за это баллы для своего города.

Какой приз?
В городе, который наберет больше всего баллов, устроят вечеринку. А самые активные участники смогут повлиять на выбор тематики и программы.

Как участвовать?
Просто зарегистрируйтесь до 31 октября

3D Cover Flow

Реализовано на React и стилизовано в SCSS.

👉 @seniorFront

​«Чайка-стайл» менеджмент: как не стать ураганом в офисе ?

TL;DR: «Чайка-менеджер» — это хаос, скоропалительные решения, перекладывание вины и отсутствие системы. Прилетел, наделал дел, улетел — а сотрудники в цейтноте. Как распознать и что делать? Что такое «чайка-стайл»?
Руководитель-чайка — как ураган: врывается, сеет хаос, исчезает, оставляя задачи «решить вчера».

Признаки:
- Внезапные появления с потоком вопросов и новых задач.
- Перекладывание ответственности за свои решения на сотрудников.
- Отсутствие системы: планы меняются ежечасно, делегирования нет.
- Единоличные решения, от которых компания «зависает», если босса нет.

Ключевые ошибки:
- Непонимание подчинённых из-за отсутствия опыта работы «внизу».
- Уклонение от ответственности: «раз я плачу, вы и разбирайтесь».
- Хаотичная коммуникация: сегодня — презентация, завтра — инфографика.
- Фаворитизм и конфликты: лояльных премируют, остальных игнорируют.
- Нет обучения и развития: ни для себя, ни для команды.
- Делегирование? Не, не слышал.

Влияние на бизнес:
Снижение эффективности, стресс, текучка кадров. Исследования (LinkedIn, Indeed) подтверждают: 7 из 10 уходят из-за некомпетентных боссов.

Роль HR:
HR может навести порядок: внедрить системность, прозрачность, культуру доверия. Но для этого «чайке» нужно отойти от оперативного управления и довериться профи. Увы, такие боссы редко готовы к переменам.

Итог:
«Чайка-стайл» — тормоз для бизнеса. Решение — в системности, коммуникации и развитии команды. Выбор за собственником: быть ураганом или строить стабильную компанию.

👉 @seniorFront

Shoe Swap

Логика переключения слайдов реализована в JS. Анимировано в SCSS.

👉 @seniorFront

SVG Animation

Это SVG картинка, анимированная в SCSS.

👉 @seniorFront