Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Автоматическое добавление многоточия длинному тексту – CSS

Люблю простые решения, казалось бы сложных задач.

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

Сделать фиксированную длину тестового блока и обрезать все что выходит за него задача тривиальная – overflow:hidden наш друг и верный товарищ в этом вопросе. Но этого не достаточно, менеджер по продукту смотрит преданно в глаза и говорит, что нужно еще и многоточие поставить иначе упадем в грязь лицом и никак больше не подымимся.

Ну падать в грязь нам сто процентов не хочется. Так что уже задумываемся о том как писать функцию на JavaScript, которая бы решила все эти вопросы. Однако, есть способ проще! Можно воспользоваться не слишком известной CSS командой “text-overflow: ellipsis;” и все будет сокращаться с многоточием:

В действии:

See the Pen Автоматическое добавление многоточия длинному тексту by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Динамичное создание ссылок в Ангулар – ngHref AngularJS

Ануглар позволяет создавать ссылки “на лету” используя информацию с сервера, либо формируя их по тем или иным параметрам. Подход к их созданию достаточно простой достаточно написать код вида:

Ничего особенно интересного тут не произайдет. Ссылка будет добавлена и все будет прекрасно работать, до тех пор пока вы будете использовать стандартные линки вида “https://artemdemo.me”. В приложениях же для смартфонов ситуация меняется и там порой требуется запускать ссылки вида “app://do.something”.

В этом случае ангулар будет недоволен и к каждой такой ссылке будет добавлять слово “unsafe:” –> “unsafe:app://do.something”. Само собой, что при таком раскладе ничего работать не будет. Нужно как-то с этим бороться.

Способ, разумеется имеется. Нужно передать ангулару список “безопасных” префиксов, таким образом, чтобы он не ломал наши ссылки. Сделать это стоит на стадии конфигурации приложения, чтобы потом два раза не вставать:

Пример использования:

See the Pen Динамичное создание ссылок в Ангулар – ngHref AngularJS by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Немного о CSS препроцессорах или почему стоит попробовать LESS

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

Существует два самых распространенных CSS препроцессора: LESS и SASS, может есть и больше, но это два гиганта, которые широко распространены в индустрии. Причем работают они в двух совершенно разных средах, так что вроде бы и даже не конкурируют, но обо всем по-порядку.

Препроцессоры позволят добавить в CSS функционал языка программирования: циклы, переменные, классы (их подобие разумеется) и функции. Если вы занимаетесь веб разработкой, то наверняка сталкивались с тем, что по нескольку раз копировали один и тот же параметр (например цвет) в разные классы. Никакого другого метода кроме как копи-паст CSS не предлагает. Если нужно этот параметр потом поменять, то приходится вручную пройтись по всему списку и надеяться, что ничего не пропустил :] препроцессор решает эту проблему!

Можно использовать циклы:

Но моя самая любимая фишка – это дополнительный случайный параметр для картинок, которые я устанавливаю через background: url(); Дело в том, что они все хранятся в кеше браузера и чтобы увидеть изменения после обновления файла изображения нужно чистить кеш, что достаточно муторно. Есть отличное решение:

В общем сразу видно стоящая штука. Теперь поделюсь причиной, почему я выбрал для себя работу именно с LESS. Из-за лени господа и дамы. Вначале синтаксис SASS мне понравился больше и я уже собрался его ставить, как выяснилась неприятная особенность – дело в том, что “компилятор” SASS требует установки Ruby (языка программирования вместе с менеджером пакетов). Ничего против самого языка я не имею, но ставить дополнительный пакет только из-за препроцессора, как-то не хотелось.

Параллельно с этим LESS прекрасно работал с npm – а раз уж я и так пишу под Node.js и давно пользуюсь разными пакетами от npm, то вопрос с выбором оказался решенным.

Поделиться:

Будьте осторожны используя $index в ng-repeat

“Клиент жалуется на то, что удалял один элемент списка, а удалился вместо него другой!”

Это баг из той серии когда проблема не очевидна, а решение может занять достаточно много времени. При работе с AngularJS – эта ошибка может возникнуть из-за не очевидной работы $index в сочетании с ng-repeat.

Давайте посмотрим на код, который может вызвать эту проблему.

Ничего подозрительного не видно, верное? Так и есть код работает корректно и багов в нем нет.

Теперь добавим фильтр

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

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

Как буд-то ничего такого не произошло, верно? Однако, мы только что добавили баг в работу нашего приложения.

Баг находится в работе вот этой функции:

Проблемы начнутся когда пользователь захочет удалить элемент после того, как воспользуется фильтром. Дело в том, что фильтр выстраивает список заново и $index теперь отсчитывает только элементы нового списка, нумерация оригинального листа не сохраняется в фильтре.

У этой проблемы есть достаточно простое решение. Передавайте функции removeItem() сам элемент, а не $index.

 

Поделиться:

HTML фреймворк для разработки мобильных приложений под iOS – Framework7

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

Сегодня я хочу рассказать о фреймворке Framework7, который разрабатывается компанией idangero.us. Кстати, интересный факт – это российская компания, находится в Ростове-на-Дону, хотя по сайту это не заметно, потому что он ориентирован исключительно на западного клиента.

Framework7 заточен под разработку приложений для iOS. Дизайн всех его виджетов взят из последней спецификации яблочной компании, так что даже если на в принципе конечное приложение можно скомпилировать и под Android (используется все тот же PhoneGap), то на практике это не имеет особого смысла. Дизайн этих двух систем слишком разный – и не стоит их смешивать. Плюс к тому видимо, все тесты прошли тоже только под iOS, а значит только под нее можно рассчитывать на минимальное количество глюков.

framework7-ui

Если ionic framework является больше графическим и ui решением, а весь его функционал основывается на работе AngularJS, то в случае с Framework7 все иначе. Он не использует по умолчанию сторонние библиотеки. Весь JS написан его создателями и сторонние библиотеки явно не используются. Хорошо, это или плохо сказать сложно, все зависит от поставленных задач.

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

Поделиться:

Автозаполнение адресов – мобильный виджет для Ionic framework

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

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

Выпадающий список поиска все время норовит оказать под клавиатурой, а в том случае, если его таки удается выловить – оказывается что нет никакой возможности нажать на элементы списка. Они перестают выполнять свою функцию на экране смартфона. Проблема нудная, но решаемая. Можно воспользоваться вот это директивой, которая специально создана для использования в Ionicframework:

geo-google-autocomplete

Скачать ее можно, с github аккаунта автора.

Поделиться:

Добавить поле для ввода даты не всегда просто – Mobiscroll datetime

Одна из проблем разработки web приложений под смартфонов в том, что не все виджеты работают так как нужно. Приходится надеяться на то, что браузер и WebView возьмут на себя решение таких, казалось бы, тривиальных задач как ввод даты. Создать поле для ввода даты действительно очень просто и даже была разработана спецификация html5:

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

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

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

mobiscroll-date-time

Для решения этой задачи может вполне подойти виджеты, которые разрабатываются компанией Mobiscroll. Она как раз специализируется на такого рода решениях.

Один из ее виджетов, которым я регулярно пользуюсь это Date & Time. Он отлично помогает решить проблему редактирования даты во всех смартфонах. при этом он очень просто настраивается и хороша работает как с jQuery Moile, так и с AngularJS. Рекомендую попробовать если вы еще не работали с этими виджетами.

Кстати, все их виджеты выложены в ознакомительных целях на гитхабе, так можете скачать вот по этой ссылке.

Поделиться:

Создание приложений для Windows, Mac или Linux при помощи HTML5, CSS и JavaScript

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

Сегодня речь пойдет о двух платформах, с очень схожим названием: TideKit и TideSDK. Названия схожи в первую очередь в связи с тем, что их разработкой занималась одна и та же группа программистов. Просто на определенном этапе было принято решение разделить проекты, потому что цели у каждого из них были разные. Собственно, история чем то напоминает историю Cordova и PhoneGap.

