Один раз в месяц мы присылаем статьи на почту
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
37 инструментов, которые повысят продуктивность

При создании сайта на Тильде

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

В статье мы ссылаемся на расширения для браузера Chrome, потому что это самый популярный браузер, но большинство расширений, о которых пойдет речь, имеют свои версии или аналоги для других браузеров.
Расширения для дизайна или разработки сайта
1. Определить шрифт
Мы часто используем инструменты, которые определяют шрифт на сайте пользователя. Это помогает нам быстро разобраться в проблеме со шрифтом. Еще это расширение пригодится, если вы вдруг увидели симпатичный шрифт на каком-нибудь сайте и хотите узнать его название. Обычно мы пользуемся расширениями WhatFont и FontFace Ninja, они быстро показывают, какой шрифт используется в конкретном тексте на странице.
2. Определить цвет элемента на странице
Часто бывает нужно скопировать цвет элемента на странице, как в инструменте Eyedropper в фотошопе. Для этого есть много расширений, но мы рекомендуем ColorZilla.
Расширение ColorZilla
3. Проверить отображение на других устройствах
Здесь стоит отметить, что, во-первых, мобильную версию сайта максимально точно покажет только мобильное устройство. Во-вторых, есть встроенные в браузер инструменты разработчика, которые тоже показывают отображение сайта на различных устройствах.
Но есть и расширения, в которых очень удобно смотреть мобильную версию, мы пользуемся Emmet Review.
Расширение Emmet Review
4. Инструменты для веб-разработчиков
CSSViewer — быстро показывает CSS-свойства элементов. В нем можно посмотреть название шрифта, цвет и другие свойства частей сайта при простом наведении на них.

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

Clear Cache — расширение для очистки кеша браузера, помогает бороться с тем, что Chrome часто сохраняет старую версию страницы. Отредактировали и опубликовали страницу и не видите изменений? Это браузер показывает вам кешированную версию. Clear Cach ее удалит.

Window Resizer показывает параметры окна браузера при изменении его размера. Можно выставить любые параметры из заготовленных.

Page Ruler позволяет узнать размер в пикселях любого элемента на странице.
5. Работа с изображениями и гифками
Image Optim оптимизирует изображения GIF, JPEG, PNG без потерь (таких, как уменьшение количества цветов). Если Google PageSpeed ругается, что у вас слишком тяжелые изображения, прогоните их через Image Optim — станут легче.

Gfycat — видеохостинг, который транслирует видео со своего сервера, поэтому ничего не зависает. Можно загрузить короткое видео или гифку и получить прямую ссылку в формате .WEBM, чтобы добавить на фон в обложке. Здесь же можно наоборот конвертировать видеофайл в гифку и скачать ее в разных размерах.
6. Инструменты для систем аналитики
Google Tag Assistant помогает выполнить проверку или диагностику вашего кода GTM и тегов внутри него. Расширение автоматически анализирует ваш код и выявляет возможные проблемы с вашими тегами, которые вы добавили в контейнер GTM и дает рекомендации по их устранению. Также в этом расширении есть функция записи переходов, которая помогает отследить правильность отслеживания кода Google Analytics на сайте.

Facebook Pixel Helper — расширение, которое рекомендует Facebook. Помогает убедиться, что приложение работает корректно. Поставили пиксель, скачали Helper — горит зеленым, значит все в порядке. Если есть ошибки, расскажет какие.

Иногда интересно посмотреть, какие технологии используются на других сайтах. Для этого удобно использовать Wappalyzer. Кликнув на иконке расширения, можно посмотреть информацию о веб-сервере, языке программирования, CMS, JavaScript-библиотеках, социальных сетях и счетчиках аналитики.
Расширение Wappalyzer
7. Просмотреть статистику сайта
С помощью расширения Similarweb можно посмотреть статистику любого сайта (например, сайта вашего конкурента) по визитам, источникам трафика сайта, в том числе по ключевым словам в поисковых системах. Данные показываются в виде диаграмм и графиков, которые можно выгрузить. Сервис позволяет оценивать не только сайты, но и мобильные приложения.
Расширение Similarweb

Михаил Акимов,
технический специалист Тильды
Не всегда удобно работать в расширениях. Например, вместо плагина Similarweb я захожу на сам сайт и там смотрю, что и как. А вместо расширения Google Analytics проще зайти на сайт или даже в мобильное приложение. Удобнее смотреть с телефона, чем вглядываться в маленькие буквы веб-интерфейса.
Другие полезные инструменты, которые команда Тильды использует в работе каждый день
1. Trello
Нам нравится Trello (и его расширение для Chrome) — один из самых известных таск-менеджеров, рабочий процесс в нем раскладывается по доскам и карточкам.

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

В Trello очень много возможностей, мы чаще всего используем в карточках чек-листы (какие действия нужно сделать, чтобы решить задачу), цветные теги (например, как статус задачи) и, конечно, добавляем разные вложения к задаче — ссылки, картинки.
trello.com

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

