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

Подсветка синтаксиса с помощью Web Component

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

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

@WebDev_Plus

Быстрый совет по VS Code

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

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

@WebDev_Plus

Эта библиотека анимированных компонентов просто отличная

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

🔗: http://paceui.com

@WebDev_Plus

Этот каталог компонентов мощная штука

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

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

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

npm install basecoat-css

@WebDev_Plus

Одна из самых крутых вещей, сделанных с помощью CSS

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

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

🔗: codepen.io/amit_sheen/pen/gbbzbeR

@WebDev_Plus

Наткнулся на полезняшку для тех, кто не любит тащить весь репозиторий ради пары файлов — GitZip

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

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

@WebDev_Plus

Совет по HTML

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

@WebDev_Plus

Функция clamp() отлично подходит для задания минимального и максимального предела, при этом сохраняя оптимальное значение внутри диапазона

@WebDev_Plus

Минималистичный сайт-портфолио с плавной анимацией и резким типографическим акцентом.

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

> https://duroc.ma/en/

@WebDev_Plus

Это одна из самых крутых вещей, сделанных на JavaScript

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

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

🔗: codepen.io/jh3y/pen/LYNZwGm

@WebDev_Plus

Изучать React может быть непросто — но создание проектов и решение задач по программированию действительно помогает.

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

Следующая версия Chrome включает новый JavaScript API для перевода текста с помощью ИИ.

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

@WebDev_Plus

Новый инструмент от Google для проектирования интерфейсов на базе ИИ — Stitch, поразил меня

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

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

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

@WebDev_Plus

Улучшай UI своих веб-страниц с помощью этого каталога анимированных и плавных компонентов

🔗: http://animate-ui.com

@WebDev_Plus

WOW! Этот сайт как соцсеть для AI-промптов

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

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

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

@WebDev_Plus

Это очень крутая библиотека UI-компонентов в ретро-стиле для фронтенд-разработчиков

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

🔗: 8bitcn.com

@WebDev_Plus

Нужен источник вдохновения для веб-дизайна?

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

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

→ http://godly.website 😊

@WebDev_Plus

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

😮 Безопасно?

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

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

@WebDev_Plus

Это одно из самых безумных творений на JavaScript 🤯

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

🔗: henryheffernan.com

@WebDev_Plus