Elastic Accordion GSAP

Аккордеон для изображений с эластичным эффектом на GSAP.js.

👉 @sWebDev

Лучшие практики React

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

👉 @sWebDev

Flickity + GSAP carousel

Карусель товаров, выполненная на GSAP.js.

👉 @sWebDev

Nest.js

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

👉 @sWebDev

Как я создал магазин на Vue.js с серверной частью на Node.js

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

👉 @sWebDev

Как найти несколько дочерних HTML-элементов в анимации Angular?

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

👉 @sWebDev

Композиция против наследования React

React имеет мощную модель композиции, поэтому для повторного использования кода между компонентами рекомендуется использовать композицию вместо наследования.

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

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

👉 @sWebDev

3D Maze / Three JS version

3D пазл, созданный на Three.js.

👉 @sWebDev

Redux в Angular. Туда и обратно

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

👉 @sWebDev

Мобильное меню на GSAP.js

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

👉 @sWebDev

Лучшие практики безопасности Node.js

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

👉 @sWebDev

Vue Box Shadows

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

👉 @sWebDev

Personal Space — Generative Design/Animation!

Анимированная сцена, выполненная на SVG, CSS, GSAP.js.

👉 @sWebDev

Основы Angular. Как лучше всего использовать шрифты в Angular?

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

👉 @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

Можно ли использовать композицию вместо наследования в React?

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

👉 @sWebDev

Какая разница между state и props в React?

props (намеренно сокращённо от англ. «properties» — свойства) и state — это обычные JavaScript-объекты. Несмотря на то, что оба содержат информацию, которая влияет на то, что увидим после рендера, есть существенное различие: props передаётся в компонент (служат как параметры функции), в то время как state находится внутри компонента (по аналогии с переменными, которые объявлены внутри функции).

👉 @sWebDev

Watching-you

Watching-you — JS-библиотека для создания анимаций, отслеживающих движения курсора или вводимые значения. Библиотека доступна для использования с другими фреймворками.

👉 @sWebDev