Я уже писал про скрипт audio.js, позволяющий проигрывать аудио файлы использую возможности html5 и flash. Пост был встречен хорошо, поэтому сейчас я хочу рассказать про jPlayer — jQuery плагин для проигрывания аудио и видео.

Некоторое время назад я решил посвятить себя решению экзотической задачи — нарисовать волну wave-файла, как это делают аудио- и видеоредакторы, используя для этого Питон. В результате у меня получился небольшой скрипт, который вполне с этим справляется. Так, картинка выше сгенерирована им из песни «Under Pressure» группы Queen. Для сравнения — вид волны в аудиоредакторе:

Для разбора звука я использовал библиотеку numpy, а для построения графика — matplotlib. Под катом я изложу основы работы с wav-файлами и алгоритм скрипта.

audio.js — это javascript библиотека, позволяющая использовать HTML5 тэг повсюду. Что скрывается за словом «повсюду». Если есть возможность использовать тэг , то будет использоваться он, иначе будет подключен плеер на flash. В библиотеку так же входит и UI отображение для этого плеера, которое может быть видоизменено с помощью css.

Приветствую вас, уважаемый хабрачеловек!

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

Видеоуроки предназначены для начинающего веб-мастера и поясняют основные принципы самостоятельной разработки плагина для WordPress.

Из видеокурса вы узанаете:

• С чего начать разработку плагина.
• Что такое хуки, экшены и фильтры.
• Как сделать страницу настроек плагина в админке блога.
• Принципы программирования на PHP функционала плагина.

Что такое энерго-эффективность в применении к мобильным платформам? Простыми словами это возможность сделать больше, затратив при этом меньше энергии.

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

Метод console.log() — отличный способ вывести отладочную информацию, не мешая пользователю. Но знаете ли Вы, что объект console имеет еще уйму других не менее полезных методов? Очень редко разработчики используют этот функционал, ограничиваясь неблокирующим alert'ом. Что-ж, давайте исправим это положение.

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

Валидации HTML-форм уделяют очень мало внимания. Например, даже на habrahabr.ru пока я регистрировался и входил на сайт несколько раз мне выдавалось сообщение об ошибке: то код протекции ввел неправильно, то в логине указал email вместо логина. А еще бывает пользователи ошибаются с количеством цифр в номере телефона или реквизитах организации, путают русскую букву «с» с английской, при копировании и вставке в Windows лишнии пробелы добавляются к данным.

Конечно, все это не смертельно. Но было бы крайне удобно, чтобы данные проверялись еще до отправки на сервере. Особенно CAPTCHA, ибо ее часто вводишь с ошибкой.

Для решения данной проблемы были несколько способов: HTML5, jQuery Validate, zForms.ru и еще ряд менее известных библиотек. Но все эти способы имели свои недостатки: HTML5 поддерживается не всеми браузерами и не имеет опции не отправлять незаполненные поля, задать сообщение о несоответствии регулярному выражению, ограничить список допустимых символов для ввода в поле, возможности склеивать поля, посылать значения чекбоксов в формате csv или суммы значений.

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

Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! :)

Встроенные инструменты разработки в Firefox

Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.

При разработке интерфейса этих инструментов было перепробовано множество подходов и решений. В результате получился довольно приятный интерфейс, который любой желающий может испробовать, установив Firefox Aurora (хм, вы ещё его не поставили?)



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

Документальный фильм про Стива Джобса и его стартап, компанию NEXT, которую он основал после ухода из Apple. Фильм снят в 1986 году. Перевод на русский язык — канал GTV.



Приятного всем просмотра!

На прошлой неделе мы запустили CiEx (сайт по подбору кино, когда хочется что-то посмотреть, но не знаешь что именно) и получили очень много положительных отзывов и пожеланий.
Под катом собран список того, что было улучшено, доработано и добавлено.

Одновременная межсайтовая аутентификация (SSO), для чего же она нужна? Допустим у нас есть, назовём его анахроничным термином «портал», с блогами, фотками, фейлами (или файлами, кому как), назовём его fail.ru (не путать с одноимённым сервисом почты на букву М), причём всё это усложнено следующими факторами:
— функционал совершенно разный;
— код написан разными людьми, с испольованием разных технологий;
— работает всё это на разных серверах в разных датацентрах и с разными базами данных;
— сервера находятся на разных доменах.

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

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

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

Привет, Хабр!

Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

Вместе с ростом мобильного интернета растёт и необходимость оптимизации скорости работы мобильных сайтов. Даже самые современные смартфоны на Android, iOS, WebOS, BlackBerry OS и др. обладают процессорами с частотой не более 1Ghz, а скорости 3G можно считать достаточно медленными (скорость загрузки в 3 раза меньше DSL).

Мобильные устройства унаследовали проблемы “больших” машин: от количества http-запросов до эффективности работы JavaScript.

Особенности мобильных устройств

Кроме того, что они часто помещаются в карман и их легче потерять, существует несколько ключевых отличий мобильных устройств по отношению к десктопам:

• маленькое разрешение экрана;
• медленные соединения;
• ограниченный размер кэша;
• много различных устройств и форм-факторов;
• низкая мощность процессоров;
• широкая поддержка HTML5;
• относительно новые браузеры (в этом мире не знают о IE6).

Однажды, при разработке одного проекта, я наткнулся на интересную задачку.
Исходные условия:
— устройство, которое посредством ffmpeg через веб-камеру записывало видео со звуковой дорожкой
— длинна записи около минуты
— создать условия, при которых 1 раз настроить шумодав, чтоб далее он работал автономно

Ну и естественно с этого момента начался мозговой штурм.

Последние четыре года я работал верстальщиком в разных питерских веб-студиях.

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

• нужно продать дизайн
• сделать сайт, который не стыдно положить в портфолио
• сделать оригинально, как еще не делали конкуренты

Таким образом, задачи верстальщикам и дизайнерам ставились одинаковые: «давайте что-то креативное, свежее, интересное».

Я очень хорошо понимаю верстальщиков, дизайнеров и владельцев веб-студий, поэтому чтобы облегчить им поиск плагинов под готовый функционал и в то-же время показать что-то свежее, чего еще многие [возможно] не видели, решил уволиться отовсюду, и запустить проект Plugin Detector



В этой статье будет затронуто:

Поисковый гигант сегодня в рамках Google Initiative представил новый инструмент Go Mo, назначение которого — проанализировать «дружелюбность» (friendly) сайта для отображения на мобильных устройствах.

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

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

Также есть возможность оценить примеры «хороших» сайтов, которые авторы GoMo поcчитали удовлетворяющими выдвинутым требованиям.

Видео для оценки возможностей Go Mo:



[Источник]

Рискуя своей кармой, хочу поинтересоваться, интересна ли хабросообществу видеорубрика, в которой за 100 секунд в не самой гиковой форме рассказывается о какой-либо технологии, о бренде или о сервисе? Такой Sketch мог бы появляться каждый вторник. Пример прилагается — 100 секунд про историю Asus.

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

Работы на пару часиков включая обновление DNS, но не тут то было. Залогинившись под рутом я включил свой любимый screen по привычке командой screen -x и лицезрел прелюбопытнейшее действо в любимой многими папке /dev/shm. Злоумышленник не удосужился прикрыть сессию screen, либо всё еще работал в ней. И тут начинается квест:

Первое, что я сделал — просмотрел, чем же занимался злоумышленник: