Zedux — это новый менеджер состояний React, основанный на атомах и композаблах. Проект долгое время был в разработке и буквально на днях был выпущен его первый релиз.
 
Да, менеджеров состояний для React уже и так немало. В статье как раз рассказывается, почему он был создан и какие проблемы решает.

Ссылка

#react

Figma Dev Mode

Совсем недавно в Figma появился новый функционал Dev Mode. Теперь можно получить не только готовый CSS код, но и HTML и код для компонента React, Vue и других.

Например, вы пишете на React, а для стилей используете Tailwind CSS. Выбрав эти технологии в опциях, на выходе будет сгенерирован HTML код для компонента, стили, файл config для Tailwind CSS, даже файл package.json и многое другое.

Подробнее о новом функционале в статье.

Ссылка

#дизайн

DevTools Tips & Tricks

В DevTools существуют десятки панелей и сотни функций для ускорения процесса отладки. Автор статьи делится самыми популярными советами по DevTools, которые могут повысить вашу продуктивность.

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

Об этом и других советах читайте в статье.

Ссылка

#статьи

margin-trim

Свойство margin-trim позволяет контейнеру обрезать поля своих дочерних элементов там, где они примыкают к краям контейнера. Пока оно в экспериментальной стадии и поддерживается только браузером Safari.

На первый взгляд свойство очень полезное. Подробнее о нем в статье!

Ссылка

#css

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

Ссылка

#js

SVG.js - это библиотека для манипуляции и анимации SVG. Мало весит и простая в использовании!

Ссылка

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

React-Chrono — это универсальный компонент, который дает возможность с легкостью и быстро создавать такой UI элемент, как временная шкала.

React-Chrono полностью кастомизируемый, что позволяет адаптировать компонент к конкретным потребностям. Он предлагает три режима: горизонтальный, вертикальный и вертикальный c чередованием.

Ссылка

#react

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

В общем, можно классный элемент в дизайн добавить, а если его еще и анимировать! Доступно для скачивания в формате PNG и SVG.

Ссылка

#дизайн

Qwick - это фронтенд-фрэймворк от разработчика Angular Misko Hevery. 

У большинства современных фреймворков проблема с метрикой - Time to interactive. Все дело в том, что после отправки HTML сгенерированного на сервере, необходимо также загрузить фреймворк и код приложения, запустить его, и только после этого можно обрабатывать события.

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

Ссылка

Эффект капания воды

Делимся ссылкой на CodePen, в котором реализован эффект капания воды. Выглядит необыкновенно реалистично и это на чистом CSS!

Ссылка

#css

Chat2Code - это AI чат, который может генерировать веб-компоненты за считанные секунды. В настройках можно задать для какого фреймворка или библиотеки генерировать: React, Vue, Angular, Svelte.

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

Интересно пощупать и посмотреть на сколько он хорош!

Ссылка 

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

React Portals

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

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

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

Ссылка

#react

Expresso TS - это Node.js + TypeScript фрэймворк для быстрого создания масштабируемых и простых в обслуживании серверных приложений.

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

Ссылка

#nodejs

AI генераторы картинок

Никак не можете найти подходящую картинку на просторах интернета? Можно воспользоваться AI генераторами картинок. В статье как раз представлен список с ссылками на такие инструменты. 

Ссылка

#дизайн

12 советов для отладки кода

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

Автор статьи делится советами и инструментами, которые использует при отладке.

Особенно интересный про git bisect - бинарный поиск, чтобы найти коммит, который привел к ошибке.

Ссылка

#статьи

htmx - это библиотека, которая предлагает свежий взгляд на создание динамичного веб-интерфейса за счет использования таких функций, как Ajax и CSS transitions прямо в HTML.

Подробнее о библиотеке и как она работает читайте в статье.

Ссылка

#html

Уязвимости сервера Node.js 

В статье рассказывается о распространенных уязвимостях сервера:

- Инъекционные атаки
- Межсайтовый скриптинг (XSS)
- DoS (Denial-of-Service - "отказ в обслуживании")
- Неправильная аутентификация и авторизация
- Небезопасные прямые ссылки на объекты (IDOR) 

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

Ссылка

#nodejs

SOLID — это аббревиатура пяти основных принципов проектирования в объектно-ориентированном программировании — Single responsibility, Open-closed, Liskov substitution, Interface segregation и Dependency inversion.

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

В статье даются практические примеры принципов SOLID в JavaScript.

Ссылка на статью

#js