Тег: js

Как начать изучать React

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

Как начать изучать React

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

CSS Custom Properties. CSS-переменные vs Sass-переменные

CSS Custom Properties. CSS-переменные vs Sass-переменные

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

Валидация полей: pattern, accept, ValidityState и другие

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

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

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

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

Как настраивать сборку проекта. Часть 2: простая сборка Gulp

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

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

Простая сборка Gulp

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

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

Как настраивать сборку проекта. Часть 1: простая сборка CLI

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

Простая сборка CLI

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

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