Основы AngularJS

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

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

Распознавание и синтез речи в браузере

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

Корзина и форма заказа на AngularJS и Twitter Bootstrap

Начнем с предыстории

Давно я что-то не писал в блог. А ведь столько всего произошло и продолжает происходить в мире информационных технологий.

Давно уже поверхностно знакомился с фрейворком для верстки Twitter Bootstrap и JavaScript-фреймворком для разработки веб-приложений AngularJS.

Очень интересные штуки и я просто мечтал выкроить время, чтобы хоть где-то на практике их использовать. И вот это день настал - ко мне обратился бывший сокурсник с просьбой разработать сайт интернет-магазин. Сайт ему нужен был полностью, от "а до я". Дизайнер из меня никакой, поэтому сразу в голову пришла идея - использовать готовое решение Twitter Bootstrap, на мой взгляд его компоненты выглядят достаточно приятно и современно, к тому же накануне вышла обновленная 3-я версия с серьезными переработками и улучшениями. Идея попробовать AngularJS пришла уже по ходу разработки функционала корзины.

Да, еще обратил внимание, что у меня блогозаписи практически не проиллюстрированы и поэтому воспринимаются хуже. Исправляюсь - теперь по возможности будет больше картинок. Неужто, красота Twitter Bootstrap дала мне понять насколько скучны мои посты с одним лишь текстом и вкраплениями кусков кода? :-)

Знакомство с физическими движками

Давно хотел поразбираться с физическими движками и вот, наконец-то, дошли руки. Все движки похожи друг на дружку, то есть оперируют одинаковыми понятиями - есть физический мир, разные виды тел с физическими характеристиками, соединения, коллизии и прочее. Отличаются API, платформами/языками реализации и возможностями.
Для примера выбрал box2dweb - javascript-клон другого популярного движка.
Начинаем подготовку - подключим на страницу библиотеку и создадим объект canvas, который будет отображать сотворенный нами физический мирок.

Простой переключатель классов связанных блоков (jquery plugin)

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

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