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

[Rest-App] – разработка браузерного мобильного приложения с использование AngularJS и jQuery Mobile – второе видео

Первое обзорное видео о создании браузерного мобильного приложения с использованием AngularJS и jQuery Mobile

Все файлы проекта можно скачать здесь.

Поделиться:

Анонс – [Rest-app] разработка браузерного мобильного приложения с использование AngularJS и jQuery Mobile

Я готовлю серию видео о разработке браузерного мобильного приложения с использованием AngularJS и jQuery Mobile. Основные причины почему я решил использовать эти две технологии я перечислил в видео ниже, но если коротко, то Ionic хорошо поддерживает только последние версии iOs и Android, а вот с Windows Phone проблема.

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

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

Поделиться:

Genymotion не доволен

Сегодня, в 9 часов вечера случилось непредвиденное. Genymotion – самый лучший эмулятор для андроида – перестал работать!

Ну как перестал – открываться то он открывался, но вот запускать сам эмулятор для нексуса наотрез отказался. Говорит мол VirtualBox не красиво себя ведет, так что работать я отказываюсь. Отлично, разве может быть что-то лучше?

Я уже грешным делом подумал, что настройки как-то слетали, а то я последнее время много экспериментировал, что с VirtualBox, что с Genymotion. Но, нет с настройками оказалось все хорошо. В итоге все разрешилось установкой последней версии VirtualBox. Работа работой, а прогресс по расписанию!

Поделиться:

Объекты в JavaScript или что за чертовщина происходит со строкой.

Этот пост скорее попытка получить некоторое понимание о том, что такое JavaScript в основе своей, нежели получить конкретные практические навыки. Мне нравится изучать “темные уголки” программирования, только в таких местах ты начинаешь понимать где разработчики шли на компромиссы, чтобы получить более результативный продукт.

Если углубиться в изучение JavaScript и внимательно посмотреть на то работу с переменными, то складывается впечатление, что вообще все в этом языке – это объект. Для примера, давайте посмотрим на переменную String:

Этот пример можно сократить сильнее, добавив еще больше неразберихи:

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

То есть с одной стороны “Some string” реагирует как объект, когда мы вызываем метод length, а с другой на нее нельзя повесить новую функцию? Какой же это объект тогда? Однако, это не единственный способ добавить метод объекту. Мы может использовать прототипирование:

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

JavaScript на самом деле превращает ее в объект. Для наглядности, это можно изобразить вот так:

После того, как объект возвращает метод, то JavaScript его убивает и восстанавливает равновесие :] Круто!

Поделиться:

Всплывающее окно с плавной анимацией в ангулар – AngularJs morph animation

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

Сегодня я хочу показать как сделать достаточно интересную анимацию всплывающего окна средствами ангулара и CSS3. Первый раз такую анимацию я встретил на сайте Morphing Buttons Concept – там предоставлено много интересных примеров анимации и меня заинтересовал как можно сделать то же самое, но уже в среде ангулара.

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

Я конечно, планирую сделать видео о том, как это анимация работает, но пока хочу поделиться самим кодом. Вот, что получилось:

See the Pen Pop Up morph animation by Artem Demo (@artemdemo) on CodePen.

Поделиться:

5 вещей, которые делают JavaScript таким особенным

Функции первого класса – First Class Functions

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

Давайте посмотрим на примере:

Событийно-ориентированная среда разработки – Event-Driven Environment

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

JavaScript отлавливает все эти события и запускает привязанные к ним функции.

Например:

Собственно, во многом благодаря этому и объясняется быстрота JavaScript. Он не вызывает все функции, которые были в него загружены, а только те, которые были вызваны. Это, собственно, и отличает его от многих языков программирования, в частности от php.

Замыкания – Closures

Замыкания – это функции в теле которых присутствуют ссылки на переменные объявленные вне тела этой функции в окружающем коде и не являющиеся её параметрами. Говоря другим языком, замыкание — функция, которая ссылается на свободные переменные в своём контексте. (Последнее предложение особенно хорошо помогло верно? :] Обожаю определения из учебников, пока сам не разберешься в чем суть, они ни разу не помогут)

Немного модифицируем предыдущий пример:

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

Скоп – Scope

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

У дочернего скопа есть доступ в родительский скоп, но не наоборот. Давайте убедимся в этом на примере:

Контекст – Context

По своей сути контекст, это применение переменной this. Контекст отличается от скопа, это можно увидеть в следующем примере:

Поскольку функция по умолчанию привязывается к корневому объекту, то в обоих случаях (что снаружи, что внутри функции) контекст не меняется и по-прежнему остается Window {}. Это изменится, если мы создадим отдельный объект.

Поделиться:

Анимация в ангулар – AngularJS Animation

За анимация в AngularJS отвечает отдельный модуль, который так и называется – ngAnimate. Этот модуль поддерживает как использование css анимации, так и создание своей анимации средствами JavaScript. В этой статье я расскажу об инструментах ангулара для css3 анимации.

AngularJS-animation

Для того что бы начать использовать анимацию достаточно просто включить этот модуль в проект и использовать встроенные в него классы. В ангуларе есть ряд директив, которые поддерживают анимацию по умолчанию, в первую очередь это ng-repeat – скорее всего именно с этой директивой будет связанна львиная часть анимации вашего проекта. Также анимацию поддерживают: ng-include, ng-if, ng-switch, ng-show, ng-hide, ng-view и ng-class.

Ангулар будет автоматически добавлять классы для появляющихся и исчезающих элементов. К этим классам можно будет добавить анимацию. Элементу добавляется по два класса: начало анимации (например ng-enter) и в активный класс (например ng-enter-active). на первый класс “вешается” определение первой стадии анимации, на последний ее окончание.

Но это не все инструменты, которые предоставляет ангулар для работы с css3 анимацией. Что если мы хотим чтобы анимация происходила не сразу со всеми элементами, а поочередно? Для этого ангулар предоставляет дополнительный класс stagger. ангулар сам вычислит в какой последовательности его нужно присваивать элементам.

Пример анимации:

See the Pen Анимация с фильтром by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Анимация в css3 – css3 animation пример

В этом примере я расскажу о том как использовать анимацию в css3

Полный код примера можно найти здесь.

Поделиться:

Анимированное меню – css3 transition пример

В этом видео я показываю пример использования css3 transition.

Полный код примера можно найти здесь.

Поделиться:

Разница между css transition и css animation

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

css3-animations-image

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

Прежде всего давайте поговорим о том какие механизмы анимации используются в css3. Их два: css transition и css animation – согласен, что название второго вводит в заблуждение получается что “анимация, animation”, но тут ничего не поделать и для ясности я буду использовать английские слова для обозначения терминов.

Transition – это анимация, которая происходит между двумя состояниями объекта – начальное и конечное. Это может быть изменение размеров, прозрачности, позиции или чего-то еще. Всегда есть начальная и конечная точки.

Пример такой анимации можно посмотреть вот здесь:

See the Pen CSS3 transitions, menu by Artem Demo (@artemdemo) on CodePen.

Если же перед нами стоит задача сделать анимацию, которая не обязательно включает начальную и конечную стадии, либо требует более аккуратную, по кадровую настройку. Например, анимация цвета, которая проходит через несколько оттенков – от синего, через зеленый, до красного; Либо бесконечная анимация, которая постоянно будет присутствовать на странице. В этом случае уже нужно использовать css animation.

Пример такой анимации можно посмотреть вот здесь:

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

Поделиться: