JavaScript *

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

Лучшее от Codrops за 2014 год

Я думаю многие из вас знакомы с потрясающими демками от Codrops. Авторы сайта буквально всегда реализуют интереснейшие UI/UX задумки с помощью HTML/CSS/SVG/JS и подробно рассказывают о том, как они это сделали. А это их собственная мега подборка с лучшими работам. Также рекомендую для вдохновения коллекцию самых популярных пэнов за 2014 год от CodePen.

В посте про «Звездное небо на Canvas» я уже описывал свой проект, где при помощи JavaScript на канвасе 2d формируется изображение глобуса Земли на фоне звезд, планет и орбит космических аппаратов. Для создания трехмерной картины звездного неба на плоскости я использовал формулы перевода трехмерных координат X, Y, Z отображаемых объектов: звезд, планет, космических аппаратов (КА), — в плоские декартовые координаты X, Y. Основную часть этих формул я взял из проекта Marble из состава KDE. Портированный с C++ на JavaScript код я сохранил в файле starry.js.

Не все JSON нельзя комментировать (например, Хром[иум] вполне переносит комментарии в manifest.json), но в стандарте не предусмотрены комментарии к нему. Поэтому ряд функций в NodeJS не обрабатывают комментарии в формате JS и считают их ошибкой. Точно так же, AJAX с форматом JSON принимает их за ошибку. Поэтому для конфигурационных файлов в формате JSON имеется масса неудобств при попытках их использовать как человеко-читаемые файлы. Может быть, это иногда хорошо. Если хотим прокомментировать, то будем вынуждены оформить комментарий под или над строкой как «ключ-значение».

...{...
    "some-key_comment":"my comment for key and value",
    "some-key":"some-value",
...}...

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

...{...
    "some-key":"some-value", //какой-какой key?? Ай, комментарии - нельзя!
...}...

Придумаем JSON-подобный формат с комментариями в стиле JS, чтобы их можно было выполнять как JS, а, очистив от комментариев — читать как JSON. ("TL:DR: покажите мне код.")

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

var A = {
    doStuff (){}
}

var B = {
    doStuff (){}
}

var C = React.createClass({
    mixins: [A, B]
});
//упс... ошибка, потому что React не может решить какой из doStuff унаследовать

В JavaScript существует множество разных способов наследования, классового и прототипного, фабричного и через примеси, прямого и непрямого, а так же гибриды нескольких методов. Но у Node.js есть его родной способ с применением util.inherits(ChildClass, ParentClass). До недавнего времени я использовал нодовский способ только для встроенных классов (когда нужно сделать своего наследника для EventEmitter, Readable/Writable Stream, Domain, Buffer и т.д.), а для моделирования предметной области применял общеупотребительные для всего JavaScript практики. И вот, впервые, понадобилось реализовать собственную иерархию системных классов, не наследников от встроенных, но и не классов предметной области, а классов, массово поражаемых в системном коде сервера приложений Impress. И простого использования util.inherits уже как-то не хватило, поискал я статьи и не найдя полностью всего, что мне нужно, изучил примеры наследования в исходниках самой ноды, подумал и сделал пример родного нодовского наследования себе на память и написал эту небольшую заметку, чтобы она, надеюсь, помогла еще и вам. Сразу предупреждаю, что реализация вызова метода родительского класса из переопределенного в дочернем классе метода, мне не очень нравится из-за громоздкости, поэтому, приветствую альтернативные способы и приглашаю коммитить их в репозиторий или в комментарии к этой заметке.

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

Часть 1

4.1 $rootScope

$rootScope не сильно отличается от $scope, просто это объект $scope самого верхнего уровня, от которого происходят все остальные области видимости. Когда Angular начинает создание вашего приложение, он создаёт объект $rootScope, и все привязки и логика приложения создают объекты $scope, являющиеся наследниками $rootScope.

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

Здравствуйте, хабровчане!

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

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

Формула:
T = a + b * log ( D / W + 1 ),

