Magic Dust - GSAP

Анимированный эффект движения мышкой, выполненный с помощью библиотеки GSAP.js.

👉 @sWebDev

Двустороннее связывание в полях формы Angular

Механизм двустороннего связывания (angular two way binding) используется, когда необходимо отобразить свойство в шаблоне (одностороннее связывание) и обновить его при изменении значения (возникновение события) без перезагрузки страницы.

Для двустороннего связывания в полях формы используется встроенная в Angular директива NgModel.

<input type="text" [(ngModel)]="contactPerson" />. При изменении поля его значение помещается в свойство contactPerson. Важно помнить, что данная директива может использоваться только с полями формы.

👉 @sWebDev

Next.js VS Nuxt.js: полное руководство

В статье представлен аналитический обзор фреймворков. Рассматриваем плюсы, минусы и ситуации, в которых рационально использовать каждый из них.

👉 @sWebDev

Feed the World!

Новогодние праздники прошли, но мы хотим поделиться новогодней мини-игрой, в которой нужно накормить планету. Игра выполнена на GSAP.js.

👉 @sWebDev

Scroll Reval

Библиотека разработана специально для создания впечатляющих эффектов при скролле. Из плюсов можно отметить простоту и гибкость.

👉 @sWebDev

Изучаем новые API React Router

Обзор новых API React Router. Рассмотрим: данные роута, навигацию и обработку ошибок.

👉 @sWebDev

Пончик-тогл

Пончик-переключатель, выполненный с применением библиотеки Greensock.

👉 @sWebDev

Сколько нужно времени, чтобы освоить востребованную профессию фронтенд-разработчика? 

Всего 10 месяцев! Вы можете совмещать обучение с любым своим занятием. Главное условие - желание. В Xeкслете вы можете пройти онлайн-курс по профессии «‎Фронтенд-разработчик». 

Во время программы вы:
✔️ Изучите JavaScript в связке с HTML и CSS.
✔️ Освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.
✔️ Решите более 310 задач в браузере.
✔️ Создадите 4 проекта для портфолио на GitHubВыполните 150 тестовых заданий от наших партнёров.
✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Source проектах.

Обучение построено так, что его невозможно «отсидеть» или «прослушать». Мы не сторонники подхода «повтори за учителем»: вы будете не просто писать код, а научитесь самостоятельно находить лучшие решения.

📌 Пройдите первые 10 бесплатных уроков из профессии и получите дополнительно скидку 10% !

5 продвинутых шаблонов React на пальцах

Как и любой React-разработчик, вы наверняка задавались одним из следующих вопросов:
Как создать переиспользуемый компонент, подходящий для разных случаев?
Как создать компонент с простым API, упрощающим его использование?
Как создать расширяемый компонент в плане UI и функциональности?
Популярность этих вопросов привела к разработке сообществом React продвинутых шаблонов. В статье мы рассмотрим пять таких шаблонов.

👉 @sWebDev

React Query

React Query — это библиотека для управления асинхронными данными в приложениях React. Это помогает с такими задачами, как выборка, кэширование и обновление данных. Узнать все подробности можно по ссылке.

👉 @sWebDev

Дополни таблицу умножения

Необычная игра, выполненная на React. Смысл заключается в заполнении пустых клеток таблицы умножения. Мы можем настроить размер таблицы и сложность игры.

👉 @sWebDev

Route Guard для доступа к дочернему маршруту Angular

Вам необходим Route Guard, который будет разрешать или запрещать доступ к дочернему маршруту. Какой это guard?

👉 @sWebDev

Как создать реф в React?

Какую функцию нужно использовать для создания рефа в React?

👉 @sWebDev

13.8 billion years ago

Проект анимированного земного шара, выполненный на Three.js.

👉 @sWebDev

Strapi

Strapi - фреймворк, позиционирующийся для работы с Node.js. Однако, его можно использовать практически с любой библиотекой. Его можно использовать, как для работы с фронтенд составляющей, так и для взаимодействия с GraphQL и REST.

👉 @sWebDev

Контекст React

Обычно в React-приложении данные передаются от родителя к дочернему компоненту при помощи пропсов. Подобный способ может быть громоздким для некоторых типов пропсов (например, выбранный язык, UI-тема). Поэтому, рассмотрим Контекст. Он предоставляет возможность делиться большими данными между компонентами без необходимости передавать пропсы через каждый уровень дерева.

const MyContext = React.createContext(defaultValue);
Создаёт объект Context. При рендере компонента, который подписан на этот объект, React получит текущее значение контекста из ближайшего подходящего Provider в дереве компонентов.

Аргумент defaultValue используется, если для компонента нет подходящего Provider выше в дереве. Если передать undefined в значении Provider, то компоненты, использующие этот контекст, не будут использовать defaultValue.

👉 @sWebDev

The Impossible Lightbulb w/ GSAP

Забавная анимация, выполненная при помощи GSAP.js.

👉 @sWebDev

Fastify

Фреймворк для работы с Node.js. Основной задачей является производительность. Разработчики утверждают, что он способен обрабатывать до 60 000 запросов в секунду. Основные преимущества: удобная обработка синхронных и асинхронных ошибок, валидация входных параметров, расширяемость. Подробный обзор по ссылке.

👉 @sWebDev