JavaScript *

Исходники эмулятора x86 на JavaScript опубликованы около 1 часа назад на GitHub под лицензией BSD: github.com/copy/v86, а также доступны для скачивания в архиве tar.gz: copy.sh/v24/v86-latest.tar.gz

В самом эмуляторе на сайте автора теперь можно запустить, помимо уже существующих KolibriOS, Linux 2.6, FreeDOS и OpenBSD, также Windows 1.01, и даже поиграть в Reversi (правда, доступна только одна дискета):

Частенько появляется соблазн сделать какие-то изменения в CKEditor: дописать туда свои плагины, сконфигурировать его под свои нужды. Благо все это позволяет сделать CKEditor малой кровью. Все это можно найти в документации по CKEditor 4. В данном посте хотел бы рассказать подробно о том, как работать с девелоперской версией CKEditor 4: получение из девелоперской версии релиз версии, сжатие скриптов, включение иконок кастомных плагинов в спрайт и прочее.
Хотел бы обратить ваше внимание на то, что первая часть статьи не привязана к конкретной технологии и может быть полезна любому заинтересованному в работе сборщика CKEditor.
Всех заинтересованных прошу под кат.

Совсем недавно мы столкнулись с необходимостью HTML-верстки большого количества разнообразного учебного (школьная программа) материала.

К сожалению, в ряде случаев пришлось отдельно готовить изображения с текстовыми блоками, которые были снабжены хитрой версткой. Это усложняет процессы HTML-верстки и внесения правок. Благодаря замечательному MathJax, мы смогли оптимизировать верстку в части математики, физики и неорганической химии, однако органическая химия осталась непобежденной. Да, есть пакеты для верстки структурных формул в LaTex, но в MathJax их поддержки нет.

Добрый день!

Долгое время на просторах интернета я искал информацию о реализации AJAX загрузки файлов для CodeIgniter. Разные разработчики предлагали разные технологии и примеры реализации. Я перепробовал их все, но ни одна из них не была достаточно проста и функциональна одновременно. Лишь недавно я открыл для себя jQuery File Uploader. «Он ничем не отличается от остальных» — скажите вы, но это не так. Его главное отличие — это простота и хорошая документация с примерами. В документации разобраны все callback'и, описаны все options. Внедрение в любую систему не занимает много времени.

Сегодня я покажу как можно очень просто организовать multipart загрузку файлов на сервер + drug&drop в CodeIgniter.

Доброго времени суток и с прошедшим Днем народного единства! Хочу рассказать об одном хорошем проекте — .


OAuth.io — это API (JavaScript, PhoneGap, iOS, Android, Flex) и сервис, который значительно упрощает взаимодействие более чем с 80-ю oAuth провайдерами (Facebook, Twitter, VK, GitHub, Dropbox, и др). Сервис работает по модели freemium: до 5000 соединений в месяц сервис бесплатный, при большем количестве вас ждут вполне демократичные цены. Стоит также сказать, что проект полностью открытый и вы сможете сами запустить у себя серверную часть «OAuth IO Daemon» (GitHub).

Для загрузки информации о торговых точках в наш логистический SaaS-сервис «Муравьиная логистика» из Excel я решил использовать web-браузер. Обычно проще загрузить файл на сервер и с помощью любой библиотеки залить в БД. Но мне было интересно загрузить его построчно для контроля целостности каждой строки на клиенте, ну и, конечно, опробовать так всеми рекламируемое HTML5 FileAPI и Drag and Drop.

На хабре уже проскакивала статья про такие замечательные вещи, как Map, WeakMap и Set, но в действительности реальные возможности этих API не были раскрыты (если я все-таки хорошо воспользовался поиском).
Эти API толком не реализованы нигде, кроме firefox (можно включить в chrome canary), но даже там до недавних пор не поддерживалось использование HTMLElement-подобных объектов в качестве ключей. Polymer, например, убрал только три недели назад

	if (navigator.userAgent.indexOf('Firefox/') > -1)

Чем же они так хороши? По сути Map/WeakMap можно воспринимать как обычные хэш-объекты, только в качестве ключей можно использовать только сложные объекты (Object, Function, Array), так как привязка идет не по содержимому, а по адресу в памяти.
Таким образом появляется возможность привязаться на фронтэнде к

• dom-элементу
• XHR-запросу
• File-элементу

Это дает нам возможность работать без id-шников элементов, делать дата-биндинг в разы быстрее, создать безумную альтернативную реализацию promises и так далее.
Мы будем говорить о WeakMap. Даже не так, мы будем говорить о существующих полифиллах для WeakMap.

AnglarJS это здорово! Но при работе с большими списками, содержащими сложной структуры данных, он может начать работать очень медленно! Мы столкнулись с этой проблемой при переносе нашей административной панели на AngularJS. Она должна была работать без задержек при отображении около 500 строк. Но на первое отображение уходило до 7 секунд. Ужасно!
Мы обнаружили два узких места в нашей реализации. Одно было связано с директивой ng-repeat, а другое с применением фильтров.
Эта статья рассказывает о результатах наших опытов с различными подходами по решению, или смягчению, возникшей проблемы с производительностью. Это даст вам идеи и советы, куда вы можете приложить свои силы, а какие подходы все-таки не стоит использовать.

