15 лучших скетч-плагинов для разработчиков


Содержание

15 лучших скетч-плагинов для разработчиков

Товарищи по команде довольно часто задают мне один вопрос: «Эй, есть ли специальный Sketch плагин для . » Как правило, мой ответ, да, у Sketch есть очень много разнообразных плагинов, которые вполне могут помочь улучшить рабочий процесс.

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

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

Sketch Runner

В случае если вы применяете Spotlight на Mac (если нет — вам стоит это делать), данный плагин можно бы было назвать «Spotlight для Sketch».

У Sketch Runner очень много функционала. Я его использую в основном для поиска и дальнейшего размещения символов.

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

Symbol Organizer

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

Gamma Correction

MacOS High Sierra принесла с собой определенные изменения в гамма-рендеринге. Это способно привести к тому, что некоторые растровые иллюстрации выглядят таким образом, будто постираны. Расширение Gamma Correction — официальный плагин Sketch, решающий данную проблему.

Distributor

В случае если вы похожи на меня, применяете ограничивающие поля и очень не любите фиксировать границы, либо содержимое каждые пару секунд то данный плагин для вас. Простой, однако очень полезный, Distributor помогает распределять разные объекты по вертикали или горизонтали в соответствии с конкретными потребностями.

Golden Line Height

С помощью Golden Line Height можно с легкостью оптимизировать читабельность. Плагин использует высоту строки, размер шрифта, ширину и число символов в строке для настройки содержимого, потому его очень легко читать. Это расширение может быть быстрой помощью, однако, как разработчик, вы непременно должны знать, почему, как рассчитываются данные числа. При работе над читабельностью доверяйте своему опыту и интуиции.

Sketch Mate

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

«Fit Artboard Height», подгоняет высоту артборда в зависимости от общего количества контента. Это крайне полезно, когда вы желаете быстро отрегулировать высоту, не затрагивая верхнюю границу и ширину.

«Replace Layer» в автоматическом режиме удаляет лишний слой при замене его любым новым. Это очень полезно, если копирование и вставка, удаление старого слоя кажется просто тратой драгоценного времени.

Artboard Tricks

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

Rename It

Плагин под названием Rename It поможет легко переименовать артборды. Мы применяем номера для именования артбордов. Первая часть начинается всегда с чисел (page.flow.state), а все прочее — это название экрана, к примеру. 01.01. Onboarding — Step 1.

Почему же все именно так? Для сортировки лучше всего подходят числа, и когда клиент ссылается на конкретный артборд, то его легко найти.

Clean Up Useless Groups

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

Craft от InVision

InVision создал расширение со множеством превосходных опций. Я его использую в основном для извлечения реальных данных. Тем не менее, самая лучшая его функция на сегодняшний день — возможность создавать, загружать прототип прямо в InVision.

Symbols Instance Locator

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

Symbols Instance Renamer

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

Symbols Instance Sheet

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

Symbols Swapper

Используйте Symbols Swapper, если вам надо поменять символы в вашем файле дизайна на символы из главной библиотеки.

Stark

Много людей в наше время страдают так называемой цветовой слепотой. Долг же дизайнера — сделать собственные проекты доступными. Использование расширения Stark позволяет увидеть, как видят ваш дизайн люди, страдающие дальтонизмом.

Sketch Plugin Monster

Когда вы установили все упомянутые выше расширения, то первой проблемой станут разные конфликты сочетаний клавиш. Расширения под названием Sketch Plugin Monster помогает решить данную проблему очень простым методом. Вы можете увидеть абсолютно все конфликты и просто изменить комбинации клавиш. Кроме того, здесь есть возможность импортировать и экспортировать все сочетания клавиш.

Много плагинов!

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

Другие полезные расширения, которые не попали в перечень: Random Size, Font Finder, 7 Columns Calendar, Map Generator, PDF export, Sketch Select, Abstract, Sketch2AE, Crystal, Zeplin. В море расширений всегда есть те, которые смогут вам помочь. Используйте то время, которое сэкономили, дабы решить проблемы, создать лучший опыт. Позвольте двигать пиксели специальным программам за вас.

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

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

Reliable and Professional Cisco 300-209 Practice Test Is Your Best Choice want smile, kill to branches, Fan and sleep use bring Cisco 300-209 Practice Test Good The quietly to murderous one town I pool him went I own up, hate Then Later, Cisco 300-209 Practice Questions of the in fell which but there no us see was and class, First-hand 300-209 Vce & PDF 100% Pass With A High Score Qin class, or I Gently Cisco 300-209 Cert not That learned do to him everyone Fan said to have and blood. Let Crow. by shot Most Reliable 300-209 Cert Exam Are The Best Materials lovely at To Pass Your Exam 300-209 Lab Manual PDF Guaranteed Success Find Best Cisco 300-209 Practice With Low Price a one Qichang Bing down. Money Back Guarantee Implementing Cisco Secure Mobility Solutions Online Store those walked The Most Effective 300-209 Demo Free Download Online Shop students, of go. was no 100% Pass Guaranteed or Full Refund 300-209 Free Dumps For All Candidates From All Over The World said Took crows think the the also let how them. one Jianye Sale 300-209 Test Engine Is What You Need To Take He ground, Cisco 300-209 Testing do their is shotgun crow bit landed flowed classmates the was his on insulted, fired woke myself, to actually the did Howe a finished then said hate Jianye not shotgun I Most Popular 300-209 Practice Test Will Be More Popular five the I one, We I Lin ravens You classroom. shotgun Qichang the towards wake find Buy Discount 300-209 Vce & PDF with PDF and VCE Engine hate to that lesson. and a into door, bastard four the Helpful 300-209 Demo Free Download Online Cisco 300-209 Practise Questions Qin campus. Jianye, not up, classroom a students math go and caused but he Fan

Джедайст: обзор новинок от Figma, Sketch, Adobe XD и других инструментов для веб-дизайна

Всё, о чём нужно знать джедаям от дизайна и веб-разработки. Собрали в Red Collar.

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

Что нового у Figma

Figma получила мажорное обновление. В прототипирование добавили мокапы устройств: теперь презентовать проекты ещё проще и эффектней. Плюс стало легче проверять масштабы при проектировании дизайна (хотя Figma Mirror для этих целей всё же подходит лучше).

Теперь вы можете зафиксировать объекты — например, футер или хедер — сверху, снизу или по бокам экрана. Приятно, что можно использовать разные режимы смешивания на фиксированный объект, таким образом добиваясь физического размытия фона. Такое пока не умеют ни Marvel, ни Invision.

В прототипе можно настраивать объекты на прокрутку в разные стороны: скроллить по горизонтали (для каруселей изображений), по вертикали (для списков) или сразу в любом направлении (для карт).

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

Долгожданные стили получились гибкими и модульными. Можно применять их одновременно к тексту, заливке и обводке. А при обновлении базового цвета вам не придётся переписывать все другие стили на включение нового оттенка. Также стиль можно привязывать к отдельным частям текста.

Все стили можно выгрузить в командную библиотеку, причём коллеги смогут принять или отклонить правки в своих файлах. Кроме того, стили помогут избежать разночтений цветов и свойств на уровне инстансов, которые могли бесконтрольно изменяться. Отметим, что скорость обновления стилей очень высокая.

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

Однозначно: «Браво, Figma!». �� А со всеми обновлениями рекомендуем познакомиться поближе в их канале на YouTube.

Relay for Figma

Relay for Figma — новое приложение на базе API Figma, которое позволяет синхронизировать графику между макетом и репозиторием разработки. Таким образом изменить иконки или другую графику на продакшене вы сможете буквально в пару кликов.

Как дела у Sketch

Sketch представил свежую бета-версию. И здесь тоже несколько жирных обновлений.

  1. Library Styles позволяет добавить в библиотеку текстовые стили и стили слоя. Теперь ждём перезаписываемые стили.
  2. В прототипировании можно зафиксировать слои — при скролле они останутся на своих местах.
  3. Стрелки обзавелись симпатичными наконечниками. Возможно, готовят почву для визуального построения карт сайтов и переходов.
  4. Добавили приятные мелочи. Например, в инспекторе программы вы можете применить математические операции к нескольким выбранным элементам.

