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

• вики, учет задач, тикетов, дефектов;
• система управления версиями/репозиторий;
• файловый сервер.

И если в случае первого и второго предлагается множество прекрасных средств, в частности для багтрекинга существуют известные каждому Redmine, Trac, а для управления версиями Subversion, Git, Mercurial, то для грамотной организации файлового хранилища приходится в очередной раз изобретать велосипед.

Представьте на минутку обычного программиста. Допустим, его зовут Вася и ему нужно сделать анимированную менюшку на сайт/десктоп приложение/мобильный апп. Знаете, которые выезжают сверху вниз, как меню у окна Windows или меню с яблочком у OS X. Вот такое.

Начинает он с одного выпадающего окошка, тестирует анимацию, выставляет ease out 100% и наслаждается полученным результатом. Но вскоре он понимает, что для того, чтобы управлять менюшкой, хорошо бы знать закрыто оно сейчас или нет. Мы-то с вами тут программисты опытные, все понимаем, что нужно добавить флаг. Не вопрос, флаг есть.

var opened = false;

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

var opened = false;
var animating = false;

function onClick(event) {
  if (animating) return;
  if (opened) close();
  else open();
}

Через какое-то время Васе говорят, что меню может быть полностью выключено и неактивно. Не вопрос! Мы-то с вами тут программисты опытные, все понимаем, что… нужно добавить ЕЩЕ ОДИН ФЛАГ! И, всего-то через пару дней разработки, код меню уже пестрит двустрочными IF-ами типа вот такого:

if (enabled && opened && !animating && !selected && finishedTransition && !endOfTheWorld && ...) { ... }

Вася начинает задаваться вопросами: как вообще может быть, что animating == true и enabled == false; почему у него время от времени все глючит; как тут вообще поймешь в каком состоянии находится меню. Ага! Состояния... О них дальше и пойдет речь.

Знакомьтесь, это Вася.

Привет, Хабр! В прошлом посте мы рассказали о том, как выглядит российский рынок e-learning в общих чертах и представили его основных игроков. В этом материале мы сосредоточимся на его нижнем сегменте – потребностях для проведения небольших тренингов, начинающих учителей, бизнес-тренеров и репетиторов. В этой нише главным конкурентом Teachbase, в отличие от сгемента корпоративных решений, являются вовсе не другие коробочные и SaaS-сервисы, а обычный Skype и различные сервисы для вебинаров.

Данная статья является переводом с дополнениями поста css-tricks.com/how-to-use-the-webshims-polyfill

В этой статье речь пойдет о HTML5 polyfill библиотеке под названием Webshims и о ее правильном использовании.

В веб-разработке polyfill'ами, называются скрипты, частично эмулирующие спецификации HTML5 или CSS3. В качестве polyfill'a может выступать практически что угодно — библиотека на JavaScript, которая добавляет ​​поддержку CSS3 селекторов в старых версиях Internet Explorer (например, Selectivizr), или высококлассное решение на базе технологии Flash для поддержки тегов и

Введение

Современный темп разработки ПО просто поражает своей скоростью. Функционал всегда «нужен вчера». Зачем? Конкуренция — обойдут, обгонят. Времени тестировать нет, надо отгружать функционал, надо, надо, надо.

На помощь командам разработки приходят практики, методологии, подходы и четкие регламенты. Попробую сформулировать в виде десяти правил концепцию «спокойной» разработки. А она то вынудит использовать современные методологии разработки ПО. И заказчик спокоен, и нервы свои целы. Profit!

Интро

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

Уже какое то время использую/разрабатываю библиотеку MaskJS. Вначале использовал её только как движок для шаблонов, а со временем, она полностью заменила HTML. В статье расскажу какими преимуществами обладает компонентный подход в разработке приложений и данная реализация в частности. Если выделить по-пунктам, то мы получим приблизительно такой список:

• Скорость
• Обработчики тегов
• Пре- и Пост-процессоры
• IoC
• Изоляция/Декомпозиция
• Разметка — Модель — Код — Стили

Более подробно о самой библиотеке и примеры можете посмотреть здесь — libjs/Mask, a исходники тут — github/Mask

— Ты пил пиво, — тихо заговорил Джо. — Плохо работал консервный нож.
Ты сказал, что сам смастеришь консервный нож, побольше и получше. Это я и есть.
Генри Каттнер, «Робот-зазнайка»

UPD> Начат сбор предзаказов habrahabr.ru/post/163865

