Полезные веб сервисы для веб разработчика
Статья, перевод которой мы публикуем сегодня, посвящена 10 полезным инструментам, которые предназначены для веб-разработчиков. Автор материала считает, что это — как раз такие инструменты, которые позволяют, как говорится, «работать с умом, а не до ночи».
1. Website Vulnerability Scanner
Website Vulnerability Scanner — это сканер уязвимостей веб-сайтов, разработанный в Pentest-Tools.com. Этому инструменту нужно дать ссылку на сайт, который нужно проверить на уязвимости, после чего будет сформирован отчёт.
Результаты проверки сайта в Website Vulnerability Scanner
2. Nibbler
Nibbler — это инструмент, направленный на разносторонний анализ веб-проектов. В отчёт, формируемый им, входят оценки доступности контента сайта, оценки того, насколько позитивными могут оказаться впечатления пользователей от работы с ним. Nibbler анализирует сайты на предмет поисковой оптимизации и того, насколько хорошо они спроектированы и созданы.
Nibbler даёт высокую оценку сайту dev.to
3. Meta Tags
Meta Tags — это простой онлайновый инструмент, который можно использовать для быстрой проверки мета-тегов веб-сайтов.
Проверка мета-тегов с помощью Meta Tags
4. Google Lighthouse
Google Lighthouse — это опенсорсная автоматизированная система, позволяющая оценивать качество веб-проектов.
Она выводит оценки, имеющие отношение к разным аспектам устройства и функционирования сайтов. В частности, с её помощью можно оценить производительность, доступность, поисковую оптимизацию сайта, получив, помимо итоговых результатов, детальные отчёты и рекомендации по улучшению сайта.
Анализ сайта в Google Lighthouse
5. Endtest
Endtest (сразу скажу, что я там работаю) — это интеллектуальная платформа для автоматизации тестирования, которая позволяет создавать комплексные тесты и выполнять их во всех основных браузерах.
Я автоматизировал Sign In-тест для сайта DEV Community и прогнал этот тест в облачной среде, в браузерах Chrome, Firefox, Edge, Safari и Internet Explorer 11.
Оказалось, что этот сайт, несмотря на то, что при его создании использовано множество «лучших практик», не особенно хорошо работает в Internet Explorer 11. Вот как выглядят результаты тестирования.
Результаты тестирования в Chrome
Результаты тестирования в Internet Explorer 11
6. Loom
Loom — это бесплатное расширение для Chrome, которое позволяет делать видеозаписи, одновременно захватывая изображение с экрана и с веб-камеры.
Подобные записи можно рассматривать как альтернативу видеозвонкам, когда собеседники могут записывать в удобное для них время комментарии к некоему проекту и отправлять их друг другу.
Chrome-расширение Loom
7. Pexels
Pexels — это сайт, на котором можно найти бесплатные фотографии и видеоматериалы для своих проектов. Это — один из немногих сайтов, на котором, чтобы скачивать материалы, необязательно даже регистрироваться.
Меня этот сайт всегда выручает в ситуациях, когда мне надо сделать какой-нибудь прототип, а отдел маркетинга ещё не прислал официальные материалы.
Сайт Pexels
8. Figma
Figma — это инструмент для прототипирования сайтов, хорошо подходящий для командной работы над проектами. Figma поддерживает не только средства для создания прототипов, но и позволяет командам разработчиков и других специалистов обсуждать проекты и их отдельные детали.
Figma
9. Funkify
Funkify — это расширение для Chrome, которое позволяет разработчику взглянуть на веб с точки зрения людей с ограниченными возможностями. Это помогает разрабатывать сайты, с которыми будет удобно работать всем категориям пользователей.
Funkify
10. PerfectPixel
PerfectPixel — это расширение для Chrome, которое позволяет помещать поверх HTML-страницы полупрозрачное изображение, представляющее макет страницы, подготовленный дизайнером. Это помогает выполнять попиксельное сравнение того, что создано, с тем, что должно получиться.
Сравнение страницы и её макета с помощью PerfectPixel
Какие инструменты для веб-разработчиков вы добавили бы в этот список?
Пост является личной подборкой полезных и нужных онлайн сервисов, которые позволяют бесплатно (или условно бесплатно) создавать действительно крутые вещи и разворачивать их в Сети. Не претендую на новизну или на полноту, но буду счастлив, если кому пригодится.
Всем нам иногда хочется попробовать новую идею, запилить какой-нибудь сайтик про манулов, но чтоб обязательно на node.js, хайлоад реди, с мемкешем, монго, фейловером и с претензией на мировое господство. У меня для Вас хорошие новости: благодаря щедрости проклятых западных капиталистов всё это можно получить совершенно бесплатно.
Github
Первое, что должен сделать каждый IT боец, вставший на путь захвата мирового господства — завести аккаунт на гитхабе. Кто не в теме — это онлайн система контроля версий, основывающаяся на распределённой vcs git. На гитхабе мощная социальная составляющая — можно подписываться на чужие репозитории и изменения, форкать проекты (то есть создавать ответвления исходного кода со своими изменениями). Предлагать свои изменения разработчикам любимых софтин при помощи pull-requests, есть простой багтрекер, code review. У github есть возможность взаимодействия с svn, но svn это для дедушек. Githib бесплатен, пока вы не захотите скрыть репозиторий от чужих глаз. Но вам же нечего скрывать и стесняться, правда? Альтернативы github существуют, (например bitbucket) но они не кошерны.
Mockingbird
Пересмешник mockingbird (от mockup — набросок, макет) — онлайн инструмент для создания набросков интерфейсов. Можно прямо в браузере накидать кнопочки, поля ввода, слайдеры и прочую требуху. Удобно прототипировать интерфейсы, и прикладывать к задачке для верстальщика. Бесплатно можно вести только один проект с 10 страничками, но этого часто бывает достаточно.
JS Fiddle
JSFiddle — онлайн инструмент для экспериментов с js, css, html. Рабочая область представляет собой 4 окошка, — html, js, css и результат. В первые 3 мы пишем свой код (есть подсветка синтаксиса) а в четвёртом появляется результат рендеринга, с которым можно взаимодействовать. Поддерживается куча js библиотек (jquery,angular, etc) их версий. Например очень удобно проверять, как работает та или иная фишка а разных версиях jquery — которые можно переключать просто кликом мышки на выпадающем списке. Всё только по любви — никаких денег.
SQL Fiddle
SQLFiddle — классный онлайн инструмент для проверки идей и кода на sql, поддерживается куча разных СУБД, в т.ч. Mssql, sqlite, mysql, postgresql, oracle и т. д. Если нужно проверить какой нибудь запросик, посмотреть план выполнения запроса, попробовать соптимизировать. Работа с системой разбита на две фазы — создание схемы и, собственно выполнение запросов и dml. Хранимые ф-ии кстати тоже можно писать и выполнять. Всё бесплатно.
Heroku
Heroku — это классический PaaS хостинг приложений. В отличие от обычных vps хостингов — вам предоставляется не прямой доступ к виртуальной машине с рутовым шеллом и прочим хардкором, а тулкит для публикации вашего приложения в преднастроенной среде. То есть прозрачно для вас уже настроен какой-то веб сервер, какой то балансировщик, от вас требуется указать тип и версию среды (node.js, python, и т. д.) и залить своё приложение через git. Один web dyno (так у них называется экземпляр приложения) предоставляется бесплатно. Прелесть PaaS в том, что низкоуровневой конфигурацией заморачивается провайдер — вы занимаетесь только приложением. На heroku есть множество т. н. Аддонов — memcached, mongodb, mysql, postgres, rabbitmq, sphinx и прочие радости разработчика. Вам лишь нужно сказать — хочу и оно появится. Рабочее, настроенное, и поддерживаемое.
Cloud9 IDE
Облако 9 — это практически полная среда разработки прямо в браузере. Можно не заморачиваться разворачиванием и настройкой например LAMP + Eclipse/Netbeans/Zend/Whatever а сразу открыть браузер и начать кодить. C9 замечательно интегрируется с github и heroku, может деплоить на sftp. Кроме собственно среды — есть полноценная linux консоль (прямо в браузере). В вашем распоряжении виртуалка с RHEL 6.4 (видимо c9.io хостится на OpenShift.com). Можно полноценно кодить хоть с айпада. Ограничение бесплатной версии — 128 мб у виртуалки и только один приватный проект, количество открытых не ограничено.
Travis CI
Travis — это система Continuous Integration, которая интегрируется с Вашим репозиторием на github и запускает тестовый набор при коммите. Можно например настроить автоматический деплой проекта на разные домены heroku при прохождении коммитом тестов в ветках staging и production. В репозитории вашего приложения добавляется файлик .travis.yml — в котором описывается, что нужно для запуска тестов. Для открытых репозиториев — абсолютно бесплатно.
Sauce Labs
SauceLabs — это selenium тестирование в облаке. Selenium — это штука, которая управляет тестированием в браузере. В скрипте мы описываем, куда кликать и что писать, а selenium запускает браузер, выполняет описанные действия и проверяет результат. Ребята просто настроили 100500 виртуалок с over9000 версий разных браузеров и прикрутили к ним selenium. Мы можем просто писать selenium тесты указывая полученный на saucelabs адрес и код доступа и наши тесты будут запускаться в их облаке на самых разных IE, Opera, Safari и пр. К тестам пишется лог, делаются скриншоты и видео. Бесплатный аккаунт даёт 100 минут автотестов на win/linux, 40 на mac и 30 — на потыкать ручками.
Cloudflare
Cloudflare — это CDN и защита от DDOS в одном флаконе. Вместо того, чтобы направлять ваш домен на IP вашего сервера, вы делегируете его на сервера Cloudflare — а они уже решают, какие запросы отправить на ваш сервер, какие отдать из кеша, а каких пользователей заблокировать путём запроса капчи. Всё это можно настраивать, включать разные оптимизации и минимизации. Просто сказка. Базовая функциональность бесплатна — плата идёт за дополнительные настройки и более продвинутые ф-ии защиты от DDOS.
Прошу дополнить список своими любимыми кусочками халявы в комментариях.
У каждого веб-дизайнера, независимо от того, является ли он фрилансером или работает в офисе, имеются свои технологии, которые он применяет при создании новых проектов.
При этом есть перечень сайтов, которыми пользуются все веб-разработчики. Они помогают повысить качество продукта и привлечь как можно больше посетителей. 10 таких сайтов рассмотрены ниже.
1. Github.com
Данный ресурс является своеобразной соцсетью, но только предназначен он не для широкой аудитории, а для специалистов в области информационных технологий. Каждому веб-дизайнеру следовало бы иметь здесь аккаунт.
2. Svgporn.com
На этом сервисе имеется свыше 1000 логотипов, предназначенных для использования веб-разработчиками в их проектах. Все они имеют отличное качество, но при этом платить за них не придётся ни копейки.
Одна из главных положительных особенностей представленных здесь на выбор изображений заключается в том, что при приближении их качество не утрачивается. Это всё благодаря векторной технологии. Разумеется, весят эти картинки не мало, но ради столь высокого качества можно пожертвовать цифровым пространством в несколько гигабайт.
3. Pixabay.com
А это ещё один сервис, который предоставляет на выбор множество бесплатных изображений. Искать подходящее фото поможет очень удобная встроенная поисковая система. Здесь можно выбрать любую категорию, а также воспользоваться подсказками по поиску похожих картинок.
Большой радостью для русскоговорящих веб-дизайнеров станет тот факт, что PixaBay имеет интерфейс на русском языке.
4. Nick-name.ru/generate/
Этот сайт выручит, когда необходимо как можно быстрее придумать уникальный никнейм. В основу генерации ника положено три алгоритма, каждый из которых имеет свою степень сложности.
Начальную букву пользователь может задать сам. Также можно вручную выбрать любой алгоритм.
Созданный никнейм может быть зарегистрирован на этом сайте, и тогда для других пользователей это сочетание символов будет уже недоступным.
5. Masonry.desandro.com
А этот ресурс придёт на помощь тем, кто не желает думать над созданием сеток страниц. Здесь можно выбрать любую сетку, и блоки автоматически будут подстроены под нужные размеры.
6. Dummytextgenerator.com
Этот генератор текста примечателен тем, что он способен создавать до 2,5 тыс. слов. При этом можно заранее указать, сколько в тексте будет абзацев. Их максимально возможное количество – 100.
Можно также включить html-теги и жирный текст. Кроме того, генератор способен создавать рандомные заголовки.
7. Premiumpixels.com
Этот ресурс поможет тем, кому требуются PSD-макеты и темы для WordPress. За скачивание материалов ничего платить не нужно.
8. Devdocs.io
Здесь можно найти документацию практически по любой технологии разработки. Это довольно удобно, поскольку не придётся тратить много времени на то, чтобы искать информацию по каждой отдельной технологии, посещая много разных сайтов.
9. Fontstorage.com
На этом сайте есть много различных шрифтов, предоставляемых пользователям абсолютно бесплатно.
Ресурсом удобно пользоваться, так как здесь сразу показано, как будет смотреться шрифт на создающемся сайте.
10. Mapbox.com
Этот ресурс придётся по нраву тому, кто хочет, чтобы раздел «Контакты» на его сайте отличался от обычных карт Google и Яндекс. Здесь из множества вариантов можно выбрать те карты, которые, по мнению веб-дизайнера, хорошо впишутся в его сайт. Например, можно оформить карты в космическом стиле или сделать так, чтобы казалось, будто они нарисованы от руки.
Стоит сказать, что данный сервис платный. Однако можно взять карты бесплатно, при условии, если они не будут применяться в коммерческих целях.
Независимо от того, какими творческими способностями обладает человек, у него не получится создать лучший дизайн, если в распоряжении нет нужных инструментов и ресурсов. Разумеется, можно приобретать услуги на разных сервисах, но ведь имеются и бесплатные аналоги, мало чем уступающие платным.
Сервисы, которые представлены ниже, помогут сэкономить веб-дизайнеру время и деньги.
1. Freebbble.com
Здесь есть много отличных дизайнерских решений. Пользователи могут скачивать их абсолютно бесплатно.
2. Allthefreestock.com
Этот сервис предоставляет изображения, видео и звуки, а также различные иконки. Одно из главных преимуществ данного ресурса – простота в использовании.
3. Pixelbuddha.net
Этот сервис больше предназначен для профессионалов. Среди предоставляемых им материалов имеются и платные.
4. Webfonts.pro
Данный сервис представляет собой каталог шрифтов, предназначенных для применения в веб-дизайне. Подключение шрифтов может быть прямым, а можно использовать для этого плагин. Он поможет добавлять некоторые необычные шрифты.
В общей сложности на сайте четыре с половиной сотни шрифтов. Две трети из них поддерживают русские буквы.
5. Materialpalette.com
Главное предназначение этого ресурса – генерирование палитр. Он, несомненно, подойдёт тем, кому нравится MaterialDesign.
Всё, что требуется – выбрать пару цветов. После этого будет получена полная палитра, доступная для скачивания.
6. Coolors.co
Это ещё один ресурс, упрощающий процесс подборки цветов. Он не просто помогает получить потрясающие цветовые схемы, но ещё и значительно ускоряет процесс подбора.
7. Uxcheck.co
Для Chrome нет ничего невозможного. Он способен даже определить, имеются ли на сайте проблемы с юзабилити.
Сервис UXChek – это расширение для Chrome, которое занимается поиском проблем. Отметки затем могут быть экспортированы.
8. Ui-cloud.com
Это одна из самых обширных баз, где хранится множество дизайнов для интерфейсов. Благодаря этому ресурсу может быть создан качественный дизайн и обеспечена простота в использовании.
9. Frame.com
Сервис Frame придётся очень кстати при необходимости быстро показать вёрстку сайта. Для этого потребуется лишь загрузка и последующее подравнивание картинки.
10. Pttrns.com
Этот сервис прежде всего следует порекомендовать тем, кто увлечён дизайном страниц для смартфонов. Здесь имеется огромное количество примеров, авторами которых являются профессионалы.
11. Hipsterlogogenerator.com
Данный сервис следует использовать тем, кто устал от клиентов и желает просто хотя бы чуть-чуть побыть ленивым хипстером. Главное только не забыть о добавлении свэга. Пожалуй, никто не будет спорить с тем, что это очень красиво.
12. Onepagelove.com
Этот сервис не стоит игнорировать веб-разработчикам, занимающимся созданием сайтов, которые состоят лишь из одной страницы. Благодаря OnePageLove одностраничные проекты получатся привлекательными и удобными для посетителей.
13. Csstriggers.com
Этот сервис принесёт много пользы тем, кто занимается анимацией элементов сайта. Здесь имеется удобная таблица, предоставляющая данные о CSS-свойствах, а также о том, что происходит, когда эти свойства изменяются.
14. Niice.co
Данный сервис по сути является поисковой системой. С его помощью можно искать информацию одновременно на нескольких тематических сайтах. Для введения запроса, разумеется, используется английская раскладка клавиатуры.
15. Color.hailpixel.com
Это сайт для подбора гармоничной световой палитры. Достаточно просто двигать курсор по странице, чтобы видеть изменения цвета фона. А в окошке, расположенном в центральной части экрана, отображается hex-код цвета. Для создания полоски цвета и получения его кода, необходимо просто кликнуть мышью.
16. Moveast.me
Этот сервис представляет собой базу фотографий, автором которых является португальский фотограф и путешественник. У него получаются очень качественные снимки. И в этом легко убедиться – достаточно просто зайти на Moveast и посмотреть на те изображения, которые здесь имеются. А самое приятное – то, что любое из них можно использовать бесплатно.
17. Jeshoots.com
Если требуются самые свежие фотографии, то стоит посетить сервис Jeshoots. Здесь всегда много современных картинок, предоставленных на выбор веб-дизайнерам.
18. Fontawesome.com
С абсолютной уверенностью можно сказать, что данный сервис является лучшим иконочным шрифтом. Его без проблем можно подключить на любом сайте.
19. Flaticon.com
Здесь точно удастся найти подходящие иконки для своего сайта. Ведь общее их количество превышает 16 000.
20. Pjrvs.com
На этом сервисе можно почитать статьи о разработке сайтов и об их дизайне, а также выбрать несколько картинок из большой качественной коллекции.