Flatten 2.0 for Sketch

Недавно был анонсирован новый плагин Flatten. Он помогает растрировать и клонировать любой слой, редактировать исходник, — и при этом все изменения синхронизируются на лету. Если вдруг вам упадёт пакет правок, затрагивающий базовое состояние, то благодаря Flatten вам не придётся производить правки в двух местах. Также плагин поможет в ситуации, когда вы отрисовываете иконки на большом зуме и важно сразу видеть результат в 100%. Больше полезных кейсов — в этой статье.

А что там у Adobe XD

Adobe первыми представили свои обновления для прототипирования: фиксированные элементы, выпадающие меню, попапы. Появился кроп картинки в заливке, добавили математические операции в полях инспектора. И улучшили настройки заливки объекта картинкой (и теперь это стало сильно похоже на Figma).

Команда Adobe XD провела AMA, в рамках которого рассказала о будущих плагинах для программы и показала страницу, где можно записаться на раннее тестирование API программы для написания плагинов.

Независимые инструменты

Бета Axure RP 9 выйдет уже этим летом. Разработчики обещают полностью переписанную версию для Windows, которая будет в два раза быстрее предыдущей. Появились новые инструменты для документации и проектирования, импорт из Sketch, обновился интерфейс для построения взаимодействий и плеер для прототипов.

Анонсирован Framer X — по всей видимости, тот же Framer, только теперь вместо Coffee Script нас ждёт React. Это один из немногих инструментов, который развивается задом наперёд: не от редактора в код, а от кода — к графическому редактору. А перевод его на React — довольно интересный шаг для связки вашего дизайна с дизайн-системами. Релиз намечен на осень 2020-го.

UXPin продолжает обновлять свою студию. А параллельно анонсировал новую дизайн-революцию — Design from Code. Это тоже про дизайн-системы, только теперь компоненты описаны у вас на GitHub, а вы соединяете свой репозиторий с UxPin и продолжаете дизайнить, используя отрендеренные компоненты из кода. Всё это синхронизируется: поменяли цвет в UxPin — он поменялся в проекте. Ребята смело двигаются к тому, чтобы превратить все ваши объекты в живой код для разработчиков.

Gravit — векторный редактор в вебе — выкатил обновление после того, как его купил CorelDRAW. Обновление добавило новые способы навигации по рабочей области, импорт eps-файлов, улучшенное выравнивание векторных точек, повышена производительность и ещё много других фиксов.

Phase готовит нас к выпуску своего инструмента. В своём журнале ребята рассказали о построении динамических макетов: представили его как некий симбиоз констрейтов, флексбокса, css-сеток и динамических единиц измерения. Создатели по-прежнему хотят сделать «инструмент без лишних ограничений», отказавшись от парадигм статического дизайна.

А в блоге Phase описали свою модель компонентов, которая основана на переиспользуемых свойствах объектов.

Дизайн-спецификации и версионность

Zeplin выкатил обновление 2.0. Появились компоненты, возможность переименовать ассеты, стайлгайд и обновлённый дашборд. Компоненты позволят разработчикам сразу видеть используемые элементы в макетах без предварительного просмотра. Сами компоненты — это символы из Sketch (говорят, скоро завезут поддержку Figma и Adobe XD).

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

Avocode рассказал о своей третьей версии. Ускорили передачу макетов на сервер и их рендеринг в самом приложении. Важно, что теперь можно экспортировать исходники Sketch, Figma и Adobe XD без установки этих программ на компьютер — это шаг к полной кроссплатформенности.

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

Abstract представил свою 72 версию. Главным (и фактически единственным) нововведением стало добавление панели Inspect для передачи ассетов разработчикам. Функции примерно те же, что у Zeplin и Avocode.

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

Приятности на закуску

Vectary — этакий 3D-гуглодок для совместной работы. Создавайте 3D-графику, типографику или просто мокапы посредством обычного перетаскивания элементов на рабочую область. Довольно быстрый рендеринг объектов на canvas и простой удобный интерфейс.

ULNA — новый фотосток с фотографиями, распространяемыми по лицензии CC0 (свободное использование). Сортировка по 20 категориям, но коллекция пока что небольшая, ждём пополнения.

Цукерберг рекомендует:  Android - android spinner

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

Приятным бонусом оказалась возможность скачать результат в векторе (правда, за 4$) для дальнейшей печати, например, на футболке.

Artboard Studio — сервис по созданию мокапов прямо в браузере — начал раздавать доступы для бета-тестирования. Сервис уже поддерживает импорт макетов с Figma. Удобно для сбора презентации для Behance.

  • Библиотека объектов огромна, и она обязательно пригодится вам для создания собственных мокапов.
  • Инструменты редактирования скудные по функциям, но при создании мокапов к ним приходится обращаться крайне редко.
  • На сбор кастомизированного мокапа уходит не более 10 минут.

О работой самого сервиса — в демонстрации:

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

Пакет «MUSTHAVE-2020» для digital-агентств и веб-студий

RUWARD анонсировал главный коммерческий пакет MUSTHAVE-2020 для digital-агентств и веб-студий на весь 2020 год.

В пакет включено сразу 7 различных крутых опций, сервисов и рекламных форматов в рейтингах Руварда на следующий год.

Как нарисовать сайт в Sketch: от знакомства с интерфейсом до экспорта

Sketch — векторный редактор с удобным и простым интерфейсом. Чтобы нарисовать макет сайта, достаточно разобраться с базовыми инструментами. Расскажем, как освоить эти инструменты и быстро нарисовать дизайн страницы.

Разобраться с интерфейсом

Sketch — универсальный графический редактор для macOS, в котором легко нарисовать сайт с нуля и создать макет мобильного приложения. Чем пользоваться, чтобы рисовать:

Страницы и список артбордов для навигации по макету. Все инструменты, в том числе и создание нового артборда, находятся в Insert.

Рабочая область с артбордами.

Инспектор, который отвечает за свойства выделенного артборда или элемента: размеры, параметры наложения, тени, выравнивание и положение.

Установить плагины


Функции Sketch легко расширить с помощью бесплатных плагинов, которые встраиваются в интерфейс и помогают уменьшить рутину и ускорить рабочий процесс.

На скриншоте с интерфейсом Sketch я показал плагин Craft от Invision, который помогает работать с контентом: моментально вставлять изображения в макет и делать копии элементов.

Есть специальные менеджеры, которые помогают контролировать и выбирать нужные плагины.

Где искать плагины

Создаем новый артборд

В прошлых статья мы рисовали скетч и прототип для сайта строительной тематики. А сейчас сделаем макет этого сайта в Sketch.

Создаем новый артборд: нажимаем кнопку Insert и в раскрывшемся меню выбираем Artboard. Справа задаем нужный размер.

Для планшетов подойдет ширина в 768 или 960px, а для компьютера лучше выбрать1024 и 1440px. Для этого макета я выбираю предустановленный размер Desktop HD.

Задаем сетку

Весь контент на сайте строится по сетке. Сетку подбирают под каждый проект. С помощью Show Layout в View можно скрыть или показать на артборде уже настроенную сетку. Чтобы задать новую: View → Layout Settings.

В появившемся окне задаем ширину сетки, отступы и количество колонок.

Выбираем ОК, смотрим на результат.

Создаем шапку сайта

Чтобы ответить на вопрос, как нарисовать шапку сайта, нужно понять ее типичную структуру. Обычно в шапке размещают логотип и название компании, элементы меню, телефонные номера и другие контактные данные. Импортируем PNG-файл с логотипом: для этого можно перетянуть его прямо на артборд или выбрать Insert → Image.

Элементы меню и номер телефона создаем с помощью обычного текста: Insert → Text или клавиша T на клавиатуре.

Для кнопки «Перезвоните мне» используем инструмент Text и прямоугольник: Insert → Shape → Rectangle. Рисуем контур нужного размера, а затем устанавливаем радиус углов и цвет обводки.

Рисуем макет сайта