Кто-бы мог подумать, что мы своими руками сможем разработать такую красавицу и умницу. Мало того — не просто разработать на бумаге, а ещё и получить десяток работающих образцов.

Картинка Для Привлечения Внимания

Пролог

Давным-давно мы с коллегой начали заниматься управлением через Интернет всякими штуковинами типа вебкамер и маленьких машинок. Чуть позже у нас появились ездящие девайсы посерьёзнее, способные нести на борту свой контроллер и ёмкую батарею. К тому же я увлёкся всякими летающими штуковинами — самолётами и коптерами, что внесло дополнительную лепту в список хотелок.

Не покидала мысль о том что хорошо бы сделать видео не «вид сбоку или сверху», а вид с борта девайса, от первого лица. То что самолётчики/коптеристы называют FPV. Было это примерно пару лет назад. Пробовали ставить на машинку аналоговую камеру и передатчик, принимали видео на ТВ-тюнер, далее отдавали на видеосервер для раздачи рулящим машинками. Но сразу всплыли нюансы — одновременно можно транслировать только 3-4 видеопотока, иначе появляются наводки с одного канала на другой. Плюс дороговизна такого решения, плюс проблемы с разрешёнными частотами, плюс паршивое качество картинки с постоянно появляющимися помехами… В общем, попробовали и забили на это дело. К тому же, возможностей управляющего контроллера (тогда всё было сделано на базе всем известной Ардуинки) начало нехватать. Стали искать другие варианты, чтоб было недорого, дёшево, удобно и практично. Но имеющиеся в продаже (за границей, само собой и с довольно высокой стомостью) на тот момент железки для нужд не подходили. Одни умели всё кроме видео, другие умели только видео, но не позволяли подключать периферию, и т.д. и т.п.

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

Form Builder



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

Приветствую достопочтенных жителей Хабра!

Сегодня я расскажу вам о том, как красиво преподнести пользователю инсталлятор своей программы. Наверняка каждый, кто пользуется не только программами из AppStore, сталкивался с красивыми образами диска .dmg, как вот у Адиума, к примеру. Такой образ представляет из себя, так сказать, интерактивный инсталлятор, в котором дана чёткая подсказка: перетащи значок вот сюда. Всё предельно понятно и просто.

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

Можно, конечно, проделать это всё вручную, но это не_наш_метод™, так что мы будем писать shell-скрипт для автоматизации сего процесса. Автоматизация нам так же пригодится в случае ввода в эксплуатацию билд-сервера, тогда этот сервер будет не только собирать программу из исходников, но и делать образ диска для дистрибьюции.

Если Вам не нужно знать как работает такой скрипт, а нужен лишь инструмент — в конце имеется ссылка на весьма универсальный скрипт, готовый к применению.

Ссылочки

• Живая демонстрация
• Код задокументированного файла из демки
• Да и вобще весь сайт autodafe.ws полностью работает на ADWiki
• Инструкция по установке ADWiki
• Проект на GitHub

Что ADWiki умеет:

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

Темой для топика послужила ситуация, в которую я попал, пытаясь установить SilkJS на OS Centos. Официально SilkJS может быть установлен на OSX и Ubuntu (& forks). Для OS Centos инсталлятор находится в стадии разработки, хотя makefile для Centos присутствует в пакете.

Итак, что такое SilkJS?

SilkJS — это командный процессор и супер-быстрый http-сервер, являющийся надстройкой над JavaScript-движком v8 разработанным компанией Google. Он оптимизирован для запуска server-side приложений, консольных приложений и сетевых серверов. Очевидный конкурент такому продукту, как NodeJS.
Вкратце, его особенности:

• поддерживает выполнение сценариев JavaScript на стороне сервера
• идеально подходит для RIA
• предоставляет «легкое» API для доступа к системным функциям OS Linux и OSX
• реализует Ajax-запросы как RPC
• etc.

В данной статье я расскажу о новинках в DOM API, которые мы можем использовать уже сейчас или в ближайшем будущем.
Публикация статьи приурочена к радостному событию начала реализации некоторых новых DOM4 API методов в Google Chrome. Многие методы и свойства можно использовать уже сейчас, некоторые из них работают через префиксы, но к каждому методу или свойству я постараюсь дать Polyfill, реализующий их или отбрасывающий браузерные префиксы.
Методы я постарался описать в соответствии с JSDoc для Google Closure Compiler.

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

