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

Связь: @devmangx
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Это одно из самых безумных творений на JavaScript 🤯

Сайт Генри Хеффернана создан с помощью Three.js — JavaScript-библиотеки для 3D-графики и погружает в полностью иммерсивный опыт прямо в браузере.

🔗: henryheffernan.com

@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
Знаешь, что можно расшарить свой localhost прямо из Visual Studio Code — за секунды, без лишнего софта? Это встроенный порт-форвардинг.

😮 Безопасно?

• HTTPS-шифрование
• Открыт только нужный порт
• Видимость — на твой выбор (приват / паблик)
• Без возни с роутером и фаерволом

Но для продакшена не годится

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍2🎉2
This media is not supported in your browser
VIEW IN TELEGRAM
Нужен источник вдохновения для веб-дизайна?

Этот ресурс предоставляет массу идей

Каждый день — новые страницы для вдохновения.

http://godly.website 😊

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
4
This media is not supported in your browser
VIEW IN TELEGRAM
Это очень крутая библиотека UI-компонентов в ретро-стиле для фронтенд-разработчиков

Вдохновлённая 8-битной эстетикой, она идеально подойдёт для добавления ностальгического пиксель-арт настроения в современные веб-проекты. 🥹

🔗: 8bitcn.com

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍51
This media is not supported in your browser
VIEW IN TELEGRAM
WOW! Этот сайт как соцсеть для AI-промптов

Огромная коллекция качественных промптов по темам:

🔸Программирование
🔸Дизайн
🔸Продуктивность
…и многое другое!

🔗: prompts.chat — исследуй, сохраняй, делись.

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
4
This media is not supported in your browser
VIEW IN TELEGRAM
Улучшай UI своих веб-страниц с помощью этого каталога анимированных и плавных компонентов

🔗: http://animate-ui.com

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍104
This media is not supported in your browser
VIEW IN TELEGRAM
Новый инструмент от Google для проектирования интерфейсов на базе ИИ — Stitch, поразил меня

Я ввёл запрос, и всего за несколько секунд он сгенерировал:

Эстетичный дизайн UI
Файл Figma
HTML-код, готовый к использованию в продакшене

Попробовать можно здесь: stitch.withgoogle.com

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
5
Следующая версия Chrome включает новый JavaScript API для перевода текста с помощью ИИ.

Он бесплатный, так как работает прямо на устройстве пользователя. Что думаешь? 🥰

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍93
This media is not supported in your browser
VIEW IN TELEGRAM
Небольшой, но стильный трюк для разработчиков

Сгенерируй визитку в стиле VS Code, идеально подходит для README на GitHub, личных сайтов или просто по фану.

Просто введи свои данные и карточка будет собрана автоматически - card.hekmon.com 😂

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥72
Изучать React может быть непросто — но создание проектов и решение задач по программированию действительно помогает.

Этот практический курс как раз об этом.

В нём Боб проводит через более чем 170 задач и 6 проектов, чтобы обучить основам React 😊

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Это одна из самых крутых вещей, сделанных на JavaScript

Это гениально и смешно =)

Кажется, что ты сможешь поставить галочку… но так ли это? 😂

🔗: codepen.io/jh3y/pen/LYNZwGm

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍3😁3🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Минималистичный сайт-портфолио с плавной анимацией и резким типографическим акцентом.

Подходит как референс для дизайнеров, кто хочет подчеркнуть индивидуальность через лаконичный UI ❤️

> https://duroc.ma/en/

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥4👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Функция clamp() отлично подходит для задания минимального и максимального предела, при этом сохраняя оптимальное значение внутри диапазона

@WebDev_Plus
10🔥5
Совет по HTML

Можно использовать атрибут prefetch для предварительной загрузки важных ресурсов с целью оптимизации времени загрузки и улучшения пользовательского опыта.

@WebDev_Plus
👍72👌2
This media is not supported in your browser
VIEW IN TELEGRAM
Наткнулся на полезняшку для тех, кто не любит тащить весь репозиторий ради пары файлов — GitZip

Расширение для браузера, которое позволяет скачивать отдельные файлы или папки из любого GitHub-репо

Доступно в Chrome, Edge и Firefox

@WebDev_Plus
👍5🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Одна из самых крутых вещей, сделанных с помощью CSS

Этот компонент с реакцией на приближение (proximity reactions) реально завораживает.

Всего 4 строки JavaScript и всё остальное написано на чистом CSS

🔗: codepen.io/amit_sheen/pen/gbbzbeR

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Этот каталог компонентов мощная штука

Основан на shadcn, но не требует React.

Совместим с Angular, Vue, Astro, React.

И, при желании, можно кастомизировать с помощью Tailwind.

npm install basecoat-css


@WebDev_Plus
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Эта библиотека анимированных компонентов просто отличная

С открытым исходным кодом и множеством готовых к использованию, эффектных анимированных UI-компонентов — идеально, чтобы выделить ваш сайт или приложение.

🔗: http://paceui.com

@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
Быстрый совет по VS Code

Используй сочетание клавиш Ctrl + Shift + F, чтобы быстро выполнить поиск по всем файлам проекта

Очень удобно для нахождения нужных фрагментов кода без открытия каждого файла

@WebDev_Plus
10👍4
Подсветка синтаксиса с помощью Web Component

Чистый JavaScript и максимально простое использование

Установка: инструкция 📝

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
В VS Code Insiders теперь по умолчанию включён IntelliSense в терминале

Да-да, теперь терминал сам подскажет тебе, что писать — без всяких плагинов и настроек.

Переключаешь ветку? Появятся предложения.
Запускаешь npm-скрипт? Подскажет команды.

Всё работает из коробки

@WebDev_Plus
👍12🔥2