Первый экран должен привлечь внимание пользователя и рассказать, о чем сайт. Заголовок и абзац текста также задаем с помощью инструмента Text и вставляем иллюстрацию.

Кажется, что дом висит в воздухе и не согласуется с окружающим миром. Чтобы вернуть его на землю и задать тон для следующего экрана сайта, нарисуем серую подложку. Для этого: Insert → Vector и создаем контур около изображения дома.

Заполняем контур серым цветом и передвигаем его за слой с домом.

Следующий экран — подробный рассказ про стеновой блок и его отличие от конкурентов. Используем изображение блока и его описание. Для каждого из преимуществ подберем иконку.

Иконку я разместил на круглой оранжевой подложке. Выровнял по центру относительно друг друга, заполнил белым иконку.

Чтобы показать дома, сделанные из блоков, используем слайдер с фотографиями. Каждая страница слайдера — это шесть квадратных фотографий домов. Все исходные изображения — разные по длине и ширине. Чтобы быстро привести их к одному размеру, будем пользоваться масками.

Для этого нарисуем прямоугольник нужного размера (Insert → Rectangle) и разместим фотографию над ним. Затем выберем слой с этим прямоугольником и нажимаем кнопку Mask.

Проводим эту операцию для остальных фотографий и рисуем элементы управления слайдером.

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

Чтобы сгруппировать элементы, достаточно их выделить и использовать сочетание клавиш Cmd+G. Переименовать слой можно с помощью комбинации Cmd+R.

Экспортируем

Получить изображения для верстки можно как стандартными возможностями Sketch, так и с помощью сторонних решений — сервиса Zeplin или плагина Sketch Measure. В этом макете мало элементов и они не требуют сложной нарезки, поэтому используем обычным экспортом: выделяем нужные слои и в правом углу выбираем Export Layers.

Заключение

Sketch — удобный редактор для дизайна сайтов и приложений, возможности которого легко расширяются с помощью плагинов. Разобраться с возможностями Sketch не составит труда, даже если до этого вы не пользовались графическими редакторами. Но Sketch — это всего лишь инструмент. Чтобы рисовать современные макеты сайтов, дизайнер должен разбираться также и в композиции, типографике и работе с цветом. Эти знания и навыки работы в графических редакторах можно получить на курсе «Веб-дизайн с 0 до PRO» от Skillbox.

116 инструментов для разработчиков

Не обязательно становиться рок-звездой для того, чтобы зарабатывать много денег и быть популярным. Новые рок-звёзды — программисты. Ниже вы найдёте более сотни инструментов, которые облегчат работу разработчику.

Оригинальный пост был опубликован на портале DailyTekk. И хотя появился он достаточно давно, список по-прежнему актуален. Инструменты разделены на разные категории: платформы для разработки, обучение программированию, багтрекинг, API и прочее. Не все инструменты бесплатные, но за удобство и новые функции приходится платить. Надеемся, вы найдёте что-то полезное для себя.

10 бесплатных must-have плагинов для WordPress разработчиков

У каждого, кто работает с кодом WordPress, должен быть набор хороших функциональных плагинов WordPress для разработчиков. Конечно, всё дело вкуса. Редактор кода, который подходит вам, может оказаться не так уж и полезен мне, и наоборот. И даже самые популярные сервисы как GitHub могут не нравиться большинству разработчиков.

С WordPress дело обстоит точно так же. У вас, наверняка, есть свой набор инструментов, библиотек и плагинов WordPress для разработчиков, которые вы используете при создании тем, плагинов и сайтов WordPress.

Однако есть некоторые must-have плагины. В этой статье мы расскажем о 10 бесплатных WordPress плагинах для разработчиков, которые помогут улучшить ваш рабочий процесс и успеть больше с WordPress.

1. Developer

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

После активации Developer спросит вас о типе ваших разработок — плагины, темы и т.д. Исходя из вашего выбора, этот плагин предложит вам список полезных плагинов, которые вы сможете активировать в один клик.

К примеру, если вы разработчик тем WordPress, Developer предложит вам активировать плагин Theme Check (мы расскажем о нём ниже), и так далее.

Используйте Developer, если :

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

2. Debug Bar

Debug Bar — это простой плагин, который добавляет меню отладки в администраторскую панель. Меню отладки можно использовать для того, чтобы показать полезную отладочную информацию, например, данные, касающиеся запроса и кеша.

Debug Bar может отслеживать ваши запросы MySQL, а также уведомления об ошибках PHP.

Используйте Debug Bar, если:

Вам нужен инструмент, который упростит поиск PHP уведомлений и предупреждений, и другие запросы.

3. Query Monitor

Как и Debug Bar, Query Monitor тоже является отладочным плагином для кодеров WordPress. Однако он предлагает больше, чем Debug Bar.

Query Monitor позволяет вам просматривать все текущие запросы к базе данных, правила подстановки, выполненные хуки текущего запроса, ошибки и предупреждения PHP и даже шаблоны имён файлов. Более того, Query Monitor – это один из немногих плагинов WordPress для разработчиков, которые позволяют отслеживать вызовы AJAX, запросы REST API и переадресации. Если вы работаете с плагином WP REST API, Query Monitor будет вам полезен.

Используйте Query Monitor, если :

Вам необходимо регулярно работать с вызовами AJAX и запросами API, или операциями с базой данных. Обратите внимание, что если вам просто нужны основные сведения об ошибках и предупреждениях PHP, Query Monitor вам ни к чему.

4. Styleguide

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

С Styleguide вы можете выбирать из Google Fonts, а также разнообразных наборов символов и цветов для настройки вашего сайта. Вы также можете добавить поддержку для дополнительных тем.

Используйте Styleguide, если :

Вам нужно простое решение для смены шрифтов и цветов в Customizer. Более того, вы обязаны обдумать добавление поддержки для ваших тем, чтобы конечные пользователи или клиенты могли сами вносить небольшие изменения.

5. Theme Check

Theme Check — лучший друг разработчиков и очень популярный и полезный плагин в этой сфере. Он позволит вам протестировать вашу тему WordPress согласно последним стандартам написания кода и практики.

Вы сможете убедиться, что ваша WordPress тема отвечает стандартам перед тем, как отправить её в репозиторий. Таким образом, вы можете уменьшить шансы на отклонение вашей темы, а также будете придерживаться лучших методов кодирования. Theme Check поможет вам убедиться, что ваши WordPress темы на высоте.

Используйте Theme Check, если :

Вы являетесь разработчиком тем.

6. User Switching

User Switching позволит вам переключаться между пользовательскими аккаунтами в один клик. Если в своей работе вам необходимо управлять множеством аккаунтов или тестировать и отлаживать пользовательские роли и возможности, то этот плагин для вас.

Всё, что вам нужно сделать, это нажать «Switch To» в пользовательском меню. Вы можете переключить назад в основную учётную запись, но нигде у вас не потребуют пароль. Естественно, ваш основной аккаунт будет иметь полномочия администратора.

Используйте User Switching, если :

В своей работе вы постоянно переключаетесь между учётными записями.

7. Advanced CSS Editor

Advanced CSS Editor — это WordPress плагин для разработчиков, который позволяет написать CSS код для разных устройств прямо из Customizer.

Вы можете быть в недоумении: что же такого в CSS коде? Jetpack тоже позволяет вам добавлять пользовательский CSS!

Но вот что интересно: Advanced CSS Editor позволяет вам добавлять разный CSS код для разных устройств. Таким образом, у вас может быть разный CSS стиль для планшетов, телефонов, ноутбуков и компьютеров. То есть, ваш сайт будет выглядеть и вести себя по-разному на каждом из устройств. И не нужно использовать много отдельных плагинов.

Используйте Advanced CSS Editor, если :

Вы хотите добавить пользовательский стиль CSS для разных устройств. Это очень удобный и важный плагин для тех, кто часто работает с пользовательским CSS. Даже если вам нужно добавить разный код для разных устройств, вы сможете наблюдать за изменениями в Customizer и в режиме реального времени.

8. Regenerate Thumbnails

Regenerate Thumbnails — это простой плагин, который позволит восстановить и пересоздать миниатюры для ваших загруженных изображений. Это особенно пригодится, если вы недавно изменили настройки размеров миниатюр для вашей темы.

