Laravel + Программирование

🐳 Добавил docker-compose

Теперь бот можно легко запустить через Docker. Просто собрал нужные контейнеры, запустил — и всё работает.

Что внутри:

• nginx + php + PostgreSQL

• веб-интерфейс для работы с базой — PgAdmin

• и даже Grafana + Loki — чтобы отслеживать логи, ошибки, запросы и всё такое

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

Что дальше?

Все эти фичи — это не просто "что бы было". Их реально просили пользователи. Спасибо каждому, кто не поленился написать Issue ❤️

Как только наберём 80 звёзд на GitHub, начну работу над подключением нового источника сообщений.

Если интересно — вот тут лежит проект на GitHub
Буду рад, если зацените, поставите ⭐ и напишете, что бы вы хотели видеть дальше.

1. Создаём группу в Telegram для фиксирования чатов.

2. В настройках группы включаем темы и добавляем бота в группу с правами администратора.

3. Пользователь пишет боту.

4. Если это новый клиент, бот создаёт отдельную тему в группе.

5. Вы отвечаете в этой теме — бот пересылает ответ клиенту.

🎯 Бонус:
Бот не хранит переписки, фото и файлы — только ID сообщений и клиентов. Никаких баз данных с чувствительной инфой. Всё по-честному.

Что умеет?

• Поддерживает все типы сообщений: текст, голос, видео, документы, фото.

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

• Настраивается примерно за 30-60 минут.

Название темы формируется из символа "#" и id пользователя.

У темы меняется иконка, в зависимости от последнего сообщения. Если последнее сообщение от клиента, то ставится иконка "облачко", а если оно написано со стороны администратора, то ставится "зелёная галочка".

Также вы можете получить информацию о пользователе с котором ведёте общение.Подобное сообщение отправляется при создание темы или после отправки команды /contact.

Как установить?

Процесс установки очень прост. Если что-то не получится — пишите мне в Telegram:
📬 https://t.me/prog_time_bot

В двух словах:

1) Клонируем репозиторий:

2) Создаём бота через BotFather.

3) Создаём приватную группу и включаем темы.

4) Добавляем бота в группу с правами администратора.

5) Получаем ID группы (например, через getmyid_bot).

6) Настраиваем .env файл проекта:

7) Заходим по адресу https://ваш-домен/api/telegram/set_webhook, для регистрации хука.

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

Если было полезно — поставьте звезду на GitHub и расскажите друзьям-разработчикам.
Возможно, кому-то это сэкономит кучу времени и нервов.

Буду рад фидбеку!

Теперь используем laravel-request-testdata для получения тестовых данных:

Выходные данные могут выглядеть так:

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

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

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

Разные форматы правил валидации

Данный модуль может обрабатывать правила валидации в разном формате.

Правила в формате массива

Вы можете описать правила в виде строки, как это было сделано в предыдущих примерах, а можете передать массив со списком параметром:

Использование сложных условий

По мимо типичных правил валидации, модуль также понимает такие правила, как: in, exists, unique и так далее.

Использование класса Rule для описания правил

В некоторых Request классах правила валидации описываются в формате Rule конструкций. Это может быть Rule::unique для проверки на уникальность или Rule::in для проверки на соответствие конкретным значениям.

Генерация тестовых файлов для проверки валидации

Что касается валидации загружаемых файлов, то тут всё немного сложнее. На данный момент мой модуль может сгенерировать файлы таких типов, как: yml, xml, svg, sql, png, log, json, jpg, html, gif и csv.

Количество доступных форматов будет постепенно увеличиваться, по мере развития данного модуля.

Для данной проблемы есть обходной вариант, который мы рассмотрим ниже.

Указание своих тестовых данных

Бываю моменты когда вам нужно для тестирования передавать свои данные, которые более корректно смогут настроить проверку работы приложения.

Для этого необходимо в Request классе создать метод requestTestData(). Данный метод должен возвращать параметры запроса с заполненными тестовыми данными.

