Chrome DevTools очень полезный инструмент для веб-разработчика, но есть возможности DevTools, которые неизвестны большинству разработчиков. Советую узнать!

Инструменты Chrome DevTools, о которых ты не знал

#tools #css #html

​​Wappalyzer - расширение для определения технологии, используемые веб-страницей

#tools

​​Визуализация вашей активности на GitHub за всё время существования профиля

GitHub Contribution Chart Generator

#tools

​​Большой набор шпаргалок по разным технологиям и языкам программирования - OverAPI

#tools

Возможно у вас давно стоял вопрос: как же просто и быстро деплоить frontend проект?

Беглый деплой или как развернуть front-end за 15 минут

#tools

​​Mort — иструмент для удаления "мертвого" CSS.

GitHub

#tools #css

​​GradPad — онлайн иструмент для создания CSS градиентов

#css #tools

​​Curl — это инструмент командной строки для HTTP(s) запросов, FTP и десятка других протоколов, о которых вы, возможно, не слышали. Он может загружать файлы, проверять заголовки ответов и свободно обращаться к данным.

В веб-разработке curl часто используется для тестирования соединений и работы с RESTful API.

Установить

#tools

​​VS Code прямо в браузере!

Сoder — это полноценный редактор кода в вебе. Поддерживаются расширения для VS Code, можно приглашать участников в свой проект, а так же деплоить и делиться своим проектом прямо через этот сервис.

Для каждого пользователя выделяется виртуальная машина на Linux с 3GB пространства + дополнительные 3GB для проектов.

coder.com

#vscode #tools

​​CSS Grid Layout Generator — бесплатный инструмент, с помощью которого можно быстро и наглядно проводить эксперименты с CSS-гридами и получать на выходе разметку в CSS, JSX или Styled Components.

Полезный инструмент от нашего подписчика. Рекомендуем!

Сервис | GitHub

#css #tools #frontend

​​CSS Click Chart — это инструмент, с помощью которого можно посмотреть, как реализуется то или иное действие на CSS. Также отображается поддержка браузерами.

css3clickchart.com

#css #tools

​​CSS values — это полезный инструмент, который показыват порядок расположения параметров у CSS свойства. Например: margin: [margin-top] [margin-right] [margin-bottom] [margin-left]

cssvalues.com

#css #tools

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

Чтобы знать о неиспользуемых файлах в проекте, добавьте в свой конфиг unused-files-webpack-plugin.

NPM | GitHub

#webpack #tools

Barba.js — это небольшая JavaScript бибилиотека, с помощью которой можно сделать плавные переходы между страницами. Библиотека уменьшает задержку между переходами, минимизирует HTTP-запросы и улучшает UX.

Демо | GitHub

#js #tools

Во время разработки на OSX часто можно перепутать строчные и заглавные буквы в пути при импорте модуля. На маке сборка соберется, но на других чувствительных к регистру системах она упадет. Если хотите избавиться от этой проблемы, нужно поставить case-sensitive-paths-webpack-plugin.

Теперь при импортировании модуля с неправильным регистром вы всегда будете получать ошибку.

NPM | GitHub

#npm #tools

Open in Browser — это расширение для VS Code благодаря которому, через контекстное меню, можно открыть страницу в браузере, заданном по умолчанию, или в каком-нибудь другом браузере, установленном в системе.

VS Code Marketplace | GitHub

#vscode #tools

Hammer.js — это JavaScript библиотека распознавания жестов прикосновения. Задайте области, к которым нужно прикоснуться, и ждите, когда события попадут в функции слушателя.

Демо | Github

#js #touch #tools