Инструменты программиста
14.2K subscribers
1.44K photos
106 videos
4 files
1.65K links
Полезные инструменты для программистов — бесплатные и платные

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Регистрация в перечне РКН: https://tprg.ru/mX0S
Download Telegram
NoCodeAPI — простой способ для frontend-разработчика подключить своё приложение к сторонним сервисам

Возможно даже самый простой, так как не требует написания дополнительного кода и выделенного сервера. Платформа поддерживает работу с Google Sheet, Airtable, Google Analytics, Twitter, XML, RSS, JSON, Slack и т.д.

Стоимость: #бесплатно (но есть и платный тариф)

#api #web #frontend
This vs That — интересный справочник для фронтенд-разработчиков

В чём разница между :active и :focus? А между currentTarget и target? Ответы на все эти вопросы можно найти на This vs That.

Стоимость: #бесплатно

#web #frontend #справочник
Scrimba — платформа для изучения frontend-разработки

Сервис позволяет изучать программирование, работая с кодом во внутреннем редакторе, сразу же отображающем результат изменений в браузере

При этом Scrimba поддерживает мультифайловые проекты, что приближает разрабатываемые проекты к реальной жизни

Стоимость: #бесплатно (но есть платные курсы)

#web #обучение #frontend
Vercel — веб-платформа для frontend-разработчиков

С её помощью можно очень легко и удобно развернуть собственный сайт. При этом размещать свои проекты можно с нулевой конфигурацией, а также автоматическим протоколом SSL и глобальной инфраструктурой CDN

Стоимость: #бесплатно (но платный тариф)

#web #frontend
Storybook — это frontend-мастерская для создания компонентов UI и страниц в изоляции

Инструмент отлично подходит для разработки труднодоступных состояний и граничных случаев без необходимости запуска всего приложения

На сайте проекта сообщается, что Storybook особенно будет полезен для тех, кто использует в работе React, Vue, Angular и HTML

Стоимость: #бесплатно

#web #frontend #open_source
Dimensions — расширения для Chrome, позволяющее измерять всё на странице

Вы просто активируете расширение и перекрестие на мышке покажет вам расстояние до ближайших краев. Пригодится всем фронтендерам и дизайнерам интерфейсов.

Стоимость: #бесплатно

#frontend #web
Trace — плагин для Figma для конвертирования дизайнов в приложение на SwiftUI

У готового прототипа можно прямо на ходу посмотреть код, изменить его и перенести в нужную IDE. 

Стоимость: #бесплатно

#frontend #design #web @prog_tools
This media is not supported in your browser
VIEW IN TELEGRAM
MightyMeld — набор предварительно настроенных компонентов, которые полностью совместимы с Tailwind CSS и React

Просто выбираете нужный объект из большой библиотеки шаблонов, перетаскиваете его на рабочую панель и настраиваете под свои нужды. В проекте есть встроенный ИИ ассистент.

Стоимость: #бесплатно, есть платная подписка

@prog_tools #web #css #frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированное руководство по CSS flex

flex — свойство в CSS, определяющее способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства.

Вариантов использования flex много — про популярные способы рассказали в этом гайде. Всё с гифками, поэтому можно будет сразу определить нужную конфигурацию flex.

#frontend #css #ru