Опенсорсный интернет-магазин на Next.js:

✓ 100 баллов Web Performance «из коробки»
✓ SEO и мета-данные уже оптимизированы
✓ Современный минималистичный UI
✓ Интеграция с Shopify

→ http://github.com/vercel/commerce

@WebDev_Plus

Вот самый простой способ прокачать JavaScript

Просто вставляешь свой JS-код — и приложение наглядно показывает, как движок JavaScript исполняет его шаг за шагом.

Идеальный инструмент, чтобы разобраться в работе JS под капотом.

https://www.jsv9000.app/

@WebDev_Plus

Новая синтаксис для адаптивной вёрстки

Более понятный и с полной поддержкой во всех браузерах:

/* Новый способ с использованием синтаксиса диапазонов */
@media (width >= 300px) {}
@media (width < 1000px) {}
@media (640px <= width < 768px) {}

/* Классический способ */
@media (min-width: 300px) {}
@media (max-width: 1000px) {}
@media (min-width: 640px) and (max-width: 768px) {}

@WebDev_Plus

CSS-подсказка:

С помощью современных фич вроде sibling-index() и if() вы можете воспроизвести поведение селектора :nth-child(An + B).

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

Чтобы легко менять A и B, ведь теперь это переменные

Да-да, для тех, кто вечно гуглит: «как обновить nth-child в чистом CSS?!» — вот решение.

@WebDev_Plus

Самые типовые лейауты для веба и приложений на CSS — с готовым кодом на Flex и Grid, который можно сразу копировать

→ http://layout.bradwoods.io

@WebDev_Plus

Инструмент для анализа производительности веб-сайта

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

Это как Lighthouse, но с глобальным обзором всего сайта.

Запусти команду:

npx unlighthouse --site <твой-сайт>

@WebDev_Plus

Идеальная коллекция React-компонентов.

С открытым исходным кодом, поддержкой Tailwind 4.1 и доступностью

Называются UntitledUI. Просто копируй, вставляй и собирай интерфейс:

npx untitledui init

@WebDev_Plus

Знал ли ты, что в Chrome DevTools есть функция watch?

Можно ввести любое JS-выражение — и оно будет обновляться в реальном времени.
Отлично подходит для отслеживания активных элементов или атрибутов aria.

@WebDev_Plus

Знал об этом? В любом репозитории на GitHub замени «github» на «deepwiki» в URL.

Ты попадёшь на документацию, сгенерированную ИИ.
Можно задавать вопросы как в чате.

Настоящая находка, чтобы разбираться в коде без лишней траты времени

@WebDev_Plus

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

Сайт Adidas Chile — впечатляющий пример того, что можно сделать с современными веб-технологиями.

Надеюсь, это будет полезно

https://adidaschile20.com/

@WebDev_Plus

Ищешь логотип в SVG?

Этот сайт предлагает более 500 доступных логотипов!

Оптимизированы и готовы для использования с React, Vue, Angular и SVG:

→ https://svgl.vercel.app

@WebDev_Plus

Совет по HTML:

Используй <input type="range">, чтобы создать нативный HTML-слайдер.

@WebDev_Plus

ХОСТИНГИ для твоей БАЗЫ ДАННЫХ бесплатно

Актуальные лучшие варианты на сегодня ↓

NEON TECH
PostgreSQL, 500 MB, 190 часов вычислений
→ neon.tech

MONGODB ATLAS
MongoDB, 512 MB, автоматические бэкапы
→ mongodb.com

TURSO
SQLite, 5 GB, до миллиарда чтений
→ turso.com

XATA
PostgreSQL, 15 GB, неограниченный трафик
→ lite.xata.io

SUPABASE
PostgreSQL, 500 MB, 5 GB трафика
→ supabase.com

COCKROACHDB
10 GB хранилища, 50 млн запросов
→ cockroachlabs.com

KOYEB
PostgreSQL, 1 GB, 5 часов выполнения
→ koyeb.com

FREEDB TECH
MySQL, 25 MB, максимум 200 подключений
→ freedb.tech

@WebDev_Plus