Frontender Libs - обзор библиотек JS / CSS
8.44K subscribers
2.03K photos
736 videos
2 files
241 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Infinitely drawing icons

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

👉 @sWebDev
👍5
Где создавать красивые и удобные сайты с кэшбеком до 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
👍5👎2
Media is too big
VIEW IN TELEGRAM
Bouncy Balloon

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

👉 @sWebDev
4
Ленивые бесконечные списки на основе Deferrable Views

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

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

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

👉 @sWebDev | #собес
👍4
Shepherd.js

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

👉 @sWebDev
👍7
Сравнение значений входных данных в ɵNgOnChangesFeature

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

👉 @sWebDev
👍4
Расставляй приоритеты правильно.

👉 @sWebDev | #юмор
🔥18👍1
Управление состоянием действий

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
👍5👎1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Hero with cursor tracking (GSAP)

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

👉 @sWebDev
🔥5
FullStackOverflow developer.

👉 @sWebDev | #юмор
👍15
AnalogJS

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

👉 @sWebDev
👍4👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll-based image sequence with GSAP and ScrollTrigger (Helper Function)

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

👉 @sWebDev
6👍1
Нестабильные тесты в React: обнаружение, предотвращение и инструменты

Статья рассматривает проблему нестабильных тестов в React. Они могут привести к ложным срабатываниям системы непрерывной интеграции (CI), замедлить разработку и затруднить выявление реальных ошибок.

👉 @sWebDev
🔥5👎2
Media is too big
VIEW IN TELEGRAM
Infinite Portals

Объёмная сцена с бесконечным переходом через портал на Three.js и GSAP.

👉 @sWebDev
8👍1
Inferno

Inferno — это библиотека JavaScript, которая предоставляет возможность создавать пользовательские интерфейсы в декларативном стиле. Она разработана с учетом высокой производительности, легкости использования и поддержки серверного рендеринга через inferno-server и NodeJS.

👉 @sWebDev
👍4
Какой из синхронных хуков может вызвать повторные вычисления layout?

Какой хук срабатывает синхронно перед layout, но может привести к повторным вычислениям layout, если стили вставляются во время рендеринга?

Если забыли, то это было в посте 15.04.2024.

👉 @sWebDev
👍4👎1
Какой хук срабатывает синхронно перед layout, но может привести к повторным вычислениям layout, если стили вставляются во время рендеринга?
Anonymous Quiz
19%
UseEffect.
63%
UseLayoutEffect.
12%
UseInsertionEffect.
6%
UseDynamicStyles.
👍5👎1