Автоматическое создание webp копий изображений в wordpress 

Webp — это новый формат изображений, благодаря которому круто уменьшается их размер, а качество остается тем же. Например, png файл размером 1 мб. можно конвертировать в 200-100 кб. файл webp в зависимости от степени сжатия.

Для примера я взял png изображение размером 1000 x 1000 пикс. на прозрачном фоне и сконвертировал его в webp. Сжать можно и намного сильнее.

(далее…)

Открыть

Trello как простая CRM система 

Заявки с сайта могут поступать разными способами — на электронную почту, в телеграм, по СМС. Чтобы не запутаться в информации нужна система обработки заявок. Такая система называется CRM. Самые популярные русскоязычные — Битрикс24 и АмоСРМ.

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

Почему трелло?

  • Бесплатный;
  • Проще экселя и CRM;
  • Делаем процесс обработки заявок наглядным;
  • Можно научиться пользоваться за 5 минут.

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

Давайте попробую объяснить подробнее.

Читать далее
Открыть

Как искать картинки в шаттерстоке и других стоках 

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

  1. По ключевой фразе находим примерно нужно изображение. Например, по запросу «черные игральные кости» на второй странице можно найти более-менее подходящее изображение белых костей.
  2. Кликаем «показать все» и находим черные кости в более-менее подходящем ракурсе. Можно сделать несколько итераций.
  3. Сохраняем подходящее изображение на компьютер, загружаем его в поиск шаттерстока и выбираем из большого количества подходящих изображений самое лучшее. Обратный поиск творит чудеса)
Открыть

Как давать советы 

Когда видишь несовершенства чужих систем и понимаешь как это можно исправить, то первая реакция — посоветовать как сделать лучше. Потом вспоминаешь, как кому-то советовал «не в тему» и первый импульс уходит. Начинаешь думать, стоит ли рассказывать свои идеи или нет.

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

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

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

Если в открытую спрашивают «как сделать лучше», то, конечно, нужно вываливать все, что ты об этом думаешь. Человек ищет решение и просит поучаствовать в мозговом штурме.

Открыть

Шаблон для создания сниппета в Sublime text 3 

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

Открыть

Обтравленные по контуру изображения и водяные знаки 

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

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

Взял за правило всегда вырезать изображения в маску. С помощью нее можно быстро перенести вырезанный контур на новое идентичное изображение, но без водяных знаков. Чтобы выделить контур маски нужно зажать cmd (ctrl) и кликнуть на ее значок — .

Открыть

Перезагрузка страницы при использовании приложения «Перехватчик» Битрикс24 на WordPress и contact form7 

В Битрикс24 можно удобно интегрировать все формы сайта. С помощью приложения «Перехватчик» можно прописать name форм в системе, вставить один скрипт и все заявки с сайта будут превращаться в лиды. Очень быстро и удобно.

Но при интеграции с contacts form 7 возникла проблема — страница, которая должна работать по ajax перезагружалась каждый раз после сабмита формы вне зависимости от того,  отправлено письмо или нет.

Проблему решил убрав с помощью js значение атрибута action у форм — $('form.wpcf7-form').attr('action', 'javascript:void(0);');

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

Открыть

Мерцание при добавлении виджета «Открытые линии» от Битрикс24 

При установке виджета «Открытые линии» от Битрикс24 на сайт столкнулся с проблемой, что после загрузки всего контента он вначале добавляет свой html код сразу после открытия тега body, а потом стили. В итоге сайт мерцал на долю секунды. Было не очень.

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

.bx-crm-widget-wrapper{
   height: 0px;
}

Открыть

Ссылки на мессенджеры для сайтов 

Whatsapp

Начать чат
<a href="whatsapp://send?phone=79523722135">Написать в вотсаппе</a>

Начать чат через сайт вотсаппа
<a href=" https://api.whatsapp.com/send?phone=79523722135">Написать в вотсаппе</a>

Начать чат с сообщением
<a href="whatsapp://send?text=Привет, как дела?&phone=+79523722135">Написать в вотсаппе</a>

Viber

Начать чат
<a href="viber://chat?number=79523722135">Написать в вайбере</a>

Добавить контакт
<a href="viber://add?number=79523722135">Добавить в вайбере</a>

В вайбер номер телефона нужно добавлять без плюса.

Telegram

Начать чат
<a href="tg://resolve?domain=egmalt">Написать в телеграме</a>

Skype

Начать чат
<a href="skype:egmalt?chat">Написать в скайпе</a>

Позвонить
<a href="skype:egmalt?call">Позвонить в скайпе</a>

Facebook Messangers

Начать чат
<a href="https://www.messenger.com/t/egmalt">Написать в фейсбуке</a>

Вконтакте

Начать чат
<a href="https://vk.me/egmalt">Написать в вконтакте</a>

Карты

Показать в картах
<a href="maps:ll=55.758401,37.633017">Москва, Бол. Златоустинский пер. 9</a>

Открыть

Склад js скриптов 

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

Примеры карточек

Один скрипт — одна карточка. Карточки разбиты на столбы по темам. Сверху — наиболее полезные скрипты, снизу наименее или те, которые я еще не пробовал. Пока все субъективно.

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

Открыть

Некоммерческие проекты 

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

(далее…)

Открыть

Осьминожка навыков 

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

(далее…)

Открыть

Поступил в «Школу дизайнеров» бюро 

Поступил в школу. Разве это не повод начать вести блог?

(далее…)

Открыть