4 способа подделки API во фронтенд-разработке

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

Подходы к тестированию
- stubbing
- mocking
- поддельное API

Библиотеки:
- Mirage.js miragejs.com
- Jest jestjs.io
- подмена fetch
- Spying в Jest
- Cypress valentinog.com/blog/cypress
- json-server github.com/typicode/json-server

webdevblog.ru/4-sposoba-poddelki-api-vo-frontend-razrabotke
#testing #api

Фреймворк для построения интерфейсов в стиле Cyberpunk

github.com/arwes/arwes
#opensource #library

SpaceX API

API для получения списка запусков и многого другого о SpaceX
Иделально для какого-нибудь демо проекта или тестового API

github.com/r-spacex/SpaceX-API
#apiexample

Ленивый рендеринг с помощью content-visibility

Если блок находится за пределами viewport и браузер может определить размер блока без анализа вложеных блоков то можно не рендерить такой блок.
content-visibility как раз и помогает настроить такое поведение.
Рендеринг ускоряется за счет пропуска отрисовки невидимых блоков.
Так же это позволяет более эффективно скрывать блок.

Пока есть только в Chromium 85.

ru.megaindex.com/blog/lazy-rendering
#css

React 17: Ничего нового?

Вольный перевод статьи из оригинального блога
- Concurrent Mode не будет представлен в 17 версии
- Теперь обработчики вешаются на корневой элемент, а не на document
- Убран за ненадобностью пул синтетических событий. event.persist() больше не нужен
- Функция очистки эфекта useEffect теперь вызывается асинхронно, что улучшает производительность при перерисовке большого количества элементов
- Запрет на возврат undefined в любых компонентах
- Новый механизм генерации стека вызовов, что позволяет увидеть дерево React компонентов, которое привело к ошибке
- Удалены некоторые приватные экспорты

m.habr.com/ru/post/519824/
#react

Error Lens

Это расширение, которое не только подсвечивает ошибки но и выводит их текст прямо в коде, может сделать ваш VS Code еще удобнее.

marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
#vscode

А вы знали что...

необязательно переключаться на ветку что бы ее запушить?
git push origin feature-branch
отправляет feature-branch в репозиторий origin даже если вы находитесь на другой ветке.

#git

Lock-файлы npm

Так как в packаge.json зависимости описываются диапазоном версий semver, выполнение npm install может устанавливать различные версии от раза к разу.
Файл package-lock.json (также как и yarn.lock) содержит точные версии установленых зависимостей и нужен для воссоздания точного комплекта зависимостей. Это позволяет выполнять повторяемые сборки приложений, что может решить множество проблем.
В npm имеется специальная команда npm ci которая устанавливает зависимости строго как указано в lock-файле, т.к. при выполнении npm install менеджер пакетов может обновить зависимости и lock-файл.
Так же, в npm имеется команда npm shrinkwrap, которая генерирует файл npm-shrinkwrap.json. Это тот же lock-файл но он, в отличии от package-lock.json, публикается вместе с проектом и имеет больший приоритет чем последний. Его использование крайне не рекомендуется, однако незаменимо в некоторых ситуациях.

habr.com/ru/company/domclick/blog/513130/
#npm

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

programmableweb.com
#api

Оптимизация страницы для навигации клавиатурой

Не все пользователи пользуются мышью для просмотра страницы, для таких пользователей навигация зачастую доставляет множество неудобств.
К примеру, у поста обычно много ссылок ведущих на один и тот же адрес: на картинке, на заголовке, "Read more", при навигации по средством Tab придется пролистывать все эти ссылки.
Это легко можно оптимизировать, добавив к некоторым ссылкам tabindex = "-1" что бы Tab их пропускал и
aria-hidden = "true" что бы скрин ридер пропускал их тоже.

sarasoueidan.com/blog/keyboard-friendlier-article-listings

vanilla-hamburger

Ванильные гамбургеры
- Быстрые
- Маленькие (1.6KB gzipped)
- Без зависимостей
- Фреймворк агностик
- Чистый TypeScript
- Custom Elements

web-padawan.github.io/vanilla-hamburger
#library #ui

Список всех HTTP статусов с подробным описанием

Часто возникает вопрос: какой HTTP код возвращать в случае ошибки, в этом справочнике весьма подробно описанно назначение каждого из них.

Наиболее часто некорректно используются такие коды:
400 синтаксическая ошибка запроса
415 сервер не умеет обрабатывать этот тип данных. Обратите внимание на передаваемый mime-type
422 запрос синтаксически корректен, но содержит логическую ошибку
409 конфликт с текущим состоянием ресурса и клиент может разрешить этот конфликт
500 ошибка на стороне сервера, в идеале - никогда не должен появляться

restapitutorial.com/httpstatuscodes.html
www.restapitutorial.ru/httpstatuscodes.html
#http

