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

Click по кнопке не работает после Ajax

Бывает ситуации, когда новый html контент загружается на лету. Часть этого контента могут быть элементы управления. В общем случае кнопка “далее” для прогрузки следующей страницы. Кнопка приходит после Ajax запроса и должна сразу начинать работать.

Проблема в том, что jQuery в обычном виде при этом перестанет работать после первого перехода. То есть слеждующая канструкция не имеет смысла в этом сценарии:

Какое решение можно предложить?

Эту проблему решит следующий код:

Код для page1.php

Код для page2.php

При использовании .on() JavaScript будет “слушать” нажатие, даже тех элементов, которые добавились на лету, тогда как .click() игнорирует новые элементы.

Поделиться:

Как передавать данные между контроллерами в Ангулар

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

В связи с этим возникает вопрос – а как тогда поступать в случаях, когда у разных контроллеров должен быть доступ к одному и тому же объекту данных. Живой пример: вам нужно сделать приложение для магазина спортивных товаров. За отображение кассы у вас отвечает один модуль, а за отображение всех товаров другой. Они оба должны иметь доступ к JSON объекту со всеми данными по товарам, который был получен с сервера.

Как передавать данные между контроллерами в Ангулар

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

Приведу пример:

Поделиться:

Подобрка фонов для веб приложений и на все случаи жизни

CSS3 Patterns Gallery

http://lea.verou.me/css3patterns/

CSS3 Patterns Gallery

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

Noise Texture Generator

http://www.noisetexturegenerator.com/

Noise Texture Generator

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

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generator

Удобный генератор CSS градиента. Выглядит как инструмент фотошопа. Я им пользуюсь постоянно и пока нареканий нет.

Background Image Generator

http://bg.siteorigin.com/

Background Image Generator

Генератор текстур для фона. На выходе вы получаете паттерн в виде картинки. Крайне простой интерфейс.

Поделиться:

Быстрое создание REST API сервера на Slim фреймворк

Не буду объяснять причину необходимости API сервера, тем более что если вам знакомы такие слова как REST и Slim фреймворк, то вы абсолютно точно знаете зачем вам API.

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

  • Powerful router
  • Template rendering with custom views
  • Flash messages
  • Secure cookies with AES-256 encryption
  • HTTP caching
  • Logging with custom log writers
  • Error handling and debugging
  • Middleware and hook architecture
  • Simple configuration

При этом разумеется, что все недостающие модули можно будет прикрутить позже. Я только хотел сказать, что они не входят в стандартную коробку Slim.

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

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

Важно – проверьте, что у вас установлен и работает rewrite_mod, без него будет не то.

Основные элементы файла index.php, который запускает фреймворк:

Теперь немного изменим раутинг. Я хочу сделать API сервис, который умел бы выполнять следующие команды:

  1. Принимать код верификации со стороны клиента, проверять его и выдавать ответ.
  2. Выдавать список товаров для отображения в приложении.
  3. Выдавать ответ открыта ли еще сессия.
  4. Принимать заказанные товары и выдавать ответ обработан ли заказ.

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

Вот и все – серверная часть готова к тестированию.

Ссылки по теме:
http://www.slimframework.com/
REpresentational State Transfer
Status Code Definitions

Поделиться:

Проблема картинок в мобильных веб приложениях.

Практика показала, что использование картинок в мобильных веб приложениях чревато неожиданными проблемами. Дело прежде всего в том, что мобильные смартфоны имеют настолько разные экраны, что просто хоть стой хоть падай. Разрешение варьируется от 320 до 1300 пикселей по горизонтали и это порой не предел. Из этого вытекают сложности с подбором картинок. Слишком маленькие картинки на больших экранах будут ужасно смотреться, а слишком большие будут “кушать” лишний траффик.

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

Приведу пример проблемы, с которой пришлось столкнуться:

Слева PNG картинка в разрешении 320 пикселей справа та же картинка, как она бы выглядела в более высоком разрешении.

SVG-example-png SVG-example-png-bad

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

SVG-support-2014-Aug-29

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

Ссылки по теме:
SVG support on Android, current status

Поделиться:

В каких проектах использовать Angular?

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

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

