JavaScript *

Не так давно вступил в силу Федеральный закон №353, обязывающий финансовые организации раскрывать информацию о так называемой «Полной стоимости кредита(займа)» (далее — ПСК).
В этой статье (в принципе относящейся только к трудящимся в финансовой сфере), я бы хотел привести пример расчета ПСК. Возможно, кому-то пригодится.

Важно! Не так давно законодатели внести изменения в формулу, которая вступает в силу только с 1 сентября 2014. Все изложенное далее пригодно только для новой формулы. Статья описывает исключительно техническую реализацию расчета ПСК в соответствии с нормами закона.

Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов HTML5 — contenteditable, Jquery, Ajax и PHP создадим простой редактор текста HTML5 сайта.

Наш редактор будет обладать следующими свойствами:
— при клике мышкой на тексте предназначенном для редактирования этот текст сразу можно редактировать;
— при нажатии клавиши Escape после редактирования текста, все изменения в текущий текст отменяются;
— при потере фокуса, либо клике для редактирования другого текста, измененный текст отправляется на сервер, выводится сообщение о статусе отправки и ответа сервера.

Любой проект посложнее «Hello World» состоит из некоторого количества файлов, по которым разносят код. Это дает возможность структурировать проект, вынести независимые части, которые можно будет использовать в других проектах и вообще сделать код нагляднее.

Так вот, в Node.js каждый такой файл и представляет собой модуль, который можно подключить.
Подключение происходит с помощью вызова функции require, которой нужно передать путь к файлу.

    var authModule = require('./auth');

Данный код подключает модуль авторизации и делает его доступным через переменную authModule.

В зависимости от того, какой параметр передан в функцию require, будет отличатся алгоритм подключения модуля. Так что давайте посмотрим на принципы подключения модулей в Node.js. Отмечу, что вся эта информация доступна в документации.

Вместе с Node.js поставляется несколько встроенных модулей, для подключения которых нужно просто указать название модуля.

    var http = require('http');
    var cluster = reqiure('cluster');

Нужно отметить, что встроенные модули имеют приоритет над всеми остальными, если в функцию require передано их название. Так к примеру, require('http') всегда вернет встроенный модуль, даже если будет сторонний модуль с таким названием или файл с таким именем. Список всех встроенных модулей и документацию по ним можно найти на сайте. Исходники этих модулей можно посмотреть в репозитории проекта.

AngularJS молод и горяч, когда дело доходит до современной веб разработки. Его уникальный подход к компиляции HTML и двусторонней привязки данных делает его эффективным инструментом для создания клиентских веб приложений. Когда я узнал что Quick Left (студия в которой работает автор. прим. пер.) будет использовать его для создания приложения для одного из наших клиентов, я был взволнован и постарался узнать о angular столько сколько мог. Я обошел весь интернет, каждый урок и руководство, которые смог найти в Google. Они были реально полезны в понимании работы директив, шаблонов, компиляции и цикла обработки событий (digest), но когда дело дошло до тестирования, я обнаружил что эта тема была просто упущена.

Я обучался подходу TDD (Разработка через тестирование) и я чувствую себя не в своей тарелке без подхода «Красный-Зеленый-Рефакторинг». Так как мы все еще разбирались что к чему в тестировании в Angular, команде иногда приходилось полагаться на подход «тестирование-после». Это начало нервировать меня, поэтому я решил сосредоточится на тестировании. Я потратил на это недели, и в скором времени покрытие тестами поднялось с 40% до 86% (Кстати, если вы еще этого не делали, можете попробовать Istabul для проверки покрытия кода в вашем JS приложении).

Знаете, я очень люблю сервис Coursera. Там много отличных курсов, удобно осваивать материал, и, конечно же, общение с “одноклассниками”. Но, поскольку у сервиса до сих пор статус «стартапа», можно понять и простить некоторые недоработки. Например, в процессе прохождения курса, не всегда получаешь оценки «отлично», и приходится сверяться, проходишь ли ты по своему проценту успеваемости на получение сертификата, или нужно поднажать, и оставшиеся задания выполнить качественно и вовремя.

К сожалению, разработчики ресурса не сделали (пока) единого места, в котором просуммированы все баллы, полученные студентом. Ежедневно тысячи студентов вручную считают свои балы, вычисляют свой процент, а это многие человекочасы, портаченные зря. Столкнувшись с этой проблемой не в первый раз, я и решил написать расширение для Google Chrome, являющегося моим основным браузером. А поскольку в основном пишу на стеке RoR, решил писать свое приложение на более привычном мне CoffeeScript, с последующей трансляцией в JavaScript. Об особенностях написания этого расширения и будет моя статья.

