Frontender Libs - обзор библиотек JS / CSS
Open in Telegram
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
Show more
Network:7 525
Subscribers
-524 hours
-137 days
-9430 days
Posts Archive
<head>
Разбираешься во Front-End?
</head>
<body>
Мы создали уникальную игру для программистов прямо в браузере с 3d миром будущего и с ревардами в криптовалюте.
Пиши код, развлекайся и зарабатывай TON, выполняя интересные задачи от уровня Junior до уровня Senior!
Перейди по ссылке и исследуй мир TONight:
👉 https://clck.ru/347ZX9
</body>
Зачем и когда использовать ng-template в Angular?
По ссылке обзор 3 полезных возможностей директивы
<ng-template>.GSAP 3 Radio
Анимированное радио, выполненное с использованием библиотеки Gsap.js.
👉 @sWebDev
jsPDF
jsPDF - это библиотека для генерации PDF-документов на стороне клиента. Она позволяет создавать PDF-файлы из HTML-страниц, изображений и других типов контента, поддерживает множество настроек и опций для создания настраиваемых документов. JsPDF не требует установки дополнительного программного обеспечения и может быть использована в любом современном браузере.
👉 @sWebDev
Можно бесконечно смотреть на три вещи: как течет вода, горит огонь и фронтендеры пилят монолит
Ребята из банды фронтендов TeamSnack решили раз и навсегда разобраться в подходах к микросервисам. Сравнивать будут Single-spa(SystemJS) и Webpack Module Federation. Обещают живое общение с едой и напитками, а также интерактив в Miro с рабочими схемами, которые можно потом протестировать в работе.
Когда: 14 апреля, 19:00 - 21:00
Где: ценители ламповой атмосферы могут приехать в офис Cloud (Москва, 2-я Звенигородская улица, 28), а для закоренелых удаленщиков доступен онлайн-формат в Telegram-канале сообщества.
Все детали можно узнать у самой команды TeamSnack: https://t.me/+b_H0dbC85dsyM2Qy
Реклама. Рекламодатель: ООО «Облачные технологии». erid: LatgBqAA4
Встраивание WebGL в HTML-страницу с помощью Three.JS
В статье рассмотрим совмещение WebGL‑анимации с прокруткой страницы HTML, используя библиотеку Three.js. Работа с ней во многом схожа с работой 3D‑редактора. Для получения результата в виде картинки или анимации необходимо создать сцену, поместить в нее камеру, создать примитив (геометрию или 3D‑модель), создать источник освещения и запустить процесс рендеринга.
👉 @sWebDev
Оптимизируем производительность в React
Рассмотрим одну из новых фич Reacta - Batching. Батчинг является процессом оптимизации производительности в React, при котором несколько обновлений состояния и свойств компонентов объединяются в одно обновление перед рендерингом. Это позволяет уменьшить количество обновлений DOM и повысить производительность. Пример использования:
function MyComponent() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}
При клике на Increment будет вызван три раза метод setCount, но благодаря batching'у обновления будут объединены в одно.
👉 @sWebDevХочешь щёлкать задачи по фронтенду как орешки?
Канал Frontend Tests & Tasks научит!
Это не очередной канал с задачами. Здесь придется думать.
Убедись сам 👉 @frontend_tests
Декомпозиция и интерфейс vue-компонентов
В большом vue-приложении всегда есть необходимость в декомпозиции компонентов и их логики. В статье приводятся размышления и некоторые выводы относительно подходов к декомпозиции vue-компонентов и их интерфейсу.
👉 @sWebDev
Klona
Klona - это библиотека для создания копий JavaScript-объектов. Она поддерживает работу с обычными объектами, массивами, датами и другими структурами данных. Klona предоставляет дополнительные методы для взаимодействия с объектами. Например, клонирование с выбором глубины вложенности. Библиотека будет полезной для разработчиков, работающих с большими объемами данных и желающими повысить производительность своих приложений.
👉 @sWebDev
Voxelizing Three.js Geometries
Проект генератора геометрических фигур, выполненный с применением библиотеки Three.js.
👉 @sWebDev
Возможно ли в React управлять состоянием компонента, используя функцию-редьюсер?
Управление состоянием компонента в React
Можем ли мы в React управлять состоянием компонента, используя функцию-редьюсер?
👉 @sWebDev
Airplanes
Реализация анимированного скролла при помощи библиотеки Gsap.js.
👉 @sWebDev
Angular. Работа с template-driven формами
Разработчики angular, как правило знают, что для работы с формами существует два подхода: reactive forms и template driven forms. Также, хорошо известно, что для работы с формами разработан такой функционал как валидация, однако исчерпывающе описано его применения для подхода reactive forms. Давайте рассмотрим как можно получить те же преимущества для template driven подхода.
👉 @sWebDev
Three js - Interactive solar system
Анимированный проект солнечной системы, выполненный на Three.js.
👉 @sWebDev
PixiJS
PixiJS часто используют в качестве игрового движка, но у библиотеки более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5. Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas.
👉 @sWebDev
5 ошибок начинающих разработчиков в React
В материале перечислены распространенные ошибки начинающих разработчиков React. Авторы советуют не использовать несколько элементов в корневом компоненте, избегать условных операторов в JSX и дают другие советы, которые помогут избежать распространенных ошибок при начале работы с библиотекой.
👉 @sWebDev
Настраиваем объект, передаваемый родительскому компоненту React
Хук
useImperativeHandle в React используется для передачи определенных функций из компонента-родителя. Он позволяет родительскому компоненту вызывать методы вложенного компонента. Пример:
import { forwardRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
const inputRef = useRef(null);
return (
<input type="text" ref={inputRef} />
);
});
export default ChildComponent;
Мы экспортируем дочерний компонент ChildComponent, имеющий метод focus. Мы используем хук useImperativeHandle, чтобы экспортировать этот метод через ref.
👉 @sWebDevVanilla JS Snake
"Змейка", выполненная при помощи библиотеки Vanila.js
👉 @sWebDev
