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

Бесплатные информационные панели Vue - рекомендуемый список Обзор шаблонов для мониторинга с открытым исходным кодом. Шаблоны созданы на основе Vue2, Vue3, активно поддерживаются и регулярно обновляются. 👉 @sWebDev

Можно ли использовать композицию вместо наследования в React? Представьте, что у вас в приложении есть компоненты, которые не знают своих потомков, например, sidebar. Можно ли для таких компонентов применять композицию вместо наследования? Если сомневаетесь, то вернитесь к посту за 26.12. 👉 @sWebDev

Работа с классами и стилями Vue.js Часто возникает необходимость динамически изменять CSS-классы и inline-стили элементов в зависимости от состояния приложения. Поскольку и то и другое атрибуты, мы можем использовать v-bind: необходимо лишь вычислить итоговую строку при помощи выражения. Впрочем, заниматься конкатенацией строк неудобно, это может привести к ошибкам. К счастью, Vue предоставляет дополнительные возможности директивы v-bind для работы с class и style. Эти атрибуты кроме строковых значений могут принимать массивы или объекты. Используя объекты, мы можем передавать объект в директиву v-bind:class : <div v-bind:class="{ active: isActive }"></div> Запись выше означает, что наличие класса active будет определяться истинностью параметра isActive. 👉 @sWebDev

Основы Angular. Как лучше всего использовать шрифты в Angular? Веб-разработчику не всегда легко использовать собственный шрифт при создании приложения Angular. Случается, что для добавления шрифта нужно импортировать его в код. Данный процесс часто может быть утомительным и запутанным. В статье рассмотрим, как легко встраивать шрифты в Angular и не бояться этого процесса. 👉 @sWebDev

Personal Space — Generative Design/Animation! Анимированная сцена, выполненная на SVG, CSS, GSAP.js. 👉 @sWebDev

Vue Box Shadows В современном дизайне, почти на каждом сайте и в приложениях можно увидеть тени, которые дизайнеры и разработчики применяют для создания эффекта глубины и объема. Если вы хотите добавить больше теней в ваше веб-приложение, то ознакомьтесь с библиотекой Vue Box Shadows. 👉 @sWebDev

Лучшие практики безопасности Node.js Данный материал - это простой и сжатый способ ознакомиться с лучшими практиками обеспечения безопасности Node.js. 👉 @sWebDev

Мобильное меню на GSAP.js Анимированное мобильное меню, выполненное на GSAP.js. 👉 @sWebDev

Redux в Angular. Туда и обратно Пару лет назад из каждого утюга можно было услышать про Redux. Сейчас redux является чем-то обыденным в фронтенд разработке. Рассмотрим опыт автора, который делится опытом использования redux в Angular. 👉 @sWebDev

3D Maze / Three JS version 3D пазл, созданный на Three.js. 👉 @sWebDev

Композиция против наследования React React имеет мощную модель композиции, поэтому для повторного использования кода между компонентами рекомендуется использовать композицию вместо наследования. Например, некоторые компоненты не знают своих потомков заранее. Это особенно характерно для таких компонентов, как Sidebar или Dialog, которые представляют из себя как бы «коробку», в которую можно что-то положить. Для таких компонентов рекомендуется использовать специальный пропс children, который передаст дочерние элементы сразу на вывод:

        function FancyBorder(props) {
            return (
                <div className={'FancyBorder FancyBorder-' + props.color}>
                {props.children}
                </div>
            );
            }

👉 @sWebDev

📌 Бесплатное обучение по дизайну с нуля. Вместе сделаем тебе портфолио из 3+ новых работ Что ты получишь? - Фидбэк (разбор всех ДЗ от куратора) - Тусовка (личный кабинет с уроками + живой чат) - Портфолио (упакуем по урокам и проверим) - Экзамен (аттестация и балл) Будем делать: веб-дизайн, графический дизайн, анимация интерфейсов - https://t.me/YudaevSchoolmkbot?start=ZGw6MTIyOTc5 Программа обучения: - Как работать в Figma с нуля - Изучение основ дизайна (сетки, композиция т.д.) - Способы поиска контента и правильной работы с ним - Создание анимации интерфейса - 4 домашних задания - Личные разборы от наставника (дизайнер с опытом и доходом от 100к) - Эфир - "Как найти себе первого клиента" 👉 Переходи в чат, там тебя уже ждут кураторы, уроки, домашки и живое общение! - https://t.me/YudaevSchoolmkbot?start=ZGw6MTIyOTc5

💪Must have для программиста! Тебе нужна дополнительная информация для работы или ты готовишься к собеседованию? ❗️Предлагаю твоему вниманию популярный Мега Архив для программистов BZD • Книги для программистов 👉Больше 6700 книг; 👉Хорошая категоризация книг на английские и русские; 👉Литература по программированию Python, Java, C, C++, JavaScript, C#, R, Go, информационной безопасности и других IT направлений. 👉Только актуальная и полезная информация, тщательно подобранная профессионалами, знающими своё дело. Вступай в сообщество быстро развивающихся программистов!

Как найти несколько дочерних HTML-элементов в анимации Angular? Представим, что у вас в проекте есть сложная Angular анимация, в которой вам необходимо найти несколько дочерних HTML-элементов. Какой встроенной функцией вы воспользуетесь? Если забыли, то вернитесь к посту за 19.12. 👉 @sWebDev

Как я создал магазин на Vue.js с серверной частью на Node.js По ссылке руководство по созданию коммерческого проекта с фронтендом на Vue.js и бэкендом на Node.js. В материале раскрыты все тонкости данного процесса. 👉 @sWebDev

Nest.js Nest.js — популярный фреймворк для создания серверных веб-приложений Node.js. Nest.js работает с основой express.js и значительно расширяет его функциональность, добавляя декларативности, а также помогая разработчику строить приложения в соответствии с лучшими архитектурными практиками. 👉 @sWebDev

Flickity + GSAP carousel Карусель товаров, выполненная на GSAP.js. 👉 @sWebDev

Лучшие практики React В статье собраны лучшие практики по использованию React в 2022 году. 👉 @sWebDev