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

Нужно сверстать письма? Не используй таблицы

React Email — это библиотека, которая тебе нужна

✓ Готовые UI-компоненты
✓ Предпросмотр письма прямо при разработке
✓ Работает в Gmail, Outlook и других клиентах
✓ Готовые шаблоны, которые можно просто скопировать и вставить

→ npx create-email

@WebDev_Plus

Прокачай SQL, практикуясь на реальных задачах

Технички от лёгких до уровня «эксперт» из топовых IT-компаний

→ datalemur․com

@WebDev_Plus

Топ 10 расширений для VS Code

🔸Peacock

Позволяет менять цвет интерфейса VS Code для каждого проекта. Удобно, если работаешь сразу над несколькими.

🔸GitLens

Помогает выжать максимум из Git прямо в VS Code.

🔸Prettier

Автоматически форматирует код, чтобы стиль был единообразным.

🔸Live Share

Дает возможность парного программирования и удаленной отладки.

🔸Docker

Позволяет создавать, управлять и отлаживать контейнеризированные приложения.

🔸REST Client

Добавляет в VS Code клиента для работы с REST-запросами.

🔸Live Server

Запускает локальный dev-сервер с автоматической перезагрузкой при изменениях.

🔸Better Comments

Помогает писать более понятные и информативные комментарии в коде.

🔸Code Spell Checker

Ищет орфографические ошибки в коде и повышает читаемость.

🔸Code Runner

Позволяет запускать сниппеты кода на разных языках.

@WebDev_Plus

Классный CSS трюк от подписчика

Можно легко изменить цвет курсора ввода с помощью свойства caret-color в CSS.

@WebDev_Plus

Что, в Chrome теперь встроен API для AI-суммаризации

🔸Без API ключей, без интернета Работает локально
🔸Модель подгружается по запросу
🔸Доступен глобально в последней версии Chrome Работает и в расширениях

У меня теперь куча идей для расширений под Chrome

https://developer.chrome.com/docs/ai/summarizer-api?hl=ru

@WebDev_Plus

tldraw — лучшая аппликация для совместной работы на виртуальной доске 🏆

🔸Внимание к деталям на высшем уровне. Даже штрихи масштабируются так, чтобы оставаться симметричными
🔸Клавиатурные шорткаты отрабатывают мгновенно: shift+2 — сфокусироваться на выделении, shift+1 — показать всё
🔸Есть SDK, который можно встроить куда угодно

@WebDev_Plus

Switch case? If else?

Нет.

new Map

@WebDev_Plus

немного мотивации

@WebDev_Plus

Эта библиотека фронтенд-компонентов - чистое кино 🔥

Красивые и современные UI-компоненты на все случаи жизни, идеально подходящие для твоих фронтенд- и React-проектов.

Надеюсь, будет полезно — https://nurui.vercel.app/

@WebDev_Plus

VS Code Хак

Устали постоянно набирать console.log()?

Настройте свой шорткат, например cc → console.log(), срабатывающий при нажатии Tab 😎

Смотрите видео с пошаговой демонстрацией.

@WebDev_Plus

К слову о "смерти" PHP - по некоторой статистике PHP используют более 74% веб-сайтов

@WebDev_Plus

Нужна форма с пошаговой логикой и условиями?

С этой библиотекой ты реализуешь это, просто написав JSON.

✓ Поддерживает условия, переменные, циклы и многое другое
✓ Избавляет от тысяч строк трудночитаемого кода
✓ Отлично работает с React

$ npm install formity

@WebDev_Plus

Совет по CSS

Иногда проще задать поворот, используя единицу turn вместо deg, особенно когда нужно указать значение больше 360 градусов.

1 turn = 360 deg

@WebDev_Plus

Приложение Stickies на macOS - недооценённый инструмент.

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

Скорее всего, не обновлялось ещё с 90-х, но стабильное ПО не требует лишнего вмешательства.

@WebDev_Plus

Совет по использованию инструментов Chrome Dev Tools

Быстрый способ включить/выключить кэш при разработке фронтенда

@WebDev_Plus

5 БЕСПЛАТНЫХ инструментов для веб-разработчиков

http://warp.dev - Альтернатива Claude Code

http://sevalla.com - Full-stack хостинг и бесплатный статический сайт

http://usehooks.com - React hooks с примерами

http://ray.so - Создание изображений из фрагментов кода

http://sarthology.github.io/Animatopy - Анимационные сниппеты CSS

@WebDev_Plus

Совет по JavaScript

Используй новый метод Object.groupBy() — теперь можно группировать объекты по любому свойству в одну строку

Прощай, громоздкие reduce-хаки - привет чистый и понятный код :)

@WebDev_Plus

Возможно, ты годами пользуешься Google Chrome — но знал ли ты об этом простом, но мощном приёме? 🤯

В инструментах разработчика браузера есть встроенная возможность делать скриншоты веб-страниц — без дополнительных расширений и сторонних утилит :)

@WebDev_Plus

Хочешь добавить аутентификацию на свой сайт?
С этой библиотекой это займёт всего несколько минут.

✓ Бесплатно
✓ С открытым исходным кодом
✓ Совместимо с React, Astro, Vue, Next.js и другими
✓ Интеграция с Google, GitHub, X, Meta, Discord и многими другими

→ http://github.com/better-auth/better-auth

@WebDev_Plus