Все веб-разработчики широко используют HTML, независимо от того, какой фреймворк или серверный язык используется. Фреймворки и языки программирования могут приходить и уходить, но HTML никуда не денется. Но, несмотря на такое широкое использование, всё ещё есть теги и свойства, о которых большинство разработчиков не знают.

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

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

1. Ленивая загрузка изображения

Ленивая загрузка изображений может повысить производительность и скорость отклика вашего сайта.

Ленивая загрузка предотвращает немедленную загрузку изображений, которые на самом деле и не нужны. Как правило, изображение начинает загружаться, когда вы скроллите страницу и приближаетесь к нему.

Другими словами, изображение загружается, когда пользователь скроллит страницу и изображение становится видимым, в противном случае оно не загружается.

Этого легко добиться с помощью обычного HTML.

Всё, что вам нужно сделать, это добавить свойство loading=lazy у тега img.

После добавления свойства ваш элемент должен выглядеть примерно так:

<img src="image.png" loading="lazy" alt="" width="200" height="200">

Вы можете получить некоторое представление о байтах, которые вы сэкономите с помощью этого трюка, используя инструмент Google Lighthouse.

2. Автокомплит

Получение подсказок прямо в строке, когда вы пытаетесь что-то найти, действительно крутая фишка.

В наши дни автокомплит довольно распространен, и вы, должно быть, замечали его на таких сайтах, как Google и Facebook.

Вы можете использовать JavaScript для реализации автокомплита, установив прослушиватель событий поля ввода и затем сопоставлять искомые слова с предопределёнными вариантами.

Однако HTML также позволяет отображать набор предопределённых вариантов, используя тег <datalist>.

Помните, что атрибут ID этого тега должен совпадать с атрибутом list тега input.

<label for="country">Choose your country from the list:</label><input list="countries" name="country" id="country"><datalist id="countries">  <option value="UK">  <option value="Germany">  <option value="USA">  <option value="Japan">  <option value="India"></datalist>

3. Picture

Вы когда-нибудь сталкивались с проблемой, когда изображения увеличивались не так, как вы ожидали? Я много раз.

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

При изменении ширины viewporta вы можете заметить, что некоторые изображения не масштабируются вверх и вниз, как ожидалось.

К счастью, HTML даёт разработчикам возможность довольно легко исправить это, используя тег <picture>, позволяющий добавлять несколько изображений, соответствующих разной ширине.

Ваш код будет выглядеть примерно так:

<picture>  <source media="(min-width:768px)" srcset="med_flag.jpg">  <source media="(min-width:495px)" srcset="small_flower.jpg">  <img src="high_flag.jpg" alt="Flags" style="width:auto;"></picture>

Как видите, мы указали минимальную ширину, при которой должно отображаться определённое изображение.

Этот тег очень похож на теги <audio> и <video>.

4. Базовый URL

Это один из моих любимых тегов при создании карты сайта.

Этот тег пригодится, когда у вас есть много ссылочных тегов, перенаправляющих на определённый URL-адрес, и все URL-адреса начинаются с одного и того же базового адреса.

Например, если я хочу указать URL-адрес на Twitter Илона Маска и Билла Гейтса, начало URL-адреса (домена) будет таким же, а то, что следует за ним, будет их соответствующими идентификаторами.

Обычно мне приходится дважды вставлять ссылку с одним и тем же доменным именем.

Однако в HTML есть тег <base>, который позволяет вам установить базовый URL-адрес, как показано ниже:

<head><base href="http://personeltest.ru/aways/www.twitter.com/" target="_blank"></head><body><img src="elonmusk" alt="Elon Musk"><a href="BillGates">Bill Gate</a></body>

Приведённый выше код сгенерирует изображение с ссылкой на https://www.twitter.com/elonmusk и ссылочный тег, перенаправляющий на https://www.twitter.com/billgates".

Тег <base> должен иметь либо href, либо target-атрибуты.

5. Обновление документа

Если вы хотите перенаправить пользователя на другую страницу после периода бездействия или даже сразу, вы можете легко это сделать, используя простой HTML.

Вы могли заметить эту фичу, когда открывали определённые сайты и видели что-то вроде Вы будете перенаправлены через 5 секунд.

Это поведение встроено в HTML, и вы можете использовать его с помощью тега <meta> и установки http-Equiv=refresh в него:

<meta http-Equiv="refresh" content="4; URL='https://google.com'/>

Здесь свойство content указывает время в секундах, после которого должно произойти перенаправление.

Стоит отметить, что, хотя Google утверждает, что относится к этой форме редиректа так же, как и к другим редиректам, использовать этот тип редиректов неразумно, если только это действительно не нужно.

Поэтому используйте его только в определённых случаях, например для редиректа после значительного бездействия.

Заключение

HTML и CSS довольно мощные инструменты, и вы можете создавать фантастические веб-сайты, используя их.

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

Таких советов и приёмов много, помимо тех, которыми я поделился с вами, и, безусловно, их стоит попробовать в своём проекте.

Если вы планируете использовать JavaScript, обязательно ознакомьтесь с моим недавним постом, где обсуждаются некоторые советы, которые могут сэкономить ваше время.

5 современных советов и приёмов JavaScript для экономии времени. Снизьте рабочую нагрузку и напишите чистый код с помощью этих советов по JavaScript.

Чтобы научиться чему-либо и овладеть этим навыком, нужны время, преданность делу и практика, и HTML не исключение. А если хотите больше уделить время веб-разработке под руководством опытных менторов, то у нас как раз скоро стартует новый потоксоответствующего курса.

Узнайте, как прокачаться в других специальностях или освоить их с нуля:

• Профессия Data Scientist

• Профессия Data Analyst

• Курс по Data Engineering

Недавно Cбер запустил Салют семейство виртуальных ассистентов, которые работают на разных платформах. Мы в SberDevices, кроме самого ассистента, занимаемся разработкой инструментов, позволяющих любому разработчику удобно создавать навыки, которые называются смартапы. Кроме общеизвестных диалоговых сценариев в формате чата ChatApp, можно создавать смартапы в формате веб-приложения на любых известных веб-технологиях Canvas App. О том, как создать простейший смартап такого типа, и пойдет сегодня речь.

Canvas App стандартное веб-приложение в привычном понимании, которое запускается и работает внутри WebView, но есть свои особенности.

Как это работает по шагам:

1. Пользователь произносит ключевую фразу, например Салют, какие у меня задачи на сегодня.

2. Голосовой запрос приходит в NLP-платформу, где разбирается на фонемы, там же определяется его эмоциональный окрас и т.д..

3. В БД зарегистрированных смартапов находится тот, которому соответствует активационная фраза. Регистрация происходит через SmartApp Studio и доступна всем разработчикам без исключения.

4. Во время регистрации смартапа в SmartApp Studio разработчик указывает два эндпоинта: один для веб-приложения, второй для сценарного бэкенда. Именно их достанет из БД NLP-платформа, когда найдет соответствующий смартап.

5. В эндпоинт сценарного бэкенда будет отправлено сообщение с распознанной активационной фразой. Формат сообщений подробно описан в документации SmartApp API.

6. Эндпоинт веб-приложения будет указан для загрузки в WebView.

7. Ответ от сценарного бэкенда придёт в веб-приложение в качестве JS-события, подписавшись на которое, можно управлять веб-приложением.

Предмет нашего разговора веб-приложение. Делать будем смартап для ведения тудушек. Поскольку SmartApp Studio предоставляет онлайн-среду разработки сценариев, не будем подробно на этом останавливаться, а воспользуемся форком готового сценария, который в качестве примера доступен на GitHub. В одной из следующих статей расскажем, как написать такой сценарий на NodeJS.

В SmartApp Graph/IDE, той самой онлайн-среде, в качестве источника можно указать git-репозиторий, чем мы и воспользуемся, чтобы получить эндпоинт до сценарного бэкенда. Далее его надо указать при регистрации нашего смартапа в SmartApp Studio. В качестве эндпоинта веб-приложения укажем любой известный веб-ресурс, например, sberdevices.ru. Позже поменяем на URL нашего веб-приложения.

Шаблон проекта

Для примера будем делать веб-приложение на React. К React нет никакой привязки и пример ниже может быть написан на чём угодно. Для нетерпеливых выложили конечный результат на GitHub.

Итак, что мы хотим от приложения:

• добавлять задачи;

• выполнять задачи;

• удалять задачи;

• и все это голосом, но не сразу.

Для создания базового проекта воспользуемся CRA.

> npx create-react-app todo-canvas-app

Для реализации UI нам понадобится как минимум пара компонентов и форма.

export const App: FC = memo(() => {  const [note, setNote] = useState("");  return (    <main className="container">      <form        onSubmit={(event) => {          event.preventDefault();          setNote("");        }}      >        <input          className="add-note"          type="text"          value={note}          onChange={({ target: { value } }) => setNote(value)}        />      </form>      <ul className="notes">        {appState.notes.map((note, index) => (          <li className="note" key={note.id}>            <span>              <span style={{ fontWeight: "bold" }}>{index + 1}. </span>              <span                style={{                  textDecorationLine: note.completed ? "line-through" : "none",                }}              >                {note.title}              </span>            </span>            <input              className="done-note"              type="checkbox"              checked={note.completed}            />          </li>        ))}      </ul>    </main>  );});

