Полезное

12 инструментов от Google для дизайна и разработки

Автор Freelance.Today

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, которое изменяет размер окна браузера, чтобы вы могли протестировать свой адаптивный дизайн на разных разрешениях экрана. Стандартные предлагаемые размеры экрана — настольный компьютер, ноутбук и мобильный телефон, но вы также можете добавить собственные размеры экрана. 

Источник

 
  • 2062