📱 CSS: колонки без горизонтального скролла

В Chrome 145 появились column-wrap и column-height. Теперь multi-column может переносить колонки вниз, а не вправо.

Раньше:

— фиксированная высота → колонки вправо
— горизонтальный скролл

Теперь:

— задаёте высоту ряда
— переполнение уходит вниз
— нормальный UX для текста

Где полезно:

— статьи и документация
— контентные блоки
— вертикальные «карусели»

⚠️ Без визуальных разделителей легко сломать чтение; не замена Grid/Flex, а инструмент под контент.

🐸 Библиотека фронтендера

#release_digest

🔍 React Scan — автоматический поиск проблем производительности в React

Удобный инструмент для React-разработчиков, который визуально показывает, какие компоненты тормозят ваше приложение.

Главные фичи:

— Не требует изменений в коде
— Подсвечивает компоненты, которые нужно оптимизировать
— Работает везде: script tag, npm, Next.js, Vite, Remix

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

Просто добавьте один script tag:

<script src="//unpkg.com/react-scan/dist/auto.global.js"></script>

🔗 Cсылка на GitHub

🐸 Библиотека фронтендера

#stack #react

🤯 React до сих пор веет безумием, но все молчат

Автор вернулся к React после перерыва. И вот что его поразило:

🔴 «Архитектура» на компонентах

Любой компонент может использовать любое состояние через хуки. По сути — глобальные переменные с красивым названием «редьюсер». Назвали заумно — и вдруг это стало Good Architecture™?

🔴 useEffect — король хаков

Хук для «побочных эффектов» используется для инициализации компонентов. Но постойте... он же ещё и состояние меняет! А если нужна зависимость? Добавляем ещё один useEffect.

Результат? Цепочки асинхронных функций, которые надо читать снизу вверх. Ад обратных вызовов отдыхает.

🔴 «Паттерны» вместо простоты

Обещали простоту в Hello World. На практике — статьи про сложнейшие паттерны просто для отрисовки элементов на экране. И никто даже не признаёт безумие происходящего!

ℹ️ Но вот что интересно:

Автор считает, что виноват не React. И не Angular. И не jQuery. Проблема в том, что создание интерактивного UI, где любой компонент может обновлять любой другой — это один из сложнейших аспектов разработки ПО.

Сравните: у крана 2 входа и 1 выход. У UI — потенциально бесконечное число входов и выходов.

🖍 Решение:

Меньше кнопок
SSR везде, где возможно
React только «островками интерактивности»

P.S. Если бэкенд-инженер смотрит на ваш код и спрашивает «Неужели нельзя проще?» — возможно, он прав.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#code_battle

❤️, если жизненно

🐸 Библиотека фронтендера

#pixel_pause

👋 Легендарный код Konami в CSS и JavaScript

Помните чит-код ↑↑↓↓←→←→BA из игр 90-х? Создали интерактивную визуализацию этой культовой комбинации.

Что внутри:

— Стилизованные D-pad клавиши с градиентами
— Отслеживание последовательности нажатий
— Визуальная подсветка при правильном вводе
— Чистый CSS без фреймворков

Технически:

— Event listeners для keyboard input
— Валидация через массив
— CSS-анимации для обратной связи

🔗 Ссылка на CodePen

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #css

🐸 Библиотека фронтендера

#code_challenge #js

🔴 Легенда обновилась: jQuery 4.0

Первый мажорный апдейт почти за 10 лет и аккурат к 20-летию проекта.

Коротко по фактам:

— Убрана поддержка IE 10 и ниже, старых Edge, Android Browser
— Добавлены Trusted Types и улучшена работа с CSP
— Исходники переведены на ES modules, сборка через Rollup
— Вырезаны deprecated API (isArray, trim, parseJSON и др.)
— Размер стал меньше (–3 KB gzipped)
— События focus/blur теперь строго по W3C
— Slim-версия ещё легче: без Deferred и Callbacks

🔗 Ссылка на релиз

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#release_digest

📎 Как выбрать между useEffect и useLayoutEffect

🔢 useEffect — после отрисовки (не блокирует UI)

Типичный кейс: побочный эффект не влияет на layout.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    document.title = `Кликов: ${count}`;
  }, [count]);

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

Почему useEffect:

• отрисовка не зависит от эффекта
• возможна задержка без визуальных артефактов

🔢 useLayoutEffect — до отрисовки (блокирует paint)

Типичный кейс: нужно измерить DOM до того, как пользователь увидит экран.

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

export function Box() {
  const ref = useRef(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    setWidth(ref.current.getBoundingClientRect().width);
  }, []);

  return (
    <>
      <div
        ref={ref}
        style={{ width: 120, height: 40, background: "red" }}
      />
      <p>Ширина: {width}px</p>
    </>
  );
}

Почему useLayoutEffect:

• getBoundingClientRect должен выполниться до paint
• иначе возможен визуальный “прыжок” интерфейса

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #react

👍 CNN на чистом JavaScript

Свёрточная нейросеть, полностью написанная на JavaScript, работает прямо в браузере. Без TensorFlow и сторонних зависимостей.

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

Отличный способ разобраться, как реально работают свёртки, pooling и backpropagation, когда всё реализовано вручную. Код в одном файле, читается последовательно.

Есть GitHub и демка 🔗

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack

🔍 Frontend Developer (React / TypeScript)
Office only (Limassol, Cyprus)

Product iGaming-компания ищет Senior frontend-инженера/Тех лида (React / TypeScript).

🔴 О проекте:
• Продукт с живыми интерфейсами
• Сложные формы и пользовательские сценарии
• Интенсивная работа с состоянием
• Высокая ответственность фронта за UX и стабильность

🔴 Чем ты будешь заниматься:
• Разрабатывать и поддерживать пользовательский интерфейс на React + TypeScript
• Работать в связке с UX/UI-дизайнерами, превращая дизайн в функциональный UI
• Проектировать и интегрировать фронтенд с backend API
• Реализовывать сложные формы с валидацией и динамическими полями
• Оптимизировать производительность и стабильность приложения
• Поддерживать и улучшать существующий код, соблюдая единые стандарты кодирования

🔴 Что нам важно:
• 4+ лет коммерческого опыта с React
• Уверенная работа с экосистемой React (хуки, роутинг, состояние)
• Опыт интеграции с REST API
• Понимание принципов работы frontend 🔄 backend
• Опыт работы с инструментами сборки и контроля версий (Git)
• Умение принимать технические решения и понимать их последствия

🔴 Будет плюсом:
• Опыт работы с Redux или другими state-менеджерами
• Понимание производительности frontend-приложений
• Опыт в product-командах

🔴 Мы предлагаем:
• Конкурентную зарплату
• Оплачиваемые отпуска и больничные + sick days
• Активную корпоративную жизнь
• Понятные процессы и адекватную инженерную среду

🔤 Контакт для связи @SvetlanaDedina