Дальше нам надо сделать базовую логику нашего приложения. Пользоваться будем стандартными средствами React, используя useReducer.

const reducer = (state, action) => {  switch (action.type) {    case "add_note":      return {        ...state,        notes: [          ...state.notes,          {            id: Math.random().toString(36).substring(7),            title: action.note,            completed: false,          },        ],      };    case "done_note":      return {        ...state,        notes: state.notes.map((note) =>          note.id === action.id ? { ...note, completed: !note.completed } : note        ),      };    case "delete_note":      return {        ...state,        notes: state.notes.filter(({ id }) => id !== action.id),      };    default:      throw new Error();  }};

Далее будем диспатчить экшены их обработчиков на форме.

export const App: FC = memo(() => {  const [appState, dispatch] = useReducer(reducer, { notes: [] });  //...  return (    <main className="container">      <form        onSubmit={(event) => {          event.preventDefault();          dispatch({ type: "add_note", note });          setNote("");        }}      >        <input          className="add-note"          type="text"          placeholder="Add Note"          value={note}          onChange={({ target: { value } }) => setNote(value)}          required          autoFocus        />      </form>      <ul className="notes">        {appState.notes.map((note, index) => (          <li className="note" key={note.id}>            <span>              <span style={{ fontWeight: "bold" }}>{index + 1}. </span>              <span                style={{                  textDecorationLine: note.completed ? "line-through" : "none",                }}              >                {note.title}              </span>            </span>            <input              className="done-note"              type="checkbox"              checked={note.completed}              onChange={() => dispatch({ type: "done_note", id: note.id })}            />          </li>        ))}      </ul>    </main>  );});

Запускаем и проверяем.

npm start

Работа с голосом

Когда наше приложение базово работает, можно добавить немного магии голосового управления. Для этого надо установить Assistant Client библиотеку для взаимодействия с виртуальным ассистентом.

npm i @sberdevices/assistant-client

В момент открытия WebView платформа инжектит JS API для взаимодействия с ассистентом. Это биндиги до нативных методов платформы. Assistant Client обёртка, которая в дев-режиме позволяет отлаживать взаимодействие с ассистентом в браузере, а в продакшене предоставляет удобный для веб-приложений API.

Идём в app.js и там же, где наш основной редюсер, создаем инстанс Assistant Client.

const initializeAssistant = () => {  if (process.env.NODE_ENV === "development") {    return createSmartappDebugger({      token: process.env.REACT_APP_TOKEN ?? "",      initPhrase: `Запусти ${process.env.REACT_APP_SMARTAPP}`,    });  }  return createAssistant();};

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

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

Ассистент присылает структурированные команды в формате JSON. Полное описание формата можно найти в документации Assistant Client на GitHub.

interface AssistantSmartAppCommand {  // Тип команды  type: "smart_app_data";  // Любые данные, которые нужны смартапу  smart_app_data: Record<string, any>;  sdkMeta: {    requestId: string;  };}

Теперь подпишем наши экшены на команды от ассистента. Для этого в коде нашего сценария определены специальные интенты ключевые слова в фразах, которые может говорить пользователь. Разные интенты генерируют разные команды веб-приложению.

export const App: FC = memo(() => {  const [appState, dispatch] = useReducer(reducer, { notes: [] });  const [note, setNote] = useState("");  const assistantRef = useRef();  useEffect(() => {    assistantRef.current = initializeAssistant();    assistantRef.current.on("data", ({ action }) => {      if (action) {        dispatch(action);      }    });  }, []);    // ...

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

Дело в том, что ваш сценарий сам по себе только лишь по фразе пользователя не может узнать то, что у вас сейчас на экране. Чтобы эта магия работала, к каждому голосовому запросу необходимо клеить стейт веб-приложения. Тут мы приходим к осознанию, что сценарный бэкенд получает на вход не только разобранную фразу, но и данные с экрана стейт. Задача сценария провести пользователя к следующему шагу по этим двум параметрам, отправив команду веб-приложению на изменение стейта. Можно мыслить себе это как голосовой аналог клика. Разница лишь в том, что элемент управления для такого клика в интерфейсе может и не существовать физически. Например, если бы мы делали интернет-магазин, то кнопку добавления в корзину можно было бы и опустить в пользу голосовой команды Афина, добавь в корзину красные туфли.

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

Дополним код инициализации Asisstant Client.

const initializeAssistant = (getState) => {  if (process.env.NODE_ENV === "development") {    return createSmartappDebugger({      token: process.env.REACT_APP_TOKEN ?? "",      initPhrase: `Запусти ${process.env.REACT_APP_SMARTAPP}`,      getState,    });  }  return createAssistant({ getState });};

И передадим стейт в обработку ассистенту. Формат стейта также описан в документации Asisstant Client.

export const App: FC = memo(() => {  // ...  const assistantStateRef = useRef<AssistantAppState>();// ...  useEffect(() => {    assistantRef.current = initializeAssistant(() => assistantStateRef.current);    // ...  }, []);  useEffect(() => {    assistantStateRef.current = {      item_selector: {        items: appState.notes.map(({ id, title }, index) => ({          number: index + 1,          id,          title,        })),      },    };  }, [appState]);  // ...

Из кода выше видим появление мета-информации в виде нумерации. Зачем? Согласитесь, тудухи могут быть довольными длинными и иногда удобнее было бы говорить Джой, я сделал первую задачу вместо полного заголовка. Но погодите, как это работает? Где единичка превращается в первую? Эту магию кастования натуральных фраз, которые мы привыкли использовать в повседневной речи, в машинный формат делает за нас NLP-платформа. То же самое происходит, например, с командами навигации.

Тудух может скопиться достаточное количество, чтобы они не влезли в экран. Само собой, мы хотим уметь скроллить экран, чтобы иметь возможность прочитать всё, что скопилось. На устройствах, где нет тач-интерфейса, например, на SberBox, мы можем скроллить пультом ДУ или голосом. Нажатия кнопок на пульте превращаются в события нажатий на стрелки клавиатуры на window, но что делать с голосом?

Голосовые паттерны навигации встроены в NLP-платформу, и разработчику сценария ничего не надо делать самому. А для разработчика веб-приложения достаточно подписаться на специальный тип команд, приходящих от ассистента через Assistant Client. Все вариации навигационных фраз будут кастится в конечное число навигационных команд. Их всего пять: UP, DOWN, LEFT, RIGHT, BACK.

assistant.on('data', (command) => {    if (command.navigation) {        switch(command.navigation.command) {            case 'UP':                window.scrollTo(0, 0);                break;            case 'DOWN':                window.scrollTo(0, 1000);                break;        }    }});

Перезапускаем наше приложение и пробуем после нажатия на лавашар сказать: Напомни купить коту корм. И вуаля!

Если у вас есть устройство под рукой, то можно проверить работу смартапа на нём. Для этого не обязательно его публиковать или деплоить куда-либо. Достаточно создать тоннель с локального хоста, например, с помощью ngrok.

ngrok http 3000

Полученный URL с https указываем в SmartApp Studio, сохраняем черновик и говорим ассистенту: Сбер, какие у меня задачи на сегодня?. Это cработает, если вы залогинены под одним и тем же SberID на устройстве и в SmartApp Studio. Черновики по-умолчанию доступны к запуску на устройствах разработчика.

Вместо эпилога

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

Этот короткое интро скорее, обзор возможностей на искусственном примере. Как сделать смартап с компонентами, оплатой, автотестами, обязательно расскажем в следующих статьях. Спасибо за внимание, ещё увидимся!

По всем вопросам разработки смартапов можно обращаться в сообщество разработчиков SmartMarket в телеграмме.

Для будущих студентов курса "React.js Developer" подготовили перевод материала.

Также предлагаем всем желающим посмотреть открытый вебинар на тему ReactJS: быстрый старт. Сильные и слабые стороны.

Написание четкого и удобочитаемого кода необходимо для улучшения его качества. Кроме того, чистый код легче тестировать. Нет причин не потратить пять лишних минут на рефакторинг кода, чтобы сделать его более читаемым.

В этой статье рассматриваются шесть лучших практик рефакторинга 2021 года, чтобы улучшить свой код. Мы рассмотрим следующие пункты:

1. Используйте event.target.name для обработчиков событий.

2. Как избежать ручной привязки обработчиков событий к this?

3. Используйте React hooks для обновления состояния.

4. Кэширование затратных операций с useMemo.

5. Разделение функций на отдельные элементы для улучшения качества кода.

6. Как создавать собственные хуки в React?

#1: Используйте имя обработчика события

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

Однако, пишете ли Вы десять обработчиков событий, когда у Вас форма с десятью полями ввода? Ответ нет.

Мы можем установить свойство имени на поле ввода и получить доступ к нему из обработчика события. Это значение позволяет нам использовать один обработчик входных данных для событий onChange.

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

export default class App extends React.Component {    constructor(props) {        super(props);        this.state = {            item1: "",            item2: "",            items: "",            errorMsg: ""        };        this.onFirstInputChange = this.onFirstInputChange.bind(this);        this.onSecondInputChange = this.onSecondInputChange.bind(this);    }    onFirstInputChange(event) {        const value = event.target.value;        this.setState({            item1: value        });    }    onSecondInputChange(event) {        const value = event.target.value;        this.setState({            item2: value        });    }    render() {        return (            <div>                <div className="input-section">                    {this.state.errorMsg && (                        <p className="error-msg">{this.state.errorMsg}</p>                    )}                    <input                        type="text"                        name="item1"                        placeholder="Enter text"                        value={this.state.item1}                        onChange={this.onFirstInputChange}                    />                    <input                        type="text"                        name="item2"                        placeholder="Enter more text"                        value={this.state.item2}                        onChange={this.onSecondInputChange}                    />                </div>            </div>      );    }}

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

Давайте рассмотрим эту ситуацию по-другому, используя поле имени. Мы можем получить доступ к этому значению через свойство event.target.name. Теперь создадим одну функцию, которая сможет обрабатывать оба события одновременно. Таким образом, мы можем удалить обе функции onFirstInputChange и onSecondInputChange.

onInputChange = (event) => {  const name = event.target.name;  const value = event.target.value;  this.setState({    [name]: value  });};

Полегче, да? Конечно, вам часто требуется дополнительная проверка данных, которые вы сохраняете в своем состоянии (state). Вы можете использовать утверждение switch для добавления собственных правил валидации для каждого введенного значения.

#2: Избегайте ручной привязки (binding) this

Скорее всего, вы знаете, что React не сохраняет привязку this при прикреплении обработчика к событию onClick или onChange. Поэтому мы должны связать это вручную. Почему мы связываем *this*? Мы хотим связать this обработчика события (event handler) с экземпляром компонента (component instance), чтобы не потерять его контекст, когда мы передадим его в качестве обратного вызова.

Вот классический пример привязки, который происходит в конструкторе.

class Button extends Component {  constructor(props) {    super(props);    this.state = { clicked: false };    this.handleClick = this.handleClick.bind(this);  }    handleClick() {    this.props.setState({ clicked: true });  }    render() {    return <button onClick={this.handleClick}>Click me!</button>;  );}

Однако привязка больше не требуется, так как команда CLI createe-react-app использует @babel/babel-plugin-transform-class-properties плагин версии >=7 и babel/plugin-proposal class-properties плагин версии <7.

Примечание: Вы должны изменить синтаксис обработчика событий (event handler) на синтаксис функции стрелок (arrow function).

Ниже приведен пример синтаксиса стрелочной функции. Здесь нет необходимости писать дополнительный код в конструкторе, чтобы связать this.

class Button extends Component {  constructor(props) {    super(props);    this.state = { clicked: false };  }    handleClick = () => this.setState({clicked: true });  render() {    return <button onClick={this.handleClick}>Click me!</button>;  );}

Это так просто! Вам не нужно беспокоиться о привязке функций в вашем конструкторе.

#3: Используйте React hooks чтобы обновить ваше состояние

Начиная с версии 16.8.0, теперь можно использовать методы состояния и жизненного цикла (state and lifecycle methods) внутри функциональных компонентов с помощью React Hooks. Другими словами, мы можем писать более читаемый код, который также намного проще в обслуживании.

Для этого мы будем использовать useState hook. Для тех, кто не знает, что такое hook и зачем его использовать вот краткое определение из React documentation..

Что такое Hook? Hook это специальная функция, которая позволяет подключиться к функциям React. Например, useState это Hook, который позволяет добавлять состояние React к функциональным компонентам.

Когда я буду использовать Hook? Если вы пишете компонент функции и понимаете, что вам нужно добавить некоторое состояние к нему, ранее вы должны были преобразовать его в класс. Теперь вы можете использовать Hook внутри существующего функционального компонента.

Во-первых, давайте посмотрим, как мы обновляем состояние с помощью setState hook.

this.setState({    errorMsg: "",    items: [item1, item2]});

А теперь давайте воспользуемся useState hook. Нам нужно импортировать этот hook из react библиотеки. Теперь мы можем объявить новые переменные состояния и передать им начальное значение. Мы будем использовать деструктуризацию,чтобы извлечь переменную для получения значения и еще одну для установки значения (это будет функция).Рассмотрим, как это можно сделать в приведенном выше примере.

import React, { useState } from "react";const App = () => {  const [items, setIems] = useState([]);  const [errorMsg, setErrorMsg] = useState("");};export default App;

Теперь вы можете получить прямой доступ как к константам items, так и к errorMsg в вашем компоненте.

Далее, мы можем обновить состояние внутри такой функции:

import React, { useState } from "react";const App = () => {  const [items, setIems] = useState([]);  const [errorMsg, setErrorMsg] = useState("");  return (    <form>        <button onClick={() => setItems(["item A", "item B"])}>          Set items        </button>    </form>  );};export default App;

Вот как ты можешь использовать state hooks (хуки состояния).

#4: Кэширование затратных операций с помощью useMemo

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

Поэтому мы можем использовать hook useMemo для запоминания вывода при передаче тех же параметров в мемоизуемую функцию (memoized function). Hook useMemo принимает функцию и вводимые параметры для запоминания. React ссылается на это как на массив зависимостей. Каждое из значений, упоминаемое внутри функции, также должно появиться в массиве зависимостей.

Вот простой, абстрактный пример. Мы передаем два параметра a и b затратной функции. Так как функция использует оба параметра, то мы должны добавить их в массив зависимостей для нашего useMemo hook.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

#5: Разделение функций на чистые функции (Pure functions, PF) для улучшения качества кода

В соответствии с общепринятой практикой React, вы должны разделить функции, которые не используют ваш компонент. Другими словами, функция, которая не зависит от какого-либо состояния или React hooks.

Таким образом, функция сортировки является прекрасным примером, которую можно извлечь как чистую функцию.

Вы можете недоумевать, зачем вам нужно заниматься функциональным программированием?

Функциональное программирование это процесс создания программного обеспечения путем компоновки чистых функций, избегая общего для всех состояния, изменчивых (mutable) данных и побочных эффектов. Чистые функции более читабельны и легче поддаются тестированию. Поэтому они улучшают качество кода.

- freeCodeCamp

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

function ascSort (a, b) {  return a < b ? -1 : (b > a ? 1 : 0);}function descSort (a, b) {  return b < a ? -1 : (a > b ? 1 : 0);}

#6: Создайте собственные React Hooks

Мы научились использовать useState и useMemo React hooks. Тем не менее, React позволяет вам устанавливать свои собственные React hooks, чтобы сформировать необходимую логику и делать компоненты более читабельными.

Мы можем задать пользовательские React hooks, начиная с ключевого слова use, как и все другие React hooks. Это выгодно, когда вы хотите распределить логику между различными функциями. Вместо копирования функции, мы можем определить логику как React hook и повторно использовать ее в других функциях.

Вот пример React-компонента, который обновляет состояние, когда размер экрана становится меньше 600 пикселей. Если это происходит, переменная isScreenSmall устанавливается в true. В противном случае переменная устанавливается в false. Мы используем событие resize из объекта окна для обнаружения изменения размера экрана.

const LayoutComponent = () => {  const [onSmallScreen, setOnSmallScreen] = useState(false);  useEffect(() => {    checkScreenSize();    window.addEventListener("resize", checkScreenSize);  }, []);  let checkScreenSize = () => {    setOnSmallScreen(window.innerWidth < 768);  };  return (    <div className={`${onSmallScreen ? "small" : "large"}`}>      <h1>Hello World!</h1>    </div>  );};

Теперь мы хотим использовать ту же логику в другом компоненте, который полагается на эту же переменную isScreenSmall. Вместо того, чтобы дублировать код, давайте преобразовывать этот пример в свой индивидуальный React hook.

import { useState, useEffect } from "react";const useSize = () => {  const [isScreenSmall, setIsScreenSmall] = useState(false);  let checkScreenSize = () => {    setIsScreenSmall(window.innerWidth < 600);  };  useEffect(() => {    checkScreenSize();    window.addEventListener("resize", checkScreenSize);    return () => window.removeEventListener("resize", checkScreenSize);  }, []);  return isScreenSmall;};export default useSize;

Мы можем создать пользовательский React hook, путем использования логики с функцией use.

В этом примере мы назвали пользовательский React hook useSize. Теперь мы можем импортировать useSize hook в любом месте, где нам это необходимо.

React custom hooks в этом нет ничего нового. Вы обертываете логику с функцией и даете ей имя, которое начинается с use. Она действует как обычная функция. Однако, следуя правилам "use", вы говорите всем, кто её импортирует, что это hook (хук). Более того, поскольку это hook, вы должны структурировать его так, чтобы следовать rules of hooks (правилам хуков).

Вот как сейчас выглядит наш компонент. Код становится намного чище!

import React from 'react'import useSize from './useSize.js'const LayoutComponent = () => {  const onSmallScreen = useSize();  return (    <div className={`${onSmallScreen ? "small" : "large"}`}>      <h1>Hello World!</h1>    </div>  );}

Бонусный совет: Мониторинг фронтенда

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

Вот и все! Эта статья научила вас шести методикам улучшения читабельности и качества кода.

Узнать подробнее о курсе "React.js Developer".

Посмотреть открытый вебинар на тему ReactJS: быстрый старт. Сильные и слабые стороны.

Хоть кому-то и может показаться, что веб-разработчик это суровый технарь (айтишник же!), вход в эту профессию не сложнее, чем вPython. В неё часто переходят бывшие педагоги, юристы, бухгалтеры и другие гуманитарии. О том, с чего начать обучение, какие ошибки допускают новички, как освоиться в профессии и стоит ли самостоятельно учиться, рассказывает преподаватель веб-разработки в GeekBrains Алексей Кадочников.

Веб-разработчиком может стать любой главное не бояться компьютера и иметь желание попробовать себя в профессии. Эта профессия на входе не требует глубоких технических знаний: математика или алгоритмы это скорее бонус, чем необходимость. Я не заметил кардинальной разницы между тем как обучаются технари и гуманитарии, просто у первых на старте чуть больше знаний. Но эта разница уходит в считанные дни, главное перебороть лень и заняться делом.

Чтобы освоить профессию, важно заниматься каждый день хотя бы один-два часа. Увы, это понимают не все, некоторым кажется: чтобы стать разработчиком, нужно просто прослушать пару лекций. Но это не так.

Никогда не откладывайте обучение на завтра: заведите будильник, например, на восемь вечера. Большинство людей к этому времени успевают освободиться от работы, попасть домой и даже поужинать. Зазвенит садитесь и занимайтесь до девяти-десяти. И так каждый день. Пропустили? Добавьте пропущенный час к занятию завтра.

Конечно же, 8 вечера это не панацея. Главное оптимизировать график, чтобы эффективно совмещать обучение и работу. Когда я переучивался на разработчика (об этом расскажу дальше), ставил будильник на шесть утра, занимался, завтракал и ехал на работу.

Кто переучивается на разработчика

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

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

Мне самому пришлось сменить специальность. Восемь лет назад, когда я окончил университет, оказалось, что на рынке по специальности Вычислительные машины, комплексы, системы и сети всего 8 вакансий. Для четырех из них мне не хватало опыта, а по ещё четырём мне не перезвонили. В результате устроился инженером на завод и через несколько месяцев работы понял, что это не то, чему я хочу посвятить жизнь. Тогда яс нуляпрошелкурсы веб-разработкии нашёл работу по их окончанию. СейчасяFront-end developerвMail.ru GroupипреподаювGeekBrains.

Еще один пример мой студент Павел Литвин. Он не доучился в ВУЗе на безопасника, работал менеджером по продажам, потом в SEO, в конце концов выучился фронтенд-разработке и стал зарабатывать в4 раза больше, чем до курсов.И таких историй множество.

Представление о профессии у новичков зачастую далеко от реальности. Некоторым всё ещё кажется, что программист это тот, кто сидит дома, ничего не делает и много зарабатывает. Когда сталкиваюсь с таким у студентов, приходится объяснять, чем именно нужно будет заниматься, сколько времени учиться и как потом предстоит работать.

Чтобы понять, подойдет ли тебе специальность, надо просто попробовать. В онлайн-школах, где учат разработке, есть бесплатныеинтенсивына несколько часов. За это время студентам предлагается сделать небольшой проект: так можно понять, подходит ли им эта сфера. Если вы попробовали пару таких интенсивов и ничего не получается или не нравится процесс, возможно, это не ваше призвание и стоит продолжить поиски. Профессия веб-разработчика подходит многим, но это не универсальный рецепт. Наверняка вы найдете для себя что-то другое.

Кроме интенсивов, есть вводныевебинарыо том, чего ждать от специальности, насколько она востребована, какие в ней зарплаты, что нужно делать на работе. Подобными видео и текстами пестрит интернет, найти их легко. Посмотрите, чтобы понять, чем вы будете заниматься, если вы выберите этот путь.

Самостоятельное обучение

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

В момент, когда я пошёл на курсы, мой знакомый решил учиться самостоятельно три года что-то читал, смотрел в интернете. В итоге за это время он вышел на зарплату в 50 000 рублей. Пойди он на курсы, достиг бы этого результата уже через полгода-год. Думая, что экономит, он потерял деньги.

Еще одна частая проблема самостоятельногообучения веб-разработке с нуляосвоение устаревших технологий. Мне приходилось переучивать студентов, выучивших неактуальную информацию. Есть вещи, которые уже не применяются, оптимизировались и их нужно удалить из памяти или перенастроить. Например, раньше в верстке для перемещения элемента использовалась командаfloat left, но это довольно громоздкое и сложное решение. Затем вместо него начали использоватьdisplay: flex. Теперь и этот метод успел устареть и теперь актуаленdisplay: grid. Внешний вид от всех этих способов будет одинаковым, но последнее решение изящнее и быстрее в реализации.

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

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

Наслушавшись теории, часто не представляешь, как ее использовать. Чтобы осваивать разработку, можно заниматься в онлайн-тренажерах вродеэтого. Такие штуки предлагают минимум теории и максимум прикладного применения.

Чтобы сохранить мотивацию, когда я делаю что-то новое, использую такой приём: записываю видео, в котором озвучиваю цели и мотивы текущих задач. Если через условные три месяца наступает момент, когда опускаются руки, просматриваю его. Если идея с видео вам не нравится, попробуйте написать вдохновляющее письмо.

Высшее образование и курсы

Я устраивался на работу много раз, переезжал между городами и даже странами СНГ. За всё время про диплом о высшем образовании у меня спросили всего дважды. Поэтому я бы не сказал, что это дает какое-то преимущество перед другими соискателями. На собеседованиях проверяют технические знания. Если их нет, никакой диплом не спасет.

На курсы обычно приходят люди, которые хотят после них устроиться по специальности. Поэтому и знания там обычно дают профильные, нужные для работы. В этом их отличие от университетов, где часть изученного потом некуда применить. В Geekbrains, где яобучался профессии веб-разработчикаи теперь преподаю, изучают только технологии, необходимые для работы. Когда мы только создавали курс, провели опрос веб-разработчиков школы, узнали у них, что актуально, а что нет, какие технологии важно включить в программу, а без каких можно обойтись.

Чтобы учиться на курсах эффективно, нужно смотреть вебинары, выполнять практические задания и (как минимум) читать первыессылкив Google или Яндекс по теме урока: это помогает немного расширить понимание пройденного.

Читать учебники перед началом обучения не стоит: они очень быстро устаревают. С момента написания книги до её попадания на полки проходит не один месяц. Её нужно отредактировать, сверстать, напечатать, выпустить на рынок. Лучше перед учебой (или одновременно с ней) читать официальную документацию выбранного языка или технологии. Например, вотсайт, на котором собран максимум информации для старта в JavaScript.

У нас на курсах есть задания для командной работы с несколькими разработчиками. Мы стараемся сделать программу максимально адаптивной. Каждый, кто прошел курс, может написать о нём и своём преподавателеотзыв. То, что присылают выпускники, не модерируется и всегда рассматривается отделом качества. Если его специалисты видят проблемы по какому-то предмету, они отправляют заявку, чтобы курс обновили.

Вариантов обучения много можно выучиться на джуна, а можно сразу на миддла. Можно быть фронтендером, бекэндером или освоить обе технологии, став фулстек-специалистом. Разница в освоенных технологиях:

• Junior-frontendдолжензнатьhtml + css + js + react.

• Junior-fullstack: html + css + js + php +базыданных.

• Middle frontendразработчик: html + css + js + react + vue + node.js +команднаяразработка.

• Middle-fullstack: html + css + js + react + php + laravel +базыданных+команднаяразработка.

Обучение веб-разработкена наших курсах длится от 5 месяцев. За это время можно получить базу junior-фронтенда. Чтобы изучить технологии, нужные для миддл-фронтенда, понадобится год. Освоение навыков миддла и для фронтенда, и для бэкенда требует 1,5 года. А дальше нужно идти в бой и набираться опыта, чтобы подтвердить этот статус в реальной работе.

Я преподаю фронтенд-разработку. Особенность курса в постоянной демонстрации практической составляющей, в каждом уроке показываю, как применять изученное. Мы даём прикладные знания, а все домашние задания связаны друг с другом. С 1 по 8 урок студенты постепенно разрабатывают готовый проект, и в итоге они успевают сделать пятистраничный проект интернет-магазина. Например, вот такого:

Как устроиться на работу и что от нее ожидать

Для работы необходимы общие знания по веб-разработке. Даже если вы учились фронтенду, на собеседовании придётся показать, что владеешь и бекендом. Например, спрашивают про PHP, а если ты его не знаешь, уточняют, готов ли подучить.

Целостные знания, полученные на курсах, дают возможность быстро выучить новое. Если ты уже умеешь делать что-то на одном языке, то сделаешь и на другом. Это все равно что учиться водить: не важно, на какой машине вы начинали ездить пересев на другую, вы все равно быстро адаптируетесь и поедете.

Джуну на первой работе можно рассчитывать на 4060 тысяч, миддл зарабатывает от 100150 тысяч. По сути, зарплата может быть и 200250 тысяч, но чтобы знаний хватило на зарплату миддла, нужно прилежно учиться не меньше полугода-года.

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

Самая частая ошибка на собеседованиях говорить лишнее. В разработке на болтовне не выедешь: отвечать нужно уверенно и по сути. Если где-то не уверен или не знаешь, стоит показать логику действий в такой ситуации, но ничего не выдумывать и не заговаривать интервьюера. Веб-разработка это работа в команде. Поэтому важно показать, что ты умеешь работать с другими и есть релевантный опыт. У нас на курсах есть задания для командной работы с несколькими разработчиками.

На собеседованиях вам скорее всего зададут вопросы про базу JavaScript, консоли. Обязательно дадут тестовые задания например, страницу, с которой что-то нужно сделать. Спросят связку нескольких технологий, чтобы понять, есть ли у вас целостное понимание.

Не страшно, если вдруг собеседование провалится поищите дома ответы на вопросы, порешайте задачи, погуглите типичные задания по вашей специальности и идите на следующую встречу.

Нужно помнить, что на работе (зачастую) никто никого ничему учить не будет. Разработчику дают конкретную задачу и просят её сделать. Я думаю, что если есть желание быстро развиваться в профессии, лучше выбирать место, где много сотрудников и есть старший наставник. Работая в одиночку развиться очень сложно.

Библиотека RxJS благодаря широкому выбору операторов по праву считается крайне мощным инструментом в арсенале разработчика. В этом посте я хочу представить вам концепцию кастомных операторов RxJS с примерами реализации.

Библиотека RxJS благодаря широкому выбору операторов по праву считается крайне мощным инструментом в арсенале разработчика. Недавно я подготовил несколько самописных операторов, чтобы повысить удобство повторного использования некоторых комбинаций операторов. В этом посте я хочу представить вам концепцию кастомных операторов RxJS с примерами реализации.

Оператор идентификации

Оператор RxJS это всего лишь функция, которая берет некие наблюдаемые (observable) данные в качестве входных и возвращает результирующий поток. Следовательно, задача написания кастомного оператора RxJS сводится к написанию обычной функции JavaScript (TypeScript). Начнем с базового оператора идентификации (identity), который просто зеркалирует наблюдаемые исходные данные:

import { interval, Observable } from "rxjs";import { take } from "rxjs/operators";const source$ = interval(1000).pipe(take(3));function identity<T>(source$: Observable<T>): Observable<T> {  return source$;}const results$ = source$.pipe(identity);results$.subscribe(console.log);  // console output: 0, 1, 2

Далее напишем кастомный оператор с кое-какой элементарной логикой.

Оператор логирования

Следующий кастомный оператор выполняет побочное действие (логирует значения в консоли) для каждого значения исходного потока:

<>Copyimport { interval, Observable } from "rxjs";import { take, tap } from "rxjs/operators";const source$ = interval(1000).pipe(take(3));function log<T>(source$: Observable<T>): Observable<T> {  return source$.pipe(tap(v => console.log(`log: ${v}`)));}const results$ = source$.pipe(log);results$.subscribe(console.log);  // console output: log: 0, log: 1, log: 2

В основе результирующего потока лежат данные source$, которые видоизменяются посредством применения встроенных операторов в составе метода pipe.

Фабрика оператора

В некоторых сценариях для кастомного оператора полезно указать контекст. Для этого можно определить функцию, возвращающую оператор. Аргументы фабрики входят в лексическую область видимости оператора:

import { interval, Observable } from "rxjs";import { take, tap } from "rxjs/operators";const source$ = interval(1000).pipe(take(3));function logWithTag<T>(tag: string): (source$: Observable<T>) => Observable<T> {  return source$ =>    source$.pipe(tap(v => console.log(`logWithTag(${tag}): ${v}`)));}const results$ = source$.pipe(logWithTag("RxJS"));results$.subscribe(console.log);  // console output: logWithTag(RxJS): 0, logWithTag(RxJS): 1, logWithTag(RxJS): 2

Описание возвращаемого типа можно упростить, воспользовавшись функцией MonoTypeOperatorFunction библиотекиRxJS. Кроме того, с помощью статической функции pipe можно сократить определение оператора:

import { interval, MonoTypeOperatorFunction, pipe } from "rxjs";import { take, tap } from "rxjs/operators";const source$ = interval(1000).pipe(take(3));function logWithTag<T>(tag: string): MonoTypeOperatorFunction<T> {  return pipe(tap(v => console.log(`logWithTag(${tag}): ${v}`)));}const results$ = source$.pipe(logWithTag("RxJS"));results$.subscribe(console.log);  // console output: logWithTag(RxJS): 0, logWithTag(RxJS): 1, logWithTag(RxJS): 2

Другие полезные советы по RxJS можно почитать здесь.

Уникальная для наблюдателя лексическая область видимости

Функция фабрики оператора вызывается лишь один раз в момент определения потока. В результате у всех наблюдателей будет общая лексическая область видимости:

import { interval, MonoTypeOperatorFunction, pipe } from "rxjs";import { take, tap } from "rxjs/operators";const source$ = interval(1000).pipe(take(3));function tapOnce<T>(job: Function): MonoTypeOperatorFunction<T> {  let isFirst = true;  return pipe(    tap(v => {      if (!isFirst) {        return;      }      job(v);      isFirst = false;    })  );}const results$ = source$.pipe(tapOnce(() => console.log("First value emitted")));results$.subscribe(console.log);results$.subscribe(console.log);  // console output: First value emitted, 0, 0, 1, 1, 2, 2

Чтобы у каждого наблюдателя была уникальная лексическая область видимости, можно применить функцию defer:

import { defer, interval, MonoTypeOperatorFunction } from "rxjs";import { take, tap } from "rxjs/operators";const source$ = interval(1000).pipe(take(3));function tapOnceUnique<T>(job: Function): MonoTypeOperatorFunction<T> {  return source$ =>    defer(() => {      let isFirst = true;      return source$.pipe(        tap(v => {          if (!isFirst) {            return;          }          job(v);          isFirst = false;        })      );    });}const results$ = source$.pipe(tapOnceUnique(() => console.log("First value emitted")));results$.subscribe(console.log);results$.subscribe(console.log);  // console output: First value emitted, 0, First value emitted, 0, 1, 1, 2, 2

Другой способ решения задачи tapOnce рассматривается в одном из моих предыдущих постов.

Практические примеры

Оператор firstTruthy:

import { MonoTypeOperatorFunction, of, pipe } from "rxjs";import { first } from "rxjs/operators";const source1$ = of(0, "", "foo", 69);function firstTruthy<T>(): MonoTypeOperatorFunction<T> {  return pipe(first(v => Boolean(v)));}const result1$ = source1$.pipe(firstTruthy());result1$.subscribe(console.log);// console output: foo

Оператор evenMultiplied:

import { interval, MonoTypeOperatorFunction, pipe } from "rxjs";import { filter, map, take } from "rxjs/operators";const source2$ = interval(10).pipe(take(3));function evenMultiplied(multiplier: number): MonoTypeOperatorFunction<number> {  return pipe(    filter(v => v % 2 === 0),    map(v => v * multiplier)  );}const result2$ = source2$.pipe(evenMultiplied(3));result2$.subscribe(console.log);  // console output: 0, 6

Оператор liveSearch:

import { ObservableInput, of, OperatorFunction, pipe  } from "rxjs";import { debounceTime, delay, distinctUntilChanged, switchMap } from "rxjs/operators";const source3$ = of("politics", "sport");type DataProducer<T> = (q: string) => ObservableInput<T>;function liveSearch<R>(  time: number,  dataProducer: DataProducer<R>): OperatorFunction<string, R> {  return pipe(    debounceTime(time),    distinctUntilChanged(),    switchMap(dataProducer)  );}const newsProducer = (q: string) =>  of(`Data fetched for ${q}`).pipe(delay(2000));const result3$ = source3$.pipe(liveSearch(500, newsProducer));result3$.subscribe(console.log);  // console output: Data fetched for sport

Заключение

Типовые комбинации операторов RxJS можно вынести в кастомные операторы и многократно использовать их в будущем при реализации аналогичного функционала. Применение дженериков обеспечивает корректное приведение типов выходных значений, обрабатываемых в дальнейшей pipe-последовательности.

Живой пример: [смотрите в оригинале]

Надеюсь, вам понравился мой пост и вы узнали что-то новое.

Перевод материала подготовлен в рамках курса "JavaScript Developer. Professional". Если вам интересно узнать о курсе подробнее, приглашаем на день открытых дверей онлайн, где преподаватель расскажет о формате обучения и программе.

Перевод материала подготовлен в рамках онлайн-курса "Flutter Mobile Developer".

Приглашаем также всех желающих на бесплатный двухдневный интенсив Создаем приложение на Flutter для Web, iOS и Android. На интенсиве узнаем, как именно Flutter позволяет создавать приложения для Web-платформы, и почему теперь это стабильный функционал; как именно работает Web-сборка. Напишем приложение с работой по сети. Подробности и регистрация здесь.

Это продолжение первой части статьи о тестировании виджетов во Flutter.

Продолжим наше изучение процесса тестирования виджетов.

В прошлый раз мы сосредоточились на базовой структуре тестового файла и подробно рассмотрели, что может делать функция testWidgets() в тесте. Хотя эта функция отвечает за выполнение теста, непосредственно к тесту мы не перешли и даже не посмотрели, как он выглядит, и это было сделано специально. На мой взгляд, хорошее знание компонентов, из которых состоит тест, может принести огромную пользу в момент их написания.

Небольшое резюме предыдущей части статьи:

1. Тесты виджетов предназначены для тестирования небольших компонентов приложения.

2. Мы сохраняем наши тесты в папке test.

3. Внутри функции testWidgets() пишем тесты виджетов, и мы подробно рассмотрели состав этой функции.

Продолжим наш анализ.

Как пишется тест виджета?

Тест виджета обычно дает возможность проверить:

1. Отображаются ли визуальные элементы.

2. Дает ли взаимодействие с визуальными элементами правильный результат.

Начнем со второй задачи, а первая подтянется сама собой как производная. Для этого мы обычно выполняем следующие шаги в ходе тестирования:

1. Задаем начальные условия и создаем виджет для тестирования.

2. Находим визуальные элементы на экране с помощью какого-либо свойства (например, ключа).

3. Взаимодействуем с элементами (например, кнопкой), используя тот же самый идентификатор.

4. Убеждаемся, что результаты соответствуют ожидаемым.

Создание виджета для тестирования

Чтобы протестировать виджет, очевидно, нам нужен сам виджет. Давайте рассмотрим тест по умолчанию в папке test:

void main() {  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here    },  );}

Наверняка, вы заметили объект WidgetTester в функции обратного вызова, где мы пишем наш тест. Пришло время применить его.

Чтобы создать новый виджет для тестирования, используем метод pumpWidget():

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      await tester.pumpWidget(        MaterialApp(          home: Scaffold(            appBar: AppBar(),          ),        ),      );    },  );

(Не забудьте про await, иначе тест будет выдавать кучу ошибок.)

Этот метод создает виджет для тестирования.

Более подробно о WidgetTester мы поговорим чуть позже, сначала нам нужно разобраться с другим вопросом.

Объекты-искатели

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

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

Итак, как же найти виджет? Для этого мы используем объект-искатель, класс Finder. (Вы можете искать и элементы, но это другая тема.)

На словах просто, но на деле вам нужно определить что-то уникальное для виджета тип, текст, потомков или предков и т.д.

Давайте рассмотрим широко распространенные и некоторые более специфические способы поиска виджетов:

find.byType()

Давайте в качестве примера рассмотрим поиск виджета Text:

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      await tester.pumpWidget(        MaterialApp(          home: Scaffold(            appBar: AppBar(),            body: Center(              child: Text('Hi there!'),            ),          ),        ),      );      var finder = find.byType(Text);    },  );

Здесь для создания объекта-искателя мы используем предопределенный экземпляр класса CommonFinders под именем find. Функция byType() помогает нам найти ЛЮБОЙ виджет определенного типа. Таким образом, если в дереве виджетов существует два текстовых виджета, будут идентифицированы ОБА. Поэтому, если вы хотите найти определенный виджет Text, подумайте о том, чтобы добавить в него ключ или использовать следующий тип:

find.text()

Чтобы найти конкретный виджет Text, используйте функцию find.text():

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      await tester.pumpWidget(        MaterialApp(          home: Scaffold(            appBar: AppBar(),            body: Center(              child: Text('Hi there!'),            ),          ),        ),      );      var finder = find.text('Hi there!');    },  );

