Онлайн инструмент для генерации отзывчивых изображений

https://www.responsivebreakpoints.com/
#tools

Крутая математическая библиотека с говорящим названием mathjs и онлайн калькулятор на ее основе

https://mathjs.org/
https://calque.io/
#tools #library

Мониторинг производительности веб приложений

https://blog.bitsrc.io/understanding-web-performance-monitoring-2ed52f97a974

Chronologer отображает результаты бенчмарка на историю коммитов

https://github.com/dandavison/chronologer
#tools

GitUI псевдографический интерфейс для гита

https://extrawurst.itch.io/gitui
#tools #git

Xterm.js front-end компонент для реализации терминала в браузере. Написан на TypeScript, используется в таких проектах как VS Code, Hyper и Theia.

https://github.com/xtermjs/xterm.js
#opensource #library

Cashify
Легкая библиотека для конвертации валют
- Удобная
- Без зависимостей

github.com/xxczaki/cashify
#library #typescript

Рецепты по приготовлению оффлайн-приложений

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

Это достигается использованием ServiceWorker и Cache API.
Для каждого случая есть небольшой шаблон кода

habr.com/ru/post/517672/
#pwa #serviceworker

Еще несколько возможностей Chrome DevTools
- добавление, включение и выключение css классов
- прокрутка до элемента
- создание и запуск снипетов кода
- designMode

levelup.gitconnected.com/5-lesser-known-features-of-chrome-devtools-1ff3cd2a7518
#devtools

Защитники типа
Если переменная имеет тип Объединение (Union) TS может уточнить тип переменной для конкретного учатка кода, например после проверки typeof.
Конструкции, которые могут уточнять тип переменной называются Защитниками Типа.
Встроеных защитников бывает недостаточно, и тогда программист может объявить своего защитника - функцию, возвращающую предикат типа вида argumentName is Type.

xsltdev.ru/typescript/ts38/37/
#typescript

Кастомные radio / checkbox полей с правильным выравниванием
Весьма подробно, с демкой, объясняется как используя только html и css сделать качественные инпуты

codyhouse.co/blog/post/custom-accessible-radio-checkbox-buttons-vertical-alignment
#css

Modern WASM Starter
Стартовый шаблон для быстрого создания npm пакетов с WebAssembly
- C++, CMake
- менеджмент памяти
- автоматическая генерация TS деклараций
- jest
- prettier
- GitHub actions

github.com/TheLartians/modern-wasm-starter
#wasm #cpp

Проект Moment.js закрывается
Разработчики этой библиотеки останавливают разработку новых фич и будут только исправлять баги.
Библиотека появилась весьма давно из-за неудобства нативных средств работы с датами, но на данный момент имела почти не исправимые проблемы, т.к. проектировалась давно. И все же она успела помочь огромному количеству разработчиков.

Страница статуса проекта
momentjs.com/docs/#/-project-status

Альтернативы
date-fns date-fns.org
day.js github.com/iamkun/dayjs
luxon moment.github.io/luxon
#library

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