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

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

👨‍💻 Эти каналы реально помогают в изучении программирования и IT Не веришь? Проверь сам: 👩‍💻 Easy GitHub — лучшие репозитории с гитхаба для практики и освоения IT. 🌐 Easy WebDev — всё про Frontend, Backend и сопутствующие технологии. 🖥 Easy Python — лёгкое изучение самого универсального языка в мире. 🔠 Easy InfoSec — ИБ, хакинг, OSINT, анонимность, пентест и многое другое. 🖥 Easy Coder — а здесь вообще про всё, что нужно знать для работы в IT.

🖱 Просто выбери нужное и получай топовые материалы каждый день!

Если ты используешь Tailwind CSS, то эта шпаргалка — настоящая находка. Она сэкономит кучу времени и нервов > https://flowbite.com/tools/tailwind-cheat-sheet/ @WebDev_Plus

Следующий уровень вдохновения для веб-интерактивов 💥 Нашёл безумно крутую подборку для вдохновения по веб-интеракциям. Web Interactions Gallery — это тщательно отобранная коллекция лучших веб-моментов:| от плавных эффектов прокрутки до стильных состояний наведения и бесшовных переходов между страницами. Идеально для тех, кто хочет прокачать микроанимации и пользовательский опыт @WebDev_Plus

Эта open-source библиотека на Tailwind предлагает красиво оформленные, готовые к использованию компоненты, специально созданные для AI- и GPT-приложений > http://langui.dev @WebDev_Plus

Я вижу, как многие основатели всё ещё строят приложения так же, как и до появления ИИ. Но если они не адаптируются — упустят возможности. Почему? Потому что способ взаимодействия с компьютерами фундаментально меняется. Раньше интерфейсы были нужны, чтобы объяснять компьютерам, чего мы хотим — кнопки, экраны, пошаговые потоки. Компьютеры не понимали нас. Но в эпоху ИИ это перестаёт быть актуальным. Нам нужно переосмыслить само взаимодействие человека с машиной. ИИ уже отлично понимает намерения. Он может предсказать, чего мы хотим, даже до того, как мы это скажем. Он быстрее любого человека и может вести себя почти как вы — если дать нужный контекст. Это радикально меняет подход к интерфейсам и продуктам. Возьмём приложение для доставки еды. Сейчас нужно сделать 10+ действий: пролистать, отфильтровать, выбрать, кастомизировать, ввести данные, выбрать оплату… Слишком сложно для такой простой задачи. А теперь представим AI-first флоу: > ИИ уже знает ваши предпочтения и ограничения по питанию > Оплата заранее настроена > Он предлагает лучший вариант именно для вас, прямо сейчас > Вы просто нажимаете одну кнопку или говорите "Поехали" Финальное подтверждение — всё ещё за вами (пока), но остальное — автоматом. В итоге UI большинства сервисных приложений станет ненужным. Когда ИИ знает, кто вы и как вы думаете — традиционный интерфейс не нужен. По крайней мере, в привычной форме. Мы идём от приложений с 10 экранами — к одному. От перегруженного UI — к минимальным триггерам. Чем умнее система — тем меньше нужен интерфейс. В будущем лучший UI — это отсутствие UI. И чем раньше вы начнёте это учитывать — тем лучше. Spotify уже движется в эту сторону: чем больше я им пользуюсь, тем меньше ищу. Интерфейс всё ещё есть, но он опционален. Так что, думая о дизайне, задайте себе вопрос: > Какие элементы действительно необходимы? > А что можно свести к минимуму? Чем меньше — тем лучше. Сейчас это актуально как никогда. Интерфейсы не исчезнут. Они просто станут невидимыми. 😎 @WebDev_Plus

Нужны крутые CSS-загрузчики для веб-проекта? Бери эту библиотеку — огромная коллекция анимаций, сделанных только на CSS, без JS и SVG. Чисто, просто и красиво — идеально для сплэш-экранов, загрузок и placeholder’ов. Варианты на любой вкус: спиннеры, полосы, точки, волны и т.п. > http://cssloaders.github.io @WebDev_Plus

Обожаю, когда люди делают креативные штуки для веба Вот отличный пример — ретро-игра Pong. Весёлая, необычная и полностью сделана на веб > http://thatjustinjones.com/tinpong 😎 @WebDev_Plus

Хочешь добавить анимации на свой сайт? Animista сгенерирует CSS для множества эффектов. Настраивай — и просто копируй код 💰 → http://animista.net @WebDev_Plus

Нужно отправлять массовые email-рассылки с сайта или приложения? Этот сервер — бесплатный и с открытым исходным кодом ✓ Неограниченные отправки без затрат ✓ Метрики открытий, кликов и отказов ✓ Совместим с AWS SES, Mailgun и любым SMTP > https://github.com/aaPanel/BillionMail @WebDev_Plus

Фронтенд-сервер разработки Bun получит поддержку "автоматических рабочих пространств" в Chrome DevTools — теперь можно редактировать файлы прямо в браузере

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

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

Проблема: хочу убедиться, что switch охватывает все возможные варианты. ✅Решение: использовать тип never в TypeScript. Вот как это делается @WebDev_Plus

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог взрослого человека — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ✔️ Как научиться отвлекаться от работы и отдыхать? ✔️ Как совместить кучу рабочих задач и время с семьей? ✔️ Как справиться с прокрастинацией? ✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: https://t.me/+8tLV1q4uotU3Zjgy

Ищешь вдохновение для создания портфолио как разработчик или дизайнер? Вот сайт, где собраны десятки крутых примеров портфолио — всё стильно, креативно и с отличными идеями > https://pafolios.com/ Идеально, чтобы зарядиться визуалами и фишками перед разработкой своего сайта. @WebDev_Plus

В CSS добавили функцию if для создания условных конструкций, уже доступно в Chrome 137 Ещё из интересного — завезли reading-flow и reading-order. Теперь можно управлять таб-навигацией в flex и grid без костылей. Это решает старую проблему в макетах, когда порядок фокуса может не совпадать с визуальным расположением элементов Подробнее: https://developer.chrome.com/blog/new-in-chrome-137 @WebDev_Plus

Хочешь добавить крутые анимированные иконки на сайт или в приложение? Эта библиотека — сборник красивых и лёгких анимаций Lottie, которые можно сразу вставлять в проект. 👉 https://useanimations.com/ @WebDev_Plus

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

Забавный JavaScript-эксперимент с событием resize: Popup Trombone — ссылка Каждый раз, когда ты меняешь размер окна, звучит тромбон. Абсолютно бесполезно, но весело и идеально, чтобы потроллить UX @WebDev_Plus

Не знаешь, какие цвета использовать на сайте? Эта штука соберёт тебе палитру, вдохновлённую покемоном > https://www.pokemonpalette.com/ @WebDev_Plus

Сделай свои 3D-файлы легче и быстрее GLB Optimizer помогает уменьшить размер файлов без потери качества — идеально для производительности в вебе @WebDev_Plus