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

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

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

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

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

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

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

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

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

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

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

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

Immagine ottimale оптимизирует изображения 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 очень много возможностей, мы чаще всего используем в карточках чек-листы (какие действия нужно сделать, чтобы решить задачу), цветные теги (например, как статус задачи) и, конечно, добавляем разные вложения к задаче - ссылки, картинки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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