This media is not supported in your browser
VIEW IN TELEGRAM
Инструмент для анализа производительности веб-сайта
Сканирует всю страницу и выставляет оценку каждому разделу.
Это как Lighthouse, но с глобальным обзором всего сайта.
Запусти команду:
@WebDev_Plus
Сканирует всю страницу и выставляет оценку каждому разделу.
Это как Lighthouse, но с глобальным обзором всего сайта.
Запусти команду:
npx unlighthouse --site <твой-сайт>
@WebDev_Plus
👍13🔥4❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Идеальная коллекция React-компонентов.
С открытым исходным кодом, поддержкой Tailwind 4.1 и доступностью
Называются UntitledUI. Просто копируй, вставляй и собирай интерфейс:
@WebDev_Plus
С открытым исходным кодом, поддержкой Tailwind 4.1 и доступностью
Называются UntitledUI. Просто копируй, вставляй и собирай интерфейс:
npx untitledui init
@WebDev_Plus
❤7😭2👨💻1
This media is not supported in your browser
VIEW IN TELEGRAM
Знал ли ты, что в Chrome DevTools есть функция watch?
Можно ввести любое JS-выражение — и оно будет обновляться в реальном времени.
Отлично подходит для отслеживания активных элементов или атрибутов
@WebDev_Plus
Можно ввести любое JS-выражение — и оно будет обновляться в реальном времени.
Отлично подходит для отслеживания активных элементов или атрибутов
aria.@WebDev_Plus
🔥5❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Знал об этом? В любом репозитории на GitHub замени «github» на «deepwiki» в URL.
Ты попадёшь на документацию, сгенерированную ИИ.
Можно задавать вопросы как в чате.
Настоящая находка, чтобы разбираться в коде без лишней траты времени
@WebDev_Plus
Ты попадёшь на документацию, сгенерированную ИИ.
Можно задавать вопросы как в чате.
Настоящая находка, чтобы разбираться в коде без лишней траты времени
@WebDev_Plus
🔥12👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Знал, что можно просматривать HTML-файл прямо в VS Code, без открытия в браузере? 😲
Просто кликни правой кнопкой внутри HTML-файла и выбери «Show Preview» — получишь живой предпросмотр с поддержкой редактирования в реальном времени.
@WebDev_Plus
Просто кликни правой кнопкой внутри HTML-файла и выбери «Show Preview» — получишь живой предпросмотр с поддержкой редактирования в реальном времени.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13👍5😍2
Совет по CSS
Знаешь ли ты, что можно использовать
Можно также добавить красивую анимацию появления с помощью простого кода:
@WebDev_Plus
Знаешь ли ты, что можно использовать
offset() для размещения изображений по кругу? А если совместить это с новыми функциями sibling-*(), можно добиться идеального позиционирования, которое работает с любым количеством элементовМожно также добавить красивую анимацию появления с помощью простого кода:
img {
transition: 1s 1s;
@starting-style {
offset: circle(0px) 0% 0deg;
}
}@WebDev_Plus
❤7
This media is not supported in your browser
VIEW IN TELEGRAM
Возможности веб-разработки безграничны, и этот сайт — отличное тому подтверждение
Сайт Adidas Chile — впечатляющий пример того, что можно сделать с современными веб-технологиями.
Надеюсь, это будет полезно
https://adidaschile20.com/
@WebDev_Plus
Сайт Adidas Chile — впечатляющий пример того, что можно сделать с современными веб-технологиями.
Надеюсь, это будет полезно
https://adidaschile20.com/
@WebDev_Plus
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Ищешь логотип в SVG?
Этот сайт предлагает более 500 доступных логотипов!
Оптимизированы и готовы для использования с React, Vue, Angular и SVG:
→ https://svgl.vercel.app
@WebDev_Plus
Этот сайт предлагает более 500 доступных логотипов!
Оптимизированы и готовы для использования с React, Vue, Angular и SVG:
→ https://svgl.vercel.app
@WebDev_Plus
❤6👍2
12 бесплатных сайтов с иллюстрациями для дизайнеров и разработчиков
🔹 blush.design
🔹 drawkit.io
🔹 iconscout.com
🔹 illustrations.co
🔹 icons8.com
🔹 humaaans.com
🔹 undraw.co
🔹 iradesign.io
🔹 storyset.com
🔹 openpeeps.com
🔹 svgrepo.com
🔹 pixeltrue.com
@WebDev_Plus
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Эта библиотека frontend-компонентов действительно впечатляет 🔥
В ней собраны тщательно проработанные UI-компоненты, идеально подходящие для создания современных, чистых и адаптивных интерфейсов
@WebDev_Plus
В ней собраны тщательно проработанные UI-компоненты, идеально подходящие для создания современных, чистых и адаптивных интерфейсов
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12❤3👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Вау! Этот AI-инструмент позволяет составить роадмап для любой профессии, в которую ты хочешь войти! 🔥
Просто нажми «Create Roadmap» и введи свой запрос. Через пару секунд ты получишь интерактивный пошаговый роадмап :)
@WebDev_Plus
Просто нажми «Create Roadmap» и введи свой запрос. Через пару секунд ты получишь интерактивный пошаговый роадмап :)
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3👎2
ХОСТИНГИ для твоей БАЗЫ ДАННЫХ бесплатно
Актуальные лучшие варианты на сегодня ↓
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
Актуальные лучшие варианты на сегодня ↓
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
👍5🔥3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Я открыл лендинг Dia и заметил, что он как-то подлагивает — оказалось, при первом заходе он грузит ~120 МБ данных, а потом каждые 4 секунды в цикле подтягивает ещё по 10 МБ, лол.
Если честно, я бы не доверил кому-то разрабатывать веб-браузер, если они не справляются даже с обычной веб-страницей🥺
@WebDev_Plus
Если честно, я бы не доверил кому-то разрабатывать веб-браузер, если они не справляются даже с обычной веб-страницей
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👍3
This media is not supported in your browser
VIEW IN TELEGRAM
«Как сделать так, чтобы пиксель-арт не был размытым в Chrome?»
Попробуй
@WebDev_Plus
Попробуй
image-rendering: pixelated@WebDev_Plus
❤21
Знал ли ты это про HTML? С помощью атрибута
@WebDev_Plus
start в элементе ol можно начать нумерацию с любого нужного числа:@WebDev_Plus
❤13
This media is not supported in your browser
VIEW IN TELEGRAM
Наконец-то кто-то сделал это нормально.
Не нужно больше копаться в 100500 сайтов в поисках нормальных иконок, шрифтов или UI-компонентов. Здесь всё в одном месте.
Просто, быстро, без тупой регистрации и "ограниченного доступа".
Нет бестолковых каруселей, нет «Pro»-версий, нет душной рекламы. Просто ресурсы — бери и работай.
👉 https://freesets.dev/
@WebDev_Plus
Не нужно больше копаться в 100500 сайтов в поисках нормальных иконок, шрифтов или UI-компонентов. Здесь всё в одном месте.
Просто, быстро, без тупой регистрации и "ограниченного доступа".
Нет бестолковых каруселей, нет «Pro»-версий, нет душной рекламы. Просто ресурсы — бери и работай.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍4❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Устал каждый раз копипастить
@WebDev_Plus
--set-upstream при пуше новой ветки? Есть git-настройка, которая решает это:git config --global push.autoSetupRemote true
@WebDev_Plus
❤8🎉2
This media is not supported in your browser
VIEW IN TELEGRAM
Лучший каталог пользовательского интерфейса для быстрого создания приборных панелей
С полным набором диаграмм, данных, форм и шаблонов.
✓ Открытый исходный код
✓ +35 компонентов React
✓ Возможность настройки с помощью Tailwind CSS 4
→ tremor․so
@WebDev_Plus
С полным набором диаграмм, данных, форм и шаблонов.
✓ Открытый исходный код
✓ +35 компонентов React
✓ Возможность настройки с помощью Tailwind CSS 4
→ tremor․so
@WebDev_Plus
❤3🔥1