Через метод requestTestData() вы также можете передавать тестовые файлы в форматах, которые на данный момент не поддерживаются моим модулем.

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

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

Я надеюсь вам понравилось моё решение. Я буду очень благодарен если вы поддержите данный модуль звёздочкой на GitHub и напишите свой комментарий под данным постом.

Спасибо за то что дочитали данный пост до конца!

AppWrite, SupaBase, Directus, Strapi - не понравились

AppWrite

Есть всё, кроме массового импорта. Мощнейшая вещь.

Но настройка его сложна для новичка, и жрет о 2-4гб оперативки на сервере.

SupaBase

Крутая штука, не допёр как сделать авторизацию 🤣

И тоже с настройкой были траблы.

Плюс мне не нравится HTTP Basic Авторизация по захардкоженным credentials в конфиге прокси сервера.

За то импорт и экспорт нормальный есть

Directus

Очень крутая штука, особенно его Flows.

Стал сильно продуманнее за прошедшие полгода с моей встречи с ним.

Но все так же документация меня вымораживает. Много не раскрытых тем, и скрытых, не упомянутых ограничений.

Например условная нода логики в тех же Flow - не поддерживает тупую проверку входных данных на их наличие... Не уверен что мне когда-либо понравится это. И так же во flows много других ограничений, хотя задумка улетная.

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

Ограничения так же можно обойти, сделав простое расширение, я так пол логики в прошлом проекте сделал, но теряется весь шарм легкости и наглядности. 🥲

Думаю ребята в нужном направлении двигаются, и их время просто ещё не настало, держу звезду на гитзабе за них.

Strapi

HeadlessCMS, да. Крутая, да. Популярная? А вот хз-хз.

Вроде раньше много где встречал про неё статьи, и на гитхабе звезд куча насыпано.

НО КАК? Как может не быть у такой популярной CMS функционала для импорта/экспорта, хотя бы банального!?

Он справделивости ради есть в официальном маркете расширений, но... На прошлую версию 😖 Не без обратной совместимости 😩

Ну я его тоже оставил откисать.

FilamentPHP

Тяжелая артилерия из TALL Stack компонентов и не то что целой системы, а уже целой ЭКОсистемы для любого рода панелей, да еще и на базе Laravel 😤

Ну это козырь был.

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

Думал ребята допили свои проекты, обещающие супер быстрый старт, но везде какие-то проблемы...

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

Меня просто удивляет продуманность этого Filament. Баги есть, не без них, конечно. Как оказалось без ошибок ни то, что люди, роботы не справятся 🙃 (Отсылка к нейросетям)

Тут я за пару дней уложился извернуться и не сорвать сроки, а сделано:

• Админка

• Бизнес логика

• Token Based Авторизация по API
  (пришлось потратить полдня, чтобы разобраться в этой теме, так как я её намеренно игнорировал последние 3 года)

• API c аутентификацией по токену

• Расширение для хрома на WXT + React (TanStack Router, Query, Store)

• Для расширения хромовского - я вообще только с WXT работал и голым React, чисто для верстки.

К сожалению - опять не пригодился Background скрипт, так что всё ещё познать вполне не удастся разработку расширений...

Но с TanStack я не работал. Как-то раз для крипто проекта пытался его настроить и за целый день - так и не вышло. Сейчас же скажу - это мастхэв! Очень крутая штука!

Ну и отказался от Tailwind и SCSS в пользу CSS Modules в паре с clsx. И я не сказал бы, что стили писать долго. В моем случае я заказы беру вообще без дизайна и предпочтений, так что 50-80% от них пишет нейросеть, а я просто не претендую на произведение искусства 😆

Кто работал с этими комбайнами, опишите свой опыт, мб я чего не догоняю...
Конкретно с AppWrite - разбираться не стал в силу ограничения по срокам, а supabase по инерции последним выбыл.

