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

Процесс обновления и внесения изменений в DOM. В сети много устаревшей информации о React Fiber. Автор статьи разобрался в React Fiber и написал статью из двух частей, чтобы актуализировать информацию. Первая часть расскажет о процессе обновления и внесения изменений в DOM. Вторая часть посвящена реализации не блокирующего рендеринга - Concurrent React. 👉 @sWebDev

HyperMorph 3000™ Анимированный переход между изображениями с трекингом на Vue.js. 👉 @sWebDev

React: реализация якорей Для реализации якоря в React можно использовать следующий подход: 1. Создать ref объекта, к которому мы хотим перейти. 2. В случае когда мы хотим перейти к этому объекту, использовать метод ref.current.scrollIntoView();

        import React, { useRef } from 'react';
        import { render } from 'react-dom';
        import './style.css';

        const ScrollDemo = () => {
        const myRef = useRef(null);

        const executeScroll = () => myRef.current.scrollIntoView();

        return (
            <>
            <div style={{ height: 600 }} />
            <div ref={myRef}>Объект на который мы ссылаемся</div>
            <div style={{ height: 1500 }} />
            <button onClick={executeScroll}>Перейти к объекту</button>
            </>
        );
        };

 

Мы создаем ref объекта myRef и используем его для хранения ссылки на элемент, к которому мы хотим перейти. Затем мы создаем функцию executeScroll, которая вызывает метод scrollIntoView() на объекте myRef.

Разработка браузерных игр с использованием Phaser3, React, Typescript Ни для кого не секрет, что каждый уважающий себя разработчик программного обеспечения должен иметь в своем портфолио хотя бы один пет-проект, а лучше полноценный продукт, дающий дополнительный постоянный заработок. Предметных областей и тематик приложений великое множество, но среди них есть одна, которая заслуживает отдельного внимания — разработка своей собственной игры. В статье изучим процесс создания и технический подход к данной задаче. 👉 @sWebDev

Метод React для запуска эффекта после того, как компонент был размещён на DOM? Какой метод React используется для запуска эффекта после того, как компонент был размещён на DOM? 👉 @sWebDev

Itchy Tanuki Анимированная палитра цветов, выполненная на Angular. 👉 @sWebDev

TinyMCE TinyMCE - библиотека JavaScript, которая предоставляет WYSIWYG-редактор для создания и редактирования контента. Редактор поддерживает широкий спектр функций, включая форматирование текста, вставку изображений, таблиц и других элементов. 👉 @sWebDev

Как быстро собрать такую форму оплаты? Легко! Фронтенд гайд, это канал для верстальщиков, в котором публикуют: ✓ Готовый код ✓ Макеты для верстки ✓ Тесты на знание кода Ускорь работу над своим проектом!

Анимированный фон с JavaScript-библиотекой ParticlesJS Туториал по созданию анимированного фона для ваших веб-приложений с использованием библиотеки ParticlesJS. 👉 @sWebDev

Zeppelin GSAP animation Анимированная сцена с дирижаблем, выполненная на Gsap.js. 👉 @sWebDev

LibreJS LibreJS - это малоизвестная библиотека JavaScript, которая предоставляет простой и удобный способ работы с локализацией. Библиотека позволяет переводить текст, даты, числа и другие элементы интерфейса на любой язык. 👉 @sWebDev

React: forwardRef(): Как передавать refs дочерним компонентам В статье рассказывается о функции forwardRef() в React. Функция позволяет родительскому компоненту передавать ref-свойство дочернему компоненту без необходимости импортировать дочерний компонент. Функция forwardRef() принимает два аргумента: ref: Ref-объект, который будет передан дочернему компоненту. component: компонент, который будет возвращен. Пример использования:

   const MyComponent = forwardRef((ref, props) => {
     // ...
     return <div ref={ref} />;
   });

В примере мы создаем компонент MyComponent, который принимает ref-объект в качестве свойства. Мы используем функцию forwardRef(), чтобы передать ref-объект дочернему компоненту. 👉 @sWebDev

​💪 Создайте свой первый проект для портфолио разработчика на JavaScript 👉 На бесплатном открытом уроке «Создание чата на JavaScript с 0 за час» от OTUS. План практического вебинара: 1. Вступление, теория 2. Подготовка проекта, создание структуры 3. Разработка интерфейса, оформление стилей 4. Добавление функциональности на JavaScript 5. Реализация хранения сообщений 6. Подведение итогов и ответы на вопросы 👉 Подробнее о программе о программе урок и регистрация для участия: https://otus.pw/TMtw/ 📅 Занятие пройдёт 23 ноября в 20:00 мск и будет приурочено к старту курса «Специализация Fullstack developer». Программа курса обновлена и полностью соответствует современным требованиям рынка. 🎁 Черная пятница в OTUS! Успей получить скидку на курс! Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid: 2SDnjdBTWSL

CSSkateboard [w/ GSAP Observer] Анимированный скейтборд, выполненный на CSS и Gsap.js. 👉 @sWebDev

Компоненты <script setup> во Vue В Vue 3.2 были добавлены компоненты <script setup>. Они позволяют писать код инициализации компонента в его шаблоне. Это упрощает работу с компонентами и делает их более удобными в использовании.

   <script setup lang="ts">
   import { ref } from "vue";

   const count = ref(0);

   const increment = () => {
     count.value++;
   };
   </script>

   <template>
     <button @click="increment">Увеличить</button>
     <p>{{ count }}</p>
   </template>

Этот код создает компонент с кнопкой и счетчиком. Код инициализации компонента написан в шаблоне компонента. Кнопка увеличивает счетчик при нажатии. 👉 @sWebDev

Homer's face Animated Гомер Симпсон, созданный с использованием Gsap.js. 👉 @sWebDev

Метод React для проверки единственности потомка Какой метод React используется для проверки того, что компонент имеет только одного потомка? 👉 @sWebDev

Baby Yoda w/ GSAP3 Персонаж Грогу из сериала "Мандалорец", выполненный на Gsap.js. 👉 @sWebDev