В целом дизайн основного экрана должен был иметь вот такие основные элементы:

main-screen-angular-app

Мы решили в этом проекте использовать Ангулар. Прежде всего его решение по связке данных облегчает жизнь просто невероятным образом. Выдача списка продуктов и привязка его к тем, что клиенты уже выбрал может быть достаточно болезненным. Ошибки и их отладка потом может съесть огромное количество времени.

Или ваши программисты не совершают ошибок и их код потом легко читается? Если да, то я с удовольствием отправлю к вам несколько своих знакомых на мастер-класс 🙂

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

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

Но вернемся к нашему приложению.

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

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

Поделиться:

Геометрические фигуры при помощи CSS

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

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

Итак геометрические фигуры при помощи CSS

Круг

See the Pen CSS shapes – circle by Artem Demo (@artemdemo) on CodePen.

Шести-лучевая звезда

See the Pen BtFuA by Artem Demo (@artemdemo) on CodePen.

Пяти-лучевая звезда

See the Pen CSS shapes – star 5 points by Artem Demo (@artemdemo) on CodePen.

Сердце

See the Pen CSS shape – heart by Artem Demo (@artemdemo) on CodePen.

Инь Янь

See the Pen CSS shapes – yin-yang by Artem Demo (@artemdemo) on CodePen.

Увеличительное стекло

See the Pen CSS shapes – Magnifying Glass by Artem Demo (@artemdemo) on CodePen.

Зачастую наши возможности ограничиваются только нашей фантазией 🙂

Поделиться:

Google Chrome хранит кэш как зеницу ока

Google Chrome хранить кэш как зеницу ока – он расстанется с ним только в самом принудительном порядке. Это особенно касается всего что связанно с изменением в файле .htaccess – Если что-то никак не включается или не выключается, то вполне возможно что вы простой забули почистить кэш!

Особенно обиден тот факт, что понимаешь это только по истечении часа (или нескольких часов?) копания в интернете и перезагрузок сервера (ну чем черт не шутит)

Обидно? Да не то слово 🙂 Но в этом и есть наверное суть работо программиста – нэ отчаиваться и идти дальше. Ну и конечно делать бэкапы! )

Поделиться:

Разница между библиотеками раутинга route и ui-route в ангулар

Сразу предупреждаю, что этот материал не совсем для новичков, но, как говорится “не може молчать” 🙂 Вопрос раутинга важен и особенно остро стоит, когда не понятно почему есть две популярные библиотеки с сильно отличающимся подходом. При том что в Ionic по умолчанию встроена именно нестандартная библиотека. Не будут же эти ребята заниматься глупостями? значит нужно разбираться.

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

Основное понятие, которым оперирует ui-route это State, у route это Route.

States Routes
State оперирует конкретным местом в приложении
Иерархическая зависимость – у любого состояния могут быть “дети”
Каждому state дается имя, по которому к нему можно будет обратиться
Навигация по имени или по URL
Множество отображений контента ui-view
Route оперирует адресом URL
Одноуровневая зависимость
Имя route это его URL
Навигация только по URL
Только одно отображение ng-view

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

В конечном итоге для себя я решил, что стоит попробовать и то и другое и работать с тем что удобнее 🙂

Ссылки по теме:
https://docs.angularjs.org/api/ngRoute/service/$route
http://angular-ui.github.io/ui-router/site/
Tim Kindberg on Angular UI-Router

Поделиться:

Как группировать стили в CSS

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

Приведу живой пример. Скажем у вас есть несколько стилей, которые так или иначе отвечают за цвет объекта. Все они начинаются со слова “color-“, например color-header, color-footer.

Теперь если вам необходимо добавить всем этим стилям так же тень, то нет необходимости объединать их в одну группу, вы можете просто добавить стиль по маске имени класса:

Стоит отметить что существует так же новые возможности по выбору элементов относительно аттрибутов тега: href, type, data-* и т.п. Лично мне этот подход не очнь нравится такъ как атрибуты предназначрно больше для передачи инфорамации, а не для определения оформления элемента. Однако, вы впоне можете использовать лживой удобный для вас метод.

Поделиться: