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

Новые разработки в мире ангулар – 16.09.2014

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

Angular-Morph – плавная анимация всплывающих окон на ангулар

https://github.com/jimobrien/ngMorph
Проект только набирает обороты, но автор уже подготовил базовый функционал. Достаточно посмотреть на пример, как сразу становится понятно – что стоит последить за развитием проекта. Я уже знаю в какой работе применю эти функции.

Нажмите на изображение, чтобы увидеть анимацию в действии:

ngMorph

Angular 1.3 – one time data-binding, recompile directive

https://www.youtube.com/watch?v=hFOSXVT-Cps
Готовится к выходу новая версия ангулара. Одно из очень интересных нововведений – это одноразовая привязка данных. Теперь можно будет значительно проще следить за расходом ресурсов и не тратить их на обновление статичных данных.
Интересный момент – автор этой презентации так же рассказал о своем методе перекомпиляции элементов, в тех случаях когда после одноразовой привязки так снова нужно обновить данные.
Дополнительные темы:

  • Разница между service и factory – (service use “new”, factory don’t)
  • Как добавить загрузку разных CSS при раутинге

Ment.io – использование # и @ для хештега и ссылки на пользователя

http://jeff-collins.github.io/ment.io/
Интересный модуль, который добавляет функционал по отображения всплывающего списка хештегов, либо пользователей. Список зависит от того, какой символ вы использовали #, либо @.
ment-io

Поделиться:

Как научиться программировать? – часть 1

Для начала давайте посмотрим зачем вообще учить код? Зачем беспокоить серое вещество и усложнять свою жизнь? Вполне возможно, что все и так хорошо?

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

learn-to-code

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

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

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

В чем проблема? Разработку очень сложно оценить и загнать в какие-то рамки. Вот одна из мыслей, которая не будет давать вам покоя: “Разработка этой функции на самом деле занимает 20 часов или меня пытаются раздеть?”

Если вы предприниматель, который ждет кого-то кто воплотит вашу идею, то мне жаль, но вы не предприниматель.

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

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

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

Поделиться:

Создание REST API сервера на Slim php фреймворк [видео]

В одной из прошлых статей я уже рассказывал о том, как создать API сервера на Slim php фреймворк. Сегодня я выкладываю полный урок того как быстро собрать REST сервер.

Ссылка на файлы приложения.

Поделиться:

Динамичное использование классов в Ангулар [видео] – AngularJS ngClass

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

Код примера:

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

Поделиться:

Переход по страницам в ангулар [видео] – AngularJS Pagination

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

Как и обещал вот ссылка на полный код приложения.

Поделиться:

Почему сложно научиться программировать?

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

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

program-lerning

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

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

Казалось бы, что в подобной ситуации самое очевидное решение – это найти соучередителя или партнера, который возьмет на себя техническую часть. Логично? Да, вполне. Просто ли это сделать? Да ни разу!

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

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

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

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

Поделиться:

Не называйте себя программистом

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

Итак, в чем же проблема слова “программист”. Программист – это технарь, человек, который умеет писать код, понимает работу компьютера, сервера, протоколов интернета (нужно подчеркнуть, ненужное вычеркнуть 🙂 ). Это общепринятое понятие и с этим никто не спорит. Однако, ничто из этого на самом деле не интересует вашего работодателя.

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

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

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

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

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

Да прибудет с вами сила и уверенность в следующем шаге!

Поделиться:

Всплывающее окно сообщения с анимацией

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

В ангулар есть специальная библиотека для работы с анимацией – ngAnimate. Ее работа основанна на последних возможностях CSS3, а именно transitions. Это библиотека добавляет свои вспомогательные классы всплывающим элементам и уже на основе их можно добавлять свою анимацию.

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

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

Поделиться:

10 причин выбрать Angular JS для вашего следующего проекта

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

1. Связь данных – Data-binding

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

2. Пишите меньше кода

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

3. Директивы Angular – это html5

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

4. Очень просто начать разработку

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

5. Элегантное управление DOM

В работе с jQuery мы привыкли добавлять новые теги или новые части страницы через команда в самом коде. Все те же $(‘#smth’).append() или $(‘#smth’).html(). Angular имеет совершенно другой подход – он управляет DOM через встроенные директивы и аттрибуты, которые в свою очередь являются частью html5.

Например, для вывода интерактивного списка, который бы отображал массив products нужна следующая конструкция:

6. Angular позволяет создавать одностраничные приложения

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

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

7. Разделение дизайна и программной части

Это безусловно не абсолютное решение. Дизайнеры и программисты все равно должны будут работать вместе, однако логика построения Angular приложений позволяет разделить программную часть от визуальной. Данные, которые ангулар выводит на экран появляются через переменные {{ param }} и в то время как идет разработка логики визуальная часть может дорабатываться дизайнерами.

8. Angular позволяет вести параллельную разработку в рамках одного проекта

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

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

9. Angular разрабатывается инженерами Гугла

Если остальные проекты разрабатываются энтузиастами, то Angular разрабатывается силами Гугла. Не поймите меня не правильно под словом “энтузиасты” я не подразумеваю недостаточно квалифицированных программистов. Вовсе нет. Ребята, которые стоят за такими проектами как Ember или Backbone имеют за плечами годы опыта.

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

10. Большое сообщество разработчиков

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

Поделиться:

Ангулар – это самый активно распространяющийся фреймворк

Ангулар – это самый активно распространяющийся фремйворк среди веб разработчиков. Если в начале 2011 еще были сомнения кто будет первым и knockout явно был впереди, то сегодня четко видно, что ангулар оставляет позади своих конкурентов.

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

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

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

Поделиться: