Senior Frontend - javascript, html, css

​Когда использовать 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

Performance monitor и не только: продолжаем тестировать производительность в Chrome DevTools Продолжаем разбирать малоизвестные, но крайне полезные фичи Chrome DevTools.Сегодня мы поговорим об утилите Performance monitor, инструменте Chrome Task Manager и о том, как вывести FPS сайта на экран. 👉 @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

Scroll Driven Animation Реализовано на чистом CSS при помощи свойства animation-timeline со значением scroll. 👉 @seniorFront

To Do List App В этом видео создается небольшое приложение на HTML, CSS и JS. 👉 @seniorFront

3D CSS Rotation with mouse tracking Параметры поворота устанавливаются через CSS переменные. Значения для переменных устанавливаются в JS. 👉 @seniorFront

Elastic neon radio buttons Внутри кнопки находится SVG картинка, анимированная при помощи библиотеки GSAP. 👉 @seniorFront

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

Продвижение в Telegram с помощью Яндекс Директа ⚡Запустите продвижение в телеграм-каналах и привлекайте целевую аудиторию 📱 Таргетинг по тематикам, регионам и каналам в Telegram Попробовать #реклама yandex.ru О рекламодателе

Wavy Circle Animation Effects В этом видео создается 3D анимация на чистом CSS. 👉 @seniorFront

Джуны — всё, ИИ победил. По статистике BCG, за последний год компании выбросили на улицу 75% молодняка. При этом миддлам и сеньорам зарплаты подняли в 4 (!) раза. Чтобы подняться до уровня элит в аномально короткие сроки — подпишитесь на легендарные каналы для айтишников: Новости и инсайды Фронтенд разработка ИИ и биг дата Node js Вёрстка Питон и нейросети QA-тестировщики Там раскрыли инфу из курсов общей стоимостью 5.000.000р в эксклюзивных пошаговых инструкциях. Пока остальные пойдут на дно якорем, вы войдете в 10% тех, кто сломал систему.

Fullscreen layout with columns Свёрстано и анимировано на HTML и CSS. Логика раскрытия реализована в JS. 👉 @seniorFront

​Как не нужно запускать стартап или как я полюбил работу на дядю Как и многие в юном возрасте, около 6 лет назад я решил сделать свой продукт — веб‑сервис для удобного заказа корпоративной облачной инфраструктуры и управления ей. Спойлер — безуспешно. Позже эта идея трансформировалась в веб‑приложение для автоматизации рутины сисадминов, DevOps, SRE. К сожалению, и эта итерация не нашла успеха. Сформулировав идею за пару недель размышлений, преисполнившись гайдами Y Combinator и бизнес‑планами, я с высоты опыта в тот момент решил, что путь пет‑проекта и гаражной команды не для меня, ведь без коммерческой составляющей неинтересно и сложно мотивировать команду и себя самого. А я ведь «достоин большего и имею богатый опыт в кровавом интерпрайзе», а значит, нужно привлекать инвестиции и собирать команду разработки и продвижения на коммерческих началах, покупать софт и тратить деньги на рекламу. Ведь важнее много заработать в результате, чем мало потратить на старте — так я думал, как ни стыдно это признавать сегодня. С тех пор утекло много воды, нервных клеток и денег, а опыт этого проекта стал одновременно очень болезненным и полезным, обойдясь почти в 4 года и 5+ миллионов рублей. Хочу поделиться с вами выводами из этого пути в самотерапевтических целях. Постарался собрать основные ошибки, не совершив которые, я бы, скорее всего, сэкономил много ресурсов и, возможно, значительно увеличил бы шансы стартапа на успех. 👉 @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

REKONFA Live 6 ноября приглашаем всех, кто имеет отношение к маркетингу и рекламным технологиям, обсудить рынок, тренды, вызовы и их решения. С докладами на актуальные темы выступят лидеры индустрии и медийные спикеры. Принять участие можно офлайн и онлайн. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

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

​Как работает сборка мусора в JS? Управление памятью в JavaScript выполняется автоматически и незаметно. Мы создаём примитивы, объекты, функции… Всё это занимает память. Но что происходит, когда что-то больше не нужно? Как движок JavaScript обнаруживает, что пора очищать память? Основной концепцией управления памятью в JavaScript является принцип достижимости. Если упростить, то «достижимые» значения – это те, которые доступны или используются. Они гарантированно находятся в памяти. 1. Существует базовое множество достижимых значений, которые не могут быть удалены. Например: - Выполняемая в данный момент функция, её локальные переменные и параметры. - Другие функции в текущей цепочке вложенных вызовов, их локальные переменные и параметры. - Глобальные переменные. - (некоторые другие внутренние значения) Эти значения мы будем называть корнями. 2. Любое другое значение считается достижимым, если оно доступно из корня по ссылке или по цепочке ссылок. Например, если в глобальной переменной есть объект, и он имеет свойство, в котором хранится ссылка на другой объект, то этот объект считается достижимым. И те, на которые он ссылается, тоже достижимы. Далее вы познакомитесь с подробными примерами на эту тему. В движке JavaScript есть фоновый процесс, который называется сборщиком мусора. Он отслеживает все объекты и удаляет те, которые стали недоступными. 👉 @seniorFront

React-монополист: как мы сами убиваем развитие фронтенда Команда JavaScript for Devs подготовила перевод статьи о том, как доминирование React сдерживает развитие фронтенда. Автор утверждает: выбор React «по умолчанию» тормозит инновации, мешает развитию альтернативных фреймворков и превращает всю экосистему в монокультуру. 👉 @seniorFront

Array Helpers Расширьте встроенный класс Array следующими методами: square(), cube(), average(), sum(), even() и odd(). square() - должен возвращать копию массива, содержащую все значения, возведенные в квадрат. cube() - должен возвращать копию массива, содержащую все значения, возведенные в куб. average() - должен возвращать среднее значение всех значений массива; для пустого массива должно возвращать NaN sum() - должен возвращать сумму всех значений массива even() - должен возвращать массив всех четных чисел odd() - должна возвращать массив всех нечетных чисел Пример:

 var numbers = [1, 2, 3, 4, 5];

 numbers.square();  // must return [1, 4, 9, 16, 25]
 numbers.cube();    // must return [1, 8, 27, 64, 125]
 numbers.average(); // must return 3
 numbers.sum();     // must return 15
 numbers.even();    // must return [2, 4]
 numbers.odd();     // must return [1, 3, 5]

👉 @seniorFront