Frontender Libs - обзор библиотек JS / CSS
前往频道在 Telegram
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
显示更多
7 365
订阅者
-224 小时
-277 天
-9330 天
帖子存档
\n\n \n \n 
Anonymous votingAnonymous voting
{{ count }}
\n \n\nЭтот код создает компонент с кнопкой и счетчиком. Код инициализации компонента написан в шаблоне компонента. Кнопка увеличивает счетчик при нажатии.\n\n👉 @sWebDev","datePublished":"2023-11-20T06:30:01Z","dateModified":"2023-11-20T06:30:01Z","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":1321},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2478","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2478","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2478","headline":"Homer's face Animated Гомер Симпсон, созданный с использованием Gsap.js. 👉 @sWebDev","articleBody":"Homer's face Animated\n\nГомер Симпсон, созданный с использованием Gsap.js.\n\n👉 @sWebDev","datePublished":"2023-11-19T09:15:01Z","dateModified":"2023-11-19T09:15:01Z","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":1204},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2477","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2477","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2477","headline":"Frontender Libs - обзор библиотек JS / CSS","datePublished":"2023-11-18T14:15:00Z","dateModified":"2023-11-18T14:15:00Z","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":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1338},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2476","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2476","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2476","headline":"Метод React для проверки единственности потомка Какой метод React используется для проверки того, что компоне…","articleBody":"Метод React для проверки единственности потомка\n\nКакой метод React используется для проверки того, что компонент имеет только одного потомка?\n\n👉 @sWebDev","datePublished":"2023-11-18T14:15:00Z","dateModified":"2023-11-18T14:15:00Z","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":1302},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2475","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2475","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2475","headline":"Baby Yoda w/ GSAP3 Персонаж Грогу из сериала \"Мандалорец\", выполненный на Gsap.js. 👉 @sWebDev","articleBody":"Baby Yoda w/ GSAP3\n\nПерсонаж Грогу из сериала \"Мандалорец\", выполненный на Gsap.js.\n\n👉 @sWebDev","datePublished":"2023-11-18T08:06:00Z","dateModified":"2023-11-18T08:06:00Z","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":1324},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2474","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2474","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2474","headline":"Vue.Draggable Vue.Draggable - библиотека Vue для создания перетаскиваемых элементов. Библиотека имеет простой…","articleBody":"Vue.Draggable\n\nVue.Draggable - библиотека Vue для создания перетаскиваемых элементов. Библиотека имеет простой и понятный API, а также поддерживает различные типы перетаскивания, включая перетаскивание между элементами, перетаскивание в пределах элемента и перетаскивание с одного экрана на другой.\n\n👉 @sWebDev","datePublished":"2023-11-17T08:13:01Z","dateModified":"2023-11-17T08:13:01Z","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/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2473","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2473","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2473","headline":"Разработка веб-приложений в 2023 году: Angular против React: битва за господство В статье сравниваются два по…","articleBody":"Разработка веб-приложений в 2023 году: Angular против React: битва за господство\n\nВ статье сравниваются два популярных фреймворка: Angular и React. Автор статьи рассматривает следующие аспекты:\nпопулярность;\nпроизводительность;\nобучение;\nподдержка.\n\n👉 @sWebDev","datePublished":"2023-11-16T15:10:01Z","dateModified":"2023-11-16T15:10:01Z","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":1283},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2472","url":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2472","mainEntityOfPage":"https://telemetr.io/ch/channels/1215276433-swebdev/posts/2472","headline":"Game of Thrones: Daenerys, Mother of Dragons Анимированная Дейенерис Таргариен из \"Игры престолов\", выполненн…","articleBody":"Game of Thrones: Daenerys, Mother of Dragons\n\nАнимированная Дейенерис Таргариен из \"Игры престолов\", выполненная на Gsap.js.\n\n👉 @sWebDev","datePublished":"2023-11-16T07:35:00Z","dateModified":"2023-11-16T07:35:00Z","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":1290},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}}]}
Разработка браузерных игр с использованием Phaser3, React, Typescript
Ни для кого не секрет, что каждый уважающий себя разработчик программного обеспечения должен иметь в своем портфолио хотя бы один пет-проект, а лучше полноценный продукт, дающий дополнительный постоянный заработок. Предметных областей и тематик приложений великое множество, но среди них есть одна, которая заслуживает отдельного внимания — разработка своей собственной игры. В статье изучим процесс создания и технический подход к данной задаче.
👉 @sWebDev
Какой метод React используется для запуска эффекта после того, как компонент был размещён на DOM?
Метод 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>
Этот код создает компонент с кнопкой и счетчиком. Код инициализации компонента написан в шаблоне компонента. Кнопка увеличивает счетчик при нажатии.
👉 @sWebDevHomer's face Animated
Гомер Симпсон, созданный с использованием Gsap.js.
👉 @sWebDev
Какой метод React используется для проверки того, что компонент имеет только одного потомка?
Метод React для проверки единственности потомка
Какой метод React используется для проверки того, что компонент имеет только одного потомка?
👉 @sWebDev
Baby Yoda w/ GSAP3
Персонаж Грогу из сериала "Мандалорец", выполненный на Gsap.js.
👉 @sWebDev
Vue.Draggable
Vue.Draggable - библиотека Vue для создания перетаскиваемых элементов. Библиотека имеет простой и понятный API, а также поддерживает различные типы перетаскивания, включая перетаскивание между элементами, перетаскивание в пределах элемента и перетаскивание с одного экрана на другой.
👉 @sWebDev
Разработка веб-приложений в 2023 году: Angular против React: битва за господство
В статье сравниваются два популярных фреймворка: Angular и React. Автор статьи рассматривает следующие аспекты:
популярность;
производительность;
обучение;
поддержка.
👉 @sWebDev
Game of Thrones: Daenerys, Mother of Dragons
Анимированная Дейенерис Таргариен из "Игры престолов", выполненная на Gsap.js.
👉 @sWebDev