Но главное открытие последнего года для меня — это Trello. Из рабочего сервиса для задач он превратился для меня в личный инструмент, в который я записываю все: книги, фильмы, покупки и задачи.
2. Toby
Расширение для экрана новой вкладки (New Tab). Основные функции — быстро закрывает множество окон и сохраняет их списком, который можно открыть одним нажатием. Это удобно, если вы используете определенные веб-инструменты для конкретной задачи, их можно быстро сохранить и открывать одной кнопкой.
Расширение Toby
Или похожее расширение The Great Suspender — заморозка вкладок. По работе приходится открывать много вкладок, они быстро съедают всю память. Этот плагин — волшебная таблетка, которая замораживает неиспользуемые вкладки, очищает память, а, когда нужно, снова размораживает.
3. Сохраняем понравившиеся ссылки и статьи
Иногда нужно сохранить картинку, ссылку или пост, чтобы потом к ним вернуться, таких расширений довольно много. С помощью Raindrop мы сохраняем и структурируем ссылки, в Pinterest загружаем изображения в разные доски. Интересные статьи для чтения оставляем на потом в Instapaper и в Pocket, в последнем удобно присвоить тег, чтобы быстро вспомнить тему материала.
4. Расширения для работы с английским языком
В работе поддержки и повседневных задачах мы часто имеем дело с английским языком.

Расширение Google Translate помогает быстро перевести непонятное слово — нужно навести курсор на слово или кликнуть по нему правой кнопкой, также можно перевести всю страницу целиком.
Расширение Google Translate
Lingualeo — работает по схожему принципу и предлагает несколько вариантов перевода слова. Кроме того, интересные слова и целые фразы можно сохранять и потом учить в приложении. Метод хорош тем, что изучается не абстрактный набор слов, а живая лексика, которую вы встретили в современной англоязычной среде и знаете контекст.
Расширение Lingualeo
Очень удобно пользоваться Grammarly — подсвечивает ошибки в тексте, который вы пишете на английском, в любом окне — и на вашем сайте на Тильде и в сообщении в Facebook.

Маша Хаак,
фронтенд-разработчик Тильды
Когда работаешь с вебом, приходится много гуглить. Если хочешь найти информацию, которая еще не успела устареть, то ищешь статьи на английском. Lingua Leo помогает забыть о том, что словарный запас далек от идеального. Уже не помню, что в браузере установлено расширение. Просто выработался рефлекс: дважды кликаешь по слову или фразе — видишь перевод.
5. Инструменты для создания скриншотов и скринкастов
Их очень много разных, для себя мы выделяем несколько расширений. В Lightshot удобно выделить кусок экрана, сразу же его отредактировать и отправить.

Full Page Screen Capture делает фотографию всего окна браузера за один клик. Пару секунд во время создания скриншота сам процесс отображается в стиле игры Pacman.
Расширение Full Page Screen Capture
В Яндекс.Диске можно сделать скриншот страницы или ее части и отредактировать снимок — заблюрить ненужное, выделить важное стрелками, линиями, рамками, написать текст. Затем можно поделиться либо сразу изображением (Cmd+V и в чатике появилась картинка), либо файлом, либо ссылкой на файл, который сохраняется в папку на Диске.

Скринкасты записываем в Screencastify и Monosnap.

Скриншоты — важная часть работы поддержки и просто удобный инструмент на каждый день. Часто бывает нужно быстро запомнить информацию на экране или проиллюстрировать свои слова примером.
Расширение Screencastify
6. Переслать информацию
Мы пользуемся расширением Pushbullet, чтобы передать файл, ссылку или заметку на Android устройство. Это нужно, например, чтобы проверить проблему пользователя, или отправить интересную информацию друзьям и коллегам.
7. Чаты и видеосвязь
Внутри команды мы общаемся в мессенджере Telegram, у нас около 15 тематических чатов: разработка, дизайн, вдохновение. Кстати, в Telegram удобно переслать сообщение себе; для этого зайдите в контакты и кликните на свой юзерпик — откроется ваш чат с самим собой. Так, например, можно сохранять ссылки.

Для общения по видеосвязи мы используем сервисы Google Hangouts и Sococo — у них удобные функции и простой интерфейс. Чтобы начать видеозвонок в Google Hangouts, нужно открыть ссылку hangouts.google.com/hangouts, нажать на иконку видеозвонка, получить ссылку и поделиться ей с собеседниками. Участников звонка может быть очень много (Гугл обещает до 100 человек). В Sococo тоже могут созвониться несколько человек, аватарки покажут статус участников звонка — например, кто подключен и слушает разговор, а кто забыл включить микрофон или камеру.
8. Управление временем
В интернете легко заблудиться и отвлечься от важного дела, спасает расширение RescueTime — в нем можно посмотреть, как прошел день в браузере: сколько и на что времени было потрачено.

Better History сортирует историю браузера по дням и собирает в пакеты, которые можно настроить. Еще в контекстном меню на сайте появляется возможность поискать любое слово в истории.
Расширение Better History
Toggl — бесплатный тайм-трекер, помогает измерить продуктивность работы. Повседневные задачи можно удобно отслеживать по таймеру. Интерфейс у него удобный — логгирование времени становится почти незаметным.

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

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

Текст: Евгений Дячко, Варя Гурова
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также: