Совет по 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
This media is not supported in your browser
VIEW IN TELEGRAM
CSS совет
Знаешь поле для одноразового пароля (OTP)? Его можно реализовать с помощью всего одного input и нескольких строк CSS.
HTML:
Код и демо: https://css-tip.com/single-digit-inputs/
Количество символов можно контролировать через атрибут
@WebDev_Plus
Знаешь поле для одноразового пароля (OTP)? Его можно реализовать с помощью всего одного input и нескольких строк CSS.
HTML:
<input type="text" maxlength="6">Код и демо: https://css-tip.com/single-digit-inputs/
Количество символов можно контролировать через атрибут
maxlength@WebDev_Plus
1🔥12
Media is too big
VIEW IN TELEGRAM
Отличная демонстрация функции
Функция
CSS постепенно превращается в полноценный язык программирования :)
@WebDev_Plus
if() в CSS Функция
if() в CSS позволяет использовать условную логику прямо внутри значений CSS-свойств.CSS постепенно превращается в полноценный язык программирования :)
@WebDev_Plus
1👍17❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Эффектная библиотека JavaScript для создания слайдеров с анимацией и эффектом параллакса.
>
@WebDev_Plus
>
pnpm i smooothy@WebDev_Plus
🔥10❤4
Совет по CSS:
создавай динамические тултипы только с помощью CSS, используя функцию
Вы можете увидеть его в действии здесь
@WebDev_Plus
создавай динамические тултипы только с помощью CSS, используя функцию
attr()Вы можете увидеть его в действии здесь
@WebDev_Plus
👍8❤3
Прощай, 💔
В Node теперь можно читать
С помощью метода:
@WebDev_Plus
dotenv В Node теперь можно читать
.env файл без установки каких-либо зависимостей.С помощью метода:
process.loadEnvFile()@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤12
This media is not supported in your browser
VIEW IN TELEGRAM
Мощный трюк с JavaScript
Вместо
@WebDev_Plus
Вместо
console.log для просмотра объектов используй console.table — вывод будет в виде аккуратной и наглядной таблицы. Идеально для отладки структурированных данных @WebDev_Plus
❤18🔥9