Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙

.pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}


https://codepen.io/jh3y/pen/abPgrGR

👉 @frontend_1

Как избежать лишних перерисовок в React-приложениях с помощью React.iss.onemo и хука useCallback.

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


1. Оборачиваем «тяжёлые» компоненты в React.iss.onemo.
2. Меммоизируем функции-колбэки через useCallback, чтобы их ссылки не менялись без нужды.

import React, { useState, useCallback, memo } from 'react';

const Child = memo(({ onClick, label }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>{label}</button>;
});

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

  // Функция останется той же, если зависимости не изменятся
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return (
    <div>
      <Child onClick={handleClick} label="Нажми меня" />
      <button onClick={() => setCount(prev => prev + 1)}>
        Счётчик: {count}
      </button>
    </div>
  );
}

* React.iss.onemo сравнивает предыдущие и новые пропсы поверхностно и рендерит Child только когда они реально отличаются.
* useCallback гарантирует, что ссылка на handleClick не меняется при каждом рендере Parent, а значит Child не получает «новый» проп и не перерисовывается.

Когда это не работает?

Если вы передаёте в пропы объекты или массивы, создаваемые «на лету», их тоже нужно мемоизировать через useMemo.
Для функций с зависимостями важно корректно указать массив зависимостей, иначе обновления могут «застрять».

Попробуйте применить эти приёмы в своём проекте и посмотрите в консоли, как уменьшится количество ререндеров.

👉 @frontend_1

Интерактивный урок по свойству grid-template-columns 🚀👨‍💻


👉 @frontend_1

Импорт локальных изображений vs использование изображений из папки /public в Next.js

👉 @frontend_1

Основные методы массивов JavaScript

👉 @frontend_1

Сегодня хочу поделиться с тобой одной тонкостью, которая помогает делать интерфейс более дружелюбным — скелетоны (skeleton loaders). Это те самые серые заглушки, которые показываются до загрузки данных. Пользователь видит, что «что-то происходит», и не чувствует, что приложение тормозит.

🦴 Как сделать скелетон быстро и без боли?
Я часто использую компонент из @radix-ui/react-skeleton или shadcn/ui. Но можно собрать свой за 5 минут:

const Skeleton = ({ className }: { className?: string }) => (
  <div className={`animate-pulse bg-muted rounded-md ${className}`} />
)

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

{isLoading ? (
  <Skeleton className="h-6 w-40" />
) : (
  <span>{user.name}</span>
)}

Без скелетонов пользователь может увидеть "прыгающий" интерфейс — сначала пустота, потом всё резко появилось. Это раздражает. Скелетоны создают ощущение плавности и контроля.

👉 @frontend_1

Как frontend-разработчику получить оффер в Bigtech?

Ты вроде бы уже не джун, но всё равно чувствуешь, что топчешься на месте? Рынок перегрет, требований всё больше, а откликов — всё меньше? На собесах валят на алгоритмах или просят "нарисовать" архитектуру, как будто ты ведущий.

При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, а у тебя не получается даже дойти до финального этапа? Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

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

В своем канале:
👉 публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях
👉даю примеры по прохождению собеседований
👉разбираю резюме и докручиваю резюме подписчиков
👉и просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать

🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки.

Подписывайся и получай максимум пользы, а нас уже больше 2000 🤓: https://t.iss.one/+aVbxFS67cfJjMWJi


Реклама, ИП Галактионов Тихон Витальевич, инн: 771618975809, erid: 2W5zFK8wU5n

🚀 Хотите стать мастером Vue? Присоединяйся к открытому вебинару!

Вы знаете JavaScript, но не понимаете, как работает Vue? Хотите научиться использовать его для создания динамичных приложений?

🔥8 июля в 20.00 мск. приглашаем на открытый урок “Как быстро освоить Vue, если уже знаешь JavaScript”, на котором разберем:

- создание компонентов с реактивностью и передача данных;
- работу с директивами (v-if, v-for, v-model);
- сборку мини-приложения с динамическими данными.

Вы научитесь использовать Vue для создания интерфейсов, разберетесь в компонентах и реактивности, а также получите основы для работы над реальными проектами. 🛠

👉 Регистрируйтесь по ссылке: https://vk.cc/cNbBVQ

Бесплатное занятие приурочено к старту курса “Vue.js разработчик”, на котором можно глубже погрузиться в особенности фреймворка, научиться работать с его инструментами и создавать реальные проекты.

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

💡Шпаргалка по CSS

👉 @frontend_1

📚 Шпаргалка по useState в React: Управление состоянием в функциональных компонентах

useState — это хук, который позволяет добавлять состояние в функциональные компоненты React. Это основа для создания интерактивных и динамичных интерфейсов!

1. Импорт useState

Прежде всего, импортируйте его из React:

import React, { useState } from 'react';

2. Объявление переменной состояния

Внутри вашего функционального компонента вызовите useState():

const [stateVariable, setStateVariable] = useState(initialValue);

* stateVariable: Текущее значение состояния. Вы можете назвать её как угодно.
* setStateVariable: Функция для обновления этого состояния. По соглашению, её называют set + имя переменной состояния (например, setCount, setName).
* initialValue: Начальное значение состояния. Оно будет использовано только при первом рендере компонента. Может быть любым типом данных: число, строка, булево, объект, массив, null.

