Frontender Libs - обзор библиотек JS / CSS

Scroll-based image sequence with GSAP and ScrollTrigger (Helper Function)

Анимация пролистывания с динамическим с эффектом освещения на GSAP.

👉 @sWebDev

AnalogJS

AnalogJS - это полнофункциональный мета-фреймворк, созданный для разработки приложений и веб-сайтов с помощью Angular.

👉 @sWebDev

FullStackOverflow developer.

👉 @sWebDev | #юмор

Hero with cursor tracking (GSAP)

Анимация трекинга курсора на Gsap.

👉 @sWebDev

Управление состоянием действий

UseActionState - это хук в React, предназначенный для упрощения управления состоянием действий в React-компонентах, который был введен для улучшения существующего хука useFormState.

Использование:

const [state, action] = useActionState({
  initialState: {
    // Начальное состояние
  },
  actions: {
    // Определите действия
    increment: () => {
      // Логика действия
    },
    decrement: () => {
      // Логика действия
    },
  },
});

const Counter = () => {
  const [count, actions] = useActionState({
    initialState: { count: 0 },
    actions: {
      increment: () => ({ count: count + 1 }),
      decrement: () => ({ count: count - 1 }),
    },
  });

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={actions.increment}>Увеличить</button>
      <button onClick={actions.decrement}>Уменьшить</button>
    </div>
  );
};

Расставляй приоритеты правильно.

👉 @sWebDev | #юмор

Как ɵNgOnChangesFeature определяет, что значение входных данных изменилось?

Anonymous Quiz

12% - Сравнивает новое значение с пустой строкой.

66% - Сравнивает новое значение с предыдущим.

10% - Сравнивает новое значение со всеми остальными входными данными.

12% - Сравнивает новое значение с типом данных.

Сравнение значений входных данных в ɵNgOnChangesFeature

Как ɵNgOnChangesFeature определяет, что значение входных данных изменилось?

👉 @sWebDev

Shepherd.js

Shepherd.js - это библиотека JavaScript, которая поможет создавать интерактивные туры по вашему веб-сайту или приложению. Они могут использоваться для обучения новых пользователей интерфейсу, демонстрации новых функций или просто привлечения внимания к важным частям вашего сайта.

👉 @sWebDev

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

Статья о ключевых словах, влияющих на внешний и внутренний типы отображения, а также о том как управлять отображением элементов с помощью ключевых слов и значений contents и none.

👉 @sWebDev | #собес

Ленивые бесконечные списки на основе Deferrable Views

Статья о реализации списков на основе Deferrable Views, недавно появившихся в Angular 17.

👉 @sWebDev

Bouncy Balloon

Интерактивная анимация шаров на Three.js.

👉 @sWebDev

Video is too big

Firebolt

Firebolt — это новый фреймворк для React, который обещает повысить продуктивность разработчиков. В сочетании со встроенным в Firebolts CSS-in-JS и интуитивно понятным роутингом это позволяет вам создавать все, что угодно, от посадочной страницы до полноценного SaaS, просто создавая и компонуя компоненты React.

👉 @sWebDev

Alfa Frontend Meetup #3
Митап frontend-сообщества про архитектуру.

Поговорим про webpack module federation, рассмотрим статический анализ кода и попробуем применить этот подход к статическому анализу зависимостей с помощью программирования в ограничениях, обсудим плюсы и минусы монорепозиториев.

Когда: 25 апреля, 19:00.
Где: Москва, пр. Андропова, д. 18, к. 3 и онлайн.

Вас ожидают доклады спикеров: 

▪️Алексей Охрименко, техлид в Yandex Cloud Tracker, расскажет о статистическом анализе зависимостей.
▪️Алексей Николаев, Teamlead в Sendsay.ru, разберёт плюсы и минусы монорепозиториев.
▪️Степан Иваньков, главный frontend-разработчик в «Альфа-Банке», расскажет о том, как перевести 45 приложений на webpack module federation и ничего не сломать.


Регистрируйтесь

Больше полезного в комьюнити @alfa_frontend

erid: LjN8K9SWk
Реклама. АО «Альфа-Банк». ИНН 7728168971.

Где создавать красивые и удобные сайты с кэшбеком до 50%?

В LANDY24. Главный принцип LANDY24 — код для дизайна, а не дизайн для кода.

- 100+ готовых шаблонов и множество параметров для настройки.
- Создавайте лендинги и сложные многостраничные сайты.
- Каждый блок, даже готовый, можно полностью разобрать на “атомы” — огромный простор для творчества!
- Добавляйте свой код (HTML, CSS, JavaScript).
- Адаптивная верстка — сайт будет красиво смотреться на любых устройствах.
- Зеленая зона в Google Speed Insights и весь необходимый seo-инструментарий.

А еще это российский конструктор, который точно никуда не уйдет. Попробуйте бесплатно, у нас есть free тариф.

Реклама: ООО "ССП", ИНН: 7701416828

Infinitely drawing icons

Анимированная SVG иконка на anime.js.

👉 @sWebDev

Отображение элементов в Angular

NgSwitchCase - это директива, которая используется в Angular для отображения разных элементов в зависимости от значения переменной.

Синтаксис:

<div [ngSwitch]="variable">
  <ng-container *ngSwitchCase="case1">
    </ng-container>
  <ng-container *ngSwitchCase="case2">
    </ng-container>
  <ng-container *ngSwitchDefault>
    </ng-container>
</div>

<div [ngSwitch]="user.role">
  <ng-container *ngSwitchCase="'admin'">
    <h1>Администратор</h1>
  </ng-container>
  <ng-container *ngSwitchCase="'user'">
    <h1>Пользователь</h1>
  </ng-container>
  <ng-container *ngSwitchDefault>
    <h1>Неизвестная роль</h1>
  </ng-container>
</div>

Любите своего CEO?

👉 @sWebDev | #юмор

Какие аргументы принимает useSyncExternalStore?

Anonymous Quiz

42% - store.subscribe и store.getSnapshot;

30% - store.data и store.updateData;

18% - store.url и store.apiKey;

10% - store.name и store.description.

Аргументы useSyncExternalStore

Какие аргументы принимает useSyncExternalStore?

👉 @sWebDev