последние две статьи«В 2019 году вам стоит обратить внимание на эти 50 популярных фронтенд-инструментов (часть 1)»,«19 лет вам стоит обратить внимание на эти 50 популярных фронтенд-инструментов (посередине)»В этой статье представлены инструменты, связанные со сборками, фреймворками и библиотеками, CSS, HTML и JavaScript, а также остальные 21 инструмент, которые помогут вам в новом году.
Значки, инструменты для работы с диаграммами
30. Библиотека иконок Ориона
Существует до 6000 профессиональных бесплатных векторных значков SVG, а также поддерживается глубокая настройка, такая как изменение цвета, изменение толщины линии, изменение стиля значка (тонкая линия, толстая линия, плоская) и создание соответствующего кода одним щелчком мыши.
31. Диаграммы Фраппе
Простой, профессиональный инструмент отчетов SVG с открытым исходным кодом в современном стиле, который не требует какой-либо библиотеки зависимостей, стиль кода прост и удобен в использовании. Поддержка экспорта кода svg одним щелчком мыши.
32. СВГатор
Если вы хотите поднять свою веб-графику на новый уровень, анимированные SVG — это то, что вам нужно, а SVGator — один из самых простых инструментов, которые вы можете использовать для их создания. Онлайн-инструмент для создания SVG-анимации профессионального уровня. SVGator также имеет панель диспетчера кода, чтобы вы могли точно видеть, какой код генерируется вашим приложением. SVGator экспортирует чистый, правильно сформированный код.
33. Апексчарты
ApexCharts.JS — это современная библиотека диаграмм JavaScript для создания интерактивных диаграмм и визуализаций с помощью простого API и мощных функций. Вам удобно встраивать диаграммы в свои проекты Vue и React.
34. МапКит JS
developer.apple.com/maps/map kit…
Инструмент карты, предоставленный Apple.Если вы хотите сделать карту в том же стиле, что и официальный веб-сайт Apple, этот инструмент будет хорошим выбором, позволяя вам добавлять интерактивные события на карту, чтобы обогатить ваше картографическое приложение.
35. Изображение 2
Инструмент автоматической предварительной загрузки и кэширования изображения для предотвращения мерцания изображения, а также использования фильтра размытия для предварительного отображения изображений, чтобы отложить загрузку изображения и повысить скорость загрузки веб-страницы.Он очень прост в использовании, вместо этого вам нужно всего лишь использовать — это все, что нужно, это так просто!
36. Лозад
GitHub.com/Бедняк против Ксена…
Lozad.js — это легкий, высокопроизводительный, настраиваемый чистый JavaScript и ленивый загрузчик без зависимостей, основанный на IntersectionObserver API, который можно использовать для выполнения различных форм элементов, таких как изображения и фреймы. После сжатия gzip его размер составляет всего 1 КБ.По сравнению с широко используемым jquery.lazyload.js, lozad.js является более мощным, хотя размер jquery.lazyload.js составляет всего несколько КБ. На гитхабе собрано 4800+ звезд.
Реагировать Инструменты
37. РОССИЯ
React Suite — это набор библиотек компонентов React для серверных продуктов. Созданный командой HYPERS front-end и командой UX, он в основном обслуживает линейку продуктов компании для работы с большими данными. После трех основных обновлений версии накопилось большое количество компонентов и богатых функций. И поддержка онлайн-настройки персонализированных тем, что более важно, есть китайская версия, которую нам удобно изучать и использовать.
38. Пейдждрайв
Волшебный онлайн-инструмент для разработки и производства пользовательского интерфейса, вам нужно всего лишь перетащить и скомпоновать страницу, этот инструмент автоматически сгенерирует для вас высококачественный код компонентов React, а другие функции ждут вас.
39. Реакция-гладкость-dnd
GitHub.com/Ku Железная дорога ах в…
Инструмент React для перетаскивания элементов страницы с плавным эффектом перетаскивания, что позволяет легко перетаскивать карточки, списки и компоненты формы.
40. Не указано
Новая библиотека управления состоянием unstated.js: проста в использовании и разумна. Полностью отличаясь от предыдущей библиотеки управления состоянием, эта неустановленная фокусируется на локальном состоянии (а не на глобальном хранилище, небольшое изменение приводит к повторному рендерингу всего дерева), а также можно совместно использовать несколько локальных состояний, сочетая простоту использования избыточности. с потоком Обоснование освежает: unstated полностью разработан для React, «React достаточно», чтобы вы не чувствовали, что используете сторонний компонент.
41. Добраться до маршрутизатора
Reach-Router — это набор элементов управления маршрутизацией на основе реакции, разработанный Райаном Флоренсом, бывшим участником ReactRouter. Тогда уже есть относительно зрелый ReactRouter. Почему вы хотите «сделать еще один» Router? Заинтересованные студенты могут пойти, чтобы узнать об этом , Xiaobian Я думаю, что в основном стоит обратить внимание на следующие функции:
- Небольшой, всего 4 КБ, что примерно на 40 КБ меньше, чем у react-router после сжатия.
- меньше конфигурации
- лучше использовать
- В основном тот же API, стоимость обучения очень низкая
- Исходный код очень простой, всего 3 файла и 900 строк.Если вы хотите глубоко понять, как реализована маршрутизация одностраничного приложения,reach-router определенно является отличным исходным материалом.
42. СВГР
woohoo.smooth-code.com/open-source…
svgr — это инструмент для преобразования SVG в компоненты React, svgr реализован с помощью JavaScript. Весь документ также очень мал и находится в открытом доступе на github.
43. Реагировать на сетку электронных таблиц
Компонент сетки, похожий на Excel, для React с настраиваемым редактором ячеек, высокопроизводительной прокруткой и столбцами с изменяемым размером.
Инструменты тестирования и данных
44. веб-подсказка
Проект Webhint предоставляет инструмент линтинга с открытым исходным кодом для проверки доступности, производительности и безопасности кода. При создании веб-сайтов и приложений возникает все больше и больше деталей, которые необходимо улучшать. С этой целью Webhint пытается помочь разработчикам отметить эти детали.
Webhint доступен как инструмент интерфейса командной строки (CLI) и как онлайн-сканер, что является самым быстрым способом начать работу. Использование онлайн-сканера требует предоставления общедоступного URL-адреса для запуска отчетов и получения информации о том, как работает ваше приложение.
При тестировании приложений Webhint предоставляет три среды выполнения: jsdom, Chrome и Edge. Последние две среды выполнения используют протокол Chrome DevTools, а первая среда выполнения использует среду Node.js для быстрого выполнения ограниченного количества проверок без поддержки браузера.
Есть более мощные функции, которые ждут, когда вы их опробуете.
45. Воздушный кран
GitHub.com/air tap/Привет, RT…
Airtap — это простой способ протестировать JavaScript в браузере. Заявлено, что он охватывает более 800 браузеров, может начать тестирование вашего кода локально за считанные секунды и легко перейти к облачному браузеру, предоставленному Sauce Labs, для более качественных тестов покрытия.
Что отличает Airtap от других средств запуска тестов для разных браузеров, так это его простота и возможность легко запускать наборы тестов во многих браузерах без необходимости их локальной установки. Он позволяет вам быстро выполнять итерации во время разработки и обеспечивает хорошее покрытие браузера перед выпуском, не беспокоясь об отсутствии поддержки браузера.
Не просто заявляйте, что ваш JavaScript поддерживает «все браузеры», докажите это тестированием!
46. мксерт
HTTPS — это тенденция в веб-разработке, направленная на повышение безопасности веб-сайтов. Использование HTTPS требует настройки сертификата TLS, а благодаря протоколу ACME и сертификатам Let's Encrypt можно легко развертывать удаленные среды. Но для локальных сред универсального сертификата пока нет.
mkcert спроектирован так, чтобы быть достаточно простым, чтобы скрыть почти все знания, необходимые для создания сертификата TLS. Он работает с любым именем хоста или IP-адресом, включая localhost, поскольку он используется только в вашей локальной среде.
Сертификаты подписываются вашим частным ЦС, и эти доверительные отношения автоматически настраиваются при запуске mkcert-install , поэтому при доступе к нему браузера отображается логотип безопасности. В настоящее время поддерживаются MacOS, Linux и Windows, а также Firefox, Chrome и Java. Поддерживаются даже некоторые мобильные устройства.
47. Регистратор кукловодов
проверьте, у меня есть strong.com/docs/puppet…
Puppeteer — это библиотека Node, которая предоставляет высокоуровневый API для управления Chrome или Chromium по протоколу DevTools, обычно используемому для поисковых роботов, автоматического тестирования и т. д. С ее помощью можно выполнять большинство операций, которые вы делаете вручную в браузере.
48. jsonstore.io
jsonstore.io предоставляет бесплатное безопасное облачное хранилище данных на основе JSON для небольших проектов. Просто введите https://www.jsonstore.io/, скопируйте URL-адрес и начните отправлять HTTP-запросы данных. Запросы POST будут сохранять данные, запросы PUT изменяют данные, запросы DELETE удаляют данные, а запросы GET извлекают данные. Это значительно облегчает интерфейсным разработчикам интеграцию тестового интерфейса, а тест интерфейса можно выполнить после создания интерфейсной страницы.
49. Инитаб
Инструментальные средства, настроенные для разработчиков, которые можно установить и использовать с помощью подключаемого модуля Google Chrome. С помощью этого рабочего места вы можете легко подписаться на интересующие вас проекты git, отслеживать связанные проблемы, выполнять связанные операции, просматривать историю версий и подпишитесь на контент, связанный с переполнением стека, управляйте и просматривайте контент, связанный с Gists, можно сказать, что это основная технологическая платформа для агрегации платформы.
50. лямбда-тест
Облачная онлайн-платформа для автоматизированного тестирования, которая, как утверждается, была протестирована на более чем 2000 реальных браузерах и устройствах, может быть глубоко настроена в соответствии с вашими потребностями в тестировании и формировать соответствующие записи, чтобы облегчить командную работу и помочь вам обнаружить различные версии браузеров на разных платформах. проблемы.
подраздел
Я наконец-то закончила перебирать 50 инструментов.В новом году,надеюсь, эти инструменты будут вам полезны и вдохновят.Еще раз спасибо за внимание к моей статье,что сделает мой новый год полным урожаев.Спасибо Nuggets Xiaobian I Желаю вам всего наилучшего в передовых технологиях в новом году, и ваша зарплата будет удвоена Давайте работать вместе, чтобы продвигать будущее большого переднего плана в Китае!
Для получения более интересного контента, пожалуйста, подпишитесь на официальный аккаунт Front-end Talent в WeChat!