This media is not supported in your browser
VIEW IN TELEGRAM
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
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
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по использованию инструментов Chrome Dev Tools
Быстрый способ включить/выключить кэш при разработке фронтенда
@WebDev_Plus
Быстрый способ включить/выключить кэш при разработке фронтенда
@WebDev_Plus
🤣3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Приложение Stickies на macOS - недооценённый инструмент.
– Маленькие плавающие окошки для заметок в течение дня
– Можно закрепить поверх всех окон — остаются на виду
– Есть цветовая маркировка для организации мыслей
Скорее всего, не обновлялось ещё с 90-х, но стабильное ПО не требует лишнего вмешательства.
@WebDev_Plus
– Маленькие плавающие окошки для заметок в течение дня
– Можно закрепить поверх всех окон — остаются на виду
– Есть цветовая маркировка для организации мыслей
Скорее всего, не обновлялось ещё с 90-х, но стабильное ПО не требует лишнего вмешательства.
@WebDev_Plus
👍5💯3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS
Иногда проще задать поворот, используя единицу
@WebDev_Plus
Иногда проще задать поворот, используя единицу
turn вместо deg, особенно когда нужно указать значение больше 360 градусов.1 turn = 360 deg
@WebDev_Plus
❤8👍4🔥4💯1
This media is not supported in your browser
VIEW IN TELEGRAM
Нужна форма с пошаговой логикой и условиями?
С этой библиотекой ты реализуешь это, просто написав JSON.
✓ Поддерживает условия, переменные, циклы и многое другое
✓ Избавляет от тысяч строк трудночитаемого кода
✓ Отлично работает с React
@WebDev_Plus
С этой библиотекой ты реализуешь это, просто написав JSON.
✓ Поддерживает условия, переменные, циклы и многое другое
✓ Избавляет от тысяч строк трудночитаемого кода
✓ Отлично работает с React
$ npm install formity
@WebDev_Plus
❤4💯2
1👍10🔥2💯2
This media is not supported in your browser
VIEW IN TELEGRAM
VS Code Хак
Устали постоянно набирать
Настройте свой шорткат, например😎
Смотрите видео с пошаговой демонстрацией.
@WebDev_Plus
Устали постоянно набирать
console.log()?Настройте свой шорткат, например
cc → console.log(), срабатывающий при нажатии Tab Смотрите видео с пошаговой демонстрацией.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10👍3🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Эта библиотека фронтенд-компонентов - чистое кино 🔥
Красивые и современные UI-компоненты на все случаи жизни, идеально подходящие для твоих фронтенд- и React-проектов.
Надеюсь, будет полезно — https://nurui.vercel.app/
@WebDev_Plus
Красивые и современные UI-компоненты на все случаи жизни, идеально подходящие для твоих фронтенд- и React-проектов.
Надеюсь, будет полезно — https://nurui.vercel.app/
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6💯2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
tldraw — лучшая аппликация для совместной работы на виртуальной доске 🏆
🔸 Внимание к деталям на высшем уровне. Даже штрихи масштабируются так, чтобы оставаться симметричными
🔸 Клавиатурные шорткаты отрабатывают мгновенно: shift+2 — сфокусироваться на выделении, shift+1 — показать всё
🔸 Есть SDK, который можно встроить куда угодно
@WebDev_Plus
@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
Что, в Chrome теперь встроен API для AI-суммаризации
🔸 Без API ключей, без интернета Работает локально
🔸 Модель подгружается по запросу
🔸 Доступен глобально в последней версии Chrome Работает и в расширениях
У меня теперь куча идей для расширений под Chrome
https://developer.chrome.com/docs/ai/summarizer-api?hl=ru
@WebDev_Plus
У меня теперь куча идей для расширений под Chrome
https://developer.chrome.com/docs/ai/summarizer-api?hl=ru
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
This media is not supported in your browser
VIEW IN TELEGRAM
Классный CSS трюк от подписчика
Можно легко изменить цвет курсора ввода с помощью свойства
@WebDev_Plus
Можно легко изменить цвет курсора ввода с помощью свойства
caret-color в CSS.@WebDev_Plus
❤14
Топ 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
Позволяет менять цвет интерфейса VS Code для каждого проекта. Удобно, если работаешь сразу над несколькими.
Помогает выжать максимум из Git прямо в VS Code.
Автоматически форматирует код, чтобы стиль был единообразным.
Дает возможность парного программирования и удаленной отладки.
Позволяет создавать, управлять и отлаживать контейнеризированные приложения.
Добавляет в VS Code клиента для работы с REST-запросами.
Запускает локальный dev-сервер с автоматической перезагрузкой при изменениях.
Помогает писать более понятные и информативные комментарии в коде.
Ищет орфографические ошибки в коде и повышает читаемость.
Позволяет запускать сниппеты кода на разных языках.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Прокачай SQL, практикуясь на реальных задачах
Технички от лёгких до уровня «эксперт» из топовых IT-компаний
→ datalemur․com
@WebDev_Plus
Технички от лёгких до уровня «эксперт» из топовых IT-компаний
→ datalemur․com
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Нужно сверстать письма? Не используй таблицы
React Email — это библиотека, которая тебе нужна
✓ Готовые UI-компоненты
✓ Предпросмотр письма прямо при разработке
✓ Работает в Gmail, Outlook и других клиентах
✓ Готовые шаблоны, которые можно просто скопировать и вставить
→
@WebDev_Plus
React Email — это библиотека, которая тебе нужна
✓ Готовые UI-компоненты
✓ Предпросмотр письма прямо при разработке
✓ Работает в Gmail, Outlook и других клиентах
✓ Готовые шаблоны, которые можно просто скопировать и вставить
→
npx create-email@WebDev_Plus
❤8
This media is not supported in your browser
VIEW IN TELEGRAM
Король веб-графиков обновился
Только что вышел Apache ECharts 6
✓ Поддержка тёмного режима
✓ Улучшения в стандартной теме
✓ Новые кастомные типы графиков
✓ Смена темы без перезапуска UI
@WebDev_Plus
Только что вышел Apache ECharts 6
✓ Поддержка тёмного режима
✓ Улучшения в стандартной теме
✓ Новые кастомные типы графиков
✓ Смена темы без перезапуска UI
npm install echarts
@WebDev_Plus
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Чтобы научиться программировать, нужно ПРАКТИКОВАТЬСЯ
Практические проекты на JavaScript с нуля
✓ Бесплатно
✓ Открытый исходный код
✓ Без зависимостей и фреймворков
https://www.javascript100.dev/
@WebDev_Plus
Практические проекты на JavaScript с нуля
✓ Бесплатно
✓ Открытый исходный код
✓ Без зависимостей и фреймворков
https://www.javascript100.dev/
@WebDev_Plus
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Это расширение для VS Code реально полезное
Оно позволяет сгенерировать структуру файлов вашего проекта в разных форматах — JSON, SVG, Markdown или ASCII, с иконками или без них
@WebDev_Plus
Оно позволяет сгенерировать структуру файлов вашего проекта в разных форматах — JSON, SVG, Markdown или ASCII, с иконками или без них
@WebDev_Plus
❤12👍1