Это также применимо и для любого виджета типа EditableText, например виджета TextField.

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      var controller = TextEditingController.fromValue(TextEditingValue(text: 'Hi there!'));      await tester.pumpWidget(        MaterialApp(          home: Scaffold(            appBar: AppBar(),            body: Center(              child: TextField(controller: controller,),            ),          ),        ),      );      var finder = find.text('Hi there!');    },  );

find.byKey()

Один из самых распространенных и простых способов найти виджет это просто добавить в него ключ:

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      await tester.pumpWidget(        MaterialApp(          home: Scaffold(            appBar: AppBar(),            body: Center(              child: Icon(                Icons.add,                key: Key('demoKey'),              ),            ),          ),        ),      );      var finder = find.byKey(Key('demoKey'));    },  );

find.descendant() и find.ancestor()

Это более специфический тип, с помощью которого можно найти потомка или предка виджета, отвечающего определенным свойствам (для чего мы снова используем объект-искатель).

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

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      await tester.pumpWidget(        MaterialApp(          home: Scaffold(            appBar: AppBar(),            body: Center(              key: Key('demoKey'),              child: Icon(Icons.add),            ),          ),        ),      );            var finder = find.descendant(        of: find.byKey(Key('demoKey')),        matching: find.byType(Icon),      );    },  );

