CSS совет:

Используй свойство scroll-margin-top, чтобы липкий (sticky) хедер не перекрывал контент при переходе по якорю (#anchor).

Прочитай этот гайд из 23 нестандартных приёмов и трюков для CSS, которые редко встречаются в стандартных туториалах ✊

@WebDev_Plus

Преобразуй любой репозиторий GitHub в чистую документацию за секунды

Просто замени github на gittodoc в URL репозитория — и мгновенно получишь удобный вид документации

Особенно полезно для быстрой индексации AI-инструментами для кода, такими как Cursor ✊

@WebDev_Plus

Знаешь ли ты, что элемент <input> может использовать атрибут form, чтобы связаться с формой по её id — и быть отправленным вместе с этой формой, даже если он находится вне её? 👀

В этом примере на PHP поле ввода, размещённое вне формы, добавляет аргумент в URL. При этом выводится только второе значение параметра (1337), связанное с этой формой.

@WebDev_Plus

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

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

🔗: henryheffernan.com

@WebDev_Plus

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

😮 Безопасно?

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

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

@WebDev_Plus

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

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

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

→ http://godly.website 😊

@WebDev_Plus

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

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

🔗: 8bitcn.com

@WebDev_Plus

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

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

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

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

@WebDev_Plus

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

🔗: http://animate-ui.com

@WebDev_Plus

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

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

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

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

@WebDev_Plus

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

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

🔗: codepen.io/jh3y/pen/LYNZwGm

@WebDev_Plus

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

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

> https://duroc.ma/en/

@WebDev_Plus

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

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

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

🔗: codepen.io/amit_sheen/pen/gbbzbeR

@WebDev_Plus

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

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

🔗: http://paceui.com

@WebDev_Plus