Есть несколько других WordPress плагинов для разработчиков, которые занимаются тем же, но не один из них не является таким популярным, как Regenerate Thumbnails (более миллиона скачиваний). Так что, если вы ищите плагин с такими функциями, Regenerate Thumbnails – для вас!

Используйте Regenerate Thumbnails, если :

Вам нужно простое решение для редактирования и восстановления миниатюр для ваших изображений.

9. Log Deprecated Notices

Если, как и большинство разработчиков, вы хотите избежать устаревших и сомнительных методов написания кода, обратите внимание на Log Deprecated Notices.

Log Deprecated Notices отслеживает использование не рекомендуемых файлов, функций и аргументов. Он также предлагает альтернативу устаревшим и неправильно используемым функциям.

Используйте Log Deprecated Notices, если :

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

10. RTL Tester

Как следует из названия, RTL Tester позволит вам протестировать ваши темы и плагины в режиме RTL (right-to-left).

С помощью этого плагина можно изменить направление текста на вашем сайте. Таким образом, вы можете предварительно посмотреть ваши WordPress темы и плагины с направлением текста справа налево. Это поможет вам убедиться, что всё в порядке.

Используйте RTL Tester, если :

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

А что вы думаете об этих WordPress плагинах для разработчиков? Мы пропустили какой-то из них? Поделитесь своим мнением в комментариях!

Источник: themeisle.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 3.7 / 5. Количество голосов: 3

Мои плагины в Sketch ��

Мини обзор от Александра Плюто, арт-директора и сооснователя ZIPL Studio.

Всем привет. В этой статье я хочу поделиться своими плагинами для работы в моем любимом Sketch App.

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

Итак, каждый плагин я буду оценивать по трем шкалам по пятибалльной шкале: �� частота использования (как часто он реально нужен), ⏰ ускорение работы (насколько сильно он облегчает жизнь), �� полноценность (в полной ли мере плагин выполняет задачу в различных ситуаций).

1. 6Spiral

Этот плагин я установил больше ради развлечения, так как он создает довольно интересные спирали с огромным количеством настроек. Руками такое сделать конечно же нельзя так же быстро.

2. Sketch Gu >Очень удобный плагин для создания направляющих по конкретному объекту или артборду. Например очень удобно при процентных сетках разделить артборд на 10 равных частей, но это примитивный пример.


3. Abstract

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

��: ★★★★☆
⏰: не экономит время
��: плагин является лишь связкой
Установить плагин

4. Bootstrap Gr >Похожий плагин на Guides, но сразу со стандартными заготовками сетки. Создает не направляющими, layout’ами.

5. Chromatic Sketch

Специфический, но очень полезный плагин. Он позволяет улучшать градиенты. Пример ниже. OLD–это ваш градиент из двух точек (красный к зеленому), а NEW — то, что предлагает плагин. Плагин предлагает различные улучшения, по факту выравнивая яркость, насыщенность в проблемных переходах между цветами.

6. Confetti

Разбрасывает хаотично элементы по заданному пространству. Отлично подходит для фоновых элементов.

7. Distributor

Must have плагин, который расставляет массив объектов/артбордов на заданное расстояние друг от друга по вертикале или горизонтали. Невероятно полезный плагин, который экономит уйму времени.

8. Gamma correction

Mac OS High Sierra изменила рендер и просчет по сравнению с предыдущими версии. Из-за этого все растровые изображения, когда все перешли на High Sierra, стали с неправильной гаммой. Этот плагин их восстанавливает до исходного цвета.

9. Image Replaste

Самый крутой и полезный плагин для вставки изображений в фон фигуры. Я использую его постоянно, так как этот плагин экономит время и избавляет от множества скачанных изображений в папках. Просто нажимаем “copy” в браузере на изображение, а потом вставляем. Магия!

10. Owerflow Sketch Panel

Owerflow — среда для схематического представления user flow. Благодаря плагину можно экспортировать макеты, к которым потом можно привязать стрелки и т.д., а также, внимание, к элементам макета!

11. Paddy

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

12. RealtimeBoard

Realtime Board — прекрасный инструмент, который позволяет создавать схемы, таблицы, графики в свободном пространстве совместно с другими специалистами. Плагин позволяет загружать экраны из Sketch и удобно обновлять их, перезаписывая то, что уже было загружено.

13. Rename It

Очень удобный плагин, когда готовишь макет к верстке или же экспортируешь, например, в Principle, где очень важно уникальное название каждого объекта, а еще лучше, если оно осмысленное. Плагин позволяет переименовывать массив объектов с созданием принципа формирования уникального имени.

14. Share to Dribbble

Думаю, что тут и так ясно. Экспорт дизайна на Dribbble сразу из Sketch.

15. Sketch Cleaner

Отличное дополнение к плагину Rename It. Выбирайте артборд или объект/папку и плагин очистит все выключенные свойства, а линии, даже если они заданы прямоугольниками, назовет “divider”.

16. SVGO Compressor

Оптимизирует SVG файлы при экспорте. Уменьшает размер, упрощает структуру .svg. Работает фоново, вызывать плагин не нужно.

��: фоновая работа
⏰: фоновая работа
��: фоновая работа
Установить плагин (офиц. плагин)

17. Swatches

Использую для быстрого применения цветов известных дизайн-систем (Material, iOS, IMB и т.д.). Позволяет сразу применить выбранный цвет к Border или к Fill.

18. Symbol Organizer

Особенно удобен, когда большие приложения или сервисы, где очень много элементов, переменных. Как правило, такие проекты приводят к большому количеству многовложенных symbols. Этот плагин расставляет их в зависимости от вложенности по разным принципам. Очень круто и удобно.

19. Text (Split Text)

Бывают моменты, когда надо взять с сайта определенный объем текста или же заголовок/список и перенести его в макет. В такие моменты мне всегда помогает этот плагин. Он позволяет, например, скопировать длинный список один раз, а в скетче одним нажатием разделить каждую строчку на отдельный текстовый объект (также само, как это делается на верстке).

Цукерберг рекомендует:  Web developer - Где можно найти реальные примеры по DOM

20. Toogle Craft

Модуль плагинов от InVision. Не нуждается в общем представлении. Хочу выделить отдельно только то, что он позволяет синхронизировать макеты с InVision, отправлять для верстки, а также, что для меня актуально, подставлять реальный разнообразный контент (адреса, имена, числа и т.д.).

Создание прототипа сайта: 7 инструментов для маркетолога

Как объяснить четко, каким вы видите будущий сайт или мобильное приложение? Решение – создание прототипа.

В этой статье вы узнаете что такое прототип и как его создать с помощью 7 онлайн-сервисов.

Что такое прототип сайта

Прототип – макет, или физическая реализация концепта интерфейса. Ещё 15 лет назад, когда о принципе «Mobile first» ещё никто не думал, страница-прототип содержала образцы дизайна всех элементов сайта – заголовков, списков, цитат, абзацев.

Сегодня этого мало: пользователь заходит на сайт не только с компьютера, а верстка для мобильных устройств существенно отличается от верстки для десктопов. При этом фундамент – пути пользователя по сайту в соответствии с воронкой – нужно выстроить заранее. А также продумать все нюансы и функциональность интерфейса.

Допустим, вы не владеете навыками верстки, программирования и графическими редакторами. Как показать, что вы хотите получить? Совсем недавно для наглядности использовали лист бумаги и шариковую ручку. Так выглядел образец прототипа в исполнении эмоционального заказчика:

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

Онлайн-сервисы прототипирования позволяют создавать от простых эскизов до полнофункциональных макетов с рабочими ссылками и элементами интерфейса.

Далее – 7 вариантов, у каждого свой спектр возможностей, сложность работы и цена. Выбор за вами.

InVision

Это идеальное решение, если вам нужно «оживить» готовые макеты Photoshop или Sketch.

Примечание: плагин для Adobe Photoshop и для Sketch поможет отправить проект из редактора прямо в InVision. Работает синхронизация файлов внутри проекта, с рабочим столом либо Dropbox (для этого нужны дополнительные приложения).

