В этой статье покажу 10 сервисов, которые помогают в работе каждый день.
1. Оптимизация изображений — (https://tinypng.com/)
Есть множество сайтов и инструментов для оптимизации фото, лично мне пришелся по душе именно tinypng. Он удобен если нужно быстро оптимизировать несколько фото. Неудобен если нужно сразу оптимизировать много фото так как максимальное количество в бесплатной версии — 20 фото и максимальный размер фото 5мб. Приходится оптимизировать по 20 картинок. Есть плагин для WordPress, Photoshop, Gulp, в них тоже присутствует ограничение 500 изображений в месяц. Попробуйте, может быть вам понравится. Кстати, если ваш файл больше 5 мб и вы не хотите платить :), можете сохранить файл для web в Photoshop и отрегулировать качество, которое будет меньше 5мб по весу и затем оптимизировать.
2. Генератор web шрифтов (https://transfonter.org)
К сожалению не все шрифты присутствуют в google fonts и даже если желанный шрифт там есть, возможно он будет платным. Если вы используете сторонний шрифт, то для него необходимо конвертировать разные форматы для кроссбраузерного отображения. Настроек у данного конвертера не очень много, для большинства задач их будет достаточно. Я выбирал из нескольких вариантов и остановился на нем как на более стабильном и простом. Есть также конвертер с поддержкой кириллицы и большим количеством настроек https://fontie.pixelsvsbytes.com/webfont-generator
3. Скриншот сайта полностью (плагин chrome)
Отличный плагин для создания скриншота сайта, можно делать не только полные скриншоты, но и скриншот части сайта или видимой области. Лично мне этот плагин понравился еще из-за возможности делать скриншот сайта в режиме эмулятора устройств chrome, всего за пару минут можно сделать полные скриншоты сайта на всех расширения десктопных и мобильных устройств.
4. Временная почта (https://temp-mail.ru/)
Часто нужно зарегистрироваться на каком-либо сайте, но нет желания оставлять там свою почту, захламлять почту какими-то левыми письмами. Хороший выход — временная почта. Вы не будете ни на кого подписаны, вам не будет надоедать рассылка. Одно время я регистрировался на сервисе у которого был пробный период 30 минут, с временной почтой меня это ограничение не пугало. Каждый раз регистрировал аккаунт на новый email (хорошо хоть регистрация была в 2 клика).
5. Иконки (https://iconmonstr.com/)
Пользуюсь этим сервисом примерно полгода, здесь достаточно иконок на все случаи кода :). Доступные форматы: PNG, SVG, PSD, EPS. Присутствует кастомизация иконок. Svg-код компактный, сравнивал с другими сервисами, там кода больше в два-три раза. Есть еще один сервис которым я пользуюсь часто, но я не стал его включать в список так как на нем бесплатно доступен только формат PNG и вставка HTML, советую его попробовать, там очень много иконок в разных вариациях. https://icons8.ru/
6. Цвета в стиле flat (http://www.flatuicolorpicker.com/)
Как-то раз я искал нужный мне для работы оттенок цвета в интернете и наткнулся на сайт, простота и наглядность которого мне очень понравились, теперь я часто ищу нужные мне цвета и оттенки именно на нем. Количество цветов здесь не очень большое, но для большинства задач вполне достаточное. Еще один сайт который следует упомянуть — https://www.materialui.co/colors, на нем представлено больше оттенков и они по другому структурированы.
7. Миниатюра сайта (https://screenshotmachine.com/)
Я долгое время искал подходящий для меня сайт для созданию миниатюр, перепробовал много вариантов и в каждом из них были какие-то недочеты, которые заставляли искать дальше. В итоге я остановился именно на screenshotmachine. Доступны миниатюры desktop, tablet, mobile разрешения. Все миниатюры для этой статьи были созданы на screenshotmachine.
8. Автопрефиксер (https://autoprefixer.github.io/ru/)
Возможно вы скажете: «А как же различные системы сборки, на дворе уже 2018 год!». Да, вы абсолютно правы, системы сборки предоставляют превосходный набор всевозможных плагинов, но не всегда целесообразно использовать автопрефиксер в системе сборки, проще быстро вставить участок кода и вытащить с префиксами. Конечно, работая с проектом с самого начала я использую систему сборки со всеми возможными плагинами и инструментами для более быстрой, качественной и комфортной работы. Я часто работаю с проектами, которые не подразумевают в работе систему сборки, это в основном небольшие точечные правки. На этом сайте мне не нравится только одно — форматирование конечного css, который выводится каскадом, а мне бы этого не хотелось, но как это изменить я не нашел.
9. Генератор текста-рыбы (http://fishtext.ru/)
Подстановочный текст очень важен для сайта, абы что не вставишь на сайт, хотя некоторые разработчики могут вставить мат или свои нелицеприятные мысли относительно заказчика и проекта. Я категорически против таких подстановочных элементов на страницах. По-хорошему, используйте текст для подстановки со старого сайта заказчика, или найдите в интернете текст, который будет максимально приближен к тематике сайта. Но если у вас такого нет, выход один — использовать текст «рыбу». Есть «рыба» зарубежная (lorem) и отечественная (далеко далеко). Я не использую их. Во-первых, текст должен быть на том языке, который будет в окончательной версии сайта, во-вторых, текст должен не замыливать глаз своей однообразностью. На этом сайте текст генерируется каждый раз заново (блоки иногда повторяются), присутствует генерация по количеству абзацев.
10. Трендовые цвета (длинная ссылка)
Нашел эту статью совсем не давно, там предоставлены 119 классных цветов, спасибо автору! Только есть один неудобный момент, hex-код цвета расположен на картинке, и скопировать его оттуда не получиться.
Благодарю за прочтение статьи, если у вас есть вопросы, замечания или пожелания пишите в комментарии, на почту dan.postnov@gmail.com или в вк.
Канал о фрилансе
Там я делюсь фишками о фрилансе: деньги, клиенты, автоматизация, фриланс. Раньше это был закрытый материал с платным доступом. Сейчас он открыт. Иногда подписчикам будет открываться платные материалы. Подписаться