JavaScript *

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

Эта область довольно неплохо покрыта в десктопной среде — фильтры вроде ffdshow raw video filter и madVR позволяют делать практически всё, что может потребоваться для приятного просмотра. К сожалению, веб не может похвастаться аналогичным тулкитом, и вы либо наслаждаетесь всеми недостатками очередного видео на YouTube, либо открываете его во внешнем приложении вроде MPC-BE, что не очень удобно. А было бы неплохо иметь одну волшебную кнопку, активирующую фильтрацию в месте, где она и должна быть — в вашем браузере.

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

Доброго дня, на выходных от скуки и отсутствия работы решил себя развлечь написанием небольшого приложения, которое сгодится в качестве учебного метариала для изучения возможностей двух замечательных библиотек — ractive.js и sails.js

Постановка задачи

По работе часто приходится после выполенения очередного задания (я — фрилансер) выставлять заказчику счет на оплату услуг. Тем более если имеешь дело с юридическими лицами. Для этого я использовал простой html-шаблон, в который данные заносил руками, исправляя очередные …

Выглядит примерно так

В процессе использования angular.js трудно обойтись без объекта $q (он же promise/deferred), ведь он лежит в основе всего фреймворка. Deferred механизм является очень простым и мощным инструментом, который позволяет писать лаконичный код. Но чтобы по-настоящему использовать эту мощь, необходимо знать обо всех возможностях данного инструмента.
Вот несколько моментов, о которых вы возможно не знали.

Последние несколько месяцев я участвую в нескольких проектах, разрабатываемых на Derby (реактивный fullstack javascript-фреймворк). Часть из них вполне успешно работает в продакшине, часть стартует в ближайшее время.

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

Идея у меня проста — поделиться полученными знаниями, если это конечно будет интересно и востребовано. Я хочу взять несколько примеров из проекта derby-examples и разобрать их по полочкам. Либо, воссоздавая их с нуля, попутно объяснить логику создания, с точки зрения специалиста, либо же, по готовому примеру объяснить те моменты, которые были не раскрыты в предыдущих примерах. Короче, если понравится, думаю разобрать 5-6 примеров.

Поскольку побеждать Великий Китайский Роскомнадзор наша штука для обхода блокировок в интернете пока не особенно научилась, а рассказать что-нибудь странное про свою работу все равно хочется, расскажу про реимплементацию похожего на Readability алгоритма при помощи Node.js и Бэйцзинского технологического института.

Что это вообще такое

Readability — это радикальное продолжение идеи AdBlock убирать с веб-сайтов лишние элементы. Там, где AdBlock старается снести только самые бесполезные для пользователя вещи (в основном рекламу), Readability удаляет заодно скрипты, стили, навигацию и все остальное ненужное. Раньше такой вид страницы называли «версия для печати», хотя на самом-то деле текст предназначен для чтения (отсюда название Readability – «Удобочитаемость»).

Лирическое отступление про парсеры

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

Резюме поста в нескольких предложениях

• Возможности Excel в части удаленного доступа и совместной работы с документами на сегодняшний день по меньшей мере сопоставимы с Google Docs;
• Excel-документ может быть интегрирован в html-страницы с сохранением значительной части функциональности, т.е. формулы и pivot tables будут работать;
  
• Я, равно как и любой другой человек, могу опубликовать свой Excel-документ таким образом, что ваше, равно как и чье-либо еще, веб-приложение сможет:
  
  1. отрисовать и открыть его для ручного ввода значений в ячейки,
  2. напрямую взаимодействовать с ним через JavaScript;
     
• У Microsoft есть сайт, посвященный интеграции Excel-документов в веб-приложения; также в природе существуют jQuery плагины, позволяющие сделать эту интеграцию быстрой и безболезненной;
  
• С практической точки зрения пользователь получает следующие плюшки:
  
  1. JavaScript представляет широкие возможности для визуализации и анимации Excel-таблиц, а также создания на их базе интерактивных приложений и дэшбордов;
  2. Возможность работы с Excel-документами на планшетах и мобильных устройствах;
  3. Удобный инструмент для создания рабочих прототипов систем управленческой отчетности.

Здравствуйте, хабражители!

Не так давно на просторах интернета появилась javascript библиотека для построения пользовательских интерфейсов от facebook — Reactjs. Данная библиотека идеально подходит для создания простых и сложных javascript приложений. Позволяет организовывать ваш клиент-сайд в виде независимых компонентов. Берет на себя всю заботу по модификации DOM структуры дерева. И делает это весьма эффективно и разумно.

В общем, в результате небольшого знакомства с reactjs появилось такое приложение — demo. Цель данного поста поделиться впечатлениями от работы с reactjs + gruntjs + browserify.

Ниже будет изложено:

• Основные моменты создания приложения и личные впечатления (симбиоз reactjs + browserify + gruntjs + coffeescript).
• Серверный пререндериг reactjs компонентов для статических страниц.
• Подход к сборке reactjs приложения с помощью gruntjs и деплой на gh-pages одной командой.

Тех кого заинтересовал прошу под кат…

Про технологию WebRTC в последнее время пишут много. Она позволяет обеспечить взаимодействие двух клиентов без специализированного сервера между ними, но нужда в сервере отпадает только после установки соединения. А на этапе установки самого соединения некоторые серверные ресурсы все еще нужны. Можно ли избавиться от потребности в сервере? Небольшой эксперимент в этом направлении под катом.

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

В статье описывается личный опыт создания IFrame-приложения, с нуля, для «Вконтакте», а так же все события которые произошли во время запуска и после, ну и конечно же совершённые ошибки. Можно даже сказать что это не совсем статья, а скорее рассказ.

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

Давным-давно

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

Самое крутое, классное и волшебное, что было в JS — это то, что никто в больших организациях не хотел с ним иметь дела, оставаясь в своём спокойном мире прекрасно организованных слоёв абстракций из фабрик и волшебных фреймворков инъекций XML.

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

Мало того, когда все эти проблемы с производительностью возникали, мы могли всех спасти, написав на JS фронтэнд, который делал вид, что никаких проблем не существует и всё это прекрасно работало, несмотря на тоскливое качество бэкэнда.

Мы достигли расцвета JS

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

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

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

В новом плагине для Webstrom добавлены счетчики функций и вывод runtime ошибок.

Счетчики функций — это кружки с цифрами рядом с номерами строк:



А runtime ошибки (перехваченые исключения) выглядят как красный круг с восклицательным знаком, так же рядом с номерами строк:



Подробно об этих и других возможностях можно посмотреть в видео:

Глава семнадцатая, в которой фронтэнд-разработчики Uprock переходят от GTA к альтернативным путям применения YouTube и практическому применению модели акторов.



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

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

Сегодня я вам расскажу про одно очень интересное сообщество под названием NodeSchool. Данное сообщество продвигает обучение по платформе node.js

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

Неделя 30-ти строчных JS давно прошла, но воодушевлённый постами Разрабатываем Flappy Bird на Phaser (Часть I) и Как Минковский во Flappy Bird играл, я не смог удержаться не попробовать написать ASCII-версию игры «Flappy Bird» на JavaScript и уложиться при этом в 1024 символа.

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

Приветствую, уважаемое Хабрасообщество!

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

Сейчас библиотека выложена с парой примеров на GitHub, а под хабракатом хотелось бы осветить некоторые тонкости её применения и часть внутренней логики. Буду рад, если моя библиотека поможет кому-то сэкономить n-ое количество времени и позволит избежать изобретения собственного велосипеда.

Кому интересно — добро пожаловать под кат.

Достаточно распространенная задача — поменять местами элементы в списке. Но как правило эта задача решается жуткими костылями, особенно если это Drag&Drop.
Сейчас я расскажу вам очень простой и гибкий способ сделать это, используя Marionette.js и jQuery UI Sortable.

Привет, Хабр.
PRT расшифровывается как personal rapid transit. Это автоматический транспорт, управляемый компьютером и перемещающийся по специальным путям. Вот ссылки на википедию по-английски и по-русски. В Лондоне, в аэропорту Хитроу уже пару лет работает действующая система. А японцы сделали такой транспорт ещё в 70-е годы, но потом запретили. Как сказано в википедии: проект CVS (Computer-controlled Vehicle System) был закрыт после того, как Министерство территории, инфраструктуры и транспорта Японии заявило, что система небезопасна и не соответствует существующим правилам о минимальной дистанции. Поэтому для внедрения этого вида транспорта надо будет принять специальный закон.

Для начала я хочу сказать каким я вижу PRT-транспорт — это гениальное изобретение, позволяющее доехать до станции назначения без остановок на перекрёстках и станциях. Я считаю, что колёса должны быть резиновые, как в Лондонском варианте, как у автомобиля. Но питание должно быть не от аккумуляторов, а от контактного рельса. И кабинки должны быть не 4-местные, а одно- и двухместные (одно за другим), что позволит сделать более узкие пути.

Вот здесь написано, что система управления PRT-транспортом бывает синхронной, асинхронной, транс-синхронной, квази-синхронной и Asynchronous Point Follower. Насколько я понял, то, как я вижу PRT-транспорт это и есть синхронная система управления. А вижу я так: по путям двигаются строго по предписанию и на заданном расстоянии транспортные средства (ТС) или их отсутствие. Так сказать электроны и дырки, если сравнивать с полупроводниковыми приборами. При посадке пассажир указывает станцию назначения. Центральный компьютер получает эту информацию, вырабатывает путь движения и отправляет его на ТС.

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

История этого проекта началась с моей личной боли.

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

Есть замечательный сайт http://todomvc.com/, на котором демонстрируется решение одной и той же задачи с помощью разных JavaScript MV* (Model-View-[Controller]) фреймворков. Сейчас там представлены десятки различных фреймворков, у каждого из которых есть свои преимущества и недостатки. Есть там и такие гиганты, как Angular, Ember и Backbone. Несмотря на высокую конкуренцию, я все равно хотел бы продемонстрировать свой MV* фреймворк — jWidget.

Я быстро просмотрел все решения, представленные на сайте TodoMVC, и не нашел ни одного фреймворка, похожего на jWidget. Дело в том, что, помимо JavaScript, я много программирую на объектно-ориентированных языках программирования, таких как Java, C#, а в прошлом и на C++. Поэтому я большой фанат объектно-ориентированного программирования, SOLID принципов и паттернов объектно-ориентированного проектирования. Мне не нужен фреймворк, который стеснял бы меня в возможности применения стандартных объектно-ориентированных решений. То, что я увидел в существующих решениях TodoMVC, не внушает доверия в этом отношении. Как правило, они предоставляют некий декларативный синтаксис и мощный шаблонный движок, но объектно-ориентированная основа всего этого, даже если она существует, скрыта от наших глаз.