CSS, такой CSS.

👉 @sWebDev | #юмор

Синхронная вставка элементов в DOM

useInsertionEffect - это хук, который позволяет синхронно вставлять элементы в DOM перед срабатыванием эффектов layout.

Чем он отличается от других хуков:

useEffect: срабатывает после layout и paint, что может привести к мерцанию при динамическом изменении стилей.

useLayoutEffect: срабатывает синхронно перед layout, но может привести к повторным вычислениям layout, если стили вставляются во время рендеринга.


Пример использования:

const useDynamicStyles = () => {
  const [style, setStyle] = useState('');

  useInsertionEffect(() => {
    const styleElement = document.createElement('style');
    styleElement.textContent = style;
    document.head.appendChild(styleElement);

    return () => {
      document.head.removeChild(styleElement);
    };
  }, [style]);

  return style;
};

👉 @sWebDev

React Smooth Section Navigator

Интерактивное приложение React, обеспечивающее плавную навигацию между разделами контента с помощью колеса или сенсорных жестов. Он использует анимацию GSAP для обеспечения плавных переходов и поведения ScrollTrigger.

👉 @sWebDev

Было подобное?

👍 - Да.

🤔 - У меня все работает.

👉 @sWebDev | #юмор

Remult

Remult - это полнофункциональная CRUD-библиотека, основанная на TypeScript. Она использует ваши TypeScript-сущности как единый источник данных для API, типизированного по типам клиента API на стороне фронт-энда и ORM на стороне бэк-энда.

👉 @sWebDev

Сombined

Анимированная визитка на Anime.js.

👉 @sWebDev

В IT получают больше 250к только те, кто умеют вести переговоры

Остальные сразу соглашаются на оффер, даже если он их не устраивает, потому что стесняются просить больше денег.

Если это про тебя, подписывайся на канал Выше вилки. Достаточно прочесть в нём хотя бы пару приёмов переговоров — и вы сможете увеличить свой доход на 30%.

Подписывайтесь: @above_the_range

реклама. рекламодатель ИП Шишков Илья Иванович ИНН: 575206903941
erid: 2VtzqvwpLr2

Способы копирования объектов в JavaScript

Статья рассматривает различные способы копирования объектов в JavaScript.

👉 @sWebDev

Vue Todo List

Интерактивный список дел на Vue.js. Другой вариант реализации доступен по ссылке.

👉 @sWebDev

MistCSS

MistCSS - это новаторская библиотека, которая позволяет создавать атомарные компоненты React, используя только CSS. Она реализует концепцию "JS-из-CSS", где стили CSS напрямую преобразуются в компоненты React, без необходимости писать код JavaScript.

👉 @sWebDev

Аргументы useSyncExternalStore

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

👉 @sWebDev

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

👉 @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>

В этом примере:
[ngSwitch] - директива, которая связывает выражение variable с директивой.
ngSwitchCase - директива, которая определяет case-выражения.
ng-container - используется для определения шаблона для каждого case-выражения.
ngSwitchDefault - директива, которая определяет шаблон по умолчанию.

Пример:

<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>

👉 @sWebDev

Infinitely drawing icons

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

👉 @sWebDev

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

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

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

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

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

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.

Firebolt

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

👉 @sWebDev

Bouncy Balloon

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

👉 @sWebDev

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

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

👉 @sWebDev