2. Легкость изучения и использования

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

3. Обширная экосистема и сообщества

PHP имеет одну из самых больших и активных экосистем в мире веб-разработки. Вот некоторые ключевые моменты:

• Composer: Мощный менеджер зависимостей для PHP. Composer упрощает интеграцию библиотек, фреймворков и пакетов в проекты, обеспечивая их автоматическое обновление.

• Фреймворки: Laravel, Symfony, CodeIgniter, Yii — это лишь малая часть фреймворков, созданных на PHP. Каждый из них предоставляет мощные инструменты для разработки приложений любого масштаба.

• CMS на базе PHP: WordPress, Drupal, Joomla — все эти популярные системы управления контентом работают на PHP, что делает его ключевым языком для создания веб-сайтов.

4. Высокая производительность и масштабируемость

Современные веб-приложения требуют высокой производительности и способности к масштабированию. В этом отношении PHP также проделал значительный путь. Использование кэширования (опкешей), таких как OPcache, помогает значительно ускорить выполнение скриптов, снижая нагрузку на сервер.

Кроме того, PHP отлично интегрируется с современными решениями для масштабирования и высоких нагрузок, такими как NGINX, Redis, Memcached и Docker. Это делает его идеальным выбором для крупных проектов с миллионами пользователей.

5. Поддержка и обратная совместимость

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

6. Безопасность

Хотя PHP долгое время подвергался критике за возможные проблемы с безопасностью, в последние годы ситуация значительно улучшилась. Современные версии PHP предоставляют встроенные механизмы для защиты от популярных уязвимостей, таких как SQL-инъекции, XSS-атаки и CSRF. Также благодаря сообществу и наличию большого количества библиотек, реализующих лучшие практики безопасности, разработчики могут легко интегрировать дополнительные уровни защиты в свои проекты.

7. Заключение

PHP продолжает развиваться и адаптироваться к требованиям современного веба. Его производительность, богатая экосистема и простота в использовании делают его идеальным инструментом как для новичков, так и для профессионалов. В 2024 году, с выходом PHP 8.x, этот язык еще раз доказал свою жизнеспособность и готовность к новым вызовам.

Если вы до сих пор не использовали PHP в своих проектах, самое время попробовать! Ведь за этим языком стоит огромная поддержка сообщества и множество успешных примеров использования.

Деструктуризация – это способ извлечь значения из массивов или свойства из объектов и присвоить их отдельным переменным. Алиасинг (переименование) позволяет дать новые имена этим переменным в процессе деструктуризации:

Зачем это нужно:

• Улучшает читаемость кода.

• Помогает избежать конфликтов имен – если у вас уже есть переменная city, можно использовать hometown.

• Пригодится при работе с API, если он возвращает данные с неподходящими для вашего кода именами.

Каррирование

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

Та же функция, но с использованием каррирования:

Зачем это нужно:

• Обеспечивает переиспользуемость функций.

• Повышает читаемость и модульность кода.

• Позволяет создавать новые функции на лету, используя уже существующие, например:

debounce() и throttle()

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

debounce() работает так:

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

• Если функция вызывается снова до истечения этого времени, таймер сбрасывается.

В этом примере функция поиска будет вызвана только через 300 миллисекунд после того, как пользователь перестанет вводить текст. Это позволяет избежать лишних запросов к серверу при каждом нажатии клавиши:

throttle() работает так:

• Функция вызывается не чаще, чем раз в заданный интервал времени.

• Если попытка вызвать функцию происходит до истечения интервала, вызов игнорируется.

В этом примере функция handleScroll будет вызываться не чаще, чем раз в 300 миллисекунд, независимо от того, сколько раз пользователь прокрутил страницу за это время:

Мемоизация

Мемоизация – техника оптимизации, связанная с кэшированием промежуточных результатов сложных вычислений. Вместо того чтобы каждый раз заново решать сложную задачу, мы записываем ответ и в следующий раз просто смотрим в наш кэш:

