Crosswalk это хорошо, но...

1. Это увеличивает размер приложения. В моём случае с 4.5 до 20.5 мегабайт (хром то надо как то загрузить). Кого это сейчас волнует? Но учитываем, что приложение довольно простое и рост продолжится с его усложнением (хотя и не такой значительный). А одно из устройств эти 20 мегабайт скачивало довольно долго.
2. Мы получаем 2 apk - для arm и x86 платформ. К которым надо применить двойную работу по публикации в магазинах.
3. (и самое главное) Поведение приложения не стало идеальным, как я этого ожидал. "Тормоза" остались (хром всё же тяжело ворочается на устаревших и лоу енд устройствах). Появились новые глюки, которых нет в нативных билдах (основанных на системном Webview), и не понятно как их править. Визуально скорость работы также снизилась по сравнению с не crosswalk билдом.

Вывод: имеет смысл подправить приложение (Framework7) для корректной работы на платформах андроида 4.0-4.3 и не заморачиваться Crosswalk.

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

Еще один вывод - Crasswalk сборка на пре-киткэт устройствах (Андроид 4.2-4.3) вообще должна замечательно работать, особенно если пофиксить некоторые визуальные недоразумения.

Brackets vs Netbeans vs Webstorm

Brackets встроен в #XDK и чем то даже мил, не смотря на то что притормаживает. Но отсутствие работы с несколькими файлами во вкладках "убивает", очень неудобно переключаться между рабочими файлами через дерево файлов. Ну и еще несколько не очень удобных плюшек. Зато есть предпросмотр SVG прямо в тексте.

Тогда смотрим на внешние редакторы.
Ставлю Netbeans. Крутой, много всего. Довольно удобный. Но на 500кб файле начинает притормаживать так, что работать становится очень тяжело. Предпросмотра SVG нет.

Ставлю Webstorm (триал). Быстр (на тех же файлах), наворочен. SVG не показывает. Долго мучаюсь с настройкой привычных клавиш и светлой темы отображения. Она одна и несколько темных. Но дефолтная схема такая, что "вырви глаз". Беру "дракулу" (темня тема) и меняю у неё фон на светлый, стало лучше. Обилие функций пугает и настораживает. Отмечаю, что при сохранении файлом, иконка с "дискеткой" не становится неактивной, иногда приходится "пересохранять".

Есть еще Komodo Edit (IDE), но большого восторга он у меня не вызвал. И Eclipse... А сейчас еще и Visual Studio...

UPD подсказали, что Webstorm постоянно сам сохраняет документы (автосохранение).

В поисках золотого... ну чего нибудь-золотого (про монетизацию)

Задумался о вариантах монетизации гибридных приложений. Реклама.

Что нам предлагается для XDK/Cordova? Правильно - плагин поддерживающий Admob. Последний, впрочем, уже сам поддерживает разных рекламных провайдеров.

А приложение у нас на HTML5, неужели ничего нет, что бы встраивалось прямо в html/js, без нативных модулей. Оказывается есть - LeadBolt. Предлагает баннеры мобильных хтмл5 приложений и грузятся с сайта лидболта.

Правда отзывы о лидболте, особенно в русском сегменте  не очень. Много шлаковой рекламы, с установкой всяких приложений, которые воруют денежки у пользователей. Хотя вряд ли это можно сделать через хтмл баннер (еще один плюсик такому решению).

Возможно еще что-нибудь всплывёт со временем...

Стилизация Framework7 - куда уж проще?

Оказывается всё довольно просто (респект автору F7). При инициализации фреймворка происходит определение девайса и ОС и устанавливают соответствующий класс у html, а дальше уже дело техники.

Определяем группу классов для поведения по умолчанию (iOS и десктопные браузеры), а потом делам новые стили для других платформ:

.iconica {...}
.android .iconica {...}
.winphone .iconica {...}

Ресурсы для стилизации Framework7 приложений

Framework7 отличная штука!

Но в силу того, что он изначально ориентирован на ios, то встроенные возможности стилизации довольно скудны. Для примера, отметим, что каждая встроенная иконка  имеется наличии в нескольких цветовых решениях, соответственно количеству цветовых тем.

А если мы хотим, чтобы наше приложение было больше похоже на нативное, то придётся для этого его стилизовать под нативное, как минимум цветовое оформление и изображения контролов (иконки).

Для этого надо изучить требования разных ОС (UI guideline) к оформлению приложений. Вот небольшой список:

• IOS 7/8 краткий, отлично адаптированный для быстрого понимая гайдлайн по ИОС. Для F7 мало актуален, ибо F7 практически весь (а может и весь) соответствует UI guidlines  для iOS приложений.
• Aндроид  Гайдлайн от самого Google. Описывается Material Design. Можно найти и для предыдущих версий, но смысла нет - проще принести MD на не новые устройства со своим приложением.
• WindowsPhone 8 / ModernUI. Тоже от производителя - Microsoft. Есть что почитать. Кроме того, можно посмотреть как  и что предлагает MS для html5 приложений в своём движке WinJS  на try.buildwinjs.com 

А теперь к иконкам, для иОС опять ничего можно не делать, но можно что нибудь и изменить.

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

Итак, первый - универсальный сборник иконок от авторов Ionic framework

Для Андроид - от Гугла. А есть еще и Material Design сборник от автора коллекции ModernUI

Для ModernUI. Для Windows Phone.

Очередные непонятки с XDK, Framework7 и WIndows Phone

Не знаю, что делают скрипты intelxdk.js и cordova.js (знать то знаю конечно), но при их подключении в F7 приложении на WindowsPhone перестаёт работать (горизонтальный) swipe, (вертикальный) scroll работает как надо. И всё работает без этих файлов.

Fail mystic!

Хо-хо-хо! Турбощетка для пылесоса.

Разобрал турбощетку от пылесоса, чтобы почистить от девичьих (...). А там оказывается полноценный ремённый привод!

Нюанс в том, что щеткой долго не пользовались и он потерял эластичность, принял овальную форму.

Устройство по руке

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

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

Конкретные примеры - Ipod 5 лежит лучше в руке, чем Ipod 4 (со скруглённой задней крышкой). Билайн Смарт2 лучше лежит, чем Explay Atom. Huawei W1 лучше, чем Nokia 530.

Последняя у меня буквально несколько раз пыталась выскочить из рук и только чудесным образом не оказывалась на полу.

Такая разная прозрачность

Играюсь с прозрачностью разных элементов в html5 приложении. И попадаю в засаду разной реализации прозрачности в десктопных и  мобильных браузерах при одной и той же величине css параметра opacity:

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

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

Решение - забить на адаптацию и делать по худшему варианту (по десктопу) или не забивать  и делать адаптацию или на Javascript или условных правил CSS (не знаю есть ли такие).

Пока делаю по первому варианту.

Нам песня строить и программировать помогает

Неожиданно подсел на прогинг под музыку. Выбираю музыкальную тему под настроение и прожу прожу прожу.

Спасибо онлайн радио сервису www.101.ru  - много разных направлений. Но заметил, что довольно легко работается под ритмичные направления - Progressive или Hot traxx

А расслабиться всегда можно под New Age или Chillout.

Вы делали "историю поиска"?

Неожиданно захотел реализовать историю поиска в ЭнРушечке (учебное приложение на F7 / XDK). С перемещением по кнопке "Назад", как в браузере.

Оказалось, что это довольно непростая и интересная задача :)

Javascript и русский язык дружат. Но не до конца.

Вот ведь как оказывается!

Промучался полдня пытаясь понять, почему не работает regexp, который окружает каждое слово тегами. Вот такой:

text = (dict[k]).replace(/\b(\w+)\b/g, "$1");    

А оказывается он работает, но только с латиницей (ASCII mode), флаг поддержки юникода (u) не поддерживается. Только на одном ресурсе встретил упоминание про подобное поведение регулярных выражений в Javascript. Как решение предлагалось использовать диапазон символов ([a-zа-я0-9])+ вместо (\w+). Впрочем мне это тоже не помогло, ибо не также не работало.

Рабочим решением стало разбивание строки по возможным разделителям

text ="" + dict[k].replace(/([ ;,\.]+)/gm, "$1") + "";   

PS: Этот код потребовался для получения слова, по которому кликнул (тапнул) пользователь.  Может немного кривовато, есть решение, где можно получить слово в обработчике клика (тапа) через window.getSelection(), но неожиданно не встретил готового кроссплатформенного решения, который сразу бы заработал на мобильных платформах.

Возможно вернусь к этой идее позднее.

Впечатления от MacOS X 10.10

Я понимаю, что человек ко всему привыкает. Но... Yosemite не впечатлил меня своим плоским дизайном.

Бум держаться Маверикса до последнего. Тем паче он пошустрее в виртуалке работает.