❞
❝Frontier: Прошло четыре месяца с тех пор, как я писал в Nuggets. Из очень небольшого количества чтений в начале сейчас насчитывается более 10 000 статей для чтения. Благодаря Nuggets, которые поддержали меня, я надеюсь углубить производство в Будущее Глубина статьи, сегодня я воспользуюсь этой возможностью, чтобы поделиться с вами некоторыми инструментами, обычно используемыми в повседневной работе Шуцзяна, которые могут помочь вам повысить эффективность вашей ежедневной совместной работы.
❞
1. Письмо ✏️
❝Основываясь на многих детских ботинках в области комментариев ранее, я спросил Шуцзяна, что, например, карта разума очень красивая, для чего она используется, как делается первая картинка и т. д., поэтому я надеюсь помочь всем в сортировке. некоторых инструментов
❞
1.1 Юке
❝Yuque — это профессиональная облачная база знаний, созданная Ant Financial. Она похожа на вики и используется 100 000 сотрудников Alibaba для написания документов и накопления знаний.Официальная ссылка 🔗
❞
Два аспекта Юкэ, которые я часто использую
- Интеллект-карта: Одна из них — это карта ума, которая поставляется с Yuque. Лично я считаю, что опыт пользовательского интерфейса очень силен (Ассоциация внешнего вида).
- Организация дневника: используйте Yuque для ежедневного ведения записей о проблемах и опыте, возникающих при разработке интерфейса, что удобно для обзора и регрессии.Самое главное, что опыт набора текста высок, и он поддерживает упорядочение. просмотрите статьи, которые вы написали, опыт чтения высокий, как перелистывание книги
1.2 Process On
❝ProcessOn — это онлайн-платформа для совместного рисования, которая предоставляет пользователям самые мощные и простые в использовании инструменты рисования. Поддержка онлайн-создания блок-схем, интеллектуальных карт, организационных диаграмм, карт топологии сети, BPMN, диаграмм UML, дизайна прототипа интерфейса пользовательского интерфейса и т. д.
❞
В основном я использую процесс для рисования интерактивных диаграмм и блок-схем, а также поддерживаю онлайн-редактирование в режиме реального времени.Недостатком является то, что если неплательщики ограничат количество рисунков, следующая рабочая страница👇
1.3 Carbon
❝Углерод используется для создания улучшенной версии фрагмента кода, который может фильтровать различные переключатели темы, а затем генерировать карту фрагмента кода с желаемым эффектом.Официальная ссылка 🔗
❞
1.4 Mdnice
❝Полное название mdnicde — Markdown Nice. Он поддерживает добавление «элементов темы» в уценку, что немного похоже на скиннинг, поддерживает разнообразную субъективность и делает вашу статью похожей на свадебное платье. Самое главное — поддержите публичный аккаунт WeChat, Zhihu и Nuggets!Официальная ссылка 🔗
❞
Экспортируйте, как показано ниже
1.5 Шаблон обложки
❝Многим детская обувь очень любопытна. К каждой статье буду прикреплять карту темы. Это моя собственная? Хоть я и являюсь фронтенд-дизайнером, но дизайн все равно достаточно тривиален и трудоемок. Время надо тратить на более драгоценное Место, вот шаблон онлайн-инструмента редактирования, который я использую - Fanke Quick MapОфициальная ссылка 🔗или холстОфициальная ссылка 🔗
❞
1.6 Shields
❝Shields.io в основном используется для создания значков в документах Markdown.Мы часто видим эти значки в проектах github, чтобы выразить, например, покрытие модульным тестом, размер пакета, информацию о версии, информацию о сертификации и т. д.Официальная ссылка 🔗
❞
1.7 Генерация гифок
❝Иногда картинки не могут выразить то, что мы хотим объяснить, в это время очень важную роль играют динамические картинки, которые могут более интуитивно описать весь процесс.
❞
-
Запись первого экрана Mac через QuickTime Player
-
Затем конвертируйте сгенерированное moc-видео в динамическое изображение gif.Официальная ссылка 🔗
❝Если вы используете gif в Наггетс, обратите внимание, что вам нужно добавить изображения в левом нижнем углу для загрузки
❞
1.8 Скриншот веб-страницы
❝Нужен скриншот материала статьи? Я делаю скриншоты текущей веб-страницы в течение длительного времени.Я все еще использую инструмент для скриншотов WeChat.На самом деле, мощный хром имеет встроенную функцию скриншота, так как ее использовать?
❞
- Сначала откройте консоль Chrome (открыть ярлык Option+Command+i)
- Открыть командную строку (открыть сочетание клавиш shift + cmd + p или в системе win shift + ctrl + p)
- Затем введите «захват» в командной строке, и вы увидите следующее.
❝Примечание. Разница между захватом полноразмерного снимка экрана и захватом снимка экрана заключается в том, что первый — это снимок экрана с полной информацией о всей странице, а второй — просто снимок экрана текущей страницы.
❞
2. Эффективность ⏰
❝В повседневной разработке использование инструментов повышения эффективности часто помогает мне сэкономить много ненужной траты времени.
❞
2.1 Библиотека иконок Iconfont
❝Библиотека значков Iconfont удобна для индивидуальных разработчиков, чтобы найти нужные им значки, экономя время на дизайн значков и поиск, разве это не ароматно~Официальная ссылка 🔗
❞
2.2 Обычный инструмент визуализации Regexr
❝RegExr — это инструмент для редактирования и тестирования регулярных выражений в Интернете с лаконичным интерфейсом и текстовым полем, позволяющим просматривать поиск и замену регулярных выражений в режиме реального времени.Официальная ссылка 🔗
❞
2.3 Инструмент отладки интерфейса Postwoman
❝Вы слышали о Почтальоне, а вот и почтальонша, соперница Почтальона в любви! Он не только бесплатный и с открытым исходным кодом, легкий и быстрый, но также имеет прекрасные инструменты для отладки API. Это может помочь нам сэкономить время и повысить эффективность работы.Официальная ссылка 🔗
❞
2.4 Можно ли использовать запрос совместимости
❝Могу ли я использовать? Как следует из названия: Могу ли я использовать это? Это может быстро позволить нам проверить совместимость браузера с определенным синтаксисом атрибута. Приложение сцены можно использовать в обычном режиме в определенном браузере, но оно не поддерживается после перехода на другой В настоящее время мы должны принять меры предосторожности, прежде чем использовать определенный атрибут, провести достаточно исследований, а не ждать запуска, чтобы найти проблему.Официальная ссылка 🔗
❞
2.5 Онлайн-форматирование кода Prettier Playground
❝Сценарий применения: когда на компьютере, который я использую, не установлена IDE, но мне нужно прочитать код, написанный другими, Prettier Playground может помочь мне изменить исходный беспорядочный код и значительно улучшить читабельность.Официальная ссылка 🔗
❞
Исходный код слева, отформатированный код справа
2.6 Инструмент управления хостом SwitchHosts
❝SwitchHosts может помочь нам быстро переключаться между различными настройками хостов и редактировать хосты.Официальная ссылка 🔗
❞
3. Инструменты командной строки 🔧
❝Все в коде! Если вы просто хотите использовать инструменты командной строки для выполнения ряда действий, которые помогут повысить эффективность, обратите внимание на следующие инструменты.
❞
3.1 n- инструмент переключения версии узла
❝Он используется для переключения версий узлов, что удобно и легко.Официальная ссылка 🔗
❞
3.2 nrm- инструмент управления изображениями npm
❝nrm — это инструмент управления зеркальным исходным кодом для npm. Иногда скорость слишком низкая из-за доступа к внешним ресурсам. Использование nrm позволяет быстро переключаться между источниками npm и управлять вашими внутренними источниками npm.
❞
3.3 caniuse-cmd- Инструмент проверки совместимости
❝Выше упоминалась веб-версия caniuse, вот ее инструмент командной строки, как им пользоваться?
❞npm install -g caniuse-cmdВот пример тестирования совместимости браузера с веб-сокетом👇
Прошлые статьи
- Разработка динамических форм от 0 до 1
- данные формы внешнего интерфейса
- Как лучше управлять интерфейсом API
- Микро интерфейсные вещи
- передовой инжиниринг
- Библиотека средств разработки от 0 до 1
- Разработайте простые строительные леса от 0 до 1
- Внешний интерфейс Nginx
- Развертывание интерфейсной эксплуатации и обслуживания
Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~
1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация
2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.
3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