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

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

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

Мы часто используем инструменты, которые определяют шрифт на сайте пользователя. Это помогает нам быстро разобраться в проблеме со шрифтом. Еще это расширение пригодится, если вы вдруг увидели симпатичный шрифт на каком-нибудь сайте и хотите узнать его название. Обычно мы пользуемся расширениями WhatFont и FontFace Ninja, они быстро показывают, какой шрифт используется в конкретном тексте на странице.

Часто бывает нужно скопировать цвет элемента на странице, как в инструменте Eyedropper в фотошопе. Для этого есть много расширений, но мы рекомендуем ColorZilla.

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

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

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

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

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

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

Page Ruler позволяет узнать размер в пикселях любого элемента на странице.

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

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

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

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

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

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

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

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

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

Расширение для экрана новой вкладки (New Tab). Основные функции сервиса — быстро закрывает множество окон и сохраняет их списком, который можно открыть одним нажатием. Это удобно, если вы используете определенные веб-инструменты для конкретной задачи, их можно быстро сохранить и открывать одной кнопкой.

Или похожее расширение The Great Suspender — заморозка вкладок. По работе приходится открывать много вкладок, они быстро съедают всю память. Этот плагин — волшебная таблетка, которая замораживает неиспользуемые вкладки, очищает память, а, когда нужно, снова размораживает.

Иногда нужно сохранить картинку, ссылку или пост, чтобы потом к ним вернуться, таких расширений довольно много. С помощью сервиса Raindrop мы сохраняем и структурируем ссылки, в Pinterest загружаем изображения в разные доски. Интересные статьи для чтения оставляем на потом в Instapaper и в Pocket, в последнем удобно присвоить тег, чтобы быстро вспомнить тему материала.

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

Расширение Google Translate помогает быстро перевести непонятное слово — нужно навести курсор на слово или кликнуть по нему правой кнопкой, также можно перевести всю страницу целиком.

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

Очень удобно пользоваться Grammarly — подсвечивает ошибки в тексте, который вы пишете на английском, в любом окне — и на вашем сайте на Тильде и в сообщении в Facebook*.

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

Full Page Screen Capture делает фотографию всего окна браузера за один клик. Пару секунд во время создания скриншота сам процесс отображается в стиле игры Pacman.

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

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

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

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

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

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

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

Сервис Better History сортирует историю браузера по дням и собирает в пакеты, которые можно настроить. Еще в контекстном меню на сайте появляется возможность поискать любое слово в истории.

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

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