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

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-* и т.п. Лично мне этот подход не очнь нравится такъ как атрибуты предназначрно больше для передачи инфорамации, а не для определения оформления элемента. Однако, вы впоне можете использовать лживой удобный для вас метод.

Поделиться:

В чем разница между сервисом и фактори в ангулар – Service vs Factory in AngularJS

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

Однако, стоит упомянуть несколько моментов.

Пример factory из официальной документации ангулар:

Ссылки по теме:
AngularJS Factory vs. Service (видео)(англ.)
Confused about service vs factory (англ.)
Angular.js: service vs provider vs factory? (англ.)

Поделиться:

Введение в обещания в ангулар – promises в AngularJS

Эта статья написана под впечатлением и на основе вот этого видео (англ.) Настоятельно рекомендую посмотреть всем. А тут я приведу выжимку информации – только самое ценное.

Обещания в ангулар (лично я предпочитаю использовать слово promise) это очень эффективная методика для того чтобы связать в одну цепочку результаты разных, но зависящих друг от друга запросов.

Например:

Обещание всегда возвращает что-то – это может быть либо значение, либо состояние (например испешен ли былъ запрос, либо провален).

Как Angular использует обещания:

Как объявить свое обещание в ангуларе

Еще один пример объявления своего обещания

Promise API – цепочка обещаний

Одна из прекрасных возможностей функции then() это то что она сама возвращает обещание. Это значит, что если у нас есть несколько функций, которые должны будут вызваны после ответа от стороннего API. То это можно сделать следующим образом:

Если упростить, то цепочка будет выглядеть вот так:

step1.
then(step2).
then(step3).
then(step4)

Либо вот так:

as1 = step1();
as2 = as1.then(step2);
as3 = as2.then(step3);
as4 = as3.then(step4);

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

Пример factory, которая содержит все перечесленное раннее:

https://gist.github.com/blin86/10933410#file-promise-sample-js

Сайлки по теме:
http://www.slideshare.net/xmlilley/postal-for-promises-20-min

Поделиться:

Иконочные шрифты

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

Glyphicons как часть Bootstrap

http://getbootstrap.com/components/
http://glyphicons.com/

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

bootstrap-icons

 

Font Awesome

http://fontawesome.io/icons/

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

font-awesome

 

ionicons

http://ionicons.com/

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

ionicons

 

Fontello

http://fontello.com/

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

Поделиться:

Почему wordpress – это лучшее решение для многих проектов

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

wordpress-graphic

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

Огрмное количество плагинов

Большое комьюнити

Комплексные решения для широкого спектра задач

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

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

Поделиться:

Что такое bootstrap CSS и почему об этом так много говорят

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

Boots

Слово Bootstrap достаточно активно используется в IT мире: bootstrap startup, bootstrap file of MVC framework, bootstrap css. В этой статье я расскажу о последнем и самом известном – bootstrap front-end framework css.

Bootstrap front-end framework (пользовательсая оболочка) – это набор готовых инструментов для разработки интернет решений. То есть создавая какой-то сайт нет необходимости задумываться о типографии, респонсивном дизайне, иконках, отступах и прочих мелочах, из которых строится по-настоящему красивый дизайн. Вам достаточно скачать пакет инструментов Bootstrap и начать его использовать, все остальное это уже дело техники.

Я сторонник простоты в разработке. Чем проще решение, тем лучше. При этом если есть возможность воспользоваться уже чем-то готовым – то нужно обязательно это сделать. Зачем же заново изобретать велосипед?

bootstrap

Что в коробке?

После установки бустрапа мы получаем следующие плюшки:

1.
Готовую css модель с респонсивными таблицами и сетками. У вас не достаточно практики для создания современных сайтов – ничего страшного бутстрап позаботился почти обо всем и все, что от вас требуется это прочитать документацию и начать творить.

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

bootstrap-icons

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

Поддерживаемые браузеры

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

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

Резюме

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

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

Ссылки по теме:
Bootstrapping
Bootstrap (front-end framework)
Bootstrap по-русски

Темы для bootstrap:
http://bootswatch.com/
http://startbootstrap.com/

Поделиться: