Chakra-ui – Простые, модульные и доступные компоненты пользовательского интерфейса для ваших приложений React

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

#GitHub | #TypeScript #React #Web

@react_tg

Frontend-challenges – сборник некоторых «игривых» задач с открытым исходным кодом от различных компаний, чтобы проверить и улучшить ваши знания

Цель данного репозитория - проверить свои знания в фронт-енде с помощью реальных заданий. Здесь находятся тесты по React, HTML & CSS, JS, Git, Redux и многое другое..

#GitHub | #Archive #Interesting #Useful #Web

@react_tg

StaticShield — инструмент для защиты веб-сайтов паролем без необходимости писать код

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

При помощи StaticShield можно защитить и отдельные страницы сайта, и веб-приложение целиком.

Есть интеграция многих популярных фреймворков, включая NextJS, VueJS, React и т.д

Стоимость: #бесплатно

#web #безопасность

Codrops — бесплатная база примеров кода на HTML, CSS и JavaScript

Всё, что собрано на сайте, собрано вручную. При этом помимо базово JS, можно найти материалы по jQuery, React, Vue и Angular.

Стоимость: #бесплатно

#js #html #web

Browserling — тестирование кроссбраузерности онлайн

Работает сервис достаточно просто — он запускает веб-приложения на своих удалённых виртуальных машинах.

Тестируется же всё в совершенно разнообразных браузерах и системах: начиная с Windows 10 и Google Chrome либо Opera, заканчивая Windows 7 и Android 7 с Safari и Internet Explorer

Стоимость: #бесплатно (но есть платные функции)

#web #qa

@react_tg

Популярные инструменты и библиотеки веб-разработки

Автор собрал все известные графические ресурсы, React UI и Vue UI библиотеки, шаблоны HTML, CSS и многое другое в одном Notion файле. Вам нужно только выбрать категорию.

Например, если вы забывали, где найти бесплатные шрифты, то здесь собрано 37 полезных ресурсов для любого проекта:

https://surffers.notion.site/surffers/The-Best-Web-Development-Tools-2cf90734ead54d748edaf706120728d8

#web

@react_tg

Выбор CSS макета: Grid или Flexbox?

В целом Grid и Flex решают одни и те же задачи при разработке макета, но между ними всё же есть отличия:

— Flexbox является популярной системой вёрстки, но она одномерна: разработчики могут работать только со столбцами или строками.
— CSS Grid считается двумерной системой компоновки, с помощью которой можно передвигать элементы между строками и рядами.

Однако для более удобной вёрстки сайта можно совмещать оба модуля и использовать гриды только для каркаса сайта, а флексы — для контента.

Источник: https://odva.pro/blog/flex_or_grid/

#web #css

@react_tg

DevSamples — полезная коллекции чужого кода

С её помощью вы можете найти кусок, который будет полезен именно вам в вашем проекте — его можно свободно скопировать и вставить

Основное внимание сервис уделяет исходным кодам для веб-разработчиков

Стоимость: #бесплатно

#web #css #шпаргалка

@react_tg