Итак, давайте посмотрим чем отличаются эти платформы друг от друга. TideKit – это платформа для разработки приложений для десктопа, веба и мобильных устройств; в то время как TideSDK это комплект средств разработки для разработки под десктоп (SDK – Software Development Kit).

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

TideSDK

TideSDK – предназначена для разработки приложений для компьютера. Она предоставляет кросплатформенный компилятор и одна и та же программа может быть импортирована как на Виндоус, так и на Линукс и Мак.

tidebox

Разумеется, что центральным преимуществом в использовании этих технологии является более быстрая разработка и поддержка всех основных ОС, которыми могут пользоваться клиенты. Одни и те же разработчики могут работать над созданием сайта, приложения для компьютера и для смартфона. Плюс к этому разработка под разные ОС не будет в корне отличаться – за кулисами будут все те же HTML5, CSS и JavaScript.

Чтобы получить более полную картину посмотрите на список операционных систем, поддерживаемых каждой из платформ:

TideKit

  • Windows XP
  • Windows Vista
  • Windows 7
  • Windows 8
  • OSX 10.6 Snow Leopard
  • OSX 10.7 Lion
  • OSX 10.8 Mountain Lion
  • OSX 10.9 Mavericks
  • Ubuntu 12.04
  • Ubuntu 12.11
  • Ubuntu 13.04
  • iOS 6
  • iOS 7
  • Android
  • Ubuntu Server
  • RedHat
  • CentOS

TideSDK

  • Windows XP
  • Windows Vista
  • Windows 7
  • Windows 8
  • OSX 10.6 Snow Leopard
  • OSX 10.7 Lion
  • OSX 10.8 Mountain Lion
  • Ubuntu 12.04
  • Ubuntu 12.11

Ссылки по теме:
http://www.tidesdk.org/
https://www.tidekit.com/

Поделиться:

Создание многоязычного приложения в ангулар – AngularJs Multilingual App

Для многоязычных приложений в ангулар существую хороший модуль angular-translate, который вы уже сейчас можете начать применять в своем приложении.

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

Код примера:

See the Pen ng-translate by Artem Demo (@artemdemo) on CodePen.

Ссылки по теме:
http://angular-translate.github.io/
Easy global i18n angularJS language translations for your Angular app

Поделиться:

Material Design – новый подход Гугла к дизайну мобильных приложений

Несколько месяцев назад Гугл анонсировал новую концепцию в своем подходе к дизайну мобильных приложений. Это безусловно было связано с выходом новой версии андроида – Android L. Смартфоны становятся все более производительными, их характеристики все стремительнее улучшаются и, как следствие имеет смысл задуматься об улучшении графической составляющей. И то что Гугл предложил в своей новой концепции не может не радовать, потому что он смог обобщить многие принципы, которые витали в воздухе, но никто не мог их выразить в рамках одной концепции.

material-design

Суть Material Design заключается в метафорах, к которым мы не только привыкли, но которые являются непосредственной составляющей окружающего мира. За этими метафорами лежат тысячелетия истории и опыта поколений. Нам не нужно описывать как льется вода, горит пламя или шелестят листья, все это является частью общего знания. Если мы используем понятную всем метафору, то нам не нужно пояснять как работает та или иная вещь – метафора создаст нужный контекст.

Основная метафора в новом интерфейсе андроида – это поведение листа бумаги, как он передвигается в пространстве, какая интеракция происходит с окружающими его объектами. Далее команда гугла уделила внимание каждому аспекту работы пользователя с приложением: от типографики и новой концепции для иконок, до поведения кнопок и реакции смартфона на клик по одной из них.

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

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

Что можно сказать по поводу всего проекта? Я считаю, что направление крайне правильное. Да, вполне возможно, что некоторые части и принципы будет сложно применить. Вполне возможно, что со временем многое что поменяется, но лично мне это очень нравится. Material Design определенно крайне интересный концепт и уже начинают появляться библиотеки, которые его поддерживают, но об этом я расскажу в следующий раз.

Ссылки по теме:
Google I/O 2014 – Material design principles
Material Deisgn Specs

Поделиться: