Это вторая часть серии статей об открытой Javascript canvas библиотеке Fabric.js.

В первой части этой серии, мы ознакомились с самыми базовыми аспектами canvas библиотеки Fabric.js. Мы узнали чем может быть полезна Fabric, рассмотрели её объектную модель и иерархию объектов; увидели что существуют как простые фигуры (прямоугольник, треугольник, круг), так и сложные (SVG). Научились выполнять простые операции над этими объектами.

Ну вот, разобрались с азами, давайте приступать к более интересным вещам!

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

Пиксели светодиодной ленты отличаются от пикселей экрана отсутствием фоновой подсветки. Чёрный пиксель не будет выглядеть «чёрным» — он сольётся с фоном, а в движении фактически будет «прозрачным», но если добавить хотя бы единицу к любому цветовому каналу — этот пиксель будет светиться. В свою очередь, «серый» пиксель от белого будет отличаться только яркостью и будет казаться более тусклым, но всё же именно «белым».

Хранится и передаётся цвет пикселя в 24-bit RGB, но значительная часть этого цветового диапазона (ненасыщенные и яркие цвета) не слишком репрезентабельна в отдельных светодиодах. Кроме того, строить симпатичные градиенты в модели RGB не получится — смешивание RGB-цветов даёт не интуитивно-очевидный результат (жёлтый + синий = серый, а хочется — зелёный). Модели HSL и HSV подойдут лучше, но стандартные реализации используют нецелочисленную арифметику. Удобно будет использовать модель, которая сможет компактно хранить параметры цвета и быстро считать их RGB-значения, не используя числа с плавающей запятой и деление на произвольное число — речь идёт о микроконтроллере и сложные алгоритмы нам ни к чему, а деление (кроме небольших степеней двойки) и вовсе противопоказано.

Статья делится на три части:

• Вступление
• Как сделать простейший редактор самому, причем не будет никакой теории, только практика. Предупреждаю, для многих эта часть покажется простой и очевидной, так как текст ориентирован, можно сказать, на себя, в прошлом (нет, я не путешествую во времени :));
• Описание работы очень легкого редактора «Suit Up» (оригинальный объем кода: 5.97KB (1.87KB gzipped), минимизированный: 3.35KB (1.37KB gzipped) на момент написания статьи, не считая спрайта и стилей).

UPD Критика

Вступление

Не так давно, а, точнее, года два назад, в кругу разработчиков, с которыми я имел честь общаться (почти все — новички), каждый, кому поступила задача поставить WYSIWYG, ставили монстрообразный TinyMCE. Этот редактор считался почему-то стандартом у многих веб разработчиков, хотя, мало кому нужны были то большое количество функций, которые предлагались программистам. Тут тебе и то и это. Наверно, таким образом, новички пытались сказать клиенту «смотри, мы тебе на сайт запилили Ворд».

Однажды (не помню при каких условиях), мне захотелось или понадобилось разобраться в том, как работают браузерные «рич эдиторы». Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей. Мне захотелось больше узнать о том, что же делать дальше. Так я познакомился с серией статей «WYSIWYG HTML редактор в браузере» (по ссылке первая статья, советую прочесть). Но информация на тот момент мне показалась несколько сложноватой. Поэтому я решил методом тыка, наступая на уже растоптанные кем-то грабли, написать свой простой редактор.

Сделал я его в виде jQuery плагина, и, думаю, не стоит отвечать «почему». Получилось кое-как заставить работать его в разных браузерах. Тут мне пришла в голову идея написать статью на хабр, после некоторых доработок. Время шло, допиливание я откладывал, откладывал… Два года, черт, целых два года. Но я постараюсь исправиться.

Простейший редактор

Для того, чтоб дать возможность пользователю менять содержимое блока (в данном случае, обычного дива) просто задаём ему (блоку) атрибут contenteditable:

<div contenteditable></div>

Редактор готов!

Предисловие:

Есть у меня один знакомый который держит интернет магазин. Балует меня иногда довольно-таки нестандартными задачами в программировании. Всё началось с того что, подумав, он решил что для его пользователей — будет очень удобно получать информацию о том где сейчас его посылка (товары с магазина он отправляет почтой России). Благо на сайте почты есть функция слежения за отправлением.



На странице достаточно ввести номер трекера и информация о посылке появляется на экране в виде аккуратной таблички. Не долго думая, я вооружился функцией curl и за пару минут приготовил легкий скрипт — который парсил эту информацию и выводил последнее местоположение посылки (статус: «Прибыло в место вручения» или «Вручение адресату» — давал команду скрипту отправить покупателю смс о том что он может забирать свою посылку).

Привет, жители и гости хабра.
Хочу поделиться с вами одним интересным инструментом. Наша команда разрабатывала его в ходе проекта, о котором я еще расскажу. Пиксельный человек на КДПВ — результат его работы.

