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

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

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

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3👎2

2.19K views16:07

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

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

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

2.44K views06:07

0:40

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

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

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

❤8👍3

1.92K views16:07

0:12

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

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

@WebDev_Plus

❤21

2.02K views06:07

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

@WebDev_Plus

❤13

1.8K views16:07

https://freesets.dev/

@WebDev_Plus

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

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

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

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

👉

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥5👍4❤2

2.21K views06:07

Устал каждый раз копипастить --set-upstream при пуше новой ветки? Есть git-настройка, которая решает это:

git config --global push.autoSetupRemote true

@WebDev_Plus

❤8🎉2

1.57K views16:07

Лучший каталог пользовательского интерфейса для быстрого создания приборных панелей

С полным набором диаграмм, данных, форм и шаблонов.

✓ Открытый исходный код
✓ +35 компонентов React
✓ Возможность настройки с помощью Tailwind CSS 4

→ tremor․so

@WebDev_Plus

❤3🔥1

1.69K views06:07

CSS совет

Знаешь поле для одноразового пароля (OTP)? Его можно реализовать с помощью всего одного input и нескольких строк CSS.

HTML: <input type="text" maxlength="6">

Код и демо: https://css-tip.com/single-digit-inputs/

Количество символов можно контролировать через атрибут maxlength

@WebDev_Plus

1🔥12

1.82K views11:00

0:50

Media is too big

Отличная демонстрация функции if() в CSS

Функция if() в CSS позволяет использовать условную логику прямо внутри значений CSS-свойств.

CSS постепенно превращается в полноценный язык программирования :)

@WebDev_Plus

1👍17❤4

1.85K views06:07

Эффектная библиотека JavaScript для создания слайдеров с анимацией и эффектом параллакса.

> pnpm i smooothy

@WebDev_Plus

🔥10❤4

1.82K views16:07

Совет по CSS:

создавай динамические тултипы только с помощью CSS, используя функцию attr()

Вы можете увидеть его в действии здесь

@WebDev_Plus

👍8❤3

1.77K views06:07

Прощай, dotenv

💔

В Node теперь можно читать .env файл без установки каких-либо зависимостей.

С помощью метода: process.loadEnvFile()

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

❤12

1.7K views16:07

0:17

Мощный трюк с JavaScript

Вместо console.log для просмотра объектов используй console.table — вывод будет в виде аккуратной и наглядной таблицы. Идеально для отладки структурированных данных

@WebDev_Plus

❤18🔥9

1.72K views06:07

Хочешь добавить крутой эффект жидкого стекла в свой CSS-проект?

Этот бесплатный инструмент позволяет сгенерировать эффект с кучей настроек :)

Источник : http://glass3d.dev

@WebDev_Plus

👍9❤3

1.68K views18:40

Когда-нибудь приходилось сопоставлять сочетания клавиш между платформами, вроде CmdOrCtrl+Enter?

В Electron это есть из коробки, но, странным образом, нет подходящего пакета для стандартных KeyboardEvent в браузере. Поэтому мой товарищ сделал свой ☺️

npm i keymatch

Этот пакет также помогает обрабатывать односимвольные действия — без необходимости вручную проверять, что никакие модификаторы не зажаты.
Особенно удобно для приложений в стиле Linear, где, например, клавиша E — это архив, U — пометить как непрочитанное и т.д.

Как всегда, всё в open source: https://github.com/bholmesdev/keymatch

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥4❤2

1.42K views06:07

0:21