Тогда в качестве шаблонизатора мы использовали XSL, а данные передавали в формате XML. Переведя проект на новый интерфейс, мы начали искать другие способы ускорения работы интерфейса Яндекс.Почты.

Недавно мы перевели всю Почту на JS-шаблонизатор и JSON-данные.

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

Синтаксис

Во время работы с JUST, который использует EJS-совместимый синтаксис, пришло понимание, что это не очень удобно. Хотелось упрощения, хотя бы, для условных операторов и циклов. Я начал развивать код в этом направлении, но вовремя остановился. Я сам очень плохо отношусь к подобным велосипедам в плане синтаксиса. Когда добавляешь подобный синтаксический сахар в свою разработку, это кажется очень крутым и удобным нововведением. Но разработчик, который видит его впервые, скорее выберет знакомое ему и понятное решение, чем будет разбираться в новом синтаксисе.

Логичным решением в данной ситуации стало использование CoffeeScript в качестве встраиваемого языка.

Фреймворк Twitter Bootstrap уже давно стал одним из самых любимых средств ленивых сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:

Интерфейс аля gmail

Предисловие

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

Поиски

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

Первым делом я решил посмотреть не оправился ли node-inspector, который после перехода на node.js 0.6.x перестал поддерживать профилирование CPU и Heap. Оказалось, что в новой версии node-inspector неработающий профайлинг окончательно исключён и теперь это просто debugger. Немного покопавшись в коде старой версии, мне всё же удалось завести профилирование CPU и Heap на node 0.8.x, однако это решение не было идеальным. Чтобы вывести его из состояния «поделки» необходимо было бы заменить устаревший интерфейс WebKit-консоли на современный, переписав приличное количество кода и исправить некоторые проблемы производительности. В целом, решение на основе консоли WebKit мне кажется очень не гибким, поэтому я бросил эту затею и продолжил поиски.

Вот оно

(Окончание перевода статьи Эдди Османи о сравнении и выборе библиотеки для проекта со значительной ролью JS на клиенте.)
Содержание первой части:

■ Что такое MVC или, лучше сказать, MV*?
■ Когда нам нужен MV*-фреймворк JS?
■ Где же мы будем нуждаться в MV*, а где нет?
■ Проблема выбора: слишком много вариантов?
■ TodoMVC: общее приложение для обучения и сравнения
■ Предложенные нами критерии выбора фреймворка
■ Dojo и усложнение фреймворков на JavaScript
■ Коллекция TodoMVC (фреймворки, на которых сделаны реализации тестового приложения Todo)

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

Дзен Angular

• Хорошо отделять манипуляцию DOM-ом от логики работы приложения. Это существенно улучшает тестируемость кода.
• Хорошо считать, что автоматизированное тестирование приложения настолько же важно, насколько и написание самого приложения. Тестируемость очень сильно зависит от того, как структурирован код.
• Хорошо отделять разработку клиентской части от серверной. Это позволяет вести разработку параллельно и улучшает повторное использование на обеих сторонах.
• Хорошо, когда фреймворк ведет разработчика по всему циклу разработки приложения: от проектирования UI через написание бизнес-логики к тестированию.
• Хорошо, когда распространенные задачи становятся тривиальными, а сложные — упрощаются.

AngularJS представляет собой комплексный фреймворк. В стандартной поставке он предоставляет следующие возможности:

• Все, что вам нужно для создания CRUD-приложений: data-binding, базовые директивы для шаблонов, валидация форм, роутинг, deep linking, повторное использование компонентов, dependency injection, инструменты для взаимодействия с серверными (RESTful) источниками данных.
• Все, что вам нужно для тестирования: средства для модульного тестирование, end-to-end тестирования, mock-и.
• Шаблон типового приложения, включающего в себя структуру каталогов и тестовые скрипты.

AngularJS разрабатывается сотрудниками Google и используется, как минимум, в одном сервисе Google — DoubleClick.

В наши дни сложные Javascript-приложения можно увидеть повсюду. Со временем они становятся все сложнее и уже неприемлемо просто писать цепочку callback-функций на jQuery. Javascript-программисты постепенно узнают то, что обычные разработчики знали уже несколько десятилетий. Организация и эффективность может сыграть важную роль при разработке. Таким образом, такие MVC-фреймворки на Javascript, как Backbone, Knockout и Ember появились для того, чтобы заполнить пустоту между начинающими, средними и опытными разработчиками. Они предлагают разные возможности и функционал, который подойдет разным людям, в зависимости от их потребностей.