Перевод статьи «3 New JavaScript APIs You May Want to Follow», Aurelio De Rosa из портала SitePoint.

Если вы постоянный читатель SitePoint, и возможно, читаете мои заметки, то вы знаете, что я написал множество статей о новых HTML5 и JavaScript API. До сих пор я писал заметки об API, которые вы можете использовать прямо сейчас, в том числе с использованием полифилов.

Сегодня я решил нарушить это правило и описать вам несколько API на ранней стадии разработки. Эти технологии настолько свежи, что 2 из 3 были представлены всего несколько дней назад. Поэтому они пока не могут быть использованы. Однако, если вам интересно, что они позволят сделать, вы можете почитать спецификации и написать, что бы вы хотели в них улучшить.

Давайте же, без лишних церемоний, начнем!

Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.

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

Доброго времени суток, уважаемые хабравчане. Сегодня я хочу поделиться с вами одним небольшим событием — ровно год назад, 15 августа 2013 года я опубликовал свой первый дайджест для веб-разработчиков. С тех пор было опубликовано 25 выпусков и мои подборки обрели некоторую «популярность», а мне приятно ощущать себя «полезным» для хабраобщества.

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

Предыстория:

Имя большой опыт в разработке веб-сайтов (около 15 лет) и являясь программистом, я очень не люблю рутинную работу, стараюсь ее либо избегать, либо каким-то образом оптимизировать. Другими словами, если мне в какой-то момент необходимо заниматься наполнением контентом сайта (да, знаю, не царское дело программисту наполнять сайт, но случаи разные бывают), то я предпочту потратить пару часов на написание парсера входящих данных, чем часа 4 вколачивать эти данные вручную. И давно меня терзала проблема отсутствия удобного редактора для создания карт изображения. Конечно, можно нарисовать карту в Corel Draw или подобном, выгрузить в SVG и по быстрому переконвертировать в нужный формат, но меня давно интересовала возможность создания некоего редактора, который позволит, не загружая сторонние программы, прямо на сайте, по-быстрому загрузить изображение и выделить на нем нужную карту. Например, есть некое изображение здания, на котором необходимо выделить контур этажа и привязать к нему какие-то JavaScript-события или просто ссылку, вот как здесь:

Посвящается разработчикам, которые пытались заставить популярные веб-фрейморки, такие как AngularJS, KnockoutJS, Ember.js и другие, работать внутри Windows Store JavaScript приложения, но столкнулись с непониманием рантайма в лице ошибки ниже.



Это такая фича, которая запрещает динамически модифицировать HTML/DOM контент, используя некоторые методы, делая приложения более секьюрными, но при этом делает невозможным использование более или менее сложных веб-фреймворков, которые активно используют такие фичи (например, innerHTML).

Если вы пишете SDK для внутренних нужд единственного проекта, то многие вещи упрощаются: вопросы обратной совместимости стоят не так остро, вместо написания подробной документации можно лично ответить на вопросы коллеги, а обнаруженные ошибки относительно легко включить в проект. Если SDK делается для всех проектов крупной компании, то проблем становится намного больше. Но если ваш SDK предназначен для сторонних разработчиков по всему миру, то без таких вещей, как хорошая документация и автотесты, обойтись просто нельзя. Именно к последним можно отнести наш APS JavaScript SDK, и в этой статье я хочу рассказать о том, как он устроен и как мы стараемся максимально облегчить жизнь сторонним разработчикам, которые используют или будут использовать наш SDK.

Слайды для тех, кто не любит читать многобукв.

И для самых нетерпеливых: что у нас получилось и наша песочница.

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

Tracking.js

Крошечная библиотека ( всего 7 кб ) содержит в себе различные техники компьютерного зрения в вебе. Tracking.js уже позволяет отслеживать различные объекты, цвета, лица как на фотографиях, так и с помощью веб-камеры. Проект собрал уже почти 2000 звезд на GitHub.

  var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

  colors.on('track', function(event) {
    if (event.data.length === 0) {
      // No colors were detected in this frame.
    } else {
      event.data.forEach(function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
      });
    }
  });

  tracking.track('#myVideo', colors);

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

