JavaScript *

Однажды я совершил страшное дело – посмотрел исходный код главной страницы Яндекса и задумался – что-то тут не так. Я вижу 5 заголовков последних новостей, несколько картинок, поле поиска, ссылочки и вот вопрос:
Где тут 700Кб, которые требуют 1,56с моего времени? (по данным веб-инспектора Safari 7.0.3)

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

В дополнение к этому посту.

Кто не знает, есть такая штука ui-router. Замена стандартного роутера Ангуляра. Учитывая, что в Ангуляре 2.0 планируют запилить нечто подобное, вскоре этот роутер станет стандартом.

С помощью него можно строить приложение, например, так:

Нашёл любопытный инструмент для облегчения структуры контроллеров — Angular Classy. Он представляет из себя модуль, размером в 1 килобайт (gzipped and minified), и помимо представления контроллера в виде объекта даёт ряд полезных плюшек, рассказ о которых под катом.

Представляю вашему вниманию две библиотеки, реализующие практически полный спектр требуемого функционала для организации инфраструктуры PKI: PKIjs и вспомогательную библиотеку ASN1js. Библиотеки свободны доступны и распространяются по лицензии, позволяющей использовать их код без особых ограничений, даже в коммерческих продуктах. Полный код данных библиотек доступен на GitHub: PKIjs + ASN1js.

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

1. Объектно-ориентированный код;
2. Работа с HTML5 (ArrayBuffer, Promises, WebCrypto (используется «dev nightly build» Google Chrome));
3. Возможность создавать, проверять, получать внутренние данные, изменять данные для следующих объектов:
   
   1. Сертификаты X.509
   2. Списки отзыва (CRL) X.509
   3. Запросы на сертификат (PKCS#10)
   4. OCSP запросы;
   5. Ответы OCSP сервера
   6. Time-stamping (TSP) запросы
   7. Ответы TSP сервера
   8. CMS Signed Data
   9. CMS Enveloped Data
   
   
4. Реализация собственной «certificate chain validation engine» на JavaScript;
5. … И многое другое! Смотрите под катом!

Предыстория

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

1. Не запоминает логин, пароль и город — в результате после входа нужно дождаться загрузки всех заявок из дефолтного города, а потом переходить на свой.
2. Не вся необходимая информация доступна из общего списка заявок. За частью ее приходится заглядывать внутрь заявки, а каждая из них открывается в новом окне (там джаваскрипт и нет даже нормального атрибута href, представляете?).
3. Сделана эта прелесть на asp, и поэтому при каждом переходе гоняет по сети свои viewstate.
4. Ну и минимальная ширина сайта в полторы с чем-то тысячи точек не доставляет удовольствия.

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

Прошел год с тех пор, как наша команда разрабатывает web portal используя паттерн MVVM и фреймворк Knockout в частности. Понемногу копился опыт, появлялись различные решения, хорошие и плохие практики, и вот, так сказать, назрело. Для linq-синтаксиса в javascript уже существует библиотека linq.js, и долгое время мы думали, затянуть ли ее к нам в проект. И даже примеры использования вкупе с knockout в интернетах есть.
Идея же, которая меня постигла, была в том, чтобы создание computed инкапсулировать внутрь Linq-методов.
Для сравнения, код из fiddle:

    this.filteredItems = ko.computed(function() {
        var term = this.searchTerm();
        
        return this.items.where(function(item) { 
            return item.name.indexOf(term) > -1; 
        });
    }, this);

и код, который хотелось бы писать вместо этого:

    this.filteredItems = this.items
        .Where(function(item) { return item.name.indexOf(this.searchTerm()) > -1; });

Как-то давно переводил статью «Понимание типов сервисов в AngularJS (constant, value, factory, service, provider)». На практике, конечно, не всё пригождается, поэтому в рамках понижения порога вхождения в Ангуляр, объясню проще.

Этот пост — продолжение серии, начатой здесь (предыдущую часть читать обязательно). Сегодня мы создадим, так называемый, «список дел» (Todo-list из проекта TodoMVC). За основу возьмем вариант, сделанный на Angular, и попробуем воссоздать функционал на derby.

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

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

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

Эта область довольно неплохо покрыта в десктопной среде — фильтры вроде 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 ошибки (перехваченые исключения) выглядят как красный круг с восклицательным знаком, так же рядом с номерами строк:



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