Репозиторий на Github

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

Напомню, Матрешка — JavaScript фреймворк для создания одностраничных приложений, соблюдающий несколько важных принципов:

• Никакой логики в HTML
• Минимум сущностей
• Произвольная архитектура

Матрешка реализует простой синтаксис двустороннего связывания данных и активно использует акцессоры (геттеры и сеттеры).

this.bindNode( 'x', 'input.my-node' );
this.on( 'change:x', function() {
	alert( this.x );
});
this.x = 'Wow!';

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости.
Сегодня опять в слегка сокращенном формате.

Продолжим писать наше расширение для Chrome, которое добавляет ссылку «Скачать» для каждой аудиозаписи вконтакте.
В прошлый раз мы изменяли наш раздел Мои Аудиозаписи так.

Было изначально:	Стало с расширением:

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

Как и прежде, наше расширение будет состоять из трех файлов — файла описания (manifest.json), внедряемого js скрипта (vk_inject.js), и внедряемого файла стилей (vk_styles.css).

Иногда появляется необходимость сохранить svg в png средствами браузера. К сожалению, браузер не имеет волшебного api, который позволил бы это сделать без различных хаков. Что же делать, если все таки хочется добиться желаемого?

Вместо введения

Спасибо моему анонимному хабрадедуморозу за подарочек (pro mini). Долго колебался, что с ней делать. Махнул рукой и заказал в дополнение китайскую посылочку…
Спустя месяцок настало и моё время “помигать светодиодом” ;).

Идея

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

Задача

1. вытащить статистику по запущенному фильму;
2. обработать и передать в arduino данные;
3. отобразить прогресс на индикаторе.

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

На днях состоялся первый релиз набора инструментов для упаковки различных веб-ресурсов в один файл — Web Bundle. Принцип его работы точно такой же, как для ресурсов, включаемых в EXE файлы — произвольные файлы упаковываются в один файл-контейнер, а на клиентской стороне доступ к ним организуется по имени файла с помощью API. Только в данном случае в качестве контейнера используется изображение в формате PNG. Клиентская часть представляет из себя небольшую JS-библиотечку, позволяющую загружать, декодировать и извлекать отдельные файлы из таких ресурсов.

Сегондя мы анонсируем альфа-версию TypeScript 1.5, первую превью-версию предстоящего релиза TS1.5. Эта версия дает возможность познакомиться со многими новыми возможностями, которые мы планируем включить в финальный релиз.



Три ключевые новые вещи, которые мы добавляем в инструменты TypeScript: более богатый опыт работы с ES6, декораторы и новый плагин для Sublime Text.

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

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

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

Фреймворк называется qooxdoo. Произносится «куксду» (кому удобнее английская транстрипция: ['kuksdu:]).

На Хабре было несколько попыток написать про этот фреймворк, но все они свелись к новостям о выходе новой версии или к парам абзацев в статьях типа «смотрите каких фреймворков понаписали». Я несколько лет работаю с qooxdoo и мне хотелось бы восполнить этот пробел.

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

Мы затронули основную часть базового материала о Fabric в первой и второй частях этой серии. В этой статье будет представлен более углубленный материал.

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

Все мы хоть раз слышали о jQuery. С некоторых пор я буквально влюбился в это творение, как и в сам JavaScript. За моей спиной очень много строк кода. Рабочего, любительского, простого фонарного кода. С недавних пор я начал изучать структуру всеми любимой jQuery и пришёл к выводу, что это ничто иное, как шедевр.

Хабровчане, привет!

В предыдущей статье мы с вами познакомились с шаблоном для создания универсальных веб-приложений – Web Application Template. Если кратко, то Web Application Template позволяет вам «превратить» сайт в приложение для Windows, Windows Phone или Android, добавив в него возможности интеграции с ОС и механизм распространения через магазин приложений.

Сегодня мы рассмотрим практический пример: как при помощи Web Application Template быстро и просто создать веб-приложение для Windows и Windows Phone на основе сайта habrahabr.ru.

Всем доброго утра

Это полностью валидный код на JavaScript.

Вечерний багхантинг на Facebook привел к сервису Soundcloud. Исследовалась возможность XSS уязвимостей при шейринге треков в ленту Facebook. После нескольких неудачных попыток захотелось проверить и сам Soundcloud. В течение первых 5 минут был обнаружен бесполезный, так называемый self-xss — при добавлении нового тега можно передать скрипт. При наведении на этот тэг курсором исполнялся код. Чуть позже я нашел два видео в youtube.com, где горе багхантеры выкладывали это как нечто критичное (один даже назвал видео как «Soundcloud Xss epic fail»). Продолжив свои развлечения, подключил второго персонажа, ведь если есть атакующий, должна быть и жертва.

Введение

Жизнь в современном мире развивается динамично, технологии появляются и умирают, а вместе с ними устаревают и наши навыки. 20 лет назад нужно было помнить функции Windows API, сейчас многие специалисты даже не знают, что это такое, и это не мешает им работать. На первый план вышли другие технологии, требующие совершенно другого опыта. Например, Java Script, HTML 5, CSS. Через 10 лет на смену, скорее всего, придут другие технологии и инструменты, другой способ мышления. Поэтому процесс обучения в современном меняющемся мире становится непрерывным и все более интенсивным. Это must have любого современного специалиста.

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

Угроза «HEUR:Trojan.Script.Generic»

Возможно у Вас есть сайт и Вы не использовали библиотеки типа jQuery, а решили просто на яваскрипте «спагетти-код на сайте намотать» (пусть как я, ради спортивного интереса). И тут Вы наверное даже не ожидаете такой «подлости» от любимого антивируса Касперского, тем более если Вы им не пользуетесь… а пользуется Ваш друг. Он то и увидит такое сообщение на Вашем сайте «объект заражен HEUR:Trojan.Script.Generic»:

А тем временем, другие антивирусы молчат.

В одной из прошлых статей мы кратко рассказали, как грид контролы работают с удаленным сервером, используя OData протокол. Большинство современных грид контролов позволяют удобно группировать данные по нескольким колонками. Рассмотрим подробнее, как формулируются запросы к REST серверу, в случае, когда грид производит автоматическую группировку данных.

Удобство (зачем это нужно)

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

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

Шаг 1. Установить движок Node.js в соответствии с инструкциями, имеющимися в вики для каждой из поддерживаемых операционных систем. (Для Windows достаточно скачать и запустить MSI-файл, для CentOS — воспользоваться системным менеджером пакетов, и так далее.)

Шаг 2. Создать пустой каталог и поместить в нём файл «site.js» следующего содержания:


Настройки staticSiteOptions можно переменить по собственному вкусу.

Шаг 3. В том же каталоге подать команду «npm install express», которая автоматически создаст подкаталог «node_modules» и установит туда Express, скачав из Интернета.

Шаг 4. В том же каталоге создать подкаталог «static» и поместить в нём файлы статического сайта. Этот подкаталог станет корнем сайта. Файлы с именами «index.html» будут использоваться как файлы-индексы. Иными словами, при ответе сервера на запрос с адресом, содержащим только имя некоторого каталога (будь то корень сайта или один из его подкаталогов), будет показан файл с именем «index.html» из указанного каталога (если есть).

Шаг 5. В том же каталоге подать команду «node site», которая запустит сервер. Убедившись в её работоспособности, обеспечить автозапуск этой команды в этом каталоге после каждой перезагрузки операционной системы. (Например, на CentOS 6.2 можно использовать upstart для этой цели.)

Всё.

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

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

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

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Learn X in Y minutes

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

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