Приложение Маяки Эстонии

Коничива, уважаемый!

За время вашего отсутствия мы тут вон чего понаписали:

20 Января

Часовщик XXI века

Расскажу, как обстоят дела с моим циферблатом для Pebble, которому я посвятил немало времени в последние три недели. Итак, с момента релиза (22 дня назад) он был скачан более 600 раз, сам циферблат я обновлял дважды и дважды страницу настроек. Кроме того, по итогам разработки я написал статью на Хабр, где в комментариях получил пару дельных советов.

Теперь подробнее и с деталями. Первый же отзыв, полученный через пару часов после релиза сообщал мне, что... я перепутал AM и PM в 12-часовой версии. Я быстренько пофиксил это дело, выпустив версию 1.01. Потом было много разных экспериментов (например, использование графики с прозрачным фоном). Кроме того, мне порекомендовали статью по оптимизации из которой я использовал пару примеров. Как ни странно, код стал компактнее, но вот количество потребляемой памяти возросло, а не наоборот.

Версия 1.02 была выпущена вчера. В ней полностью переработан механизм отключения standby-экрана. Собственно, в примере с которого я брал код на C, такой опции не было, там была возможность отключения автоматического возврата к standby-экрану. У себя же я изменил её описание на странице настроек, но не изменил суть. Вчера эта недоработка была исправлена.

Теперь о странице настроек. С ней всё проще, так как я могу обновлять её в любой момент, независимо от циферблата. На момент релиза для корректного отображения погоды пользователю надо было где-то найти ID своего города openweathermap.org и ввести его в настройках. Мне самому эта система не нравилась, вдобавок пару раз пользователи меня спрашивали где им взять этот ID. Однозначно это надо было менять. Оптимальным вариантом мне показалось поле ввода, предлагающее варианты в зависимости от вводимого текста (как в поисковике Джуджла). Я попробовал несколько скриптов для этого и остановился на jQuery-Autocomplete. Понравилось, что он не тащит с собой ничего лишнего (как, например, популярный Select2). Также я поместил весь список городов в базу данных. Тут выяснилось два интересных момента: 1) в разных странах существовали города с одинаковыми названиями и 2) у некоторых городов (по всей видимости достаточно крупных) было по несколько ID, привязанных к разным координатам. Для решения первой проблемы надо было добавить обозначение страны. Максимально компактным и наглядным решением мне показались флаги перед названием города. Чтобы свести к минимуму количество запросов к серверу (количество которых и так возросло из-за динамического списка), я целенаправленно искал флаги-спрайты и нашёл отличный вариант. Единственное, что я изменил - это сжал изображение флагов через TinyPNG. Что из этого получилось, можно посмотреть здесь.

Со второй проблемой было сложнее. Не хотелось отпугивать пользователей какими-то лишними опциями или координатами. В итоге я просто "отсёк" все лишние варианты через GROUP BY в SQL-запросе. Да, решение компромиссное и имеет свои минусы. Например, если в одной стране есть два города с одинаковым названием, то будет показан только один из них. Тем не менее, ничего лучше я пока не придумал.

Планы на будущее? Ну с нынешним циферблатом уже мало чего можно сделать. Единственное, что ещё хочется реализовать - определение местоположения по GPS и поиск города исходя из этого. А ещё есть идея другого циферблата, гораздо более простого.

29 Декабря

С почином, уважаемый!

Вот и сдюжил я своё первое приложение-циферблат для Pebble. Да, какие-никакие циферблаты я делал и ранее, но там процент моего участия был сведён к минимуму. В данном же случае это вполне можно назвать полноценной разработкой. Началось всё с двух статей (первая и вторая), где подробно описывалось создание циферблата. Ещё ценнее было то, что к статьям прилагались исходники рабочего циферблата. Судя по статьям, ничего особо сложного в этом деле нет и я решил попробовать. Предварительно я связался с автором этих статей, человеком под ником tmnhy и предложил соавторство в новом проекте: мои идея и графика, его - код. Автор оказался человеком весьма коммуникабельным и согласился на моё предложение.

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

Всю разработку я вёл в специальном онлайн-сервисе от создателей часов, CloudPebble. Честно скажу, его функциональность не просто поразила меня, а прямо-таки приятно шокировала. Весь код пишется в редакторе с удобной подсветкой и автозаполнением. Вся графика добавляется через специальный менеджер ресурсов. Компилируется всё тоже в CloudPebble, при этом приложение мгновенно загружается в ваши часы - удобнее просто быть не может. Также можно скачать откомпилированный файл на компьютер или сделать скриншот циферблата. Насколько я понял, скриншот снимается реально на моих часах, а не на каком-то эмуляторе на сервере, так как если в последнюю секунду сменить на часах циферблат, то скриншот будет снят уже с него. Ещё одной приятностью CloudPebble является интеграция с GitHub, чем я тоже с радостью воспользовался.

Львиную долю времени у меня заняло рисование графики. Первыми я, конечно же, нарисовал сами часы. Оформление календаря тоже родилось достаточно быстро. По мере отрисовки графики, я сразу же добавлял её в проект и располагал где надо. Достаточно неожиданно для меня, циферблат приобрёл лёгкий налёт стимпанковости. Индикаторы батареи и соединения Bluetooth я уже намеренно делал в этом стиле. Только оформление блока погоды мне никак не давалось. На какое-то время я оставил его и отвлёкся на веб-интерфейс для настройки циферблата. По сути, это обычная веб-страница, адрес которой прописан в настройках циферблата и которая принимает и отдаёт назад в циферблат какие-то переменные. Страничка не отняла много времени, так как никакой адаптивности и мультибраузерности тут не требовалось. В целях оптимизации я минифицировал весь CSS и JS и включил их в код страницы. Таким образом, единственный подключаемый файл на этой странице - это jQuery.

