Git-Sim

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

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

Например, можно получить схему работы команды git reset HEAD^ или любой другой.

Подробнее о Git-Sim рассказывается в статье!

Ссылка

#статьи

pure.css

Yahoo! является создателем библиотеки pure.css.

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

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

Подробнее о ней читайте в статье!

Ссылка

#css

scrollend - это новое событие в JavaScript.

До scrollend не было надежного способа определить, завершена ли прокрутка. Это означало, что события могут срабатывать поздно или пока палец пользователя все еще находится на экране. Для решения придумывали разные способы. И вот наконец-то для этого появилось специальное событие.

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

Подробнее o нем читайте в статье!

Ссылка

#js

ScrollyVideo.js - это JavaScript библиотека для воспроизведения и перемотки видео на основе события scroll.

Она совместима с React, Svelte, Vue и нативным JavaScript.

Эффект получается классный! Демо можно глянуть на сайте.

Ссылка

#инструменты

Victory — это библиотека для визуализации данных для React и React Native приложений. Она была создана с использованием React и D3.

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

Ссылка

#react

6 лучших генераторов фона

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

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

Ссылка

#дизайн

node api boilerplate - это шаблон для создания масштабируемого API с помощью Node.js и TypeScript. 

Он был реализован в соответствии с идеями многоуровневой и чистой архитектуры и предметно-ориентированного проектирования (DDD - Domain-Driven Design).

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

Ссылка

#nodejs

Largest Contentful Paint (или LCP) — это одна из трех метрик Core Web Vitals. Эти показатели используются Google для оценки качества UX. LCP измеряет время, необходимое браузеру для загрузки основного содержимого в области просмотра.

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

В статье рассказывается, как оптимизировать этот показатель для изображений!

Ссылка

#статьи

Meta Tags Generator - это онлайн-инструмент для создания полного списка метатегов HTML для сайта.

Результат включает общие метатеги, open graph, schema.org и метатеги социальных сетей.

Ссылка

#html

JavaScript Cookie - это простой и легкий JavaScript API для обработки cookies.

- Работает во всех браузерах
- Принимает любой символ
- Поддерживает ES модули 

Ссылка

#js

LazyBrush - это JavaScript библиотека для рисования плавных кривых и прямых линий с помощью мыши, пальца или любого poniting устройства.

Ссылка

#инструменты

react email - это коллекция нестилизованных компонентов для создания электронных писем с использованием React и TypeScript.

Она упрощает кодирование адаптивных электронных писем и поддерживает темный режим. 

Ссылка

#react

Анимация фона

20 примеров готовых анимаций на чистом CSS, которые вы можете использовать в своих проектах или просто подчерпнуть вдохновение.

Ссылка

#дизайн

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

Ссылка

#nodejs

Анимация высоты

Свойство height со значением auto невозможно плавно анимировать. 

Но теперь высоту элемента можно анимировать с помощью grid свойств!

Ведь не так давно основные браузеры стали поддерживать анимацию свойств grid-template-rows и grid-template-columns.

Пример и подробности в статье.

Ссылка

#css

Plotly.js - это библиотека для построения диаграмм.

Она поставляется с более чем 40 типами диаграмм, включая трехмерные диаграммы, статистические графики и карты SVG.

Plotly.js построена на основе d3.js и stack.gl.

Ссылка 

#js

SortableJS - это JavaScript библиотека для создания функционала перетаскивания элементов списка. 

- Библиотека поддерживает сенсорные устройства и все современные браузеры.

- Можно реализовать функционал перетаскивания из одного списка в другой или в пределах одного списка.

- В SortableJS предусмотрены плавные CSS анимации при перемещении элементов.

Смотрите демо на сайте.

Ссылка 

#инструменты

React Custom Scroll - это библиотека для кастомизации полосы прокрутки для React приложений. 

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

Ссылка 

#react

unfake.png - это инструмент для удаления фэйкового прозрачного фона у картинок PNG.

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

Ссылка 

#дизайн

Learn Privacy - это руководство по защитите конфиденциальности данных пользователей. 

Из материалов вы узнаете о шифровании, fingerprinting и других темах. Кстати, если вы не знали, то fingerprinting — это идентификация конкретного пользователя по характеристикам его настроек. 

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

Ссылка 

#статьи

Атрибут srcset

Атрибут srcset для тэга <img> используется для подключения картинок разного размера на разных разрешениях экрана. Браузер выбирает нужный вариант и отображает его. 

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

Ссылка

#html