Пример:

const [count, setCount] = useState(0); // Число
const [name, setName] = useState('Alice'); // Строка
const [isActive, setIsActive] = useState(false); // Булево
const [user, setUser] = useState({ id: 1, name: 'Bob' }); // Объект
const [items, setItems] = useState([]); // Массив

3. Обновление состояния

Для изменения состояния всегда используйте функцию setStateVariable. Никогда не изменяйте stateVariable напрямую!

// Увеличить счетчик
setCount(count + 1);

// Изменить имя
setName('Charlie');

// Переключить булево
setIsActive(!isActive);

// Обновить объект (важно: создавайте новый объект!)
setUser({ ...user, name: 'David' });

// Добавить элемент в массив (важно: создавайте новый массив!)
setItems([...items, 'New Item']);

Важно: Когда вы вызываете функцию обновления состояния (setCount, setName и т.д.), React перерендерит компонент с новым значением.

4. Функциональное обновление состояния (когда новое состояние зависит от предыдущего)

Если новое состояние зависит от предыдущего, используйте функцию обратного вызова в setStateVariable. Это гарантирует, что вы работаете с самым актуальным состоянием, особенно в асинхронных операциях или при пакетном обновлении:

setCount(prevCount => prevCount + 1);

Здесь prevCount — это гарантированно предыдущее значение count.

5. Несколько переменных состояния

Вы можете использовать useState несколько раз в одном компоненте для управления разными частями состояния:

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <input type="text" value={text} onChange={e => setText(e.target.value)} />
      <p>Текст: {text}</p>
    </div>
  );
}

Когда использовать useState?

* Для любого изменяемого значения, которое должно вызывать перерендер компонента при изменении.
* Для данных, специфичных для этого компонента.

Ключевые моменты:

* useState возвращает массив из двух элементов: текущее состояние и функцию для его обновления.
* Обновление состояния асинхронно. React может группировать несколько обновлений для оптимизации.
* При обновлении объекта или массива всегда создавайте новую копию, а не мутируйте существующую.

Используйте эту шпаргалку, чтобы уверенно работать с состоянием в ваших React-приложениях!

👉 @frontend_1

🚀 Хотите стать экспертом в Angular? Пройдите тест и узнайте, готовы ли вы к нашему курсу!

Перед тем как погрузиться в мир Angular, проверьте свои знания JavaScript с помощью нашего вступительного теста. Это не только отличный способ оценить ваш уровень, но и первый шаг к освоению одного из самых востребованных фреймворков для веб-разработки. 🌍

Что вас ждёт на курсе Angular Developer?

- Создание SPA приложений с использованием лучших практик.
- Работа с TypeScript для создания чистого и поддерживаемого кода.
- Глубокие знания Angular для реальных проектов.
- Освоение реактивного программирования с помощью RxJS.
- Оптимизация производительности приложений.

👨‍💻 Для кого этот курс?

- JavaScript-разработчики, желающие углубить свои знания и освоить Angular.
- Backend-разработчики, стремящиеся стать Fullstack-разработчиками.
- Начинающие фронтендеры, готовые освоить строгий и структурированный фреймворк.

Что даст вам курс?

- Вы научитесь создавать высококачественные приложения с Angular.
- Освоите современные подходы в разработке с использованием TypeScript и RxJS.
- Станете уверенным в написании масштабируемого и легко поддерживаемого кода.

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

Тест и подробнее о курсе Angular Developer - https://vk.cc/cNl3ym

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Ошибки при работе с tailwindcss

Использование модификатора !important чтобы перебить другие классы (стили).

Использование !important в 99% не нужен. Только в крайних ситуациях, когда работаете со сторонними библиотеками и привычными способами не получается повысить силу селектора.

Плохой код:

className={cn(
    'bg-slate-100',{
    '!bg-slate-200': isActive,
})}

Хороший:

className={cn('bg-slate-100', 'active:bg-slate-200')}

https://habr.com/ru/articles/858426/

👉 @frontend_1

Шпаргалка по выравниванию в CSS Grid 👨‍💻

👉 @frontend_1

HTML input types сильно различаются в зависимости от значения атрибута type, который вы используете 👨‍💻.

Ознакомьтесь с этой шпаргалкой на будущее 🚀

👉 @frontend_1

🚀 Хотите стать Vue-разработчиком?

Пройдите вступительное тестирование и получите шанс обучаться на курсе Vue.js разработчик от OTUS! 🎓

Почему это важно?
- Знания для реальной работы: на курсе не просто теория, а практика на реальных проектах.
- Готовое портфолио: в конце обучения вы создаете полноценное приложение, которое можно показать работодателю.
- Поддержка экспертов: менторы из индустрии помогут на каждом шаге.
- Углубленное изучение Vue: от основ до продвинутых технологий — все, что нужно для успешной карьеры.

Как это работает?
1. Пройдите тестирование и оцените свой уровень.
2. Получите спеццену при поступлении в группу курса и начните обучение. Подробности уточняйте у менеджера.
3. Получайте знания, расширяйте свой стек технологий, реализуйте выпускной проект.

🔗 Пройти тестирование: https://vk.cc/cNl6Ia

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576