Frontender Libs - обзор библиотек JS / CSS
Kanalga Telegram’da o‘tish
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
Ko'proq ko'rsatish
7 358
Obunachilar
-424 soatlar
-247 kun
-9330 kun
Postlar arxiv
\n\n👉 @sWebDev","datePublished":"2023-03-13T08:11:04Z","dateModified":"2023-03-13T08:11:04Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/uz/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/uz/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1421},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/2002","url":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/2002","mainEntityOfPage":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/2002","headline":"Greensock SVG Search Animation Забавная анимация загрузки, выполненная на GSAP.js. 👉 @sWebDev","articleBody":"Greensock SVG Search Animation\n\nЗабавная анимация загрузки, выполненная на GSAP.js.\n\n👉 @sWebDev","datePublished":"2023-03-11T14:00:33Z","dateModified":"2023-03-11T14:00:33Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/uz/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/uz/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1390},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/2001","url":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/2001","mainEntityOfPage":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/2001","headline":"Графики и чарты на React c использованием Recharts Год назад мы рассказывали о библиотеке Recharts. В данной…","articleBody":"Графики и чарты на React c использованием Recharts\n\nГод назад мы рассказывали о библиотеке Recharts. В данной статье пошагово рассмотрим её использование в паре с React.\n\n👉 @sWebDev","datePublished":"2023-03-11T13:23:00Z","dateModified":"2023-03-11T13:23:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/uz/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/uz/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1363},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/2000","url":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/2000","mainEntityOfPage":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/2000","headline":"🏆Снова в топе! Крупнейшая сетка IT-каналов в СНГ запустила свой новый проект, который поставил рекорд прирост…","articleBody":"🏆Снова в топе! Крупнейшая сетка IT-каналов в СНГ запустила свой новый проект, который поставил рекорд прироста за сутки. \n\n📱Вспоминаем их самые популярные проекты:\n\nSecret IT Jobs | ИТ вакансии для своих — проект, после появления которого закрылось несколько HR-агентств. Вакансии на удалённую работу с высокими зарплатами.\n\nPython | Программирование на питоне — канал, на котором выросло больше 10 тысяч айтишников. Объясняют сложные задачи простым языком.\n\nEnglish for IT — первый конкурент всех школ по английскому. Помогают быстро и бесплатно выучить язык с уклоном на работу в айти.\n\nBUBBLE — подборка бесплатных сервисов для облегчения рутины. Придумал стартап и хочешь реализовать? Скорее всего про него давно есть пост в баббле.","datePublished":"2023-03-11T11:23:00Z","dateModified":"2023-03-13T13:43:24Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/uz/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/uz/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":966},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/1999","url":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/1999","mainEntityOfPage":"https://telemetr.io/uz/channels/1215276433-swebdev/posts/1999","headline":"Float-menu Библиотека для Vue.js, которая предоставляет возможность добавления плавающего меню. Имеет гибкую…","articleBody":"Float-menu\n\nБиблиотека для Vue.js, которая предоставляет возможность добавления плавающего меню. Имеет гибкую настройку: перетаскивание, размещение, определение края экрана и вращение. Узнать все возможности библиотеки можно по ссылке.\n\n👉 @sWebDev","datePublished":"2023-03-10T18:00:33Z","dateModified":"2023-03-10T18:00:33Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/uz/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/uz/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1381},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}}]}
Anonymous voting
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>
</>
);
}
👉 @sWebDevFRONT-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?
У вас есть функционал, который работает после прокрутки элемента. Как узнать совершена прокрутка или нет? Напоминаем, что у 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.
👉 @sWebDevTone.js
Tone.js представляет собой инструмент для создания и управления звуковыми эффектами и аудиофайлами в веб-приложениях. Предоставляет мощный набор инструментов и функций для создания музыкальных произведений и звуковых эффектов в реальном времени. Tone.js имеет легкую структуру и открытый исходный код, что делает ее доступной для разработчиков всех уровней.
👉 @sWebDev
Создание компонентов Vue 3 с помощью Tailwind CSS
Рассмотрим руководство по использованию Tailwind CSS для создания компонентов Vue 3.
👉 @sWebDev
Controlled Clock
Управляемые часы, выполненные с применением библиотеки Anime.js.
👉 @sWebDev
Рендерим элементы Vue на основе булевого значения
Vue директива
v-if позволяет условно рендерить элементы на основе значения булевой переменной. Пример кода:
<template>
<div>
<p v-if="showText">This text will only show if showText is true.</p>
</div>
</template>
<script>
export default {
data() {
return {
showText: true
};
}
}
</script>
👉 @sWebDevGreensock SVG Search Animation
Забавная анимация загрузки, выполненная на GSAP.js.
👉 @sWebDev
🏆Снова в топе! Крупнейшая сетка IT-каналов в СНГ запустила свой новый проект, который поставил рекорд прироста за сутки.
📱Вспоминаем их самые популярные проекты:
Secret IT Jobs | ИТ вакансии для своих — проект, после появления которого закрылось несколько HR-агентств. Вакансии на удалённую работу с высокими зарплатами.
Python | Программирование на питоне — канал, на котором выросло больше 10 тысяч айтишников. Объясняют сложные задачи простым языком.
English for IT — первый конкурент всех школ по английскому. Помогают быстро и бесплатно выучить язык с уклоном на работу в айти.
BUBBLE — подборка бесплатных сервисов для облегчения рутины. Придумал стартап и хочешь реализовать? Скорее всего про него давно есть пост в баббле.
Float-menu
Библиотека для Vue.js, которая предоставляет возможность добавления плавающего меню. Имеет гибкую настройку: перетаскивание, размещение, определение края экрана и вращение. Узнать все возможности библиотеки можно по ссылке.
👉 @sWebDev