Здесь мы указываем, что искомый виджет является потомком виджета Center (для этого используется параметр of) и отвечает свойствам, которые мы снова задаем с помощью объекта-искателя.

Вызов find.ancestor() во многом схож, но роли меняются местами, так как мы пытаемся найти виджет, расположенный выше виджета, определенного с помощью параметра of.

Если бы здесь мы пытались найти виджет Center, мы бы сделали следующее:

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      await tester.pumpWidget(        MaterialApp(          home: Scaffold(            appBar: AppBar(),            body: Center(              key: Key('demoKey'),              child: Icon(Icons.add),            ),          ),        ),      );      var finder = find.ancestor(        of: find.byType(Icon),        matching: find.byKey(Key('demoKey')),      );    },  );

Создание пользовательского объекта-искателя

При использовании функций вида find.xxxx() мы используем предопределенный класс Finder. А если мы хотим использовать собственный способ поиска виджета?

Продолжая череду неудачных примеров, предположим, что нам нужен объект-искатель, который находит все значки, не имеющие ключей. Назовем этот объект BadlyWrittenWidgetFinder.

1. Сначала дополним классMatchFinder.

class BadlyWrittenWidgetFinder extends MatchFinder {    @override  // TODO: implement description  String get description => throw UnimplementedError();  @override  bool matches(Element candidate) {    // TODO: implement matches    throw UnimplementedError();  }  }

2. С помощью функции matches() мы проверяем, соответствует ли виджет нашим условиям. В нашем случае предстоит проверить, является ли виджет значком и равен ли его ключ значению null:

class BadlyWrittenWidgetFinder extends MatchFinder {  BadlyWrittenWidgetFinder({bool skipOffstage = true})      : super(skipOffstage: skipOffstage);  @override  String get description => 'Finds icons with no key';  @override  bool matches(Element candidate) {    final Widget widget = candidate.widget;    return widget is Icon && widget.key == null;  }}

3. Пользуясь преимуществами расширений, мы можем добавить этот объект-искатель непосредственно в класс CommonFinders (объект find является экземпляром этого класса):

extension BadlyWrittenWidget on CommonFinders {  Finder byBadlyWrittenWidget({bool skipOffstage = true }) => BadlyWrittenWidgetFinder(skipOffstage: skipOffstage);}

4. Благодаря расширениям мы можем обращаться к объекту-искателю так же, как и к любым другим объектам:

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      await tester.pumpWidget(        MaterialApp(          home: Scaffold(            appBar: AppBar(),            body: Center(              key: Key('demoKey'),              child: Icon(Icons.add),            ),          ),        ),      );      var finder = find.byBadlyWrittenWidget();    },  );