• Когда функция вызывается с определенными аргументами, мы сначала проверяем, вычисляли ли мы уже результат для этих аргументов.

• Если да, мы возвращаем сохраненный результат.

• Если нет, мы выполняем вычисление, сохраняем результат и возвращаем его.

Пример мемоизации при вычислении ряда Фибоначчи:

• Без мемоизации вычисление fibonacci(40) заняло бы очень много времени, потому что функция вызывала бы себя рекурсивно миллионы раз, повторяя одни и те же вычисления.

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

Когда использовать мемоизацию:

• Для функций с очень сложными вычислениями.

• Когда функция часто вызывается с одними и теми же аргументами.

• Когда функция  возвращает один и тот же результат для одних и тех же входных данных.

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

Proxy

Proxy позволяет нам обернуть объект и контролировать взаимодействие с ним. Мы можем перехватывать и изменять основные операции – чтение свойств, их запись, вызов функций и т. д. Proxy особенно полезен, когда нужно добавить дополнительное поведение к объектам, не изменяя их напрямую: это может быть полезно для отладки, для реализации реактивных систем (как в Vue.js), для создания умных объектов и многого другого:

Для чего еще можно использовать Proxy:

• Валидация – проверка данных перед их установкой в объект.

• Логирование – отслеживание использования и изменений свойств объекта.

• Создание вычисляемых на лету свойств.

• Безопасность – можно контролировать доступ к свойствам объекта.

Генераторы

Генераторы – особый тип функций в JavaScript:

• Могут приостанавливать свое выполнение и возобновлять его позже.

• Сохраняют свое состояние между вызовами.

• Используют ключевое слово yield для возврата значений.

Пример итерации по свойствам объекта:

Преимущества генераторов:

• Ленивые вычисления – вычисляют значения, когда они действительно нужны.

• Создание бесконечных последовательностей, не занимающих бесконечный объем памяти.

• Упрощение асинхронного кода – можно сделать асинхронный код более похожим на синхронный.

• Создание кастомных итераторов для сложных структур данных.

Эффективное использование консоли

Помимо console.log(), консоль предоставляет несколько более наглядных методов вывода информации.

• Ошибки и предупреждения:

• Вывод табличных данных:

• Группировка логов:

• Измерение времени выполнения:

• Условное логирование:

• Трассировка стека:

Структурированное клонирование

Структурированное клонирование – метод создания полной (глубокой) копии объекта, включающей все вложенные объекты и структуры данных. Функция structuredClone позволяет выполнять такое клонирование просто и эффективно – в  отличие от JSON.parse(JSON.stringify()), structuredClone корректно обрабатывает Date, Map, Set и другие специальные типы JavaScript:

Структурированное клонирование стоит использовать, если:

• Нужно создать полную, независимую копию сложного объекта.

• Данные не должны изменяться (иммутабельность).

• Необходимо избежать побочных эффектов при изменении данных.

Самовызывающиеся функции

Самовызывающиеся функции (IIFE) выполняются автоматически сразу после их создания. Они создают временную область видимости, в которой можно безопасно определять переменные и функции, не беспокоясь о том, что они будут конфликтовать с другими частями кода и загрязнять глобальную область видимости. Эта техника особенно полезна в старых средах JavaScript, где блочная область видимости (let и const) недоступна, или в сценариях, где требуется немедленное выполнение для инициализации:

Теговые шаблоны

Теговые шаблоны позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. Здесь, например, функция sanitize заменяет опасные символы на их безопасные HTML-сущности, предотвращая выполнение нежелательного кода:

Как можно использовать теговые шаблоны:

• Автоматически обрабатывать пользовательский ввод, предотвращая XSS-атаки.

• Форматировать числа, даты и т. д.

• Безопасно формировать SQL-запросы, экранируя ввод.