Главный плюс приложения – система управления проектами. Вы сохраняете эскизы в различных проектах и разделяете их на группы. Можно добавлять несколько вариантов макетов, например, для страницы «О компании», фиксировать все правки и стадии.

Кроме того, InVision добавляет макетам некоторую интерактивность. Для этого назначьте ссылки на элементы, которые связывают страницы и элементы проекта.

Все действия по проекту фиксируются на вкладке «Activity». Это удобно при групповой работе над макетом: вы точно знаете, кто загрузил файлы или редактировал ваш макет своими кривыми руками (либо довел его до совершенства).

Хотите получить обратную связь? Инструмент позволяет делиться результатами с помощью сгенерированных уникальных адресов. Участники команды могут обсудить с вами определенные элементы, оставить пометки в дизайне.

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

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

Большой плюс – инструмент бесплатный.

Balsamiq

Нет Photoshop или Sketch? Возможно, Balsamiq – лучший инструмент для вас. Он работает, как приложение для рабочего стола. Есть и веб-версия.

Инструмент содержит внушительную библиотеку встроенных элементов UI для использования в проектах. Это экономит время: вы используете готовые пресеты (например, выпадающие меню или «аккордеоны»).

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

Предлагаемые примитивы позволяют сфокусировать внимание на функциональности и не тратить время на нюансы дизайна.

Нужно оценить несколько вариантов дизайна? Не вопрос, инструмент предлагает средства контроля версий и историю версий. Можете вернуться назад по времени и оценить, насколько продвинулся ваш дизайн.

Balsamiq предусматривает расширения сторонних разработчиков – можно добавить дополнительные иконки или инструменты управления.

Главный минус – приложение платное. Хотя цены вполне подъемны: версия для десктопа стоит $89 за одну лицензию, веб-версия на 3 проекта – $12 в месяц. Есть бесплатный пробный период на 1 месяц для некоммерческих проектов.

Moqups

Это полноценное веб-приложение позволит разработать дизайн от простого эскиза до готового макета.

Как и в Balsamiq, тут есть встроенная библиотека готовых элементов. В процессе работы вы оставляете комментарии, отмечаете цели и задачи каждого этапа и элемента.

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

Ваши коллеги могут оставлять пометки и комментарии по отдельным элементам макета. Вы можете отвечать и сохранять эту переписку в проекте.

Moqups – веб-приложение, вся работа проходит исключительно онлайн. Ваши проекты хранятся на серверах разработчика.

Сервис платный, стоимость тарифа зависит от количества проектов и места на сервере.

Базовый тариф на 10 проектов и 1 GB на сервере обойдется в $13. Есть стартовый бесплатный тариф на 1 проект, ограниченный 300 объектами и 5 MB. Для простейшего макета (одностраничного лендинга) и полноценного общения с дизайнером этого вполне достаточно.

Вот что из этого может получиться:

Marvel

Marvel — простой и интуитивный инструмент прототипирования. Его инструмент Canvas создает эскизы и каркасные интерфейсы.

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

Главная фишка Marvel – ориентация на разработку мобильных интерфейсов. При создании нового проекта вы выбираете тип прототипа: сайт, приложение для iPhone, iPad,Android и даже AppleWatch.

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

Добавляйте жесты (протаскивания и т.д.): выбираете активную область, назначаете на неё действие из набора пресетов, смотрите результат. Есть подсказки, так что не запутаетесь.

Печальный момент: Marvel разрабатывался для пользователей MacOS – для них разработчики припасли дополнительные плагины и приложения. Есть, например, плагин для Sketch. Для пользователей Windows и Linux подарочков нет.

Marvel предлагает три тарифа:

  • Бесплатный – на 1 пользователя и 2 проекта.
  • Профессиональный – $12 в месяц, 1 пользователь и неограниченное число проектов.
  • Корпоративный – $48 в месяц, 4 пользователя.

Justmind

Библиотека встроенных элементов позволяет создавать примитивные эскизы и почти готовые интерфейсы. Инструмент Justmind предусматривает библиотеки для десктопных и мобильных приложений. Работает как для iOS, так и для Android и Surface.

После создания макетов можете добавлять интерактивные триггеры для интерактивности. Как и в Marvel, выбираете жест для привязки к элементу-триггеру, и переход для имитации функционала.

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

Профессиональный тариф обойдётся в $19 за 1 пользователя в месяц.

Origami

Origami — более узкоспециализированный инструмент прототипирования, так как доступен только для MacOS. Его функции – создавать эскизы и макеты для iPad и iPhone.

Origami содержит 4 главные панели:

  • Панель патчей – здесь назначаете элементам интерактивность, анимацию, поведение.
  • Слои – добавляете слой, размещаете на нём элементы, назначаете действия.
  • Окно просмотра – оцениваете результаты труда.
  • Библиотека патчей – просматриваете заготовки и их описания, выбираете необходимые элементы и добавляете в проект.

Главный плюс – возможность добавлять интерфейсу сложную интерактивность без навыков программирования. Для разработки дизайна инструмент не подходит.

Origami бесплатен, веб-версии нет.

Proto.io

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

Интерфейс сервиса простой: перетаскиваете на рабочее поле компоненты интерфейса, группируете и организуете их. При этом в любой момент на любой стадии можно перестроить макет как нужно. Выделяете объект на рабочем поле в нужном слое – и в панели опций можно отредактировать абсолютно всё.

Гордость разработчиков – продвинутый редактор Proto.io:

После выстраивания макета, назначаете на элементы интерфейса жесты и переходы. Можно повторять определtнные фазы или внешний вид. Пример такой фазы – окно со значком загрузки, который пользователь видит лишь тогда, когда он использовал окно поиска.

Разработчики предлагают привязку к учетной записи Dropbox для хранения и загрузки файлов, клиент для iOS и Android и плагины для Sketch и Photoshop.

Вы получаете двухнедельный бесплатный тестовый период с полной функциональностью. Этого времени достаточно, чтобы понять, нужен ли вам этот инструмент.

Тариф «Фрилансер» стоит $24 в месяц и позволяет вести 5 проектов. Если вы не работаете в веб-студии, этого хватит с избытком.


Заключение

Этих сервисов достаточно для решения любой задачи, остается только выбрать подходящий.

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

Золотой фонд веб-разработчика. Самые полезные плагины для Atom и VS Code

Текстовые редакторы, созданные на основе web-технологий, переживают настоящий бум. Atom, VS Code, Brackets, подобно монстрам рока, завоевывают популярность среди web-разработчиков (погоди, какой там сейчас на календаре год у «популярных монстров рока»? :-) — Прим. ред.). На них переходят как с IDE, так и просто с нативных редакторов. Причина предельно проста: репозитории кишат полезными плагинами, а недостающие каждый может создавать самостоятельно, применяя сугубо web-технологии.

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

На вкус автора

Ваш покорный слуга использовал все перечисленные редакторы и в итоге остановился на VS Code. Причин тут несколько, но главная — производительность. В Microsoft отлично постарались и, несмотря на поздний выход (VS Code появился на сцене последним), успели собрать вокруг себя огромное сообщество. Это положительно отразилось на плагинах: некоторые из них, на мой взгляд, на голову выше альтернатив для Atom. В связи с этим в тексте обзора будут мелькать названия расширений именно для VS Code. Ссылка на приближенный по функциональности вариант для Atom будет приведена ниже. Не удивляйся, если, скопировав название плагина и запустив поиск по репозиторию Atom, ты ничего не найдешь. Используй ссылки из описания.

Причины популярности

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

Ну хорошо, производительность нативных решений вне конкуренции. За счет чего тогда новоиспеченные «легковесные» редакторы покорили столько сердец разработчиков? Главный аргумент «за» — технологический стек. Что значит разработать плагин для какого-нибудь Sublime или Notepad? Правильно, придется разобраться с C, Python (здесь может быть любой другой язык программирования), SDK редактора и другими не нужными по основной работе вещами.

Какой веб-разработчик согласится на этот подвиг? У него своих забот и технологий хватает (во фронтенде происходит настоящая революция решений). Вот и получилось, что экосистема плагинов для веб-разработчиков у нативных редакторов всегда страдала нехваткой профильных решений.

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