Теперь, когда мы познакомились с объектами-искателями, перейдем к изучению класса WidgetTester.

Все, что нужно знать о WidgetTester

Это достаточно большая тема, заслуживающая отдельной статьи, но мы здесь постараемся рассмотреть основные моменты.

Класс WidgetTester позволяет нам взаимодействовать с тестовой средой. Тесты виджетов выполняются не совсем так, как они выполнялись бы на реальном устройстве, поскольку асинхронное поведение в тесте имитируется. Следует отметить и другое отличие:

В тесте виджета функция setState() работает не так, как она обычно работает.

Хотя функция setState()помечает виджет, подлежащий перестраиванию, в реальности она не перестраивает дерево виджетов в тесте. Так как же нам это сделать? Давайте посмотрим на методы pump.

Для чего нужны методы pump

Вкратце:pump() инициирует новый кадр (перестраивает виджет), pumpWidget() устанавливает корневой виджет и затем инициирует новый кадр, а pumpAndSettle() вызывает функцию pump() до тех пор, пока виджет не перестанет запрашивать новые кадры (обычно при запущенной анимации).

Немного о функции pumpWidget()

Как мы видели ранее, функция pumpWidget() использовалась для установки корневого виджета для тестирования. Она вызывает функцию runApp(), используя указанный виджет, и осуществляет внутренний вызов функции pump(). При повторном вызове функция перестраивает все дерево.

Подробнее о функции pump()

Мы должны вызвать функцию pump(), чтобы на самом деле перестроить нужные нам виджеты. Допустим, у нас есть стандартный виджет счетчика такого вида:

class CounterWidget extends StatefulWidget {  @override  _CounterWidgetState createState() => _CounterWidgetState();}class _CounterWidgetState extends State<CounterWidget> {  var count = 0;  @override  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(        body: Text('$count'),        floatingActionButton: FloatingActionButton(          child: Icon(Icons.add),          onPressed: () {            setState(() {              count++;            });          },        ),      ),    );  }}

Виджет просто хранит значение счетчика и обновляет его при нажатии кнопки FloatingActionButton, как в стандартном приложении-счетчике.

Давайте попробуем протестировать виджет: найдем значок добавления и нажмем его, чтобы проверить, станет ли значение счетчика равным 1:

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      await tester.pumpWidget(CounterWidget());      var finder = find.byIcon(Icons.add);      await tester.tap(finder);            // Ignore this line for now      // It just verifies that the value is what we expect it to be      expect(find.text('1'), findsOneWidget);    },  );

А вот и нет:

Причина в том, что мы перестраиваем виджет Text, отображающий счетчик, с помощью функции setState() в виджете, но в данном случае виджет не перестраивается. Нам также необходимо вызвать метод pump():

  testWidgets(    'Test description',    (WidgetTester tester) async {      // Write your test here      await tester.pumpWidget(CounterWidget());      var finder = find.byIcon(Icons.add);      await tester.tap(finder);      await tester.pump();      // Ignore this line for now      // It just verifies that the value is what we expect it to be      expect(find.text('1'), findsOneWidget);    },  );

И мы получаем более приятный результат:

Если вам нужно запланировать отображение кадра через определенное время, в метод pump() также можно передать время тогда будет запланировано перестраивание виджета ПОСЛЕ истечения указанного временного промежутка:

await tester.pump(Duration(seconds: 1));

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

У метода pump есть полезная особенность: вы можете остановить его на нужном этапе перестраивания и визуализации виджета. Для этого необходимо задать параметр EnginePhase данного метода:

enum EnginePhase {  /// The build phase in the widgets library. See [BuildOwner.buildScope].  build,  /// The layout phase in the rendering library. See [PipelineOwner.flushLayout].  layout,  /// The compositing bits update phase in the rendering library. See  /// [PipelineOwner.flushCompositingBits].  compositingBits,  /// The paint phase in the rendering library. See [PipelineOwner.flushPaint].  paint,  /// The compositing phase in the rendering library. See  /// [RenderView.compositeFrame]. This is the phase in which data is sent to  /// the GPU. If semantics are not enabled, then this is the last phase.  composite,  /// The semantics building phase in the rendering library. See  /// [PipelineOwner.flushSemantics].  flushSemantics,  /// The final phase in the rendering library, wherein semantics information is  /// sent to the embedder. See [SemanticsOwner.sendSemanticsUpdate].  sendSemanticsUpdate,}await tester.pump(Duration.zero, EnginePhase.paint);

Примечание. Я применил перечисление в исходном коде, только чтобы нагляднее изобразить этапы. Не добавляйте его в свой код.

Переходим к pumpAndSettle()

Метод pumpAndSettle() это, по сути, тот же метод pump, но вызываемый до того момента, когда не будет запланировано ни одного нового кадра. Он помогает завершить все анимации.

Он имеет аналогичные параметры (время и этап), а также дополнительный параметр тайм-аут, ограничивающий время вызова данного метода.

await tester.pumpAndSettle(        Duration(milliseconds: 10),        EnginePhase.paint,        Duration(minutes: 1),      );

Взаимодействие со средой

Класс WidgetTester позволяет нам использовать сложные взаимодействия помимо обычных взаимодействий типа поиск + касание. Вот что можно делать с его помощью:

Метод tester.drag() позволяет инициировать перетаскивание из середины виджета, который мы находим с помощью объекта-искателя по определенному смещению. Мы можем задать направление перетаскивания, указав соответствующие смещения по осям X и Y:

      var finder = find.byIcon(Icons.add);      var moveBy = Offset(100, 100);      var slopeX = 1.0;      var slopeY = 1.0;      await tester.drag(finder, moveBy, touchSlopX: slopeX, touchSlopY: slopeY);

Мы также можем инициировать перетаскивание с контролем по времени, используя методtester.timedDrag():

      var finder = find.byIcon(Icons.add);      var moveBy = Offset(100, 100);      var dragDuration = Duration(seconds: 1);      await tester.timedDrag(finder, moveBy, dragDuration);

Чтобы просто перетащить объект из одной позиции на экране в другую, не прибегая к объектам-искателям, используйте метод tester.dragFrom(), который позволяет инициировать перетаскивание из нужной позиции на экране.

      var dragFrom = Offset(250, 300);      var moveBy = Offset(100, 100);      var slopeX = 1.0;      var slopeY = 1.0;      await tester.dragFrom(dragFrom, moveBy, touchSlopX: slopeX, touchSlopY: slopeY);

Также существует вариантэтого метода с контролем по времени tester.timedDragFrom().

      var dragFrom = Offset(250, 300);      var moveBy = Offset(100, 100);      var duration = Duration(seconds: 1);      await tester.timedDragFrom(dragFrom, moveBy, duration);

Примечание. Если вы хотите имитировать смахивание, используйте методtester.fling() вместоtester.drag().

Создание пользовательских жестов

Давайте попробуем создать собственный жест: касание определенной позиции и рисование прямоугольника на экране с возвратом в исходную позицию.

Сначала нам нужно инициализировать жест:

      var dragFrom = Offset(250, 300);      var gesture = await tester.startGesture(dragFrom);

Первый параметр определяет, где происходит начальное касание экрана.

Затем мы можем использовать следующий код для создания собственного жеста:

      var dragFrom = Offset(250, 300);      var gesture = await tester.startGesture(dragFrom);            await gesture.moveBy(Offset(50.0, 0));      await gesture.moveBy(Offset(0.0, -50.0));      await gesture.moveBy(Offset(-50.0, 0));      await gesture.moveBy(Offset(0.0, 50.0));            await gesture.up();

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

В этой части статьи мы узнали об особенностях работы с классами Finder и WidgetTester. Далее мы завершим наше знакомство с процессом тестирования виджетов и изучим дополнительные варианты тестирования это будет в третьей части статьи.

Подробнее о курсе "Flutter Mobile Developer".

Участвовать в интенсиве Создаем приложение на Flutter для Web, iOS и Android.

Привет, хабровчане. Для будущих студентов курса "Web-разработчик на Python" подготовили перевод материала.

Если мы хотим передать данные из Django в JavaScript, мы обычно говорим об API, сериализаторах, вызовах JSON и AJAX. Обычно дело усложняется наличием React или Angular на фронте.

Но иногда вам нужно сделать что-то быстро и грязное построить диаграмму и не задумываться над инфраструктурой одностраничного приложения.

Обычный подход

Допустим, у нас есть приложение на Django со следующей моделью:

from django.db import modelsclass SomeDataModel(models.Model):    date = models.DateField(db_index=True)    value = models.IntegerField()

И простой TemplateView:

<img alt="Изображение выглядит как текст

from django.views.generic import TemplateViewclass SomeTemplateView(TemplateView):    template_name = 'some_template.html'

Теперь мы можем построить простую линейную диаграмму с помощью Chart.js, и мы не хотим использовать AJAX, создавать новые API и т.д.

Если мы хотим визуализировать простую линейную диаграмму в нашем some_template.html, код будет выглядеть следующим образом (взято из этих примеров):

<canvas id="chart"></canvas><script src="http://personeltest.ru/aways/cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script><script>window.onload = function () {  var data = [48, -63, 81, 11, 70];  var labels = ['January', 'February', 'March', 'April', 'May'];  var config = {    type: 'line',    data: {      labels: labels,      datasets: [        {          label: 'A random dataset',          backgroundColor: 'black',          borderColor: 'lightblue',          data: data,          fill: false        }      ]    },    options: {      responsive: true    }  };  var ctx = document.getElementById('chart').getContext('2d');  window.myLine = new Chart(ctx, config);};</script>

И получится следующее:

Теперь, если мы захотим построить диаграмму данных, поступающих из SomeDataModel, мы подойдем к этой задаче следующим образом:

from django.views.generic import TemplateViewfrom some_project.some_app.models import SomeDataModelclass SomeTemplateView(TemplateView):    template_name = 'some_template.html'    def get_context_data(self, **kwargs):        context = super().get_context_data(**kwargs)        context['data'] = [            {                'id': obj.id,                'value': obj.value,                'date': obj.date.isoformat()            }            for obj in SomeDataModel.objects.all()        ]        return context

А затем мы визуализируем массив JavaScript с помощью шаблона Django:

<canvas id="chart"></canvas><script src="http://personeltest.ru/aways/cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script><script>window.onload = function () {  // We render via Django template  var data = [    {% for item in data %}      {{ item.value }},    {% endfor %}  ]  // We render via Django template  var labels = [    {% for item in data %}      "{{ item.date }}",    {% endfor %}  ]  console.log(data);  console.log(labels);  var config = {    type: 'line',    data: {      labels: labels,      datasets: [        {          label: 'A random dataset',          backgroundColor: 'black',          borderColor: 'lightblue',          data: data,          fill: false        }      ]    },    options: {      responsive: true    }  };  var ctx = document.getElementById('chart').getContext('2d');  window.myLine = new Chart(ctx, config);};</script>

Именно так это и работает, но, как по мне, слишком грязно. У нас больше нет JavaScript, но есть JavaScript с шаблоном Django. Мы теряем возможность выделить JavaScript в отдельный файл .js. Также мы не можем красиво работать с этим JavaScript.

Но можем сделать лучше и быстрее.

Добавим остроты

Стратегия следующая:

1. В нашем случае мы будем сериализовать данные через json.dumps и хранить их в контексте.

2. Отрендерим скрытый элемент <div> с уникальным id и атрибутом data-json, а именно с сериализованными данными JSON.

3. Запросите этот <div> из JavaScript, прочитайте атрибут data-json и используйте JSON.parse, чтобы получить необходимые данные.

Преимуществом становится то, что код на JavaScript не содержит шаблонов Django, но имеет переиспользуемый шаблон для получения необходимых данных.

Почти как упрощенный AJAX.

Ниже пример того, как я использую эту стратегию:

import jsonfrom django.views.generic import TemplateViewclass SomeTemplateView(TemplateView):    template_name = 'some_template.html'    def get_context_data(self, **kwargs):        context = super().get_context_data(**kwargs)        context['data'] = json.dumps(            [                {                    'id': obj.id,                    'value': obj.value,                    'date': obj.date.isoformat()                }                for obj in SomeDataModel.objects.all()            ]        )        return context

Теперь извлечем наш код на JavaScript в статичный файл chart.js.

В результате получим some_template.html:

{% load static %}<div style="display: none" id="jsonData" data-json="{{ data }}"></div><canvas id="chart"></canvas><script src="http://personeltest.ru/aways/cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script><script src="{% static 'chart.js' %}"></script>

Как видите в скрытом div происходит магия. Мы скрываем div, чтобы удалить его из любой верстки. Здесь вы можете дать ему соответствующий id или использовать любой подходящий HTML-элемент.

Атрибут data-json (который необязателен и не является чем-то предопределенным) содержит нужный нам JSON.

Теперь, наконец, мы реализуем следующую простую функцию для получения и анализа необходимых нам данных:

function loadJson(selector) {  return JSON.parse(document.querySelector(selector).getAttribute('data-json'));}

И вот наш chart.js готов:

function loadJson(selector) {  return JSON.parse(document.querySelector(selector).getAttribute('data-json'));}window.onload = function () {  var jsonData = loadJson('#jsonData');  var data = jsonData.map((item) => item.value);  var labels = jsonData.map((item) => item.date);  console.log(data);  console.log(labels);  var config = {    type: 'line',    data: {      labels: labels,      datasets: [        {          label: 'A random dataset',          backgroundColor: 'black',          borderColor: 'lightblue',          data: data,          fill: false        }      ]    },    options: {      responsive: true    }  };  var ctx = document.getElementById('chart').getContext('2d');  window.myLine = new Chart(ctx, config);};

Быстрый и грязный способ для тех, кто просто хочет что-то отправить. А вот и конечный результат:

Дисклеймер

Я не рекомендую вам пользоваться этим подходом для чего-то большего, чем грязное доказательство концепции. Как только ваш код на JavaScript начнет расти, станет сложно его контролировать. Рекомендуется пройти путь SPA с одним из популярных фреймворков (в нашем случае React).

Узнать подробнее о курсе "Web-разработчик на Python".

Посетить Demo day к курсу.

Удаленный формат работы стал привлекательным способом заработка для многих, кто на протяжении многих лет трудился в маленьком офисе. Интернет-профессия веб-дизайнер стала престижной и доступной для большинства пользователей. Она не только интересна, но и прибыльна. Да еще и спрос со стороны работодателей на нее огромный.

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

Кто такой web-дизайнер?

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

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

Направления web-дизайна

Формально, специалист работает в одном или двух одновременно направлениях, а именно:

• UX этоUser Experience(дословно: опыт пользователя). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.

• UI этоUser Interface(дословно пользовательский интерфейс) то, как выглядит интерфейс и то, какие физические характеристики приобретает. Определяет, какого цвета будет ваше изделие, удобно ли будет человеку попадать пальцем в кнопочки, читабельным ли будет текст и тому подобное

Сколько зарабатывает web-дизайнер?

По данным портала Trud средняя зарплата веб-дизайнера в России составляет $520 в месяц, что в переводе на рубли составляет 39300 руб. Самые высокие ставки в Москве в среднем около $1000 веб-дизайнер и $1500 UI-дизайнер.

По данным онлайн-университета Skillbox начинающий дизайнер в России может спокойно зарабатывать порядка 20000-40000 руб. но для этого так же следует иметь за плечами несколько проектов, а иногда и опыт в команде. Дизайнер с опытом работы за плечами и хорошим портфолио зарабатывает уже от 60000 руб. Ведущий специалист или арт-директор зарабатывают уже от 150000 руб. но не стоит забывать, что это все стоит не малых усилий. Главное помнить, что чем сложнее работа, тем больше денег выполучаете итем интереснее сама работа. Отдельно хочется сказать о UX-дизайнере, стоит лишь мельком пробежаться по вакансиям, и вы сразу понимаете, насколько выгодно работать специалистом в этой сфере, UX-дизайнер зарабатывает от 90000-250000 руб. спокойно.

Сколько web-дизайнер зарабатывает на фрилансе?

Не буду врать если вы не готовы тратить время на поиск клиентов, то на много денег на фрилансе вы точно не заработаете. Знайте, что в день желательно отправлять от 25 и больше заявок, чтобы вас заметили. Понимайте, что накаждое интересное предложение подают заявки десятки, а порой и сотни дизайнеров. Бюджет этих проектов невсегда адекватен иравнозначен сложности самого проекта.

Где же выучиться?

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

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

• https://skillbox.ru/ это университет, который позволяет обучаться профессии в дистанционном формате. Skillbox предлагает освоить такие специализации за 1-2 года обучения, что довольно быстро. На первый доход от веб-дизайна абитуриенты могут рассчитывать уже спустя 4 месяца после обучения.

• https://geekbrains.ru/ этообразовательная экосистема, в которой любой человек может получить всё для успешного профессионального.

• https://wayup.in/ этообразовательная онлайн-платформа, основанная Андреем Гавриловым в 2014 году, на которой можно получить перспективную digital-профессию с гарантией.

Как устроиться на работу и как ее найти?

Для начинающих веб-дизайнеров существует два варианта заработать деньги с использованием полученных навыков. Один из них это трудоустройство в компанию, второй индивидуальная деятельность по оказанию услуг веб-дизайна. Необходимо регулярно мониторить объявления о вакансиях на специализированных сайтах: hh.ru, Rabota.ru, Zarplata.ru, Vakant.ru. Будьте готовы к тому, что работодатель будет предъявлять достаточно объемный перечень требований к соискателю: знание программ Photoshop, CorelDraw, знание HTML & CSS, умение разработки иллюстрация, иконок, умение создания графики, flesh-анимации.

Достаточно зарегистрироваться на биржах фриланса (FL.ru, Freelance.ru, Kwork.ru и др.) и выполнять предлагаемые задания. Но и на указанных сервисах начинающему веб дизайнеру не доверят дорогостоящий заказ. Нужно наработать определенный рейтинг и зарекомендовать себя как ответственного исполнителя, чтобы получить более или менее высокое вознаграждение за свой труд.

Можно с уверенностью сказать, что стать веб-дизайнером довольно таки не сложно, главное иметь желание и достойную мотивацию. По моему личному примеру, могу с уверенностью сказать, что достаточно пройти всего лишь 1-2 курса по веб-дизайну, сделать порядка 5 работ в портфолио и можно спокойно выходить на заработную плату равную 50000 руб.