Frontender Libs - обзор библиотек JS / CSS
前往频道在 Telegram
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
显示更多
7 363
订阅者
-224 小时
-217 天
-9230 天
帖子存档
\n\n C версии Vue 2.4.0 доступна возможность навесить несколько событий на элемент.\n\n👉 @sWebDev","datePublished":"2023-05-01T08:11:05Z","dateModified":"2023-05-01T08:11:05Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1342},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2098","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2098","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2098","headline":"Vue-controlled Wall-E Проект с героем мультфильма WALL-E, следящим за движением курсора. Выполнено на Vue.js.…","articleBody":"Vue-controlled Wall-E\n\nПроект с героем мультфильма WALL-E, следящим за движением курсора. Выполнено на Vue.js.\n\n👉 @sWebDev","datePublished":"2023-04-30T09:15:04Z","dateModified":"2023-04-30T09:15:04Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"publisher":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ch/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1274},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}}]}
Anonymous voting
Разработка одностраничного приложения с помощью Flask и Vue.js
Пошаговое руководство по настройке CRUD при помощи Vue и Flask. Начнем с создания Vue-приложения и перейдем к выполнению CRUD операций.
👉 @sWebDev
React Animated BB-8
Отслеживание курсора в стиле Star Wars. Проект с анимированным BB-8, выполнено на React.
👉 @sWebDev
Микросервисы — популярный способ создания и поддержки современных веб-сервисов. Развиваетесь в веб-разработке? Узнайте, как создавать микросервисы при помощи NodeJS и GRPC
18 мая в 20:00 состоится вебинар «NodeJS + Microservices». За 1,5 часа вы узнаете, как создавать микросервисы с использованием протокола gRPC. На занятии мы разберем:
— Плюсы и минусы микросервисного подхода
— Как мигрировать монолит на микросервисы
— Решение на базе NodeJS + протокола GRPC.
В результате у вас будет база для создания своего микросервиса на NodeJS.
Открытый урок бесплатный и состоится в рамках онлайн-курса «Node.js Developer» в OTUS. Продолжить обучение вы сможете уже на курсе, на него действуют разные способы оплаты.
Для участия пройдите вступительный тест https://otus.pw/xFvO/
Нативная интеграция. Информация о продукте www.otus.ru
Matter.js
Matter.js предоставляет возможность создавать физические движки для браузерных приложений, таких как игры и симуляторы. Библиотека имеет впечатляющий набор функций и возможностей, таких как симуляция гравитации, динамики твердых тел и многого другого. Matter.js также обладает хорошей документацией и простым интерфейсом.
👉 @sWebDev
Новый способ передачи данных в динамически создаваемые компоненты
Рассмотрим новый функционал Angular, позволяющий передавать данные в динамически создаваемые компоненты более эффективно и удобно. В статье приведен пример использования, который демонстрирует простой способ создания динамических компонентов и передачи им данных.
👉 @sWebDev
LIVE: React Gallery with Keyboard Control
Проект анимированной галереи, выполненной на React.
👉 @sWebDev
React хук для изменения ширины и длины элемента
use-resize-observer — React-хук, который позволяет измерять ширину и высоту элемента . Этот хук невероятно удобен при работе с обрезкой, редактированием, обработкой изображений и т.д.
Пример:
import React from "react";
import ReactDOM from "react-dom";
import useResizeObserver from "use-resize-observer";
import "./styles.css";
const App = () => {
const { ref, width, height } = useResizeObserver<HTMLDivElement>();
return (
<div>
<div className="instructions">Try resizing this div!</div>
<div ref={ref} className="box">
{width}x{height}
</div>
</div>
)};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
👉 @sWebDevReact Calculator
По ссылке проект калькулятора, выполненного на React.
👉 @sWebDev
Хук для возврата отложенной версии переданного значения React?
Как вернуть отложенную версию переданного значения React?
В React 18 появился хук, который позволяет вернуть отложенную версию переданного значения, что это за хук?
👉 @sWebDev
Game of Life (React + Redux)
Необычная игра, выполненная на React и Redux.
👉 @sWebDev
Muuri
Muuri предоставляет простой API для создания анимированных и реагирующих на пользовательские действия сеток и гридов. Она легка в использовании и настраивается под различные потребности, включая сортировку и фильтрацию элементов. Библиотека также предоставляет мощные инструменты для анимации перемещения и изменения размера элементов внутри сетки.
👉 @sWebDev
5 способов определить компонент в Vue 3
Vue развивается и в настоящее время существует несколько способов определения компонента. По ссылке определяем простой компонент и проводим рефакторинг всеми доступными методами.
👉 @sWebDev
Scattering hexagons
Анимированная сцена с рассеиванием, выполненная на JQuery.
👉 @sWebDev
Blotter.js
Blotter.js - это библиотека для создания текстовых анимаций на WebGL. Она позволяет создавать сложные и красивые текстовые анимации, используя шейдеры и эффекты, которые обрабатываются на GPU. Библиотека имеет простой API, который позволяет легко создавать и настраивать текстовые анимации, поддерживает различные типы текстовых элементов, включая 2D и 3D тексты.
👉 @sWebDev
Освоение React: методы, которые выведут ваш пользовательский интерфейс на новый уровень
В статье представлены рекомендации по улучшению пользовательского интерфейса в React приложениях. От стиля к функциональности: советы и примеры кода для создания панели навигации мирового уровня.
👉 @sWebDev
🎯 Тест по Node JS от OTUS
🚀 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на углубленном курсе - Node JS Developer от OTUS
Курс рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript
🔥 РЕЗУЛЬТАТ ПРОХОЖДЕНИЯ КУРСА
Разработка серверных приложений любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js
Время прохождения теста ограниченно 30 минут
👉 ПРОЙТИ ТЕСТ
Курс доступен в рассрочку.
🎁 Пройдете успешно тест, получите доступ к открытым урокам курса.
Нативная интеграция. Информация о продукте www.otus.ru
GSAP FLIP image grid modal
Галерея с анимацией, созданная на GSAP.js и SCSS.
👉 @sWebDev
Добавление события на элемент Vue
Добавление события на элемент реализуется директивой
v-on. Аргументом директивы после двоеточия передается название события. Названия событий аналогичны событиям JavaScript. В примере мы навесили обработчик click, на кнопку, которая увеличивает переменную counter на единицу.
<template>
<div class="counter">{{counter}}</div>
<button v-on:click="increaseCounter">+1</button>
</template>
<script>
export default {
name: 'App',
data() {
return {
counter: 0
}
},
methods: {
increaseCounter: function () {
return this.counter++;
}
}
}
</script>
C версии Vue 2.4.0 доступна возможность навесить несколько событий на элемент.
👉 @sWebDevVue-controlled Wall-E
Проект с героем мультфильма WALL-E, следящим за движением курсора. Выполнено на Vue.js.
👉 @sWebDev