Объ­яс­не­ние клю­че­вых слов initial, inherit, unset и revert в CSS

Важный факт: у каждого свойства в CSS есть значение по умолчанию, которое не имеет ничего общего со значениями, которые устанавливаются браузером. Браузерные стили — это стили, которые применяются браузером к конкретным HTML-элементам. Может показаться, что они автоматически приходят вместе с HTML, но это не так.

Краткое описание:
- inherit требует унаследовать значение от родителя
- initial устанавливает значение по умолчанию (стандарта, не браузера)
- unset для наследуемых свойств (влияющие на текст) действует как inherit, для ненаследуемых свойств (все остальные) ведет себя как initial
- revert сбрасывает значение до базового значения стилей браузера

web-standards.ru/articles/inherit-initial-unset-revert/
#css

Content Delivery Networks

Отличная статья, в которой много информации о работе сети, о работе CDN, о том как ускорить загрузку сайта используя CDN и многое другое

web.dev/content-delivery-networks
#http #cdn #network

Всего одна ошибка при проектировании React приложения может очень замедлить разработку

В React очень легко создать компонент в родительском и передать его в дочерний для отображения:
function App() {
return (
<Sidebar>
<Logo/>
</Sidebar>
);
}
function Sidebar({children}) {
return (
<div>
{children}
</div>
);
}
Такой подход может значительно упростить написание приложений за счет упрощения пробрасывания параметров в глубь дерева компонентов.
Так же такой подход позволяет делать переиспользуемые и независимые компоненты и видеть логическую структуру приложения:
<Wrapper>
<MainNav>
<GitHubLogo/>
<SiteSearch/>
<NavLinks/>
<ProfileDropdown/>
</MainNav>
<LeftNav>
<DashboardDropdown/>
<Repositories/>
<Teams/>
</LeftNav>
<CenterContent>
<RecentActivity/>
<AllActivity/>
</CenterContent>
<RightContent>
<Notices/>
<ExploreRepos/>
</RightContent>
</Wrapper>

epicreact.dev/one-react-mistake-thats-slowing-you-down
#react

TypeScript. Продвинутые типы

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

Все же TypeScript замечательный язык, с весьма крутой системой типов, напомню что система типов TS - тьюринг полная.

habr.com/ru/company/piter/blog/518428/
#typescript

Вам не нужен...

Не все популярные инструменты так сильно нужны.
Например, популярная библиотека moment.js занимает 286kb, а ее альтернатива 82kb, притом что функционал очень похож.
В репозитории указаны возможные замены различным технологиям, библиотекам и их конструкциям.

github.com/you-dont-need

Внутреннее устройство и оптимизация бандла webpack

Алексей Иванов рассказывает про оптимизацию webpack сборки.
Автор рассказывает про
- Устройство бандла
- Процесс сборки бандла
- Неочевидные детали этого процесса
- ES6 модули
- Tree shaking
- Асинхроную подгрузку
- Анализ сборки
- Особенности сборки node модулей
- Способы оптимизации бандла

habr.com/ru/company/jugru/blog/342842/
#webpack

SVG иконки

Хороший обзор использования SVG на сайте:
- плюсы векторной графики
- где взять иконки
- где нарисовать
- шрифт vs спрайт
- различные способы поключения на сайт
- плюсы и минусы каждого способа

css.yoksel.ru/svg-icons/
#svg #css #html

SCSS in TS

В этот раз сразу две статьи, в обоих советы и способы использования популярной библиотеки для реализации CSS in JS с типизацией. Некоторые примеры и советы видимо хотят сделать SCSS in JS
Кратко отмечу интересные пункты:
- Практическое использование на примере реализации списка
- Типизация кастомных props:
styled.h1<{ active: boolean }>`some props`;
- Типизация темы используя .d.ts файл
- Глобальные переменные для стилей
- Удобный способ описания Media Query

carlrippon.com/playing-with-styled-components/
blog.agney.dev/styled-components-&-typescript/
#styledcomponents #typescript #react

Как соощить браузеру что сайт поддердивает цветовые схемы

Как же это прекрасно когда сайт переключается на темную тему вместе со всем окружением.
К сожалению, не все браузеры поддерживают темизацию. Стандартная темизация не всегда настолько хорошая как хотелось бы, на изображении видно что инпуты и кнопки в темной теме остались такими же как и в светлой теме.
Подстроить сайт под темную тему можно используя Media Query:
@media (prefers-color-scheme: dark) { ... }
Так же надо уведомить браузер о поддержке темизации:
<meta name="color-scheme" content="dark light">
или
:root {
color-scheme: dark light;
}

stefanjudis.com/today-i-learned/how-to-tell-browsers-that-your-site-supports-color-schemes/
#browser

А вы используете темизацию?