Эти необходимые инструменты повышения производительности для фронтенд-разработки

введение

Некоторые инструменты повышения производительности с открытым исходным кодом могут значительно повысить эффективность нашей разработки (я всегда так думаю 🤠).

Сегодня я рекомендую некоторые из наиболее ароматных средств, которые я использовал для вас. К ним относятся некоторая документация, инструменты визуализации, инструменты анализа, фрагменты кода, инструменты отладки и многое другое.

Collect UI🦑

Collect UIГалерея — бесплатный онлайн-ресурс для ежедневногоUIВдохновение в дизайне. В настоящее время он насчитывает более 6500 записей и постоянно пополняется последним контентом.

На боковой панели есть категории. Включает 404 страницы, вход/выход, корзину, календарь, видеоплеер и многое другое. Я думаю, это будет очень полезно, если вы захотите попросить вдохновения в удобном месте, а затем использовать его для своего корпоративного проекта или личного проекта.

Taskade📝

В повседневной жизни всегда много дел.Например, на работе много дел, но некоторые вещи легко забыть.В это время нам нужен мобильный телефон с делами.chromeПлагин --taskade. TaskadeПростой, чистый и красиво оформленный, он имеет расслабляющие темы и обои. использоватьTaskadeчтобы организовать свои мысли, чтобы вы могли сосредоточиться на том, чтобы сделать что-то.

Colordot🌈

Иногда мы хотим найти цвет, который нам нравится (что-то вроде прозвища, которым мы довольны), но нет вдохновения, тогда мы можем прийтиздесь Свободное перемещение мыши в области веб-страницы может привести к получению различных цветов. Определите цвет, а затем проведите пальцем по экрану, чтобы создать следующий цвет, пока не найдете цвет, который вас устраивает.

FontSpark🎯

FontSparkЭто веб-сайт, который помогает пользователям с трудностями при выборе шрифта, и пользователям нужно только ввести текст, который вы хотите отобразить, вы можете получить шрифт, рекомендованный веб-сайтом, включая типы и размер шрифта.Если рекомендуемые шрифты вас не устраивают, нажмитеGenerateкнопка для обновления.

The Noun Project🎃

The Noun ProjectСайт специализируется на качественных, узнаваемыхicon,ЭтиiconЗдесь нет крутого дизайна, обычно только в одном цвете, но пользователь легко может различить, что он пытается передать.

В настоящее времяNounProjectПредлагает более 2 млн.iconПользователи могут загрузить его бесплатно и постоянно обновляются, если вам нужно какое-тоicon, но не нашел подходящего, мог бы пойти и на этотВеб-сайтПриходи и уходи.

csseffects🚀

CSSeffectsSnippetsСодержит около 20CSSАнимация, как в загрузке, так и для чтения, либо перемещения анимации курсора, создаваемая в прошлом, может мгновенно просмотреть на сайте.

И это не самая большая его изюминка.Самое рекомендуемое, что все эффекты могут быстро копировать соответствующий код после клика, что позволяет разработчикам использовать его прямо на своем сайте или в блоге.Конечно, это еще может нуждаться в тонкой настройке. , но не нужно начинать с нуля, а также не нужно искать коды этих анимаций в интернете, что очень удобно и экономит время.

unDraw🍉

unDrawот греческого дизайнераKaterina LimpitsouniРазработал набор библиотеки векторных иллюстраций с открытым исходным кодом, на этом веб-сайте есть более 1000 плоских векторных иллюстраций, которые вы можете загрузить и использовать.Если вы работаете над личным веб-сайтом и у вас нет вдохновения для иллюстраций, возможно, вы можете взглянуть.

DevDocs🐨

Это веб-приложение объединяет документы различных проектов, а также поддерживает работу в автономном режиме.И начинающим программистам, и опытным программистам нужен документ, который может запрашивать различные руководства по программированию в Интернете, иDevDocsОн объединяет самые полные документы по разработке программирования и имеет отличный режим чтения, позволяющий быстро запрашивать нужные команды, а также поддерживает расширения браузера, что чрезвычайно удобно.

CSS Tricks🦊

CSS TricksЭто отличный зарубежный блог по фронтенд-разработке, в основном для обмена и использованияCSSСоветы по стилю, опыт, учебные пособия и многое другое.Веб-сайт постоянно обновляет несколько отличных руководств и советов, внося большой вклад в сообщество пользователей. Я тоже учился на этом, позвольте мнеCSSПоле зрения широко расширилось.

cssreference🎾

Обновите, если необходимоCSSЗнание или запросить незнакомые и редко используемые свойства, вы можете получить доступ к этомусайт. лицом к лицуCSSИдея собственности является очень глубокой, приведенный пример понятен, легко понять эти атрибуты и применить его к вашему собственному проекту.

Can I Use☄

При разработке фронтенда часто необходимо проверять совместимость браузера, что рекомендуется здесь (Can I Use) Это запрос, адаптированный для фронтенд-разработчиков.CSS,JsВеб-сайт с функциями и совместимостью с различными популярными браузерами вполне может гарантировать совместимость веб-страниц с браузерами. С помощью этого инструмента вы сможете быстро понять действие кода в каждом браузере.

Lighthouse🌊

LighthouseЯвляетсяGoogleИнструмент автоматизации с открытым исходным кодом, в основном используемый для улучшения качества веб-приложений (мобильных). Текущие элементы теста включают производительность страницы,PWA, доступность (доступность), лучшие практики,SEO.

LighthouseРезультаты каждого элемента теста будут оцениваться, и будут даны предложения по оптимизации.Эти стандарты оценки и предложения по оптимизации можно рассматривать какGoogleлучшие практики для веб-страниц.

Majestic✅

MajesticполезноJestзапустить тестGUIинструмент.Использование его в визуальном виде позволяет нам более легко просматривать журнал выходных данных тестового примера.

Wappalyzer🔭

WappalyzerОн может анализировать архитектуру платформы, среду веб-сайта, среду конфигурации сервера,javascriptФрейм, язык программирования и т.д.chromeПлагин технического анализа сайта.

iHateRegex🌡

Для разработчиков часто используются регулярные выражения, и с ним можно сопоставить многие типы сложных строк, но единственный недостаток в том, что его сложно писать, требуется не только освоение правил, но и время. Написание и отладка.

iHateRegexЭто такой артефакт, который поможет вам решить проблему написания регулярных выражений. iHateRegexЭто онлайн-инструмент с открытым исходным кодом, который может быстро извлекать и сопоставлять соответствующие регулярные выражения, чтобы помочь вам выполнить проверку общих правил, таких как имя пользователя, адрес электронной почты, дата, номер мобильного телефона, пароль и т. д.

Конечно, вы также можете увидеть процесс сопоставления внутри него, что помогает углубить ваше понимание.

Ссылаться на

https://dev.to/joserfelix/40-high-quality-free-resources-for-web-development-10o3

❤️ любовь тройная

1. Если вы считаете, что эта статья неплохая, заходите сюдаДелитесь, лайкайте, смотритеСанлиан, пусть больше людей увидят это~

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

3. На спецучастках носите маску и пользуйтесь средствами индивидуальной защиты.

4. Добавьте WeChatfs1263215592, пригласите вас в группу технического обмена, чтобы учиться вместе 🍻