Frontender Libs - обзор библиотек JS / CSS
Открыть в Telegram
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
Больше
7 361
Подписчики
-224 часа
-217 дней
-9230 дней
Архив постов
\n\n👉 @sWebDev","datePublished":"2023-04-24T07:45:02Z","dateModified":"2023-04-24T07:45:02Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ru/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/ru/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":5}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2085","url":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2085","mainEntityOfPage":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2085","headline":"Airport Distance Map Веб-приложение, показывающее расстояние от одного аэропорта до другого. Выполнено на GSA…","articleBody":"Airport Distance Map\n\nВеб-приложение, показывающее расстояние от одного аэропорта до другого. Выполнено на GSAP.js.\n\n👉 @sWebDev","datePublished":"2023-04-23T09:17:00Z","dateModified":"2023-04-23T09:17:00Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ru/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/ru/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1353},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2084","url":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2084","mainEntityOfPage":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2084","headline":"Frontender Libs - обзор библиотек JS / CSS","datePublished":"2023-04-22T14:15:05Z","dateModified":"2023-04-22T14:15:05Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ru/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/ru/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1461},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2083","url":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2083","mainEntityOfPage":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2083","headline":"Как передавать функции из компонента родителя в React? В React есть хук, который позволяет передавать определ…","articleBody":"Как передавать функции из компонента родителя в React?\n\nВ React есть хук, который позволяет передавать определенные функции из компонента родителя и дает возможность родительскому компоненту вызывать методы дочернего компонента. Что это за хук?\n\n👉 @sWebDev","datePublished":"2023-04-22T14:15:04Z","dateModified":"2023-04-22T14:15:04Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ru/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/ru/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1379},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2082","url":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2082","mainEntityOfPage":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2082","headline":"js2flowchart Библиотека визуализации для преобразования JavaScript кода в наглядную SVG-схему. Изучайте чужой…","articleBody":"js2flowchart\n\nБиблиотека визуализации для преобразования JavaScript кода в наглядную SVG-схему. Изучайте чужой код, делайте рефакторинг, не путаясь в функциональности.\n\n👉 @sWebDev","datePublished":"2023-04-22T08:06:02Z","dateModified":"2023-04-22T08:06:02Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ru/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/ru/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1413},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":25}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2081","url":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2081","mainEntityOfPage":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2081","headline":"Как разделить приложение Angular на приложения с микроинтерфейсом В материале рассматривается, как разбить An…","articleBody":"Как разделить приложение Angular на приложения с микроинтерфейсом\n\nВ материале рассматривается, как разбить Angular-приложение на микро-фронтенды. Автор объясняет, что такое микро-фронтенды и почему они могут быть полезны в разработке больших приложений. Автор предлагает примеры кода для демонстрации микро-фронтендов в Angular.\n\n👉 @sWebDev","datePublished":"2023-04-21T08:50:04Z","dateModified":"2023-04-21T08:50:04Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ru/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/ru/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1499},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2080","url":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2080","mainEntityOfPage":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2080","headline":"Generative UI - Orb Animation [pixi.js] + Frosty Elements Анимированный фон, реализованный на Pixi.js. 👉 @sWe…","articleBody":"Generative UI - Orb Animation [pixi.js] + Frosty Elements\n\nАнимированный фон, реализованный на Pixi.js.\n\n👉 @sWebDev","datePublished":"2023-04-20T17:12:02Z","dateModified":"2023-04-20T17:12:02Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ru/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/ru/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1678},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2079","url":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2079","mainEntityOfPage":"https://telemetr.io/ru/channels/1215276433-swebdev/posts/2079","headline":"Совет фронтендерам: уважайте свое время Первый шаг — не изобретать велосипед. В Html Gram собраны готовые cod…","articleBody":"Совет фронтендерам: уважайте свое время\n\nПервый шаг — не изобретать велосипед. В Html Gram собраны готовые codepen решения на каждый день. От эффектов при наведении до 3D анимации.\n\nБыстрее пишешь код — больше отдыхаешь. Подписывайся: @HtmlGram","datePublished":"2023-04-20T15:12:01Z","dateModified":"2023-04-22T15:13:52Z","author":{"@type":"Organization","name":"Frontender Libs - обзор библиотек JS / CSS","url":"https://telemetr.io/ru/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/ru/channels/1215276433-swebdev","image":"https://img.telemetr.io/c/1kfaUN/5240031659749914258?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1260},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}}]}Anonymous voting
Anonymous voting
Vue-controlled Wall-E
Проект с героем мультфильма WALL-E, следящим за движением курсора. Выполнено на Vue.js.
👉 @sWebDev
Функционал автоматической группировки нескольких вызовов обновления в один этап рендера из React 18?
Новый функционал React для оптимизации производительности?
В React 18 появился функционал автоматической группировки нескольких вызовов обновления в один этап рендера. Что это за функционал?
👉 @sWebDev
The Movie Database
База данных с кино, реализованная на React.
👉 @sWebDev
Использование React в приложениях Angular
Рассмотрим интеграцию React в приложение Angular. Такой подход может быть полезным, например, при разработке сложных компонентов или при работе с приложением, которое уже использует React.
👉 @sWebDev
PrimeNG
Angular библиотека, которая предоставляет более 100 готовых компонентов для создания веб-приложений: таблицы, формы, кнопки, графики. У PrimeNG хорошая документация, наглядные примеры и развитое сообщество. Библиотека является кроссбраузерной и адаптивной.
👉 @sWebDev
27–28 мая Яндекс проводит Weekend Offer Frontend
За два дня вы сможете пройти все технические собеседования, выбрать команду по душе и получить офер. Ищем фронтендеров на JavaScript и TypeScript с опытом работы от 4 лет.
Предлагаем работу в офисах России и Беларуси. Некоторые команды приглашают разработчиков в международные хабы в Армении, Казахстане и Сербии.
Подробнее здесь
Используем pre-render в React приложении с react-snap
Практическое руководство по использованию инструмента React Snap для предварительной отрисовки (pre-rendering) приложения на React. Автор описывает, как использовать React Snap для создания статических HTML-файлов, которые можно использовать для улучшения производительности и оптимизации поисковой оптимизации (SEO) приложения.
👉 @sWebDev
Anime.js clock
Часы, выполненные с использованием библиотеки Anime.js.
👉 @sWebDev
🟡Тест по React JS от OTUS
— Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой!
👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS
Курс доступен в рассрочку.
🎁 Пройдете успешно тест, получите доступ к открытым урокам курса.
Если вы планируете пополнить свой стек самым популярным JS-фреймворком — React, приходите на открытый урок “TDD + React”. Урок пройдет 27 апреля в 20:00 в рамках онлайн-курса “React.js Developer” https://otus.pw/shHO/
Нативная интеграция. Информация о продукте www.otus.ru
Хорошие способы организации большого проекта Vue.js
Рассмотрим руководство по организации крупных проектов на Vue.js. В статье несколько методов для организации проекта, включая использование архитектурных шаблонов, настройку сборки и общие советы по организации файлов и структуре проекта.
👉 @sWebDev
Onsen UI for Angular
Библиотека пользовательского интерфейса (UI), которая предоставляет набор готовых компонентов для создания мобильных приложений. Она включает в себя такие элементы, как кнопки, формы, навигационные панели, модальные окна, списки и другие. Библиотека является кроссбраузерной, адаптивной и простой в использовании.
👉 @sWebDev
Получаем доступ к реактивным данным и активным событиям Vue.js
В хуке
created можно получить доступ к реактивным данным и активным событиям. Шаблоны и виртуальный DOM ещё не встроены (mounted) и не отрисованы.
Например:
ExampleComponent.vue
<script>
export default {
data() {
return {
property: 'Blank'
}
},
computed: {
propertyComputed() {
console.log('I change when this.property changes.')
return this.property
}
},
created() {
this.property = 'Example property update.'
console.log('propertyComputed will update, as this.property is now reactive.')
}
}
</script>
👉 @sWebDevAirport Distance Map
Веб-приложение, показывающее расстояние от одного аэропорта до другого. Выполнено на GSAP.js.
👉 @sWebDev
Хук React для передачи функций из компонента родителя и возможностью вызывать методы дочернего компонента?
Как передавать функции из компонента родителя в React?
В React есть хук, который позволяет передавать определенные функции из компонента родителя и дает возможность родительскому компоненту вызывать методы дочернего компонента. Что это за хук?
👉 @sWebDev
js2flowchart
Библиотека визуализации для преобразования JavaScript кода в наглядную SVG-схему. Изучайте чужой код, делайте рефакторинг, не путаясь в функциональности.
👉 @sWebDev
Как разделить приложение Angular на приложения с микроинтерфейсом
В материале рассматривается, как разбить Angular-приложение на микро-фронтенды. Автор объясняет, что такое микро-фронтенды и почему они могут быть полезны в разработке больших приложений. Автор предлагает примеры кода для демонстрации микро-фронтендов в Angular.
👉 @sWebDev
Generative UI - Orb Animation [pixi.js] + Frosty Elements
Анимированный фон, реализованный на Pixi.js.
👉 @sWebDev
