Всем привет!
Уже несколько раз меня просили сделать обычные тултипы, которые со стрелочками такие. Все бы было хорошо: состряпал блок с круголками, взял треугольники отсюда и вуаля. Однако, не все так просто. Ведь полет фантазии дизайнеров велик. То им стрелочки с наклоном, то им рамки, то тени. Можно, конечно, все запилить на картинках, но ведь это старомодно непрактично. Хотя бы из-за кучи оберток, для того, чтобы все тянулось во все стороны.
Всё это оказалось абсолютно решаемым с помощью CSS, если включить немного фантазии.
От слов к делу.

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

В этом уроке я покажу как создать кнопку с изюминкой, используя только якорный тег и мощь CSS.

InCube Chess: первая удачная реализация шахмат в трёхмерном поле

Привет!

Хотя в Хабре обычно не обсуждают игрушки, полагая их занятием несерьёзным – я сознательно сделал сегодня исключение. Очень уж редко в «игровой индустрии» происходит что-то действительно оригинальное. К тому же надобно, чтобы при яркой оригинальности оно осталось ещё и играбельным – а это уж совсем редкость. Но в данном случае, кажется, оба требования сошлись. В общем, я нашёл кое-что для настоящих «головастиков»…

Суть в том, что небольшая украинская фирма «InCube Games» выпустила одноимённые компьютерные шахматы: InCube Chess. И это не заслуживало бы ровно никакого внимания (мало ли шахматных программ?) – если бы не одна существенная деталь: поле для шахмат представляет собой не плоскую «доску» 8х8, а куб, 8х8х8. То есть борьба между фигурами игроков разворачивается не в двумерном, а в трёхмерном пространстве!

Я хочу описать простой минималистский подход к разработке сложных JavaScript приложений. Из внешних библиотек будут использоваться только jQuery и мой js-шаблонизатор, причём из jQuery используются только $.ready(), $.ajax() и $.proxy() — т.е. суть не в библиотеках (их тривиально заменить на предпочитаемые вами), а в самом подходе.

В основе подхода лежат две идеи:

1. JavaScript виджеты — небольшие модули, каждый из которых «владеет» определённой частью веб-странички (т.е. всё управление этой частью странички происходит исключительно через методы этого модуля, а не через прямую модификацию DOM — инкапсуляция). Виджет отвечает исключительно за функциональность, но не за внешний вид; поэтому прямая модификация части DOM, которым «владеет» виджет, снаружи виджета допускается — но только для чисто дизайнерских задач (для архитектуры и общей сложности приложения нет принципиальной разницы между коррекцией внешнего вида через CSS или jQuery).
2. Глобальный диспетчер событий. Взаимодействие между виджетами осуществляется путём посылки сообщений глобальному диспетчеру (слабая связанность, паттерн Mediator/Посредник), а уже он принимает решение что с этим сообщением делать — создать/удалить виджеты, дёрнуть методы других виджетов, выполнить дизайнерский код, etc. В отличие от динамического подхода к обработке событий (когда обработчики конкретного события добавляются/удаляются в процессе работы) статический диспетчер сильно упрощает понимание и отладку кода. Безусловно, есть задачи, для которых нужны именно динамические обработчики событий, но в большинстве случаев это избыточное усложнение, поэтому всё, что можно, делается статическими обработчиками.

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

Если проект большой и вы используете для массивного JS какой-нибудь клиентский фреймворк вроде Backbone – отлично! Он будет лучше загружаться и сам решит где и как ему работать. Но что если нужно всего-лишь подключать небольшое количество кода для конкретных страниц? То есть даже не controller'ов, а скорее action'ов. И желательно чтобы когда таких кусочков стало больше 5 код не превратился в спагетти. С этим может помочь маленьий гем Styx.

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

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

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

Суть проблемы: веб-приложение для службы такси, диспетчера работают удаленно (из дома, из офиса и т.п.). Перед каждым — список заказов. Состояние заказов может измениться в любой момент — водитель взял заказ, водитель отказался, клиент отказался, другой диспетчер завел новый заказ. Очень важно чтобы диспетчер видел картину практически в реальном времени, поскольку в час пик звонки идут один за другим без перерыва. Вначале это было сделано через вызывающийся периодически (setTimeout) AJAX запрос, который получив с сервера отрендеренный список текущих запросов заменял содержимое div'а. Для 1-2 разработчиков, и пары тестеров это казалось нормальной идеей — 1-2 запроса в секунду не сильно напрягали. По результатам компромисса между актуальностью и снижением нагрузки на сервер определились что будем дергать сервер раз в 3 секунды.

Не так давно на работе передо мной была поставлена задача реализовать механизм асинхронного обмена данными между веб-приложением на Java и веб фронт-эндом на стороне клиента. Задача заключалась в том, чтобы клиент получал апдейты с минимальной задержкой, при этом апдейты могли приходить со скоростью 100 апдейтов в секунду, так и 1 апдейд в минуту, т.е. желательно не слать лишних запросов со стороны клиента.

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

Github выпустил сервер непрерывной интеграции проектов Janky, сделанный на базе Jenkins под управлением CoffeeScript-бота Hubot. Фактически, Janky — это просто интерфейс для работы с Jenkins через скрипты и команды Hubot.

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

Понятно, что Github как нельзя лучше подходит для работы в режиме непрерывной интеграции. Система Janky заточена на использование Github, в том числе она создаёт соответствующие web-hook’и, а также может ограничивать доступ для сотрудников организации на Github.

Сервер Janky сделан на основе известной системы Jenkins (Hudson). Использование бота Hubot придаёт Janky особый шарм, управление сервером осуществляется с помощью простых команд.

Вводная часть:

Сам инструментарий называется NDEV. Чтоб получить необходимый код (его мало) и документацию (её много), надо зарегиться на сайте в «программе сотрудничества». Сайт:

dragonmobile.nuancemobiledeveloper.com/public/index.php

Это весь «геморрой», если клиентов вашего приложения менее полумиллиона и они пользуются сервисами менее 20 раз в день. Сразу после регистрации вы получите членство «Silver», которое позволит вам бесплатно пользоваться данными сервисами.
Разработчикам предлагается пошаговая инструкция по внедрению в свое приложение на iOS сервисов распознавания и синтеза речи:

Вторая часть

Три года назад я проводил презентацию в крупном холдинге недвижимости. Среди слушателей был финансовый директор холдинга, который сказал:
«Финансовый учет автоматизировать невозможно!»

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

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

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

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

На этой неделе Microsoft представила свой новый сервис Excel Mashup, который предназначен для внедрения возможностей табличного процессора Excel в HTML-страницу, причем все вычислительные и графические возможности Excel сохраняются, а управление объектом возможно при помощи JavaScript-библиотеки.

С сервисом предлагается работать следующим образом:

• Web-разработчик, располагая некими данными и/или графиками в книге Excel, загружает её на облачный сервис SkyDrive (необходима регистрация) и настраивает права доступа к ней.
  
• Затем получает от сервиса HTML-код для установки на страницу. Этот код и будет, по сути, «web-версией» обычной «десктопной» книги Excel.
  
• Если внедренным объектом необходимо управлять, то программист может использовать по своему усмотрению возможности JavaScript-библиотеки Excel Services.
  

Сервис хорошо документирован: есть интерактивные примеры сниппетов, выполнив код которых можно тут же увидеть как это выглядит, а также полноценное демо-приложение.

Эффектный пример с использованием Bing Maps также можно оценить здесь.

Для еще более глубокого использования также предлагается REST и SOAP API.

[ExcelMashup]

Введение

Одной из проблем, на решение которой был направлен HTML5, было повышение логичности (и, следовательно, машиночитаемости) разметки, о чем свидетельствует введение стандартных семантических элементов, таких как <header>, <nav> и <figure>. Это все хорошо, но иногда возникает потребность добавить определенные машиночитаемые атрибуты для элементов контента, так чтобы их можно бы использовать в каком-либо скрипте предсказуемо, даже если разметка используемая для различного контента различается между собой. Эта потребность уже удовлетворена, в определенной степени, с помощью простых и обратно совместимых Микроформатов, и с помощью более эзотерического RDFa.

В связи с этим, нет ничего удивительного, что решение этой проблемы было добавлено в спецификацию HTML5 в виде спецификации микроданных(далее Microdata), включающей в себя набор атрибутов, которые могут быть добавлены к любому элементу и связанное DOM API для обработки/агрегирования микроданных на странице.

Moment.js это отличная библиотека для работы с датами в JavaScript. Примеры под катом.

Предлагаю краткий обзор свежего UI-фреймворка от Telerik под названием Kendo UI.

Предыстория

Совсем недавно я размещал тикет в поддержке Telerik и спрашивал у них, можно ли использовать компоненты (в частности MVC) в приложении, написанном на Classic ASP.

Конечно, ответ огорчил.

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

Работать дизайнером очень интересно. Это творческая работа. И как любому творческому человеку, дизайнеру нужна муза или вдохновение.

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

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).

Около полугода назад я написал простой джейкверный плагин для галерей на сайтах. Назвал его Фоторамой и выложил в интернет. По клику кроссфейдом показывалась следующая фотография, клик с шифтом мотал назад — вот и всё.

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.

Каждый, кому приходилось писать объемные куски осмысленного кода на javascript, рано или поздно понимал, что ему многого не хватает в этом языке или просто неудобны некоторые врожденные конструкции. Для сглаживания шероховатостей применяются jQuery, Prototype, MooTools etc. Кто-то уже мало представляет себе, как можно кодить без них. Сегодня я расскажу о еще одной маааленькой библиотечке, которая делает мир javascript-программиста еще прекраснее. Речь пойдет о Underscore.js