20 новых инструментов для веб-разработчиков

Веб дизайн 2 974 просмотров 0
20 новых инструментов для веб-разработчиков

С помощью CLI мы можем оптимизировать и автоматизировать процесс веб-разработки. И именно поэтому в этой статье мы описали несколько замечательных инструментов, которые ты можешь запускать как на десктопе, так и на сервере. Помимо того, в нашем списке есть также инструменты PHP и библиотеки JavaScript. Ну что же, давай пройдемся по каждому из них.

Guetzli

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

/

guetzli

/

Developer Roadmap

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

web-developer-roadmap

/

Netlify CMS

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

/

netlifycms

/

BadSSL

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

/

badssl

/

Alix

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

/

alix

/

AR.js

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

/

arjs

/

React Trend

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

/

react-trend

/

Gitee

Приложение для macOS, которое мониторит твою активность на GitHub. Инструмент добавляет новый элемент в строку состояния, на котором указывает количество звезд, подписчиков и уведомлений. Если кратко, это GitHub на рабочем столе.

/

gitee

/

Goops

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

/

goops

/

Debug CSS

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

/

debug-css

/

EagleJS

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

/

eagle-js

/

BootstrapTour

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

/

bootstraptour

,

Brick

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

/

brick

.

OctoTree

OctoTree — это полезная утилита, которая позволяет просматривать исходные коды и файлы на Github с помощью структуры Tree, как в редакторе IDE. Он используется в качестве плагина для Chrome, Safari, Firefox и Opera и доступен в их официальном магазине расширений. Octotree поддерживает репозиторий Private и Enterprise Github.

.

octotree

.

Github Notification

Еще одно полезное расширение Github для Chrome. После установки ты сможешь получать уведомления, даже если ты не находишься на странице Github.

.

github-notification

.

Deployer

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

.

deployer

.

PHPStan

Сканирует файлы PHP с целью поиска ошибок.

.

phpstan

.

NGINX Boilerplate

Коллекция  конфигураций Nginx, которые включают в себя кэширование бэкэнд, ограничение скорости соединения и запросов, а еще некоторые другие методы для увеличения скорости загрузки сайта.

/

nginx-boilerplate

.

Bubbly

Командная строка, которую ты можешь установить на свой сервер для создания, управления и обновления сертификата с помощью Let’s Encrypt. Doplying SSL теперь становится намного проще.

.

bubbly

,

Waffle Grid

Еще одна структура CSS-сетки, построенная с использованием Flexbox.

.

waffle-grid
comments powered by HyperComments
comments powered by HyperComments

Теги

Об авторе: Sasha

Sasha

Фотограф. Улавливаю прекрасные мгновения в жизни людей :)

Отключите, пожалуйста, Adblock:(

Отключив блокировку рекламы - Вы поддерживаете наш проект!

Яндекс.Метрика