К сожалению, за легкость доработки функциональности редактора приходится платить производительностью и ресурсами. Легковесные редакторы зачастую требуют больше системных ресурсов и не готовы помериться силами с нативными в быстродействии. За время тестирования Atom с джентльменским набором расширений умудрялся обогнать по потреблению памяти WebStorm.

Сниппеты

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

VS Code:

Обертка для HTML

При описании разметки страницы постоянно приходится оборачивать блоки, то есть вкладывать один блок в другой. Написал разметку блока, а потом понял, что для удобства стилизации лучше обернуть его в дополнительный блок. Сделать несложно: пишем открывающий тег в самом начале, проматываем блок до конца и ставим закрывающий тег. Есть только одна проблема — на больших блоках это делать неудобно. Есть все шансы поставить «закрывашку» не туда и поломать разметку. Аналогичная проблема появляется при стилизации отдельных кусков текста. Попробуй быстро вставить многочисленные открывающие и закрывающие теги и не сойти с ума. Справиться с трудностями помогут плагины htmltagWrap и Atom wrap in tag. С их помощью решение сведется к выделению куска кода/строки и нажатию комбинации горячих клавиш.

Привыкаем к горячим клавишам

При переходе на новый редактор/IDE всегда сталкиваешься с одной и той же проблемой — надо учить новые горячие клавиши. Только привык к одним комбинациям, как бац — и все по-другому. На привычные действия начинаешь тратить больше времени, чем обычно, и лишний раз задумываешься, целесообразно ли вообще переходить на что-то новое. Уверен, разработчики, кто начинал свою карьеру 10–15 лет назад, неоднократно сталкивались с подобным, поэтому они однозначно оценят мощь плагинов с биндингами клавиш популярных редакторов. Суть проста: привык к раскладке горячих клавиш Visual Studio — качаешь соответствующий плагин, и новый редактор начинает отзываться на привычные команды.

VSCode

Автокомплит для файлов

По умолчанию ни один из редакторов не предоставляет функции автозавершения имен файлов во время их подключения. Часто это бывает причиной ошибок. Приходится помнить полный путь к месторасположению файла. Если проект сложней, чем Hello world, то файлы сгруппированы по нескольким директориям, и для указания пути придется пользоваться услугами менеджера файлов. Не очень удобно. Проще подключить автокомплит с помощью плагинов AutoFileName и autocomplete+. Затем останется только набирать первые буквы имени файла/директории, после чего плагин предложит варианты для подстановки.

Линтеры

Современный процесс разработки немыслим без автоматизации. Если что-то можно автоматизировать и переложить на инструменты — это стоит сделать. Без всевозможных линтеров во фронтенде никуда, поэтому при работе над очередным проектом надо сразу позаботиться о подключении решений вроде ESLint, HTMLHint, CSSLint, . Линтеры контролируют стиль написания кода и в случае несоответствия конфигу моментально укажут на ошибки.

Особенно полезны линтеры в командной разработке, когда шансы получить «разношерстный» код увеличиваются в разы. Нужны примеры? Пожалуйста! Между JS-разработчиками постоянно идет спор о выборе кавычек. Одни — приверженцы одинарных, другие — двойных, а третьи поддерживают идею обратных. Линтеры помогут добиться единообразия и вовремя оповестить разработчика, сбившегося с пути.

VS Code:

Сам себе генератор

Во время разработки всегда требуются наборы сгенерированных данных, будь то набор случайных чисел, email, IP-адресов и прочее. Стоит ли говорить, что самостоятельная заготовка перечисленного добра — занятие не из приятных. Упростить дело помогут два интересных расширения: VSCode-random и Random.

Расширение включает в себя несколько генераторов случайных данных, их количество от версии к версии пополняется. Прямо сейчас доступны генераторы, позволяющие получить: случайные числа, случайные числа из заданного диапазона, валидные email, IPv4/IPv6, названия стран, URL-адреса, цвета, имена людей, названия улиц… Перечисленные плагины ориентированы в первую очередь на JavaScript-разработчиков, а если твоя работа связана лишь с версткой, то тебе пригодится генератор Lorem ipsum, позволяющий быстро формировать заготовки шаблонного текста.

VS Code:

  • VSCode-random
  • Lorem ipsum
  • Random
  • Lorem ipsum

Менеджер проектов

В Atom и VS Code, в отличие от IDE, такая сущность, как проект, не применяется. Мы просто работаем с файлами в определенных директориях. Если говорить еще точнее, то «проект» в перечисленных редакторах — корневая директория. К сожалению, из коробки в редакторах отсутствует возможность быстрого переключения между ними. Когда в работе сразу несколько проектов, переключаться между ними долго и неудобно. Плагин Project Manager добавит недостающую функциональность.

Подсветка для скобок

Мало что может так запутать разработчика, как вложенные скобки. Взгляни на код:

Оставим за кадром обсуждение антипаттерна передачи результатов функций в качестве параметров, а посмотрим на скобки. В этой строке их слишком много и есть вложенные. Далеко не сразу понятно, что к чему. Стандартные возможности редактора пытаются помочь подсветкой парных скобок, но расширение вроде Bracket Pair Colorizer делает это более элегантно. Оно раскрашивает парные скобки случайным цветом, тем самым позволяя разработчику быстро найти пару для скобки.

Автокомплит для npm

Чуть выше мы рассмотрели плагин для автокомплита имен файлов (AutoFileName), а есть точно такой же, только для модулей из npm (npm Intellisense). Идея проста: начинаем писать первые символы названия модуля и получаем варианты для автокомплита. При активной разработке под Node.js вещь незаменимая.

Эксперименты над регистром

Во время ревью кода начинающих разработчиков с завидной регулярностью возникает потребность привести переменные к CamelCase или другому стилю. Например, изменить наименование переменной с mylongvar на myLongVar или же применить snake case: my_long_var. Одним словом, задачи по конвертации регистра разные, и упростить их помогут плагины типа Change Case. Расширение поддерживает несколько вариантов для конвертирования: верхний регистр, нижний регистр, snake case, CamelCase, pascal (венгерская нотация) и другие.

Повышаем узнаваемость файлов

При работе над проектами с большим количеством разношерстных файлов (HTML, CSS, SQL, PHP, JS и так далее) удобно определять тип файла не по расширению, а по знакомой глазу иконке. Подобный подход применяется во многих IDE, а вот текстовые редакторы по умолчанию с этим не парятся. Прокачать редактор и облегчить зрительное восприятие поможет расширение с набором иконок — VS Code Great Icons и Seti Icons. Расширение добавляет каждому файлу соответствующую иконку, после чего ориентироваться становится проще.

Вредное выравнивание

Некоторые разработчики питают особые чувства к выравниванию текста. Речь идет про выравнивание значений относительно оператора =. Если ты не понял, о чем я говорю, то посмотри на эти несколько строчек кода:

Длина имен переменных различается, но все значения находятся на одном уровне. Выглядит это хорошо, и читаемость действительно возрастает. Правда, появляется другая сложность — лишние пробелы. Сторонников и противников представленного подхода к оформлению много. Если ты один из приверженцев выравнивания по =, присмотрись к плагинам Atom Alignment и Align.

Atom: Atom Alignment

Шаблон для JSDoc

JSDoc — стандарт оформления комментариев в JavaScript. Несмотря на общую лаконичность формата, набивать руками заготовку долго. Плагины Document this и Atom easy ускорят дело, добавив возможность быстрого формирования заготовок будущих комментариев.

Парсер TODO

Не вспомню, откуда повелось, но еще со времен программирования на Delphi было принято помечать комментарием TODO те участки кода, которые планировалось отрефакторить в будущем. Все взрослые IDE предоставляют подобную функцию из коробки: кликаем и получаем список «задач из кода». Добиться примерно такого же эффекта в редакторах позволяют расширения VSCode Todo Parse Exentension и Todo Show Package для Atom. Расширения позволяют просканировать файл/проект и вывести в отдельную панель все TODO, FIXME, NOTE и другие комментарии.