• Создавать теги для автоматического перевода строк с одного языка на другой.

📐 Единицы измерения высоты и ширины экрана в современном CSS

На протяжении многих лет разработчики использовали vh и vw, чтобы задавать размеры элементов в процентах от высоты и ширины экрана. Например, чтобы заполнить весь экран элементом, его размеры можно задать как 100vh на 100vw. Однако эти единицы могут работать ненадежно в некоторых случаях, например, при изменении видимой области экрана на мобильных устройствах из-за скрытия адресной строки браузера при прокрутке. Сейчас CSS предлагает новые единицы измерения, которые учитывают динамические изменения интерфейса браузера.

Large Viewport Units (lvh, lvw)

Эти единицы задаются относительно максимального размера видимой области, когда интерфейс браузера минимизирован (например, скрыты панели). По сути, они ведут себя аналогично классическим vh и vw, но с учетом возможных изменений интерфейса. Этот элемент будет занимать весь экран независимо от состояния интерфейса браузера:

.full-page-element {
height: 100lvh;
width: 100lvw;
z-index: -1
background: #f51;
}

Small Viewport Units (svh, svw)

Эти единицы рассчитываются относительно минимального размера видимой области, когда интерфейс браузера максимально расширен (например, когда панели видимы). Пример – статичный заголовок, занимающий 10% от минимальной видимой области:

.header {
height: 10svh;
background-color: #642;
}

Dynamic Viewport Units (dvh, dvw)

Эти единицы измеряются с учетом динамических изменений видимой области при взаимодействии пользователя с интерфейсом (например, при прокрутке страницы или появлении виртуальной клавиатуры). Есть нюансы: использование этих единиц иногда приводит к неожиданным изменениям размеров контента и ухудшению производительности. Пример – элемент, который адаптируется к изменениям высоты видимой области:

.adjustable-element {
height: calc(100dvh - 10svh);
}

Привет!

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В наших еженедельных рассылках ты найдешь:

• Современные JavaScript-фреймворки и библиотеки

• HTML5 и CSS3: новые возможности и трюки

• Оптимизация производительности веб-приложений

• Тестирование и отладка кода

• Лучшие практики UX/UI

• Новые веб-стандарты и браузерные технологии

• Тренды в веб-дизайне и интерфейсах

• Прогрессивные веб-приложения (PWA)

✍️ 50 лучших ресурсов с бесплатными HTML/CSS/JS-шаблонами

• HTMLrev – крупнейшая бесплатная библиотека шаблонов, созданных с использованием всех существующих технологий, включая HTML/CSS/JS, Bootstrap, Tailwind, Bulma, Angular, React, Vue, Next.js, Nuxt, Svelte, Astro, Laravel, Django, Gatsby, Hugo, Jekyll и BCMS.

• HTML5 UP – бесплатная коллекция HTML-шаблонов с уникальным дизайном и высоким качеством кода.

• StyleShout предлагает широкий выбор шаблонов для различных целей, включая SaaS, мобильные приложения, блоги, лендинги, портфолио и агентства.

• One Page Lovе включает шаблоны на Bootstrap, Next.js, Tailwind, Carrd и Framer.

• Cruip предлагает шаблоны на Tailwind, React, Vue, Next.js и Laravel.

• Templatemo – огромная коллекция бесплатных Bootstrap-шаблонов.

• ThemeSelection – библиотека бесплатных и платных шаблонов на Vue, Next.js, Nuxt и Laravel. Специализируется на административных панелях и UI-китах.

• Creative Tim – шаблоны на Bootstrap, Tailwind, Angular, React, Vue, Next.js, Nuxt, Svelte, Laravel, Django и Astro.

• Themesberg предлагает широкий выбор шаблонов для административных панелей, лендингов, дизайн-систем и UI-китов.

• TemplateDeck – небольшая библиотека креативных Bootstrap-шаблонов высокого качества.

