Я менеджер продукта и нетехнический соучредитель стартапа. Когда мне нужно поиграть с пользовательским интерфейсом продукта, я делаю это сам. Я не прошу своего технического соучредителя или инженера помочь.
Инженерных ресурсов всегда не хватает. Поэтому, если мне нужно изменить текст, цвет, поля и т.д., я открываю код в своей среде разработки и вношу исправления.
Но есть пара вещей, которые меня сильно раздражают.
Во-первых, мне нужно найти нужное место в коде, который я не писал. Иногда это может занять много времени.
Во-вторых, мне нужно изменить код и убедиться, что я доволен результатом. Обычно требуется несколько итераций, чтобы переключаться туда-сюда между IDE и браузером. Это похоже на стрельбу с закрытыми глазами, а затем открываю их, чтобы посмотреть, попал я или нет.
Но что, если бы я мог внести изменения, сохранить их в коде и посмотреть результат, не выходя из браузера? Что если бы я мог щелкнуть на любом элементе пользовательского интерфейса на странице и перейти к точному месту в коде, которое его создает?
С этими идеями мы с моим соучредителем решили создать Impulse.
Impulse — это визуальный редактор пользовательского интерфейса с открытым исходным кодом, который позволяет:
- Редактировать пользовательский интерфейс прямо в браузере.
- При необходимости перейти к конкретному фрагменту кода в вашей IDE.
Если вы менеджер продукта и любите играть с пользовательским интерфейсом, изменяя код, прочитайте, как Impulse может сэкономить вам много времени и сделать редактирование пользовательского интерфейса более простым, наглядным и увлекательным.
Редактируйте HTML-код, не выходя из браузера
Предположим, вам нужно изменить верхнее поле заголовка.
Обычно для этого нужно проинспектировать фрагмент HTML в браузере с помощью DevTools, а затем найти его в коде. Если этот кусок HTML не является уникальным, необходимо выяснить, какой из них правильный в коде. Например, вы можете добавить временный текст «aaa» и посмотреть, появится ли он в нужном месте в браузере.
После того как вы определили место в коде, вы вносите изменение и смотрите, как оно выглядит в браузере. Затем вы делаете итерацию, если результат вас не устраивает.
Impulse может помочь вам выровнять этот процесс. Вам нужно Alt+Click на элементе заголовка в браузере и установить правое поле. Вы увидите результат в браузере, а ваш код будет изменен так, как будто вы сделали это сами.
Вот и все. Вам не нужно искать кусок кода, вы сразу видите результат и можете выполнять итерации, не выходя из браузера.
Найдите нужное место в коде одним щелчком мыши
Но иногда все же необходимо заглянуть в код. Например, если вы проверяете условие или перемещаете элементы. Impulse может помочь вам и в этом.
То же самое Alt+Click на элементе в браузере, а затем выберите опцию «Перейти к коду». Impulse немедленно откроет вашу IDE, и вы увидите точное место в коде — файл, строку и символ, ответственный за генерацию элемента.
Это похоже на волшебство. Больше никаких поисков, догадок и потери времени.
Как начать использовать Impulse
В настоящее время Impulse работает только с React, Tailwindcss и VS Code.
Вы можете начать работать с Impulse так же просто, как скопировать и вставить приведенный ниже код в консоль браузера.
d=document;s=d.createElement('script');s.src='https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js?${Date.now()}';d.body.appendChild(s)
Более постоянный способ мы описали в нашем репозитории на GitHub https://github.com/impulse-oss/impulse#requirements.
Верните свою неделю
Я подсчитал, что каждый раз, когда мне нужно внести исправление, я трачу около 5 минут на поиск нужного места в коде и итерации, переключаясь туда-сюда между IDE и браузером.
Если я делаю это дважды в день, пять дней в неделю, то эти операции отнимают у меня неделю времени в год.
Теперь, с Impulse, я вернул себе неделю.
Я призываю вас попробовать Impulse и вернуть себе неделю.
Сайт: https://impulse.dev
GitHub: https://github.com/impulse-oss/impulse