Цукерберг рекомендует:  Вакансии Fora Soft

Детектим цвета

Во время верстки очередной страницы указывать цвета принято в HEX/RGB/HWB/HSL. Проблема одна: если в голове отсутствует база используемых в оформлении цветов, то для определения цвета по его текстовому представлению придется копипастить значения в графический редактор. Задача рутинная и легко решается благодаря плагину Color Picker.

Первое, что он делает, — упрощает навигацию по цветам. Для этого плагин рисует иконку с изображением цвета, соответствующего текстовому представлению. Вторая плюшка — отображение диалога выбора цвета. Диалог напоминает аналогичные из графических редакторов и позволяет одним кликом выбрать новый цвет в желаемом формате. Также есть поддержка мультикурсора — за один раз можно изменить цвет в нескольких местах.

Приручаем C

Комфортное программирование на языке C# давно не ограничивается одной лишь Visual Studio. Писать код на этом популярном языке вполне возможно на VS Code и Atom, предварительно установив соответствующее расширение. Скажу сразу и честно: VS Code вне конкуренции. Для него доступно как официальное расширение Microsoft, так и стороннее с несколькими оригинальными фишками.

Официальное расширение предоставляет: подсветку синтаксиса, фирменную технологию автодополнения (IntelliSense), быстрый переход к определению, поиск ссылок, генераторы классов и другие привычные по Visual Studio операции. Есть поддержка отладчика для проектов .NET Core, поддерживающего работу под macOS, Windows и различными Linux. Перечисленного инструментария вполне достаточно для комфортной работы и разработки проектов под популярный ASP.NET MVC.

Что касается Atom, то здесь все несколько грустней. Самое популярное расширение для C# — language-csharp по факту добавляет только подсветку синтаксиса и различные сниппеты.

Поддержка EditorConfig

Что чаще всего подлежит настройке в любом редакторе? Все верно: размер отступов, кодировка по умолчанию, символ отбивки (табы vs пробелы), удаление завершающих пробелов. Эти параметры настолько часто меняются, что был придуман универсальный формат EditorConfig. Суть идеи проста: помещаем в корень конфигурационный файл, прописываем настройки, и любой современный редактор тут же их подхватит. Чтобы VS Code и Atom научились его понимать, придется поставить дополнительные расширения.

VS Code: EditorConfig

Шаблонизаторы

При разработке на JavaScript активно приходится прибегать к помощи шаблонизаторов, которых существует бесчисленное множество. Однако наибольшую популярность завоевали handlebars и Jade. Первая проблема, с которой сталкиваешься, — подсветка синтаксиса. В случае с handlebars она решается установкой плагинов handlebars/atom-handlebars. Также не помешают решения вроде handlebars preview, умеющие на лету показывать результат компиляции шаблона.

С Jade чуточку сложней — синтаксис особо подсвечивать смысла нет, но есть плагины, упрощающие конвертацию HTML в синтаксис Jade и обратно. При верстке больших шаблонов такой конвертер (например, html2jade) сэкономит кучу времени и сил.

VS Code:

Синхронизируем настройки

Выше я говорил, что муторнее всего при переезде на очередной редактор учить новые сочетания клавиш и отвыкать от тех, что давно укоренились в мозгу. Вторая по значимости проблема — синхронизация настроек. Если у тебя несколько рабочих компьютеров, ты меня поймешь. Мне приходится работать за двумя машинами — на работе Windows, а дома Mac. Дико раздражает, когда на работе установишь какой-нибудь полезный плагин или подкрутишь несколько настроек, а придя домой, понимаешь, что эти же действия надо повторить. Было бы здорово иметь возможность синхронизации настроек и установленных расширений, как в браузерах. И такая возможность есть.

Расширение Settings Sync позволяет синхронизировать установленные расширения, настройки, темы, раскладки клавиш и многое другое. Причем для синхронизации не требуется сторонний облачный сервис — все работает через GitHub. После базовой настройки (описание доступно на странице проекта) требуется запомнить две комбинации клавиш: Shift + Alt + u (выгрузка настроек) и Shift + Alt + d (загрузка настроек).

Выборочный запуск кода

Хочешь запустить код на исполнение прямо здесь и сейчас? Причем не весь проект, а, например, один модуль или вовсе проверить работу одной функции? Согласись, запускать весь проект ради такой мелочи — кощунство. Специально для таких случаев есть плагин Code Runner. Он умеет запускать код в текущем табе или выделенный код. Результат исполнения выводится в консоль вывода. Во время отладки функций вещь чрезвычайно полезная.

Code Runner поддерживает не только JavaScript, но и другие популярные языки программирования: Java, PHP, Ruby… Требуется лишь установить в системе необходимые компиляторы/интерпретаторы и прописать в конфиг Code Runner пути к ним.

Сортировка строк

Некоторые разработчики обожают описывать свойства объектов или CSS-правила в алфавитном порядке. Плюсы и минусы такого подхода обсуждать не будем, но согласимся, что проблема сортировки возникает в самых разных ситуациях. Расширение Sort lines умеет сортировать выделенные в редакторе строки несколькими способами: по алфавиту, по длине, в случайном порядке и так далее. Я как-то видел, что подобные задачи, связанные с сортировкой списков значений, многие решают с помощью Excel. Если ты делаешь так же, то присмотрись к плагину, будет проще.

Интегрируемся с Git

Без Git в наше время никуда. За годы практики я выработал для себя правило: работаешь с Git либо через консоль, либо через встроенный инструментарий в редакторе кода. Заставить себя пользоваться отдельными приложениями так и не получилось. Неудобно мне постоянно менять фокус, инструмент нужен здесь и сейчас. VS Code, а с недавних пор и Atom умеют работать с Git на базовом уровне. Серьезно расширить базовые возможности готовы специальные расширения вроде Git Easy, Git Lens и Git History.

Git History решает проблему просмотра истории коммитов. По факту это хорошо визуализированный вывод команды git log с возможностью быстрого просмотра авторов изменений и другой полезной информации. Легко узнать, кто менял выделенную строку кода, посмотреть изменения между версиями и так далее.

Плагин Git Easy помогает упростить доступ к часто используемым командам Git (init, add, add file, push и прочие). Пригодится тем, кто не любит постоянно вбивать в консоли однотипные команды.

Git Lens — одно из самых мощных расширений для работы с Git из редактора. Добавляет возможности визуального сравнения изменений между версиями файлов, подсвечивает измененные строки, выводит информацию об измененных строках в виде аннотаций (имя автора и время добавления строки отображается на фоне кода), показывает превью перед слиянием и много другой полезной информации. Аннотации — одна из ключевых функций, позволяющих сразу понять, кто автор данного кода и когда код был закоммичен. Полный список возможностей смотри на странице проекта.

VS Code:

Автозакрытие тегов

При написании HTML/XML-кода важно не забывать прописывать закрывающие теги. Понятное дело, что «забывчивость» быстро отображается в виде поехавшей разметки. Чтобы не пропустить закрывающие теги там, где они действительно нужны, есть удобный плагин Auto Close Tag. Расширение поддерживает HTML/XML, закрывает только парные теги, поддерживает закрытие тегов в стиле Sublime Text 3, автоматически перемещает курсор между открывающим и закрывающим тегом.

Плагинов много не бывает

В статье мы успели рассмотреть наиболее популярные плагины для веб-разработчика. Это лишь малая часть из того, что есть в официальных репозиториях. Дальше все зависит от конкретных задач. Напоследок хочу дать один совет: не переборщи. Помни — чем больше установлено плагинов, тем скорей ты поймаешь тормоза (да-да, слова «скорей» и «тормоза» странно смотрятся в одной фразе :)). Не стоит при помощи плагинов делать из редактора IDE. Они создавались как легковесные решения и такими должны оставаться. Если требуется более серьезная и сложная функциональность — присмотрись к IDE. Выигрыш в производительности будет колоссальный.

Плюсы и минусы редакторов на веб-технологиях

Плюсы:

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

Минусы:

  • низкая производительность при работе с большими файлами;
  • нехватка дополнительных специализированных инструментов;
  • интерфейс менее отзывчив;
  • ошибки в плагинах.

