Google похож на айсберг: есть часть над водой, которую мы видим и используем каждый день; есть еще огромная часть под водой, которую мы не видим и о которой мало знаем.
Google предлагает некоторые удивительные продукты и инструменты, и многие из которых бесплатные.
Сегодня мы собираемся взглянуть на 12 инструментов от Google, которые действительно могут быть полезны.
1. Polymer
Polymer — это библиотека JavaScript с открытым исходным кодом от Google для создания веб-приложений с использованием веб-компонентов. Платформа поставляется с множеством библиотек и инструментов, которые помогают дизайнерам и разработчикам раскрыть потенциал Интернета, используя такие функции, как HTTP / 2, веб-компоненты и сервис-воркеры.
Главная особенность Polymer — это веб-компоненты. С помощью веб-компонентов вы можете делиться пользовательскими элементами с любым сайтом, без проблем работать со встроенными элементами любого браузера и эффективно использовать фреймворки всех видов. Такие продукты, как LitElement (простой базовый класс для создания быстрых и легких веб-компонентов) и PWA Starter Kit, упрощают использование Polymer. Если хотите, вы можете создать свое приложение полностью из веб-компонентов.
2. Lighthouse
Google Lighthouse — это автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Программное обеспечение позволяет проверять веб-страницы на производительность, SEO, доступность и многое другое.
Чтобы использовать Lighthouse в Google Chrome, просто перейдите по URL-адресу, который вы хотите проверить (вы можете проверить любой URL-адрес в Интернете), откройте ChromeDevTools и щелкните вкладку Audits. После того, как вы запустите аудит, Lighthouse предоставит вам подробный отчет на веб-странице.
С помощью этих отчетов вы увидите, какие части вашей веб-страницы вам необходимо оптимизировать. В каждом отчете есть справочная документация, в которой объясняется, почему этот аудит важен, а также показаны шаги, которые вы можете предпринять, чтобы исправить это.
Вы также можете использовать Lighthouse CL, чтобы предотвратить регресс на своих сайтах. Используя Lighthouse Viewer, вы можете просматривать и публиковать отчеты в Интернете. Вы также можете делиться отчетами в виде JSON или GitHub Gists.
Lighthouse также имеет функцию под названием Stack Packs, которая позволяет Lighthouse определять, на какой платформе построен сайт.
3. Google Analytics
Google Analytics — золотой стандарт аналитических услуг. Google Analytics может быть установлен на вашем сайте бесплатно, и позволяет вам видеть всевозможные сведения о посетителях вашего сайта, например, какой браузер они используют.
Используя Google Analytics, вы можете принимать решения о своем сайте на основе научных данных и, следовательно, быть в некоторой степени уверенными в том, что принимаемые вами решения приведут к ожидаемому результату.
4. Flutter
Flutter — это набор инструментов пользовательского интерфейса Google для создания скомпилированных приложений для мобильных устройств, Интернета и настольных компьютеров из единой кодовой базы. Этот инструментарий имеет открытый исходный код и бесплатный.
Набор инструментов имеет многоуровневую архитектуру, которая позволяет выполнять полную настройку, что приводит к быстрой визуализации и гибкости дизайна. Он также поставляется с полностью настраиваемыми виджетами, которые позволяют создавать собственные интерфейсы за считанные минуты. С помощью этих виджетов вы сможете добавлять функции платформы, такие как прокрутка, навигация, значки и шрифты, чтобы обеспечить полную производительность как на iOS, так и на Android.
Flutter также имеет функцию, называемую горячей перезагрузкой,которая позволяет легко создавать пользовательские интерфейсы, добавлять новые функции и быстрее исправлять ошибки. Вы также можете скомпилировать код Flutter в машинный код ARM, используя собственные компиляторы Dart.
5. Google API Explorer
У Google есть огромная библиотека API-интерфейсов, доступных разработчикам, но найти эти API-интерфейсы может быть сложно. Google API Explorerупрощает разработчикам поиск любого API. На веб-странице Google API Explorer вы увидите полный список всей библиотеки API. Вы можете легко прокручивать список или использовать поле поиска для фильтрации списка API.
Преимущество Google API Explorer заключается в том, что каждая ссылка на справочную страницу содержит более подробную информацию о том, как использовать API. API Explorer — отличный способ опробовать методы в API мониторинга без написания кода.
6. Puppeteer
Puppeteer — проект команды Google Chrome. Платформа позволяет веб-разработчикам управлять Chrome (или любым другим браузером на основе протокола Chrome DevTools) и выполнять общие действия, как в реальном браузере. Puppeteer также является библиотекой Node и предоставляет высокоуровневый API для работы с Chrome. Это также полезный инструмент для очистки, тестирования и автоматизации веб-страниц.
Вот некоторые вещи, которые вы можете делать с Puppeteer: создавать скриншоты и PDF-файлы страниц, тестировать пользовательский интерфейс, тестировать расширения Chrome, автоматизировать отправку форм, создавать предварительно обработанный контент и сканировать одностраничные приложения.
7. Codelabs
Google Developer Codelabs — удобный инструмент для начинающих разработчиков и даже для продвинутых, которые хотят улучшить свои знания. Codelabs предоставляют пошаговые инструкции и практический опыт программирования. Сайт Codelabs разбит на несколько учебных сессий по разным темам.
С помощью руководств по Codelabs вы можете научиться создавать приложения с нуля. Некоторые из категорий руководств включают дополненную реальность, TensorFlow, Analytics, Virtual Analytics, G Suite, Search, Google Compute Engine и API Google для iOS.
8. Color Tool
Color Toolпозволяет веб-дизайнерам легко создавать, публиковать и применять цвета к своему пользовательскому интерфейсу. Он также измеряет уровень доступности для любой цветовой комбинации. Инструмент имеет 6 пользовательских интерфейсов и предлагает на выбор более 250 цветов.
Инструмент также очень прост в использовании. Все, что вам нужно сделать, это выбрать цвет и применить его к основной цветовой схеме; переключитесь на вторичную цветовую схему и выберите другой цвет. После того, как вы выбрали все цвета, используйте функцию доступности, чтобы проверить, все ли в порядке, прежде чем экспортировать их в свою палитру.
9. Workbox
Workbox — это набор библиотек JavaScript и модулей Node. Библиотеки JavaScript упрощают добавление офлайн-поддержки в веб-приложения. Модули Node упрощают кэширование ресурсов и предлагают другие функции, помогающие пользователям создавать прогрессивные веб-приложения. Некоторые из этих функций включают предварительное кэширование, кэширование во время выполнения, маршрутизацию запросов, фоновую синхронизацию, отладку и большую гибкость, чем sw-preache и sw-toolbox.
С помощью Workbox вы можете добавить быстрое правило, которое позволяет кэшировать шрифты, изображения, файлы JavaScript и CSS Google. Кэширование этих файлов заставит вашу веб-страницу работать быстрее, а также потреблять меньше памяти. Вы также можете предварительно кэшировать файлы в своем веб-приложении, используя их интерфейс командной строки, модуль Node или плагин webpack.
10. PageSpeed Insights
PageSpeed Insights — это удобный инструмент от разработчиков Google, который анализирует содержимое веб-страницы, а затем генерирует предложения о том, как сделать страницу быстрее. Он предоставляет отчеты о производительности веб-страницы как на настольных, так и на мобильных устройствах. Вверху отчета PageSpeed Insights предоставляет оценку, которая суммирует производительность страницы.
11. AMP в Google
AMP-страницы загружаются быстрее и выглядят лучше, чем стандартные HTML-страницы на мобильных устройствах. AMP в Googleпозволяет улучшить ваши AMP-страницы в Google. Это структура веб-компонентов, которая позволяет создавать веб-сайты, рекламу, электронные письма и истории, ориентированные на пользователя. Одним из преимуществ AMP является то, что он позволяет вашим веб-страницам загружаться практически мгновенно на всех устройствах и платформах, что улучшает взаимодействие с пользователем.
12. Window Resizer
При создании веб-сайтов важно, чтобы разработчики тестировали их на предмет адаптивного дизайна — здесь на помощьприходит Window Resizer. Window Resizer — это расширение Chrome, которое изменяет размер окна браузера, чтобы вы могли протестировать свой адаптивный дизайн на разных разрешениях экрана. Стандартные предлагаемые размеры экрана — настольный компьютер, ноутбук и мобильный телефон, но вы также можете добавить собственные размеры экрана.
0 комментариев