IRINELY.ART

Простой пример кастомных кнопок «Поделиться» для социальных сетей с помощью JavaScript.

React — это библиотека, предназначенная для разработки пользовательских интерфейсов. React на самом деле не является полноценным фреймворком, как его часто называют. Он решает задачи оптимизации взаимодействия с DOM при связывании данных между представлением и моделью данных. То есть, если брать в пример архитектуру MVC (Modal-View-Controller), то React осуществляет лишь «V». Но тем не менее в настоящее время он очень популярен и востребован наряду с Angular и Vue. Вместе с React также часто используют Redux для управления состоянием приложений.

Почти всё в React — это обычный JavaScript. Из-за этого он достаточно прост в изучении (по сравнению с Angular), ведь если вы хорошо знаете JS, то автоматически знаете большую часть React 🙂 Он подразумевает декларативный подход программирования, что значительно упрощает разработку. Чаще всего используется преимущественно для одностраничных сайтов (SPA).

CSS-переменные — это пользовательские CSS-свойства (Custom Properties), экспериментальная технология, находящаяся на третей стадии редакторского черновика (Editor’s Draft, о котором уже упоминалось в статье про CSS вложенности. Но не смотря на это, пользовательские CSS-свойства поддерживаются в большинстве современных и популярных браузерах. Поэтому данный синтаксис вполне можно применять как есть, но если вам все-таки нужно осуществить поддержку и в более старых браузерах, то необходимо использовать плагин postcss-custom-properties.

Существуют различные сторонние библиотеки, которые помогают настраивать валидацию форм на сайте, но есть и простые способы сделать это самостоятельно, например, используя встроенные атрибуты для полей ввода. Они позволяют нативно совершать несложную проверку вводимых пользователем данных в браузере перед тем, как отправить их на сервер.

На стороне клиента применяется в основном два вида валидации:

• При отправке формы. Это происходит путем нажатия на соответствующую кнопку на сайте или клавишу Enter. Настройку можно осуществить, используя встроенные атрибуты без скриптов.

• При потере фокуса. Такая валидация полностью настраивается JavaScript’ом.

Поговорим о шаблонизаторе Nunjucks от Mozilla, который вдохновлен jinja2. Он достаточно мощный, поддерживает наследование шаблонов, асинхронное управление кодом, макросы, пользовательские теги и много другое. В нем есть все, что необходимо для комфортной фронтэнд разработки. В этой статье мы вкратце разберем основные возможности данного шаблонизатора.

В первой части мы разбирали, как настраивать сборку проекта с помощью CLI.

Во второй части давайте рассмотрим пример простой сборки с помощью известного таск-менеджера Gulp.

Структура проекта будет такая же:

your-project
├── build
│   ├── css
│   ├── images
│   └── js
└── src
    ├── images
    ├── js
    ├── pug
    ├── resources
    └── scss

В первой части мы разберем, как настроить простую сборку проекта с помощью CLI (Command Line Interface), то есть командной строки.

Для того, чтобы понять, как настраивать сборку, нужно сначала определиться, какие файлы у нас должны получиться на выходе. Чаще всего, это:

• HTML
• CSS
• JS
• Изображения
• Прочие ресурсы (шрифты, аудиофайлы и т.д.)