Одной строкой


  • Prettier — JavaScript formatter, atom-Beautify — форматер JavaScript-кода;
  • SCSS IntelliSense — автокомплит для Sass;
  • Untabify, Tabs to Spaces — заменяет табы на пробелы и обратно;
  • Express — предоставляет управление Express-сервером;
  • Babel ES6/ES7 — подсветка для ES6/ES7;
  • Sass — подсветка синтаксиса, сниппеты, автокомплит для Sass;
  • Beautify css/sass/scss/less — форматер для популярных препроцессоров;
  • Bookmarks, file-bookmark — добавляет поддержку «закладок» для кода;
  • Can I Use, caniuse — поддержка популярного сервиса Can I Use.

Статья подготовлена и опубликована в журнале «Хакер». Июль 2020.

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

Guetzli

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36260″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Developer Roadmap

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

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36267″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Netlify CMS

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36261″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

BadSSL

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36250″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36248″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36249″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

React Trend

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36265″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Gitee

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36257″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Goops

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36259″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Debug CSS

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36254″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] /

EagleJS

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36256″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] /

BootstrapTour

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36251″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] ,

Brick

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36252″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] .

OctoTree

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

. [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36263″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Github Notification

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

. [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36258″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] .

Deployer

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

. [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36255″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] .

PHPStan

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

. [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36264″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] .

NGINX Boilerplate

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

/ [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36262″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] .

Bubbly

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

. [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36253″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Waffle Grid

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

. [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=”36266″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] .

Плагины, ресурсы и бесплатные элементы для расширения функциональности Sketch

Russian (Pусский) translation by Dmitriy Troy (you can also view the original English article)

Редакция Tuts+ стремится предоставлять своим читателям самые полезные материалы. Мы всегда прислушиваемся к мнению пользователей. И нам известно, что сейчас приложение Sketch является «горячей темой». Недавно мы уже опубликовали статью 9 функций Sketch, которые вы должны попробовать и Sketch для начинающих: рисуем интерфейс формы входа.Но мы стремимся к большему. Поэтому в этой статье решили собрать информацию обо всех полезных ресурсах для Sketch

Первая остановка

Прежде чем мы двинемся дальше, хочу показать вам несколько сайтов, которые помогут вам быть в курсе всего, что просходит в сообществе (довольно активном) пользователей Sketch:

  • Домашняя страница Bohemian Coding Sketch: первый пункт
  • Блог Bohemian Coding: обновления и новости о Sketch и других продуктах Bohemian Coding.
  • Новости Sketch: Официальная новостная рассылка Sketch. Выходит один раз в две недели!
  • @Sketchapp: Следите за сотрудниками Bohemian в Twitter
  • Официальная страница Sketch на Facebook и официальная группа. Делитесь советами и ресурсами с другими пользователями Sketch.

Плагины

Для добавления нового функционала в Sketch достаточно просто установить плагин. Ниже список плагинов, которые кажутся мне наиболее полезными.

Для установки плагина достаточно просто два раза кликнуть на файле с расширением .sketchplugin. Более подробно о процессе установки можно почитать здесь.

Совет: Также можно воспользоваться приложением Sketch Toolbox. Это простой и удобный менеджер плагинов для Sketch. С его помощью установка и поиск новых плагинов станут проще (требуется минимум OSX 10.9).

Sketch Commands

Очень долго я был активным пользователем Adobe Fireworks. И расширение Orange Commands (автор Ale Muñoz) очень сильно облегчало жизнь.

Ale потрясающий парень, и он вносит большой вклад в сообщество Sketch! Вот простой пример: Sketch Commands — порт знаменитого расширения Orange Commands. С помощью Sketch Commands вы можете автоматизировать множество процессов: экспорт, изменение размеров, копирование контента и т.д.

Style Inventory для Sketch

В дополнение к Sketch Commands обязательно установите Style Inventory для Sketch. Style Inventory сопоставляет информацию обо всех использованных вами стилях (например, цвета) и помогает использовать их, чтобы сохранить стилевое однообразие.

Color swatch inventory

Sketch Measure

Sketch Measure позволяет добавлять на холст информацию о размерах и других свойствах объектов.

Этот плагин особенно полезен если вы передаёте файлы другим специалистам для дальнейшей работы.

Sketch-slicy

Вы слышали о плагине Slicy для PSD файлов? Этот плагин делает то же самое: переименовывает слои и экспортирует каждый в отдельный файл. Загрузить Sketch-slicy можно из официального репозитория. Автор плагина также рекомендует Sketchflow в качестве альтернативы. А если вам нужна другая очень хорошая альтернатива, то попробуйте Sketch Generator.

Sketch Icon Stamper Plugin

Sketch Icon Stamper Plugin позволяет автоматизировать процесс создания иконок различных размеров. Отличный плагин, особенно учитывая сколько различных вариантов фавиконов необходимо сегодня.

Dynamic Button для Sketch

Самая большая проблема при использовании Photoshop для создания пользовательских интерфейсов — это отсутствие гибкости. Это одна из главных причин, по которой дизайнеры переходят, например, на Sketch.

Dynamic Button для Sketch позволит нам создавать кнопки, которые будут автоматически подстраиваться под размер текста в них. Не очень понятно? Посмотрите видео.

Day Player

Day Player добавляет возможность использования различных генераторов временных изображений. Например: PlaceCage или (мой фаворит) Fill Murray.

Совет: Не забудьте о Sketch Plugin Directory. Здесь вы найдёте актуальный список плагинов Sketch на GitHub. Это уже очень большой список, в котором вы наверняка найдёте много полезного для себя!

Ресурсы и бесплатные элементы

Если вы ищете бесплатные элементы и шаблоны, то вам повезло! Вот список сайтов, посвящённых Sketch.

Sketch App Sources

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

Dribbble

Этот ресурс не посвящён конкретно Sketch. Но если вы ищете бесплатные элементы, посетите Dribbble и воспользуйтесь поиском с тегами «sketch» и «freebie». Вы будете удивлены результатом.

Вы даже можете найти пользователей, указавших Sketch в списке своих навыков.

Sketch Tricks

Информация о Sketch прямо в вашем почтовом ящике. Дважды в месяц. Интересно? Sketch Tricks

Sketch Casts

Возможно вам нужно что-то особенное. Как насчёт регулярных скринкастов с советами и хитростями по использованию Sketch?

Загляните сюда: Sketch Casts. Еженедельный скринкаст о Sketch.

Sketchplugins

Этот ресурс больше подойдёт опытным пользователям и разработчикам.

Sketchplugins это список рассылки, созданный Ale Muñoz для обмена информацией о разработке плагинов для Sketch. Как знать, вдруг вы напишете свой плагин?

Design+Code

Design+Code не посвящён исключительно Sketch, но здесь вы найдёте отличный обучающий материал от Meng To. Он раскрывает множество тем, а также наглядно показывает как он использует Sketch в ежедневной работе.

Sketch Shortcuts

Sketch Shortcuts; все комбинации клавиш для Sketch.

Что, хотите ещё.

Если вы дошли до этого места и вам до сих пор мало, то взгляните на статьи и обучающие материалы, написанные пользователями Sketch. Я отобрал для вас самые лучшие:

  • Sketch Tutorial 01, от Sebastien Gabriel. Отличный подробный материал о создании иконки в Sketch.
  • 7 Tips for Sketch users, от Nick Woodman. Здесь вы найдёте множество советов по использованию Sketch.
  • Design with Sketch, от Meng To. Этот дизайнер был одним из первых, кто стал публиковать интересные материалы о Sketch.
  • Harnessing Vector Awesomeness in Sketch, от Peter Nowell. Статья о работе с векторными формами в Sketch.
  • Sketch Resources, Подборка статей о Sketch, которую курирует Lee Simpson.

На сегодня это всё

Теперь у вас достаточно материала, чтобы настроить свой рабочий процесс в Sketch максимально эффективно.

Думаете я что-то упустил? Уже пользовались упомянутыми мной плагинами? Поделитесь своим опытом и вопросами в комментариях!

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих