Недавно выпущенный набор иконок WebHostingHub Glyphs добавилось более 300 новых иконок.

Благодаря пожеланиям пользователей хабрахабр в шрифте появились иконки знака рубля, сети вконтакте и многие другие. Иконки доступны в формате png (белые и черные) и самое главное в виде шрифта в форматах SVG, EOT и TTF. Мы будем рады услышать любые пожелания к дальнейшему развитию сета.

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

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

UPD Критика

Вступление

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

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

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

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

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

<div contenteditable></div>

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

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

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

Photo Raster — новый мощный графический редактор онлайн.

Идея

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

Да не простую мне хотелось табличку, а фичастую, чтобы она умела:

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

И вот как я это сделал…

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

Cloud9

«Это Google Docs, только для кода» — так говорят о проекте. Облачный сервис вырос из Mozilla Bespin. Основные фишки: SSH, drag-and-drop и возможность разработки оффлайн.

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

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

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

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

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

Чуть более месяца назад я устроился верстальщиком в старт-ап, в команду Ruby-разработчиков. Так повезло, что команда оказалась очень хорошей и моё стремление учиться совпало с их желанием получить хорошего специалиста.

HTML-вёрстка сама по себе имеет немного ценности и не единственное, чем можно нагрузить верстальщика.

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

Варианты генераторов для Ruby

Согласно сайту Ruby Toolbox существует два принципиальных подхода к генерации PDF-файлов:

• wkhtmltopdf и различные обёртки на него
• Prawn

Первый вариант подразумевает генерацию HTML-страницы и конвертацию её в PDF, в то время как второй позволяет, по факту, работать с canvas и генерировать документ без дополнительных прослоек.

Я выбрал вариант с использованием Prawn (по большей части, конечно, по тому, что предыдущая версия PDF-файла генерировалась этим способом) даже не смотря на то, что мне пришлось вынырнуть из привычного мне мира HTML и CSS

Тех, кому интересно приглашаю под хабракат.

Вступление

Я безумно люблю различные эксперименты на JS. Они словно позволяют заглянуть нам в будущее, и посмотреть, каким захватывающим и футуристичным оно будет. Когда вы будете просматривать приведенную подборку, вы наверняка вспомните про еще недавнего короля — Adobe Flash, а затем осознаете, насколько быстро CSS и JavaScript лишили его трона. Современные браузеры позволяют нам использовать множество различных эффектов и анимаций без сильных тормозов. Однако слово «экспериментальный» подразумевает ряд ограничений, как например некорректное отображение в некоторых браузерах (IE), кроме того, подобные плагины будут, скорее, отличным концептуальным дополнением для персональных страниц, а не для использования в больших проектах.

Meny

Meny — трехмерное меню, которое помимо своей визуальной притягательности еще и экономит место на экране. При наведении (или свайпе на тачскрине, что важно), меню «выезжает» с отличным эффектом.

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

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

Проблема

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

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

А вот с пользователями без флеша (8-10% от дневной аудитории) было сложнее. Мы предлагали им загружать файлы через обычную форму с />. Файлы из неё отправлялись через iframe вместе с содержимым самого письма, и это занимало много времени. Нажав кнопку «Отправить», пользователь долго ждал, пока загрузятся файлы.

Приветствую.

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

Итак, нам нужно подсчитать хэш-сумму для файла MP3. Простой прогон файла через md5.exe не годится, так как файл содержит метаинформацию — теги, которые имеют тенденцию со временем меняться. Таким образом, всего лишь обновив теги в файле, мы получаем уже другую хэш-сумму, что не годится совершенно.

Кстати, для форматов FLAC и APE данная проблема практически отсутствует, так как они обычно изначально содержат хэш-сумму аудио-данных, прописываемую кодировщиком. Для FLAC’а значение можно получить командой metaflac --show-md5sum.

Далее — достаточно надёжный способ подсчёта (не перцептивного) хэша на основе бинарных данных, хранимых в MP3.

1) Подход №1
2) Подход №2
3) Теги Xing и Lame
4) Resync
5) Надёжность подсчёта

Я собрал здесь некоторые не очень очевидные факты о заглавных и строчных буквах, с которыми может столкнуться программист в работе. Многие из вас переводили строки во «все заглавные» (uppercase), «все строчные» (lowercase), «первую заглавную, а остальные строчные» (titlecase). Ещё более популярна операция сравнения без учёта регистра. В мировом масштабе такие операции могут быть весьма нетривиальны. Пост построен в виде «сборника заблуждений» с контрпримерами.

1. Если я переведу строку в uppercase или lowercase, число Unicode-символов не изменится.

Нет. В тексте могут попасться строчные лигатуры, которым не соответствует один символ в верхнем регистре. Например, при переводе в uppercase: fi (U+FB00) -> FI (U+0046, U+0049)

2. Лигатуры — изврат, ими никто не пользуется. Если их не учитывать, то я прав.

Нет. Некоторым буквам с диакритикой нет точного соответствия в другом регистре, поэтому приходится использовать комбинированный символ. Скажем, в языке африкаанс есть буква ʼn (U+0149). В верхнем регистре ей соответствует комбинация из двух символов: (U+02BC, U+004E). Если вам попадётся транслитерация арабского текста, вы можете столкнуться с (U+1E96), которой в верхнем регистре также нет односимвольного соответствия, поэтому придётся заменять на (U+0048, U+0331). В ваханском языке есть буква (U+01F0) с аналогичной проблемой. Вы можете возразить, что это экзотика, однако на африкаанс в википедии 23000 статей.

3. Ну хорошо, но давайте считать комбинированный символ (с участием modifying или combining code points) одним символом. Тогда длина всё же сохранится.

Нет. Есть, например, в немецком языке буква «эсцет» ß (U+00DF). При переводе в верхний регистр, она превращается в два символа SS (U+0053, U+0053).

В JavaScript по умолчанию есть один тип чисел — Number. Хотя он конечно делится на Int и Float, хотя выражается это в немногом (например, в функциях parseInt — parseFloat).
При этом большие числа (и Int и Float) укорачиваются, а дроби приводятся к десятичным и округляются. И то и другое не всегда хорошо, так что появились библиотеки, которые предлагают новые классы для необычных чисел.

В топике SASS против LESS хабраюзер morr упомянул интересный libsass — реализацию SASS на C++

На минувшем Railsconf 2012 был отдельный доклад про sass, где анонсировали фичи над которыми сейчас ведётся работа, и которые появятся в следующем релизе:
1. libsass — написанный на C компилятор sass в css, работающий быстрее на порядки нынешнего скрипта на руби. Для крупных проектов это очень существенно — большие объёмы стилей при деплое компилируются ну очень долго(полминуты и дольше). Так же это позволит написать биндинги для libsass к другим языкам, что означает более простое встраивание sass во фрейморки питона/ноды/дотнета/пхп.
…

А я взял и сделал для libsass биндинги для Python. Встречайте, любите и пользуйтесь python-sass

В конце февраля мы разместили пост о запуске первого релиза стартапа Songsterr. Благодаря Хабру, мы получили приток посещаемости и, что важно, обратную связь от пользователей. После этого обзор проекта был опубликован на killerstartups.com и нескольких других популярных блогах. В общей сложности проект посетили 65 тысяч человек, при этом для нас стал приятной неожиданностью большой процент аудитории из Бразилии, Франции и Германии, где проект засветился на телевидении.

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

Наш второй релиз — это онлайн-проигрыватель гитарных табулатур.

Представляю вашему вниманию доработанную мной библиотеку, позволяющую смоделировать интерфейс простой миксовкой основных элементов — CSS Twitter Bootstrap v. 2.0.

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

Кёртис Спенсер (Curtis Spencer) с коллегами из компании Spool разработали легковесный сервер Fake S3, который ведёт себя как настоящий Amazon S3 и помогает тестировать проекты, не гоняя данные в облако и не тратя деньги на трафик. К тому же, для тестирования Fake S3 надёжнее, потому что работает локально. Спенсер говорит, что благодаря Fake S3 они сэкономили около $1000 за последний месяц на одной только оплате трафика.

Установка

gem install fakes3

Для запуска сервера нужно указать хост и порт

fakes3 -r /mnt/fakes3_root -p 4567

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