WebDev+ | Веб-разработка
8.32K subscribers
505 photos
241 videos
10 files
700 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Забавный JavaScript-эксперимент с событием resize:

Popup Trombone — ссылка

Каждый раз, когда ты меняешь размер окна, звучит тромбон.

Абсолютно бесполезно, но весело и идеально, чтобы потроллить UX

@WebDev_Plus
😁14👍32
5 шпаргалок для веб-разработчиков

@WebDev_Plus
👍212
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь добавить крутые анимированные иконки на сайт или в приложение?

Эта библиотека — сборник красивых и лёгких анимаций Lottie, которые можно сразу вставлять в проект.

👉 https://useanimations.com/

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👌84
В CSS добавили функцию if для создания условных конструкций, уже доступно в Chrome 137

Ещё из интересного — завезли reading-flow и reading-order. Теперь можно управлять таб-навигацией в flex и grid без костылей. Это решает старую проблему в макетах, когда порядок фокуса может не совпадать с визуальным расположением элементов

Подробнее: https://developer.chrome.com/blog/new-in-chrome-137

@WebDev_Plus
7🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
Ищешь вдохновение для создания портфолио как разработчик или дизайнер?

Вот сайт, где собраны десятки крутых примеров портфолио — всё стильно, креативно и с отличными идеями

> https://pafolios.com/

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

@WebDev_Plus
🔥32
This media is not supported in your browser
VIEW IN TELEGRAM
Проблема: хочу убедиться, что switch охватывает все возможные варианты.

Решение: использовать тип never в TypeScript.

Вот как это делается

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Фронтенд-сервер разработки Bun получит поддержку "автоматических рабочих пространств" в Chrome DevTools — теперь можно редактировать файлы прямо в браузере

В целях безопасности эта функция включается только при активном hot reloading и если адрес сокета — 127.0.0.1 или ::1 (локальная машина).


Подробнее об автоматических рабочих пространствах читай здесь: читать 👅

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥2
Нужно отправлять массовые email-рассылки с сайта или приложения?

Этот сервер — бесплатный и с открытым исходным кодом

✓ Неограниченные отправки без затрат
✓ Метрики открытий, кликов и отказов
✓ Совместим с AWS SES, Mailgun и любым SMTP

> https://github.com/aaPanel/BillionMail

@WebDev_Plus
5🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь добавить анимации на свой сайт?

Animista сгенерирует CSS для множества эффектов.

Настраивай — и просто копируй код 💰

http://animista.net

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
11
This media is not supported in your browser
VIEW IN TELEGRAM
Обожаю, когда люди делают креативные штуки для веба

Вот отличный пример — ретро-игра Pong.

Весёлая, необычная и полностью сделана на веб

> http://thatjustinjones.com/tinpong 😎

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Нужны крутые CSS-загрузчики для веб-проекта?

Бери эту библиотеку — огромная коллекция анимаций, сделанных только на CSS, без JS и SVG.
Чисто, просто и красиво — идеально для сплэш-экранов, загрузок и placeholder’ов.

Варианты на любой вкус: спиннеры, полосы, точки, волны и т.п.

> http://cssloaders.github.io

@WebDev_Plus
🔥91
Я вижу, как многие основатели всё ещё строят приложения так же, как и до появления ИИ.

Но если они не адаптируются — упустят возможности.

Почему?

Потому что способ взаимодействия с компьютерами фундаментально меняется.

Раньше интерфейсы были нужны, чтобы объяснять компьютерам, чего мы хотим — кнопки, экраны, пошаговые потоки. Компьютеры не понимали нас.

Но в эпоху ИИ это перестаёт быть актуальным. Нам нужно переосмыслить само взаимодействие человека с машиной.

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

Это радикально меняет подход к интерфейсам и продуктам.

Возьмём приложение для доставки еды. Сейчас нужно сделать 10+ действий: пролистать, отфильтровать, выбрать, кастомизировать, ввести данные, выбрать оплату…

Слишком сложно для такой простой задачи.

А теперь представим AI-first флоу:

> ИИ уже знает ваши предпочтения и ограничения по питанию
> Оплата заранее настроена
> Он предлагает лучший вариант именно для вас, прямо сейчас
> Вы просто нажимаете одну кнопку или говорите "Поехали"

Финальное подтверждение — всё ещё за вами (пока), но остальное — автоматом.

В итоге UI большинства сервисных приложений станет ненужным.
Когда ИИ знает, кто вы и как вы думаете — традиционный интерфейс не нужен. По крайней мере, в привычной форме.

Мы идём от приложений с 10 экранами — к одному.
От перегруженного UI — к минимальным триггерам.
Чем умнее система — тем меньше нужен интерфейс.
В будущем лучший UI — это отсутствие UI.

И чем раньше вы начнёте это учитывать — тем лучше.

Spotify уже движется в эту сторону: чем больше я им пользуюсь, тем меньше ищу. Интерфейс всё ещё есть, но он опционален.

Так что, думая о дизайне, задайте себе вопрос:

> Какие элементы действительно необходимы?
> А что можно свести к минимуму?

Чем меньше — тем лучше. Сейчас это актуально как никогда.

Интерфейсы не исчезнут.
Они просто станут невидимыми. 😎

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥54
This media is not supported in your browser
VIEW IN TELEGRAM
Эта open-source библиотека на Tailwind предлагает красиво оформленные, готовые к использованию компоненты, специально созданные для AI- и GPT-приложений

> http://langui.dev

@WebDev_Plus
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Следующий уровень вдохновения для веб-интерактивов 💥

Нашёл безумно крутую подборку для вдохновения по веб-интеракциям.

Web Interactions Gallery — это тщательно отобранная коллекция лучших веб-моментов:|

от плавных эффектов прокрутки до стильных состояний наведения и бесшовных переходов между страницами.

Идеально для тех, кто хочет прокачать микроанимации и пользовательский опыт

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6💯3
This media is not supported in your browser
VIEW IN TELEGRAM
Если ты используешь Tailwind CSS, то эта шпаргалка — настоящая находка. Она сэкономит кучу времени и нервов

> https://flowbite.com/tools/tailwind-cheat-sheet/

@WebDev_Plus
3🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Возможно, это самое безумное, что сделали на JavaScript 🤯

Summer Afternoon — потрясающий веб-эксперимент на Three.js, который передаёт уютную, ностальгическую атмосферу летнего детства

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Эта демка на Three.js от Renault — просто взрыв мозга

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

Глянь сам: https://renaultespace.littleworkshop.fr/ 💩

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
7👍4