6 инструментов для повышения вашей продуктивности как Front-end разработчика.

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

№1: Sizzy

Сделайте свой сайт адаптивным (почти) без проблем, используйте Sizzy! В моем первом опыте работы в качестве веб-разработчика передо мной стояла задача улучшить адаптивный сайт веб-сайта. И это был хороший урок по изучению CSS. Но также было больно переключаться на мобильное представление каждый раз, когда я вносил изменения. Именно тогда я начал употреблять Sizzy.

И Sizzy - один из тех инструментов, в которые я влюбляюсь, потому что он экономит мне время. Это не бесплатный инструмент, но оно того стоит! А теперь давайте перестанем болтать и углубимся в подробности. Один снимок экрана, и вы поймете всю прелесть этого инструмента:

Однако вы должны иметь в виду, что Sizzy не проверяет кроссбраузерность. Поскольку он не имитирует различные механизмы рендеринга браузера, могут быть некоторые незначительные отличия от реальной проверки устройства.

№2: Получить сканирование css

Еще один платный, но очень хороший инструмент: GetCssScan. Это похоже на сканирование css. Таким образом, это позволит вам быстро проверить CSS любого элемента на вашей странице. Он работает как надстройка и имеет несколько замечательных функций, например, позволяющую отображать сетки или стили наведения.

№3: Bit and Bit.dev

Тратить часы на работу над этим компонентом? Сделайте его многоразовым! Это единственная цель Bit. Bit (Github) позволяет вам легко собирать компоненты из вашей кодовой базы и делиться ими с коллекцией (библиотекой) в bit.dev.

Bit - это платформа для совместной работы компонентов. Bit усиливает возможность повторного использования компонентов, предоставляя экосистему для совместного использования компонентов между приложениями и между репозиториями.

Очень легко загрузить ваши компоненты в бит, а затем, позже, повторно использовать их в другом проекте. Некоторые компоненты также являются общедоступными, поэтому не стесняйтесь проверять работу других разработчиков.

# 4: Можно ли использовать

Я не был уверен, что мне нужно представить это, поскольку все это знают. Но эта статья не была бы полной без этих инструментов. Кроссбраузерная совместимость может быть трудной, почти такой же сложной, как адаптивность. Могу я использовать здесь, чтобы помочь вам ориентироваться в водах браузеров.

# 5: BundlePhobia

Одна из вещей, которые я иногда использую, - это Bundle Phobia. Это позволяет мне узнать стоимость добавления пакета. Это полезно, когда вам нужно выбирать между двумя разными пакетами или когда вы хотите посмотреть (и улучшить) производительность своего сайта.

Использование простое: выберите свой пакет или отсканируйте файл package.json. Если вы просканируете файл package.json, вы сможете упорядочить пакеты по размеру, и самые тяжелые пакеты могут оказаться не такими, как вы ожидали!

# 6: Контрольный список для внешнего интерфейса

Новый инструмент, который я только что обнаружил, - это контрольный список для внешнего интерфейса. Как следует из названия, это контрольный список. Он фокусируется на всех передовых методах и вещах, которые вам нужно обязательно иметь перед запуском веб-сайта. Это обычные вещи, но нужно помнить так много вещей, что никто не пожалеет о быстрой перепроверке!

# БОНУС: Инструменты дизайна

Давайте закончим с этим бонусом: список из нескольких инструментов дизайна, которые могут быть полезны

💅 Для цветов и форм:

Как этот цвет на сайте, найдите его с помощью ColorZilla. Теперь, когда у вас есть основной цвет, вы хотите выбрать цвета, которые будут с ним хорошо смотреться, используйте Colorhunt или coolors.co.

Вы хотите использовать градиенты. Уиградиенты и Вебградиенты здесь для вас!

Если вы хотите делать волны и настраивать их, вы можете использовать Get Waves.

👀 Иконки или эмодзи

Для значков и смайликов у вас есть много вариантов. Мои личные фавориты - The Noun Project и Tablericons. Но есть еще:

🖼️ Изображения:

Когда дело доходит до изображений, существует множество инструментов. Например, вам может потребоваться их сжать (Image Compressor, Compressor.io или Compress). Не забывайте использовать изображения без авторских прав. Вы можете найти их здесь: UIfaces, Pexel, Unsplash или ManyPixels.

🎨 Вдохновение:

Иногда макет не совсем ясен. Так что есть множество сайтов, на которых можно найти вдохновение. Вот неполный список:

А ты? Есть ли какой-нибудь инструмент, облегчающий вашу жизнь, чем вы хотели бы поделиться? Не стесняйтесь поделиться им!

JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал на YouTube в Decoded!