Инструменты для web-разработки

В этой статье описаны несколько замечательных инструментов, которые можно запускать как на десктопе, так и на сервере. Помимо того, в списке есть также инструменты PHP и библиотеки JavaScript.

PhpStorm

PhpStorm представляет собой интеллектуальный редактор для PHP, HTML и JavaScript с возможностями анализа кода на лету, предотвращения ошибок в коде и автоматизированными средствами рефакторинга для PHP и JavaScript.

Guetzli

Новый инструмент от Google, позволяющий сжимать изображение на 35 % от первоначального размера, сохраняя при этом качество. Это настоящая находка, учитывая, что аналогичные программы с открытым исходным кодом (например, JPEGOptim и jpegtram) могут это делать только на 20 %. Похоже, что скоро будет запущено несколько приложений и плагинов для CMS, которые интегрируют Guetzli для оптимизации изображений в формате JPEG.

Developer Roadmap

В общем-то, это инфографика, показывающая путь веб-разработчика. Есть три направления — Front-end, Back-end и DevOps. С помощью этой штуки можно рассмотреть на каком этапе ты сейчас находишься, что мог пропустить и куда будешь двигаться дальше.

Netlify CMS

SmashingMagazine сделали смелый шаг — избавились от WordPress и решили попробовать что-то новое с другой CMS под названием Netlify CMS. Это абсолютно новый инструмент, встроенный в React.js, который может быть интегрирован в такие статичные генераторы сайтов как Jekyll, Hugo и MiddleMan.

BadSSL

Это веб-ресурс, который позволяет проверить конфигурацию SSL. BadSSL — это классный и удобный инструмент для поиска и исправления багов по SSL на твоем сайте.

Alix

Расширение для Chrome, которое позволяет проверять доступ к твоему сайту. После установки и активации плагин добавляет overlay-окно на страницу, которое предупреждает об ошибках.

AR.js

Эта библиотека JavaScript позволяет создавать и работать с дополненной реальностью, используя веб-технологии. Удивительно быстро работает на смартфонах.

React Trend

Это компонент из Upsplash для создания линейных диаграмм с показом трендов. Он настраивается: можно установить толщину линии, цвет, градиенты и гладкость кривой. также можно использовать GUI для удобного создания кода компонента.

Goops

Goops — это удобный интерфейс командной строки, который анализирует каталог твоего проекта и определяет каталог и файлы для добавления в .gitignore. CLI может быть установлен через NPM. После установки нужно набрать goops и, собственно, все.

Debug CSS

DebugCSS — это утилита CSS-drop, которая анализирует и проверяет твой вывод CSS в браузере. Инструмент сам по себе похож на Alix — когда ты загружаешь страницу debugCSS, приложение выделяет баговые элементы на странице и выдает предупреждения.

EagleJS

EagleJS — это библиотека JavaScript для создания презентаций, похожая на RevealJS. EagleJS построена с использованием Vue.js, JavaScript MVC framework и использует Pug в качестве системы шаблонов для создания слайда.

BootstrapTour

Библиотека JavaScript для создания pop-up гайдов с использованием компонента Bootstrap. Как правило, всплывающие подсказки приложения появляются, когда новый пользователь просматривает их через интерфейс приложения. Это идеальная библиотека, если твой сайт создавался с использованием Bootstrap.

Brick

Это библиотека JavaScript, которая служит для создания пользовательского интерфейса веб-приложений. Среди компонентов, входящих в коллекцию, ты найдешь такие функции, как календарь, меню и форма. Он также содержит компонент «storage-indexeddb», позволяющий хранить клиентские данные с помощью IndexedDB.

Deployer

Deployer — это инструмент разработки твоего PHP-сайта. Он работает со многими популярными платформами, включая WordPress, Drupal, Magento, Laravel и CodeIgniter. С помощью этого инструмента ты можешь создавать свои собственные алгоритмы, которые запускаются при разработке. Он работает с функцией отката, которая позволяет возвращаться к предыдущей версии.