Привет! В этой истории я хочу рассказать вам о 10 инструментах для веб-разработчиков, которые я использую при создании сайтов.
Итак, начнем!
1. Палитра сайта
Этот инструмент предоставляет вам тысячи различных цветовых палитр для дизайна сайта.
URL: https://palette.site
Преимущества:
- Много разных цветов
- Хороший дизайн
Недостатки:
- Урезанный функционал в мобильной версии
2. Маяк
Это очень удобное расширение от Google, которое может измерить рейтинг вашего сайта и протестировать его для технологии PWA.
URL: https://chrome.google.com/webstore/detail/lighthouse
Преимущества:
- Очистить результаты
- С открытым исходным кодом (на Github)
Недостатки:
- Нет мобильной поддержки
- Медленная скорость загрузки
3. Загрузка.ио
Если вам нужна современная и крутая анимация для прелоадера, вам стоит посетить Loading.io. Я не могу сосчитать, сколько анимаций содержит этот инструмент.
URL: https://loading.io
Преимущества:
- Вы можете настроить свою анимацию: изменить цвет, фон, скорость и т.д.
- Вы можете скачать его в разных форматах (GIF, SVG, PNG, код CSS).
Недостатки:
- Необходимо зарегистрироваться, чтобы сохранить анимацию
4. Облегченный материальный дизайн
MDL — это простая структура, позволяющая сделать ваш сайт похожим на нативное приложение для Android. Он содержит макеты, кнопки, модальные окна, снэк-бары, загрузки и многое другое.
URL: https://getmdl.io
Преимущества:
- Есть много эффектов и настроек, которые создают ощущение нативного приложения.
- Удалить шаблоны на сайте
Недостатки:
- Вы не можете установить свой цвет вручную. На сайте есть 30 цветов темы сайта.
5. Маскируемый.приложение
Это простой и удобный инструмент для маскирования значка PWA. Есть много настроек для настройки. Вы также можете загрузить SVG.
URL-адрес: https://maskable.app
Преимущества:
- Хорошая реализация
- Мами функций
Недостатки:
- Человек не может установить цвет HEX в качестве фона значка, только выбрать из списка или из палитры цветов
6. Канва
Я думаю, многие знают этот популярный сервис для создания дизайнов. Я всегда использую Canva для создания крутых логотипов. Но есть много других типов конструкций.
URL: https://canva.com
Преимущества:
- Крутые шаблоны дизайнов
- Удобные элементы управления редактированием
Недостатки:
- В мобильной версии и в приложении меньше функций, чем в обычной
7. Шопинг
С Shopify вы можете бесплатно выбрать логотип и название своей компании. Если вы хотите больше функций, в Shopify есть версия Pro.
URL-адрес: https://shopify.com
Преимущества:
- Когда человек ищет логотип, он может выбрать несколько категорий, которые ему нравятся.
- Возможность настройки вашего логотипа.
- Большая библиотека имен
Недостатки:
- Немного сложно было разобраться в функционале
8. Конструктор PWA
Это инструмент Microsoft для проверки сайта на наличие технологии PWA. В отличие от Lighthouse, PWA Builder не показывает показатели скорости сайта, рекомендации и т. д. Но там вы можете найти компоненты для вашего PWA, такие как Service Worker или Войти через Google.
Преимущества:
- Все результаты просты и понятны
- Мобильная версия
- Коллекция компонентов для PWA
Недостатки:
- В коллекции есть не все типы сервис-воркеров
- Показывает 95 из 100, если в вашем PWA нет push-уведомлений.
9. Изменение размера
С помощью Google Resizer вы можете проверить скорость отклика вашего сайта на ноутбуке (и ПК), планшете и телефоне.
Преимущества:
- Вы можете взаимодействовать с вашим сайтом на устройствах
- Высокая скорость
Недостатки:
- Из-за дизайна страницы устройства перекрывают друг друга
10. Нетлайф
Netlify — это бесплатный и быстрый хостинг для ваших проектов с поддержкой многих фреймворков, таких как Vue.js и PHP.
URL-адрес: https://netlify.com
Преимущества:
- Это бесплатно
- Поддерживает PHP
- Вы можете загрузить свой сайт с Github Gist
Недостатки:
- я ничего не могу найти
Вот и все!
Если вам понравилась моя статья, пожалуйста, сделайте аплодисменты👏 этой истории. Подпишитесь на меня в Твиттере: https://twitter.com/@gubarev_dev
