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

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

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

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 тысячи городов. Засовывать их все в выпадающее меню - не вариант. Короче, надо думать... Ещё хотелось бы сделать возможность отображения календаря вместо погоды. Словом - громадьё моё.

Размышлял: Lentyay
9 Декабря

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

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

Размышлял: Lentyay
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, но не сейчас и, скорее всего, не в этом году.

Размышлял: Lentyay
5 Августа

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

Размышлял: Lentyay
10 Июня

Мэйджор техникл апдейт

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

Буквально час назад я зарелизил новую версию сайта с полностью переделанной вёрсткой и небольшими изменениями в backend`е. А теперь подробнее что и зачем:

  • Убран 1 из 4 брейкпоинтов адаптивной вёрстки и внесены изменения в оставшиеся 3. Например, блок комментариев и нижний параллакс теперь показываются на всех разрешениях.
  • Полностью переработано главное меню сайта. Flash-версия с фонариками ушла безвозвратно.
  • Переделана и смещена вправо (чтоб читать не мешала) кнопка возврата наверх страницы.
  • Верхний (логотип с кандзи) и нижний (пейзаж) параллаксы, а так же страница ошибок переделаны под использование скрипта parallax.js, который помимо всего прочего отлично работает на мобильниках и планшетах.
  • Многие иконки заменены на шрифтовые от Font-Awesome. В первую очередь для чёткости на retina-экранах.
  • Заменены кнопки шаринга в соцсетях. Теперь они есть под каждым постом в ленте и ссылаются на конкретный пост или статью.
  • Пагинация (оказывается, теперь и в русском это слово есть) стала занимать слишком много места и была переделана. Теперь в одну строку и с горизонтальной прокруткой.
  • Из галереи убраны некоторые альбомы, которые сейчас кажутся слишком личными.
  • Подгрузка картинок в галерее сделана через infinite scroll. Собственно, я изначально так и хотел, но прошлый раз что-то не сдюжил и в итоге появилось непонятное решение с подгрузкой по ссылке.
  • Убрана страница контактов. Совершенно бесполезный придаток. Позднее сделаю какую-нибудь возможность связи.
  • Обновлён скрипт комментариев до версии 5.2.11. Если честно, он уже давно бесит меня, но не меняю я его потому, что не хочется терять все добавленные комментарии.
  • Оптимизирован весь JavaScript.
  • Картинки из старых новостей и статей теперь будут скэйлиться с сохранением пропорций.
  • Добавлена небольшая copyright-фича.

Размышлял: Lentyay
Цитировать
в комментарии