WebDev+ | Веб-разработка

Наконец-то кто-то сделал это нормально.

Не нужно больше копаться в 100500 сайтов в поисках нормальных иконок, шрифтов или UI-компонентов. Здесь всё в одном месте.

Просто, быстро, без тупой регистрации и "ограниченного доступа".

Нет бестолковых каруселей, нет «Pro»-версий, нет душной рекламы. Просто ресурсы — бери и работай.

👉 https://freesets.dev/

@WebDev_Plus

Знал ли ты это про HTML? С помощью атрибута start в элементе ol можно начать нумерацию с любого нужного числа:

@WebDev_Plus

«Как сделать так, чтобы пиксель-арт не был размытым в Chrome?»

Попробуй image-rendering: pixelated

@WebDev_Plus

Я открыл лендинг Dia и заметил, что он как-то подлагивает — оказалось, при первом заходе он грузит ~120 МБ данных, а потом каждые 4 секунды в цикле подтягивает ещё по 10 МБ, лол.

Если честно, я бы не доверил кому-то разрабатывать веб-браузер, если они не справляются даже с обычной веб-страницей 🥺

@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

Вау! Этот AI-инструмент позволяет составить роадмап для любой профессии, в которую ты хочешь войти! 🔥

Просто нажми «Create Roadmap» и введи свой запрос. Через пару секунд ты получишь интерактивный пошаговый роадмап :)

@WebDev_Plus

Эта библиотека frontend-компонентов действительно впечатляет 🔥

В ней собраны тщательно проработанные UI-компоненты, идеально подходящие для создания современных, чистых и адаптивных интерфейсов

@WebDev_Plus

Совет по HTML:

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

@WebDev_Plus

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

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

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

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

→ https://svgl.vercel.app

@WebDev_Plus

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

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

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

https://adidaschile20.com/

@WebDev_Plus

Совет по CSS

Знаешь ли ты, что можно использовать offset() для размещения изображений по кругу? А если совместить это с новыми функциями sibling-*(), можно добиться идеального позиционирования, которое работает с любым количеством элементов

Можно также добавить красивую анимацию появления с помощью простого кода:

img {
  transition: 1s 1s; 
  @starting-style {
    offset: circle(0px) 0% 0deg;
  }
}

@WebDev_Plus

Знал, что можно просматривать HTML-файл прямо в VS Code, без открытия в браузере? 😲

Просто кликни правой кнопкой внутри HTML-файла и выбери «Show Preview» — получишь живой предпросмотр с поддержкой редактирования в реальном времени.

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

@WebDev_Plus

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

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

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

npx untitledui init

@WebDev_Plus

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

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

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

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

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

@WebDev_Plus

Сайты для бесплатных HTML/CSS шаблонов

🔸html5up.net
🔸htmlrev.com
🔸free-css.com
🔸templated.co
🔸freehtml5.co
🔸startbootstrap.com
🔸bootstrapmade.com
🔸bootswatch.com
🔸bootstraptaste.com
🔸cruip.com
🔸styleshout.com
🔸tooplate.com
🔸html5xcss3.com

@WebDev_Plus

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

→ http://layout.bradwoods.io

@WebDev_Plus