где T — время работы пользователя с меню в (мс), a и b — коэффициенты навыков и умений работы пользователя с тем или иным устройством, D — расстояние от одного до другого пункта меню, W — ширина пункта меню при движении к нему от другого пункта меню.

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


Рисунок — Расчетная схема закона Фиттса.

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

Рассчитаем среднее время для паркетного меню с параметрами: p1=120 px, p2=160 px, d=10 px, n=6, где n – количество пунктов меню.
Получим таблицу, в которой указаны параметры Wi, Di, Ti.

Всем привет! Мы как-то задумали сделать легкий вводный курс на тему JavaScript и разработки приложений (он, кстати, скоро будет опубликован): и, пока я собирал материалы к нему, как-то само собой выяснилось, что есть довольно много вещей, которые, так сказать, находятся на переднем крае развития JavaScript. Отсюда родилась идея сделать отдельную обзорную статью в жанре «X трендов на год Y по технологии Z».

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

Да, именно так и никаких уловок. Эта идея мою голову посетила около двух месяцев назад в процессе обдумывания статьи об Алгоритмах и решениях. Типы .NET в том движке использовать легко, а можно ли наоборот…

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

Введение

Добро пожаловать в третью часть серии статей «Изучаем React». Сегодня мы будем изучать, как устроена архитектура Facebook Flux, и как использовать ее в своих проектах.

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

Я расскажу о том, как в несколько строк реализовать распознавание любого количества лиц на любой фотографии или видео в браузере с помощью JavaScript и JQuery плагина FaceDetection.

Кому интересно, прошу под кат.

В последние время, AngularJS не критиковал только ленивый и я, за последние пару месяцев, перечитал немало статей с критикой. Одна такая статья завершалась фразой «Я, черт возьми, не понимаю, как Angular может быть настолько популярным, ведь он так плох!»
«А действительно» задумался я «если он такой плохой, то почему же так популярен?» И я, кажется, нашел ответ. Дело в том, что у Angular, как и у jQuery, низкий порог вхождения, он прост и нагляден. Да, несомненно, и в Angular и jQuery можно делать сложные вещи, но большинство людей не использует эти библиотеки таким образом. Что я имею в виду?

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

Содержание:



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

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

Тем, кто работает с телефонией, приложениями связанных со звонками и т.п. время от времени приходится сталкиваться с вопросами: «а можно определять с какого региона этот звонок?» и «а этот номер какого мобильного оператора?»

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

Но ведь можно автоматизировать этот поиск? Конечно. И многие аккуратно парсят этот CSV и складывают к себе в базу данных. А затем используют. Я тоже так делаю.

Но недавно с моим коллегой мы решили немного это упаковать и сделать npm для быстрого подключения ресурса нумерации к проекту на node.js.

Ссылка на гитхаб, ссылка на npm.

Далее немного деталей.

Современные JavaScript фреймворки, и ReactJS не исключение, обычно требуют эксклюзивного доступа к DOM и им очень не нравится, когда кто-то без их ведома этот DOM меняет. Проблема в том, что существует огромное количество сторонних библиотек (например, плагины jQuery), которым необходимо в их подконтрольном поддереве что-нибудь да вропнуть, анвропнуть, перенести в другое место и т.д. Обычно в таких случаях мы видим в консольке нечто подобное:



К счастью, эта проблема довольно легко и быстро решается. В этом посте я попробую изложить решение пошагово, но, если вам неинтересно, или вы спешите, просто поскрольте вниз к ссылке на гист с готовым решением. Итак, начнем.

Содержание:



Интересен тот факт, что SVM является всего лишь отдельным видом очень простой схемы (схемы, которая вычисляет score = a*x + b*y + c, где a,b,c являются весовыми функциями, а x,y представляют собой точки ввода данных). Его можно легко расширить до более сложных функций. Например, давайте запишем двухслойную нейронную сеть, которая выполняет бинарную классификацию. Проход вперед будет выглядеть следующим образом:

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

Всем привет! Сегодня хотелось бы рассказать про то, как можно сделать собственные графики на js + canvas буквально в пару сотен строк кода. А заодно вспомнить школьный курс геометрии.