Мы не поленились посидеть с калькулятором и подсчитали приблизительное количество возможных изображений. Получили число чуть более сорока миллионов. Поэтому каждый может подобрать что-то на свой вкус. Картинок хватит на всех!

Итак, встречайте, 8biticon.com. Бесплатный, открытый и простой в использовании генератор аватарок.

Под катом история, описание и немного технической информации.

Новые полезные штуки для веб-дизайнеров за первую половину декабря 2012. Прошлый месяц: ноябрь. Во все подобные топики буду добавлять тег "новое для веб-дизайнера"

Сервисы и инструменты

Weavly — бесплатный онлайн-сервис для удобного создания роликов из видео, аудио и gif-картинок.

Доброго времени суток! В этом посте я хочу показать, как управлять электроникой через Интернет используя Raspberry Pi. Выглядеть это будет примерно вот так.



Краткое описание:

• Серверная программа, которая работает на Raspberry Pi, для того чтобы читать переменные
• Базы данных MySQL для хранения переменных
• Веб-страница Apache2, для того чтобы контролировать переменные

Данный плагин для jQuery позволяет автоматически подбирать подходящую маску ввода на основе введённого начала телефонного номера. Это позволяет сделать ввод номера телефона на странице web-cайта более быстрым и безошибочным. Кроме того, разработанный плагин может быть использован в других областях, если правила ввода возможно представить в виде нескольких масок ввода.

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

Я тут решил забить на всю работу и заняться чем-то для души. Снова взялся за паяльник. Решил автоматизировать дома всё и вся. На старой-то квартире у меня был умный дом или что-то типа того — мог свет в комнате включать через Интернет и всё такое.

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

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

На борту микроконтроллера есть всякие I²C, да UART, но они явно не удовлетворяют условиям. В итоге было решено разработать свой велосипед протокол.

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

Я работаю в Почте Mail.Ru, и моей прямой обязанностью является работа с JavaScript во всех его проявлениях. Прикрепление файлов к письму — одна из основных функций любой почты. Мы тут не исключение: у нас уже был Flash-загрузчик, который вполне исправно работал и долгое время нас устраивал. Однако у него был ряд недостатков. Вся верстка, графика, бизнес-логика, и даже локализация были зашиты в нем, в результате чего решение было громоздким, а внести правки мог только Flash-разработчик. В какой-то момент мы поняли, что нам необходим новый механизм. О том, как его создать, пойдет речь в этой статье.

В последнее время появилось довольно много инструментов для создания сайтов в духе Metro UI. К сожалению, лично у меня, использовать что-то из этого в реальных проектах не получилось: либо страдает качество и приходится вставлять «костыли», либо с качеством все нормально, но нет стилей для нужных компонентов приложения (например, нигде нет стилей для datepicker-а).



Я попробовал написать свое с блэкджеком и шлюхами. Сначала это был просто набор стилей для компонентов, которые были нужны мне в первую очередь. Cейчас все становится похожим на довольно большой CSS framework.

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

Стили в архиве и документация лежат здесь: milk.ecm7.ru, есть .LESS и CSS версии.

В этой статье собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.

На днях, после долгого перерыва, надо было поработать на WPF, и возникло желание заменить поднадоевший стандартный вид окон Windows 7 на что-нибудь более вдохновляющее, скажем в стиле Visual Studio 2012:

С каждым днем появляется все больше сайтов с адаптивной версткой. При проектировании такого дизайна первое, о чем задумывается разработчик — это общее представление контента на устройствах с разным размером экранов. В этой статье я описал некоторые типы (layouts) адаптивных макетов.

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

С картинками в теге img все просто: при установке ширины в процентах высота будет масштабироваться автоматически. К фоновым же изображением такой способ применить нельзя.

Фиксированное соотношение сторон

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

Сервисы и инструменты

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

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

• Windows XP: 133
• Windows Vista: 191
• Windows 7: 235
• Windows 8: 400 +

Что бы избежать головной боли от перелистывания всех шрифтов, с целью оптимизации рабочего процесса существует множество менеджеров, в большинстве своем они платные, имеют специфические UI и очень редко обновляются. Ниже я сделал подборку 5-ти лучших платных и бесплатных приложений:

Новый интерфейс в стиле Metro является ключевой особенностью мобильной ОС Windows Phone 7. Но не только её одной: уже сейчас ясно, что этот пользовательский интерфейс, будет используется Microsoft во всех продуктах, в том числе и во флагманской Windows 8. Таким образом, интерфейс Metro так или иначе будет существовать в течение длительного времени, и это стоит того, чтобы познакомиться с ним поближе.
В этой статье мы остановимся на интерфейсе: принципы его работы, сетка, структура и основные элементы.

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

Form Builder



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

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