Fight for the bytes!

Закончив с этим, я вернулся к блоку погоды. Дизайн для него вроде как сложился, я дорисовал графику, добавил в проект и... случилось непредвиденное: я превысил лимит памяти на часах. Циферблат без ошибок компилировался и загружался в часы, где мгновенно "падал". Надо было урезать графику. Начал я с "экономии на спичках" и срезал "резьбу" у индикатора батареи. Сейчас вместо этой "резьбы" показан индикатор Bluetooth, у которого буква B вылезла за экран. Визуально разницы с предыдущим вариантом вообще нет. Дальше было самое трудоёмкое - центральный блок с датой и секундами. Я убрал фоновую картинку с кругом и нарисовал его программно. Тут выяснился один нюанс: для рисовки круга задаются координаты центра и радиус, таким образом, его размер в пикселях всегда будет нечётным и расположить его строго по центру невозможно. Пришлось немного попередвигать всё остальное, так как старый круг имел чётный размер. По той же причине индикатор секунд уже не вписывался в круг и его тоже надо было перерисовывать. А это 60 спрайтов, если что... Впрочем, если уж перерисовывать, то нужно выжать из этого по максимуму. В итоге, всё, что реально не меняется в индикаторе секунд я перенёс на фоновую картинку, что позволило заметно уменьшить разрешение спрайта. Умножаем на 60 и получается существенная экономия, которая, в конечном итоге, и позволила мне вписаться в байтовый бюджет.

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

Короче, циферблат готов и опубликован:

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

Также у меня есть некоторые планы на будущее. Например, сейчас не очень удобно реализована настройка погоды: надо в интернете посмотреть ID своего города openweathermap.org и ввести его в поле в настройках. Не очень удобно. Есть официальный список, но там 74 тысячи городов. Засовывать их все в выпадающее меню - не вариант. Короче, надо думать... Ещё хотелось бы сделать возможность отображения календаря вместо погоды. Словом - громадьё моё.

9 Декабря

... а давайте по disqusируем!

Продолжаю допиливать сайт по мере сил. На этот раз взор мой упал на сервисы комментариев. Основной скрипт мне не очень нравится и следовало бы от него избавиться, но там накопилась пара десятков комментариев и терять их не хочется. Кроме того, были доступны подключаемые скрипты от Фейсбука и ВКонтакте. В бесполезности последнего никогда не сомневался, но хотелось побольше "свистелок и перделок". Короче, сегодня заменил его на популярный и достаточно удобный Disqus. Что же до Фейсбука, то он меня всегда радовал, когда дело касалось программирования. Так и сейчас: скрипт я ставил давно, сейчас его синтаксис полностью изменился, в итоге у нас он не работал (точнее, работал в режиме совместимости со старыми версиями). Сейчас я его обновил - работает.

2 Декабря

Не щадя живота своего...

... сражался я с ветряными мельницами. Причём невидимыми... Началось всё с просмотра этого видео. Ничего глобально нового не узнал, но вот приоритеты точно сменил. Проверил я свой родной сайт в Google PageSpeed. Полученный результат, мягко говоря, опечалил: 33 балла (из 100 возможных) для мобильной версии и 56 для десктопной. Дальше произошло самое неожиданное: вместо уныния меня переполнил чуждый мне перфекционизм и битва за урожай началась. Без малого 3 дня я экспериментировал на грани извращений. Сейчас показатели следующие: 80 баллов для мобильной версии и 86 для десктопной. Не безоговорочная, но всё же победа!

Все сделанные мной изменения (за одним исключением) внешне не видны. Итак, что же конкретно было сделано:

  • включено сжатие Gzip (в файле .htaccess)
  • включено кэширование для графики и шрифтов (в файле .htaccess)
  • убран весь инлайн JavaScript, что позволило перенести подключение библиотеки Jquery из хедера в футер (ну или "из чердака в подвал", если вам так больше нравится). Весь остальной JS и так уже был в футере.
  • минифицированы все CSS- и JS-файлы. Затем мне и этого показалось мало и чтобы уменьшить количество запросов, я объединил их в 2 файла - all.min.css и all.min.js
  • для мобильных устройств вся графика в новостях теперь ресайзится специальным скриптом, а полная версия открывается в Фэнсибоксе
  • вся графика в дизайне с формата GIF заменена на PNG. Это и есть то самое визуально заметное изменение, так как у фона-пергамента появилась тень
  • вся графика в формате PNG была ужата

На этом фантазия меня оставила, да и силы тоже. Ещё неплохо бы полностью перелопатить CSS и сделать его mobile first, но не сейчас и, скорее всего, не в этом году.

5 Августа

Наконец-то я могу сказать это: я закончил и запустил новую версию "Пейнтбольного камикадзе". Что нового? Классный дизайн, адаптивная вёрстка и WordPress в сердце. Самое главное на этом сайте - мои анимированные схемы, поэтому им уделено больше всего внимания. Раньше все они были на Flash, что делало анимацию плавной и приятной, но схемы совершенно не отображались почти на всех мобильных устройствах. Сейчас Flash показывается там, где это возможно, а где невозможно - анимированный GIF. Так что, вэлкам все!

Цитировать
в комментарии