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

Sacred geometry 3D - 2 3D-анимация, выполненная с помощью Three.js. 👉 @sWebDev

Менеджер задач на React + Hygraph В статье описано создание полноценного приложения по управлению задачами с помощью React и библиотеки Hygraph. Рассмотрим основы создания CRUD-приложений, реализацию базовых функций и использование Hygraph для управления состоянием приложения. 👉 @sWebDev

🔥Тест по JavaScript от OTUS 🔥 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе - «JavaScript Developer. Professional» 👉 ПРОЙТИ ТЕСТ https://otus.pw/Z4in/ 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами JavaScript-сообщества ✔️Получите видео-курс по Git в подарок ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «JavaScript Developer. Professional» Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

Donuts Paradise Генератор пончиков, выполненный с применением библиотеки Three.js. 👉 @sWebDev

Umbrella JS Umbrella JS - JavaScript библиотека для работы с DOM-элементами. Она предоставляет чистый и простой API, который можно использовать для создания, поиска и манипулирования элементами на странице. Код библиотеки легко читаем и понятен. Основным преимуществом является небольшой размер. 👉 @sWebDev

Решено: Не работает ввод — React Рассмотрим проблему, когда пользователь не может вводить текст в поле ввода React. Автор статьи описывает причину и предоставляет простое решение. Если вы столкнулись с такой проблемой, то материал будет полезным для вас. 👉 @sWebDev

Node, Nest, Next, Express🤯 - пора бы всё объединить! Для этого мы создали отдельный уголок - Серверный JavaScript. Собрали всё, проверяй🔥

Icosahedron: Perlin Noise + Isolines + SelectiveBloom Анимированная сфера, выполненная с применением библиотеки Three.js. 👉 @sWebDev

Состояние компонента при помощи функции-редьюсера в React useReducer в React дает управлять состоянием компонента с помощью функции-редьюсера. Пример:

         import React, { useReducer } from 'react';
         const initialState = { count: 0 };

         function reducer(state, action) {
          switch (action.type) {
           case 'increment':
            return { count: state.count + 1 };
           case 'decrement':
            return { count: state.count - 1 };
           default:
            throw new Error();
           }
         }

         function Counter() {
           const [state, dispatch] = useReducer(reducer, initialState);
            return (
            <>
            Count: {state.count}
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
            </>
            );
            }

👉 @sWebDev

FRONT-END! Да, пора бы уже выучить эту технологию или хотя бы название. Помогут вам в этом следующие статьи: - Что должен уметь Frontend разработчик в 2023 году - Как создать многопользовательский чат с помощью WebSocket за 10 минут - Как стать джуном, которого берут на работу - Еще одна новая фича JS - structuredClone Для удобства собрали всё здесь: @Front

Basketball Hoop Loop Проект с анимацией вращающегося баскетбольного мяча, выполненный на GSAP.js. 👉 @sWebDev

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

Как использовать React в приложениях Angular React в приложениях Angular может понадобится в двух случаях: в экосистеме React есть компонент, на разработку которого, вероятно, уйдут недели, например компонент Timeline; cотрудничество с компанией, использующей React, которой необходимо интегрировать его в существующее приложение; В этой статье рассмотрим, как интегрировать React в обоих сценариях. 👉 @sWebDev

Как узнать была ли прокрутка элемента React? У вас есть функционал, который работает после прокрутки элемента. Как узнать совершена прокрутка или нет? Напоминаем, что у React для этого есть хук, какой? 👉 @sWebDev

🚀Не время стоять на месте! Пора прокачать свои навыки в JavaScript-разработке! Если вы хотите перейти в fullstack-направление, приходите 17 марта в 20:00 на открытый урок онлайн-курса «JavaScript Developer. Professional» в OTUS. Арсений Высоцкий, тимлид в большой международной компании, проведет вебинар «Клиенты реляционных баз данных». На занятии мы обсудим ORM и типизированные библиотеки формирования SQL-запросов. 👉🏻Для регистрации на занятие пройдите вступительный тест https://otus.pw/UuMq/ Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

ERROR Вариант оформления страницы с ошибкой, выполненный на GSAP.js. 👉 @sWebDev

Angular — API композиции директив Композиция директив очень похожа на паттерн Компоновщик Composite. Он входит в семейство Структурных паттернов программирования, которые отвечают за создание удобных объектов. В этой статье разберемся с API композиции директив Directive composition API в Angular. 👉 @sWebDev

Tone.js Tone.js представляет собой инструмент для создания и управления звуковыми эффектами и аудиофайлами в веб-приложениях. Предоставляет мощный набор инструментов и функций для создания музыкальных произведений и звуковых эффектов в реальном времени. Tone.js имеет легкую структуру и открытый исходный код, что делает ее доступной для разработчиков всех уровней. 👉 @sWebDev

Создание компонентов Vue 3 с помощью Tailwind CSS Рассмотрим руководство по использованию Tailwind CSS для создания компонентов Vue 3. 👉 @sWebDev