AngularJS директивы – это клево

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

Если Вы уже слышали о D3 и Three.js, эта статья может показаться Вам интересной. В ней речь пойдёт о том, как заставить эти библиотеки работать вместе для создания динамических трёхмерных сцен, на примере этой простой гистограммы:

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

Иногда, для разминки ради, ставлю себе задачи. Просто ради интереса. Чаще всего они забываются сразу после найденного решения и более не используются. Так произошло и в этот раз. Начитался в интернетах о том, что эффективным способ продвижения в Instagram, считается поиск фото по тегам и «лайканье» оных. Если правильно выбрать теги (как правило те, что соответствуют тематике вашего аккаунта), вы получите не только ответные лайки, но и новых подписчиков (что подтвердилось).

Задача

Написать робота (MySQl+php+js), который находил бы фото по тегам и ставил им лайки. Более того, желательно, чтобы наш робот не попал в бан.

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

Browserhacks

Название говорит самое за себя. Данный ресурс — хранилище всевозможных хаков к существующим браузерам. Увидев этот сайт, сам Paul Irish мудро произнес: "Holy shit amazing".

5 замечательных изобретений от David DeSandro (Twitter, H5BP)

Masonry — в переводе «каменная кладка» — идеальное решение для создания Grid Layout. Качественная «замена» для неутвержденной Flexbox спецификации. Простой синтаксис дает возможность без труда создавать Pinterest/Surfingbird подобные макеты. Существует на нативном JavaSciprt и как jQuery плагин.

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

imagesLoaded.js — определяет когда изображения были загружены. Включает в себя 4 события: always, done, fail, progress. Простой в использовании.

Draggabilly — аналог jQuery UI Draggable на нативном JavaScript в лучших традициях автора кода. Работает с touch интерфейсом.
Close Pixelate — «пикселизация» изображений в Canvas аля потаённые места в некоторых работах жанра НЮ.

30 ноября в Одессе состоится VI специализированная техническая конференции FOSS Sea. С этого года конференция становится тематической и первая тема, которая будет поднята в её рамках – back-end на базе свободных и открытых технологий.

Конференция будет проходить в два параллельных потока:

• «Облака» – на этом потоке участники обсудят технические вопросы настройки, администрирования и поддержки облачных инфраструктур;
• «JavaScript на бекенде» — здесь речь пойдет об использовании различных решений, таких как: node.js, express.js, jscala и других.

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

Статья устарела, актуальную информацию ищите на сайте Warp9'а



Существует множество реактивных и около-реактивных библиотек для создания графического интерфейса на js: Angular, Knockout, React, RxJS… Спрашивается, зачем писать еще одну. Оказывается, во всех них, помимо фатального недостатка, есть еще несколько.

О чем эта статья. Я хочу поделиться опытом разработки мобильного приложения на phonegap. В итоге получился целый програмный комплекс с RESTfull сервером, клиентами, да еще хостится на PaaS. Поэтому я опишу отдельно архитектуру клиентского приложения (html5 single page app, завернутое в phonegap), серверного (nodejs с swagger-node-express + node-orm2), и как разместить все это на openshift PaaS.

Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Array.

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

(Напомню, репозиторий находится здесь)

Приветствую всех. Предыдущую статью я закончил на том, что нам может потребоваться массив данных. Массивом в проекте Matreshka.js являются экземпляры класса MK.Array. Чем они отличается от обычных массивов? Почти ничем. Прототип MK.Array содержит все методы, которые есть у «традиционного» массива, конструктор принимает те же аргументы, что и оригинальный Array, а экземпляры имеют несколько интересных особенностей.

MK.Array — это массив на стероидах, который умеет:

• Всё, что умеет Array
• Генерировать события при модификации
• Использовать цепочечный вызов методов там, где это возможно
• Умеет то, что умеет Матрешка: привязывать элементы к свойствам и генерировать кастомные события

Статья устарела. В новой документации содержится самая актуальная информация из этого поста. См. Matreshka.Object.

• Введение
• Наследование
• MK.Object
• MK.Array
• Matreshka.js v0.1
• Matreshka.js v0.2
• Реализация TodoMVC

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

Класс, который нам в этом поможет, называется MK.Object, который наследуется от класса Matreshka. Идея проста: у нас есть множество ключей, отвечающих за данные в экземпляре класса и мы считаем, что остальные свойства отвечают лишь за состояние приложения и не являются бизнес моделью.



Для того, чтоб установить свойство, которое отвечает за данные, используется метод .jset:

var mkObject = new MK.Object();
mkObject.jset( 'a', 1 );
console.log( mkObject.toJSON() ); // { a: 1 }

Пишу диплом где решаю одну из задач — реализация анонимного быстрого веб чата. Быстрого во всех смыслах — загрузка, работа приложения, использование (прочь авторизацию). Выбор остановил на связке: Node.js фреймворк SocketStream и AngularJS на стороне клиента. В процессе работы столкнулся с проблемой — повторные расчёты производимые фильтрами на одной и той же модели. Детали проблемы и решение под катом.

Проблема

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

$("someElement").on("click", function(){
    window.open("http://yandex.ru")
}