Ознакомившись с обзором движков для распознавания речи, заметил там API от Яндекса. И на выходных написал небольшую обертку для Node.js для распознавания речи с целью поиска мата в своих телефонных разговорах. По мотивам топика на Хабре.

Список нецензурных слов выкладывать не буду, а сам npm устанавливается командой.

npm install yandex-speech

Исходники и примеры использования:
github: www.github.com/antirek/yandex-speech

Немного деталей:

Понятия «инверсия управления» и «внедрение зависимостей» не являются новыми, но в сообществе JavaScript, несмотря на его бурный и продолжительный рост, почему-то встречаются довольно редко.

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

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

Очень часто веб-разработчики сталкиваются с проблемой большого количества мелких файлов. Картинки, скрипты, css — неудобно, все дела. Нужно как-то бороться с этим. import, спрайты, блаблабла — это хорошо, но можно попробовать и иначе. Мой вариант — упаковка всех необходимых ресурсов в архив на стороне сервера(реализация — на php), получение данных на клиенте, установка ресурсов в нужных местах.

Проблемы на данный момент: не придумал толком, как кешировать полученный архив, таким способом не стоит паковать динамический контент или большие файлы.
Для распаковки архива на клиенте использована библиотека JSZip, для удобства — jQuery.

Наверное, каждый, кто использовал JavaScript, когда-либо сталкивался (или столкнётся в будущем) с асинхронными вызовами. Может быть, это будет обращение к базе на стороне сервера. Может быть — работа с таймером для создания анимации на сайте.

Для того, чтобы «побороть» асинхронность, используются разные инструменты от промисов до смены языка программирования. Но иногда очень хочется бросить всё и написать на чистом JS линейный код:

timeout(1000);
console.log('Hello, world!');

Можно ли реализовать нечто подобное? Разумеется, можно.
В данной статье мы рассмотрим один опасный, но действенный способ.

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

Cайт Матрешки
Github репозиторий.

Всем привет! В этом кратком посте, представляю на суд общественности долгожданную реализацию «Hello, world на стероидах» — TodoMVC на базе фреймворка Матрешка.



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

1. Никакой логики в HTML коде. Мне, как человеку, который с трепетом относится к JavaScript и HTML, хотелось бы, чтоб язык программирования так и остался языком программировния, я язык разметки — языком разметки.
2. Не нужно отдельно слушать события данных, для того, чтоб обновить UI, и слушать события UI для того, чтоб обновить данные. Это возволяет избежать ошибок, типа «забыл повесить обработчик», так как не приходится хранить в голове несколько сущностей сразу. Вы задаёте правила, как данные синхронизируются с видом, а дальше работаете исключительно с данными.

this.bindNode( 'x', 'select.my-select' );

TodoMVC — эталонное приложение, включающее в себя наиболее распространенные и «неудобные» задачи, у которого есть спецификация и которое призвано помочь программисту выбрать понравившийся фреймворк. На одноименном сайте размещен список реализаций приложения, используя самые популярные фреймворки. На github проекта — больше (папка labs).

Вы знаете, что такое Selenium и/или PhantomJS? И с чем их едят? Тогда, возможно, вам будет интересен проект Dalek.js — кроссбраузерная утилита для тестирования веб-приложений.

Dalek.js позволяет писать тесты, которые ходят по веб-страничкам, щелкают ссылки, заполняют формы, отправляют данные и делают скриншоты. То же самое и даже больше делают тесты, написанные с использованием Selenium'а или Phantom.js, в чем подвох?

Небольшая предыстория.

У меня есть хобби-проект трекер.ру
Алгоритм такой: пользователь вводит поисковый запрос, этот запрос «на лету» ищет торренты на сторонних трекерах (рутор, рутрекер, tfile и тд).
Для параллельного поиска идет одновременно несколько аякс запросов, которые должны обработаться асинхронно.
Однако, запросы выполнялись синхронно. Если какой-то трекер долго не отдавал ответ, то остальные запросы подвисали и ждали ответа от подвисшего трекера. Общее время выполнение запросов равнялось сумме всех запросов. Хотя, по моим планам общее время должно было равняться самому долгому запросу.
Долго ломал голову, почему так. Грешил на HTTP pipelining. Но, причина оказалась намного банальней. Все дело в сессиях. Дело в том, что сессии в php консистентны и php не даст обратиться другому процессу к уже занятой сессии.