• Flout UI – коллекция компонентов Tailwind и готовых шаблонов Next.js.

• Michael Andreuzza – бесплатная подборка шаблонов Astro, созданная опытным и креативным разработчиком.

• Just Good UI – собрание бесплатных и платных шаблонов Astro.

• Startup Landing – подборка бесплатных шаблонов Next.js и Gatsby.

• Web3Templates – красивые шаблоны Tailwind, Astro и Next.js, оптимизированные для конверсий.

• Landify – красивые и современные шаблоны Gatsby.

• Nextjs Templates – широкий выбор шаблонов для разных целей, включая SaaS, стартапы, бизнес, программное обеспечение и блоги.

• LayoutFlow – отличные шаблоны для агентств, портфолио и сайтов услуг.

• Template Foundation – шаблоны, ориентированные на портфолио и личные сайты.

• Templated – продуманные шаблоны на HTML/CSS и Bootstrap.

• Freebiesbug – высококачественные шаблоны, оптимизированные для маркетинга.

• Start Bootstrap – широкий выбор профессиональных шаблонов для стартапов, агентств, портфолио, личных сайтов и блогов.

• MonsterOne – современные шаблоны с несколькими страницами.

• TemplatesJungle – шаблоны для бизнеса, агентств, сервисов, портфолио, электронной коммерции и других целей.

• 3rd Wave Media – коллекция высококачественных шаблонов, ориентированных на ИТ-сферу.

• Tooplate – большая коллекция стильных и современных Bootstrap-шаблонов.

• Pixel Rocket – качественные Bootstrap- и Tailwind-шаблоны.

• HTML Codex – широкий выбор шаблонов для бизнеса, курсов, продуктов, агентств, сервисов, портфолио, резюме и других целей.

• W3Layouts отличается широким выбором шаблонов для бизнеса.

• Bootstrapious – шаблоны с хорошим дизайном и продвинутыми компонентами.

• Untree – стильные шаблоны со сложными элементами.

• Tailwind Toolbox – красивые шаблоны с продуманной структурой.

• Pixelcave – современные шаблоны для сайтов и административных интерфейсов.

• Themefisher – коллекция шаблонов для бизнеса, SaaS, блогов и других целей.

• Tailspark – Tailwind-шаблоны для SaaS-сайтов и лендингов.

• Red Pixel Themes – шаблоны с  хорошим дизайном и многими полезными компонентами.

• Ari Budin – уникальные шаблоны для портфолио, агентств, журналов и дизайн-систем.

• Treact – бесплатная библиотека React-шаблонов.

• DesignToCodes – шаблоны для стартапов, агентств, портфолио и административных панелей.

• UI Lib – библиотека Bootstrap-, Tailwind-, Angular-, React- и Vue-шаблонов.

• AdminMart – профессиональные шаблоны со множеством секций и компонентов.

• WrapPixel – специализируется на административных панелях и UI-китах, предлагает широкий выбор шаблонов с разным дизайном и структурой.

• Tabler – бесплатная библиотека Bootstrap-шаблонов, специализируется на административных панелях.

• KeenThemes – современные шаблоны для админ-панелей со множеством компонентов.

• EaseTemplate – подборка современных Bootstrap-шаблонов.

• BootstrapDash – шаблоны с несколькими страницами и продвинутыми компонентами.

• CodedThemes – профессиональные Bootstrap-, Angular-, React- и Vue-шаблоны с красивым дизайном.

• Salvia Kit предлагает коллекцию Angular-, React-, Vue-, Nuxt- и Svelte-шаблонов. Отличается широким выбором шаблонов для административных панелей.

• JustBoil – Tailwind-, React-, Vue-, Next.js-, Nuxt- и Laravel-шаблоны для сайтов и админ-панелей.

• Iqonic Design – библиотека React- и Vue-шаблонов, предлагает несколько бесплатных пакетов для создания современных интерфейсов.

Автор рассылки: Наталья Кайда