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

Динамичное использование классов в Ангулар [видео] – 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 нежели остальные фреймворки.

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

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

Поделиться:

Диалоговое окно при помощи директив в ангулар – Angular JS Directive

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

Видео урока:

Код и живой пример:

See the Pen Диалоговое окно при помощи директив в ангулар – Angular JS Directive by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Дайджест полезных ссылок – caniuse.com, CSS фреймворки, JSON генератор, animation CSS

Can I use

http://caniuse.com/

can-i-use

Отличный ресурс для выяснения как поддерживаются современные технологии в различных браузерах – мобильных и десктопных: html5, CSS3, SVG, JS API. Крайне полезно иметь любой хозяйке на своей кухне.

10 CSS фреймворков

http://www.coolwebmasters.com/cssstyle-sheets/4982-10-css-freymvorkov-dlya-veb-razrabotchikov.html

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

JSON Generator

http://www.json-generator.com/

Screenshot from 2014-08-29 234456

Генератор JSON объектов. прекрасно подходит для случаев когда нужно разработать клиентвоское приложение, а база данных с API еще не готова. Можно быстро на коленке собрать контроллер на серверной части, что бы только выдавал рандомный JSON. прекрасный инструмент.

Animation CSS

http://daneden.github.io/animate.css/

Animation CSS

Отличная библиотек с CSS анимацией. Библиотека дает набор классов, которые уже содержат все настройки анимации. Просто бери и используй.

Поделиться:

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

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

В случае с ангуларом есть несколько решений для постраничного перехода. Вот одно из них:

See the Pen Переход по страницам в ангулар – Angular Pagination by Artem Demo (@artemdemo) on CodePen.

Поделиться: