4 полезных инструмента для веб-разработки, нечасто попадающих в списки «самых-самых»
На основе статьи «4 Useful Web Development Tools That Stay Under The Radar».
Мы собрали подборку инструментов, о которых вы, возможно, не знаете, хотя они способы сэкономить вам много времени.
4. Responsively
Этот инструмент позволяет просматривать в одном окне вид сайта на разных экранах. Любой клик, прокрутка или переход, осуществленный на одном устройстве, будет повторен на всех устройствах в режиме реального времени. Инструмент имеет 30+ встроенных профайлов устройств, но при желании можно добавлять и собственные.
3. ngrok
Удобный инструмент, позволяющий быстро просмотреть результаты работы. Вводите одну команду в консоли и получаете безопасный URL на localhost-сервер. Пример использования — ./ngorck http 3000 .
2. Placeholder
Если вы создаете прототип приложения, а бэкенда у вас еще нет, можете использовать JSON placeholder. Это бесплатный фейковый API для тестирования и прототипирования.
fetch('https://jsonplaceholder.typicode.com/posts/1') .then((response) => response.json()) .then((json) => console.log(json));
1. iHateRegex
Как отмечает автор статьи, он не знаком ни с кем, кто знал бы регулярные выражения на 100% и кто вообще любил бы их. Последний факт как раз и отражает название сайта iHateRegex («яНенавижуRegex»). Этот сайт — шпаргалка для использования регулярных выражений.
От редакции Techrocks. В комментариях к оригинальной статье была упомянута пара других полезных инструментов. Мы решили, что стоит указать их тоже.
Polypane
Упомянутый в статье Responsively можно считать бесплатным аналогом платного Polypane. Создатель Polypane, пришедший в комментарии, согласился, что с бесплатным инструментом трудно конкурировать, но отметил, что его творение имеет более широкий функционал, чем Responsively. Это приложение, позволяющее вам не только просматривать различные виды сайта, но и одновременно вносить правки во все сразу.
Онлайн-инструмент для подбора цветов. Вводите ключевое слово, например, winter («зима») или grass («трава») — и получаете подходящую цветовую палитру.
Postman: как пользоваться программой для тестирования API
Бесплатный сервис позволяет писать тесты, поддерживает разные типы API.
Виктория Дербенченко
Автор статьи
4 марта 2022 в 11:52
Postman — программа, которая проверяет работу API с помощью запросов. Они могут содержать файлы, cookie, HTTP-заголовки, параметры форм. В статье покажем основные бесплатные функции программы и расскажем о нескольких простых действиях, которые можно в ней выполнять.
Как пользоваться Postman
Скачайте бесплатную версию Postman с официального сайта. Приложение адаптировано для Windows, MacOS и Linux.
Не забудьте создать личный аккаунт, чтобы синхронизировать все устройства, в которых вы работаете над проектом. Так вы не потеряете важные данные.
В статье будем использовать бесплатный сервис Placeholder. Он предоставляет бесплатный API с фейковыми данными, чтобы тестировать приложения.
Инженер-тестировщик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Интерфейс
Главное окно состоит из четырех рабочих блоков:
- основное меню;
- сайдбар;
- выбор типа запроса и сам URL;
- рабочая область.
Как выполнить запрос
В Postman запросы — основная рабочая единица. Чтобы выполнить запрос, нажмите «+» и выберите его тип. Например: «основной — GET». После укажите URL в адресной строке и щелкните Send.
Как передавать параметры
Чтобы проверить передачу параметров, используйте онлайн-сервис postman-echo.
GET-параметры
Нажмите «+», чтобы создать новый запрос → в поле запроса пропишите https://postman-echo.com/get → метод GET.
GET-параметры указывают в разделе Params. Откройте этот раздел под строкой запроса и наберите название параметра в графе Key (например, Foo), а его значение — в Value (например, Bar). Теперь кликните Send и смотрите результат.
Параметры формы
Параметры формы передаются с помощью POST-запросов. Нажмите «+» → POST → в адресную строку добавьте https://postman-echo.com/post. В теле запроса (Body) выберите вкладку form-data и заполните необходимые поля → отправьте (Send).
Передача файла
Для этого в form-data поменяйте тип параметра с Text на File. Полученный ответ будет храниться в разделе Files.
Заголовки
Чтобы отправить данные в заголовке, перейдите в раздел Headers, затем введите сам заголовок и его значение.
Авторизация
Есть много методов и способов, чтобы зарегистрироваться и авторизоваться на сервере. Рассмотрим базовую схему авторизации. При такой схеме логин и пароль передаются в заголовке «Authorization» в незашифрованном виде. С помощью Postman можно убедиться, что протокол работает правильно и, главное, безопасно.
Поменяйте метод на GET. Откройте вкладку Authorization → Нажмите Type → Basic Auth. Введите имя пользователя — postman, пароль — password → Send. Если протокол авторизации работает корректно, сервер выдаст: authenticated: true.
Проверяем авторизацию Basic Auth
История запросов
Если некоторые запросы используете чаще других, необязательно раз за разом вводить новые данные. Можно воспользоваться списком в разделе History. Он хранит предыдущие запросы.
Коллекции запросов
Чтобы хранить запросы, есть специальные архивы — коллекции. Здесь можно структурировать, организовывать запросы, раскладывать по папкам, чтобы их было проще найти. Это полезно для средних и больших проектов.
Чтобы создать коллекцию: в разделе Collection нажмите «+» → дайте ей название → заполните запросами (Add request).
Как тестировать запросы
С помощью Postman можно отправлять запросы независимо от того, тестируете ли вы собственный API или интегрируетесь со сторонним. Запросы создают в конструкторе — главном рабочем пространстве программы. Вы можете проверить любые параметры — например, заголовки или cookie.
Запрос состоит из URL-адреса и HTTP-метода. Последний указывает тип действия, который запрашивается у API. Вот наиболее распространенные методы:
- GET — получить данные;
- POST — добавить новые данные;
- PUT — заменить данные, которые имеются;
- PATCH — обновить некоторые поля данных;
- DELETE — удалить данные.
Например, если вы тестируете API онлайн-планировщика дел, можете использовать: GET-метод — чтобы получить текущий список задач; POS — чтобы создать новую задачу; PUT или PATCH — чтобы редактировать существующую; DELETE — чтобы удалить задачу.
Правильно формулировать запросы с помощью Postman и других инструментов и создавать нагрузочные тесты для API можно научиться на курсе «Инженер по тестированию» в Skypro. За девять месяцев освоите все основные инструменты тестировщика и сможете устроиться на престижную и высокооплачиваемую работу.
GET-запросы
В качестве примера возьмем API:
Нажмите «+» → Выберите GET-запрос → Задайте URL-адрес https://jsonplaceholder.typicode.com/users → Send.
Если запрос выполнен корректно, в нижней панели появится надпись: «Status: 200 ОК».
POST-запросы
POST-запросы позволяют отправлять новую информацию. Например, данные о пользователе:
Кликните «+» → Выберите POST-запрос → Задайте URL-адрес https://jsonplaceholder.typicode.com/users → Перейдите в раздел Body → Выберите Raw > JSON → Введите данные пользователя → Send.
Если запрос выполнен корректно, вы увидите статус «201 Created».
Jsonplaceholder как пользоваться
Лучшие API, которые пригодятся каждому frontend-разработчику
Узнаем вместе больше о мощных и полезных интерфейсах программирования приложений или APIs, способных заметно облегчить будни разработчиков на фронтенде.
Веб-разработка
28 июня 2022
Эта ситуация знакома практически всем frontend-разработчикам. Как следует освоив базовые инструменты создания кода (HTML, CSS, JavaScript), хочется постепенно перейти к работе с реальными данными. Ведь без них не получится создавать действительно современные и полезные digital-продукты с продвинутым функционалом. И тут на помощь приходят API.
API – аббревиатура от английского Application Programming Interfaces или «интерфейс программирования приложений». В этой статье мы рассматриваем Rest API, генерирующие необходимые данные для разработки и тестирования новых приложений и сайтов. Внедряя эти API, вы делаете свои digital-проекты масштабируемыми и более динамичными.
Грамотное использование API — это отличная возможность для веб-разработчиков:
- сэкономить рабочее время,
- повысить продуктивность работы,
- увеличить производительность приложений,
- улучшить пользовательский опыт,
- получать и хранить нужные данные.
JSONPlaceholder
Это один из самых популярных API для разработки. Изначально JSONPlaceholder использовался для тестирования и создания прототипов. К особенностям этого API относятся:
- Отсутствие регистрации.
- Нет необходимости в дополнительной настройке.
- Полезен для автоматической генерации других API-интерфейсов.
- Совместим с Backbone, Angular и другими JS-фреймворками.
- Передает данные одновременно множеству подключенных пользователей.
- Поддерживает запросы POST, PATCH, PUT и кроссдоменные запросы CORS и JSONP.
Fake Store API
Этот интерфейс используется в создании интернет-магазинов и торговых онлайн-площадок. Fake Store API дает разработчикам фиктивные данные для совершения тестовых покупок онлайн. Очень полезный инструмент для быстрого тестирования разных элементов интерфейса.
Fake Store API поддерживает все основные HTTP-запросы (GET, POST, PUT, PATCH и DELETE) и подойдет для проверки любого проекта. Этот инструмент ощутимо экономит время, закрывая вопросы контента и позволяя сфокусироваться на дизайне, интерактивных и других элементах интерфейса. Также Fake Store API генерирует тестовые данные для заполнения:
- товарных карточек,
- пользовательских профилей,
- токенов входа на сайт,
- банковских карт.
Unsplash API
Продвинутый и мощный фото-движок, где собрано свыше 600 000 качественных и четких фото, которые можно использовать без лицензии. Frontend-разработчики могут бесплатно пользоваться изображениями из Unsplash API для своих проектов. Главные плюсы инструмента:
- Можно использовать фото в личных и коммерческих целях.
- Бесплатный инструмент с простой и гибкой настройкой.
- Удобный поиск фото по ключевым словам, похожим изображениям и расширенным критериям.
Quotes API
Quotes API – многофункциональный инструмент, дающий доступ к обширной базе цитат. Он предоставляет frontend-разработчикам инструменты для удобного и быстрого поиска известных цитат, чтобы сделать их частью интерфейса сайта или приложения. Сервис Quotes помогает:
- настроить блок «цитаты дня»,
- быстро найти цитату на заданную тему,
- вывести цитату определенного автора,
- составить рейтинг цитат по популярности,
- вывести рандомно выбранную цитату.
CoinGecko API
Очень полезный API для проектов, связанных с криптовалютами. Тематика криптовалют сегодня очень популярна, так что это не единственный доступный разработчикам API, связанный с криптой. Главный плюс CoinGecko — удобство и простота. Инструмент бесплатный и не требует API key . С его помощью вы можете получить для своего проекта следующие данные:
- перечень всех коинов и цены на них
- список криптобирж
- актуальные курсы криптовалют
- контракты
- тикеры
RandomUser API
Очень полезный API для начинающих веб-разработчиков. Инструмент генерирует случайные данные пользователей для заполнения полей во время тестирования. Полезные свойства RandomUser API:
- Похож на lorem ipsum, но предназначен для генерации тестовых данных о пользователях.
- Возвращает несколько результатов.
- Можно указывать, какие данные нужны: имя и фамилия, email-адрес, пол, адрес, страна.
Заключение
Создание интерфейса — важнейшая часть разработки сайтов и приложений, требующая максимального внимания к деталям. Веб-разработчикам нужно сделать максимально удобный и интуитивный продукт, и инструменты API в этом прекрасно помогают! Грамотно используя функционал перечисленных нами API, вы сможете облегчить свою работу по созданию и тестированию сайтов и веб-приложений.
Основы Fetch API в JavaScript
Fetch – это новый API, основанный на промисах. Он позволяет выполнять запросы Ajax и при этом избежать всей работы, связанной с XMLHttpRequest. Этот мануал покажет вам, насколько Fetch прост в использовании и как он способен упростить извлечение ресурсов из API. Кроме того, теперь Fetch поддерживается всеми современными браузерами, поэтому использовать его действительно несложно.
Запросы GET
Давайте посмотрим на этот простой запрос GET, который извлечет нам кое-какие фиктивные данные из JSONPlaceholder API:
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(res => res.json())
.then(res => res.map(user => user.username))
.then(userNames => console.log(userNames));
В результате мы получим такой массив имен пользователей:
[«Bret», «Antonette», «Samantha», «Karianne», «Kamren», «Leopoldo_Corkery», «Elwyn.Skiles», «Maxime_Nienow», «Delphine», «Moriah.Stanton»]
Учитывая, что мы ожидаем ответа в JSON, нам сначала нужно вызвать метод json(), чтобы преобразовать полученный объект в такой, с которым можно взаимодействовать. Если бы нам был нужен ответ XML, мы могли бы использовать text().
Запросы POST, PUT и DELETE
Чтобы отправить другие запросы, передайте объект в качестве второго аргумента вызова fetch, указав метод, а также любые необходимые заголовки и тело запроса:
const myPost = title: ‘A post about true facts’,
body: ’42’,
userId: 2
>
const options = method: ‘POST’,
body: JSON.stringify(myPost),
headers: ‘Content-Type’: ‘application/json’
>
>;
fetch(‘https://jsonplaceholder.typicode.com/posts’, options )
.then(res => res.json())
.then(res => console.log(res));
JSONPlaceholder отправляет нам данные в ответ на POST-запрос с прикрепленным ID:
Object body: 42,
id: 101,
title: «A post about true facts»,
userId: 2
>
Примечание: Тело запроса необходимо преобразовать в строку. Для вызовов fetch вы также можете использовать DELETE, PUT, HEAD и OPTIONS.
Обработка ошибок
Что касается обработки ошибок, тут у Fetch API есть большой плюс: если запрос правильно попадает в конечную точку и возвращается, ошибки не возникает. С другой стороны, это означает, что обработка ошибок – это не просто помещение вызова catch в конец цепочки промисов fetch для перехвата.
К счастью, объект ответа вызова fetch имеет свойство ok, которое будет либо истинным, либо ложным, в зависимости от успеха запроса. Если ok имеет значение false, вы можете использовать Promise.reject():
fetch(‘https://jsonplaceholder.typicode.com/ postsZZZ ‘, options)
.then(res => if (res.ok) return res.json();
> else return Promise.reject(< status: res.status, statusText: res.statusText >);
>
>)
.then(res => console.log(res))
.catch(err => console.log(‘Error, with message:’, err.statusText ));
В приведенном выше примере промис будет отклонен, потому что мы вызываем конечную точку, которой не существует. По цепочке выполнится вызов catch, и на экране появится следующее:
«Error, with message: Not Found»
Использование Fetch в связке с async/await
Поскольку Fetch – это API, основанный на промисах, вы можете легко использовать асинхронные функции, чтобы сделать код более понятным и синхронным. Вот, например, функция async/await, которая выполняет простой GET запрос и извлекает имена пользователей из ответа JSON, чтобы затем вывести результат на консоль:
async function fetchUsers(endpoint) const res = await fetch(endpoint);
let data = await res.json();
data = data.map(user => user.username);
console.log(data);
>
fetchUsers(‘https://jsonplaceholder.typicode.com/users’);
Также можно просто вернуть промис из функции async/await, и тогда вы сможете продолжать цепочку вызовами then после вызова функции:
async function fetchUsers(endpoint) const res = await fetch(endpoint);
const data = await res.json();
return data;
>
fetchUsers(‘https://jsonplaceholder.typicode.com/users’)
.then(data => console.log(data.map(user => user.username));
>);
Примечание: Вызов метода json() возвращает промис, поэтому в приведенном выше примере строка return data для функции async возвращает промис.
Вы также можете вывести ошибку, если ответ ok имеет значение false, и перехватить ошибку в цепочке промисов.
async function fetchUsers(endpoint) const res = await fetch(endpoint);
if (!res.ok) throw new Error(res.status); // 404
>
const data = await res.json();
return data;
>
fetchUsers(‘https://jsonplaceholder.typicode.com/ usersZZZ ‘)
.then(data => console.log(data.map(user => user.website));
>)
.catch(err => console.log(‘Ooops, error’, err.message));
Ooops, error 404
Полизаполнения
Если вам нужна поддержка старых браузеров, таких как Internet Explorer 11, вам потребуется использовать полизаполнение Fetch (например, вот это с Github).
Если вам нужно использовать Fetch в Node.js, тут существует два наиболее популярных варианта полизаполнения – isomorphic-fetch и node-fetch.
Полезные данные о поддержке Fetch API основными браузерами можно найти здесь.