JavaScript *

Предыстория

Хотелось бы начать с предыстории. В данный момент я разрабатываю некое веб-приложение на Java, ничего необычного, но в документе от заказчика есть требование: будущие администраторы приложения должны иметь возможность налету подгружать код бизнес логики на сервер. Вроде бы ничего сверхъестественного, нужно будет сделать подгрузку java-классов, думал я, пока на днях мне в голову не пришла идея: “А что, если дать возможность программировать методы бизнес логики на JavaScript?”.
В тот момент идея показалась мне очень хорошей, и я видел целый ряд преимуществ этой идеи перед простой подгрузкой java-классов:

• Во-первых, JavaScript — это очень простой язык описания логики, писать на нем может любой программист, знакомый с принципами ООП и C-подобным синтаксисом.
• Во-вторых, т.к. внешнее API сервера спроектировано в стиле REST, js-код отлично ложится в рамки ресурса, без проблем сериализуется в JSON-строку и не требует компиляции и дополнительных манипуляций.
  
• В-третьих, исполнение JavaScript-кода интерпретатором — это исполнение кода в рамках песочницы безопасности, что дает нам возможность четко настраивать правила поведения кода бизнес-логики.

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

Двенадцатый митап MoscowJS прошёл 26 июня в офисе компании Mail.ru. На встрече выступили ребята из Яндекса, Mail.ru и Tai.st. Говорили об облаках, оптимизациях мобильного веба и, конечно, расчёсках! Мы собрали видео и другие материалы события в одном посте.

Вот как это было…

Когда я разрабатываю системы на Zend Framework, то всегда использую gettext и Zend_Translate. Всё лаконично просто и обычно не возникает никаких проблем с переводом даже больших проектов. Для каждого языка генерируются свои файлы .po и .mo, переводы пляшут от дефолтного языка, ключи тоже на этом же языке. Переводчикам удобно передать эти файлы, которые они могут открыть в POEdit и удобно всё перевести. Так вот, на стороне сервера всё очень просто, но часто нужно переводить какие-то сообщения «на лету» в JavaScript, а он не понимает ваши .mo файлы. Но хотелось бы пользоваться именно ими, чтобы не разделять перевод одного проекта на 2 части (backend, frontend). И я начал искать. В Интернете существует достаточно большое количество таких решений, но все они почему-то обрастают зависимостями:

code.google.com/p/gettext-js (Prototype)
angular-gettext.rocketeer.be (Angular)
github.com/jakob-stoeck/jquery-gettext (jQuery)

А хотелось иметь именно «pure-js» решение. Ок, напишем своё.

Перевод статьи «JavaScript Modules» с сайта jsmodules.io.

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

Создание модуля

В качестве упражнения, мы построим простой asap модуль, который позволит назначать выполнение действий «как только так сразу» асинхронным образом. В Node.js, вы можете сделать это при помощи process.nextTick, есть и разные подходы, которые работают во многих браузерах. Мы создадим модуль, который будет работать в любом окружении.¹

Введение

Здравствуйте. Не так давно я решил попробовать себя в качестве разработчика под известную каждому платформу Android. На пути разработки я столкнулся с многими проблемами и одной из них оказалась создание картинок под разные разрешения экранов. Сначала я пробовал создать картинки в PhotoShop, но это оказалось муторно, нужно сохранять при любом изменении 5 картинок в разных разрешениях, да и не гений я этой программы. И тут мне пришла в голову мысль нарисовать картинки в SVG, до этого у меня был опыт работы с данным форматом, я делал визуализацию к курсачу по системам массового обслуживания (смайлики бегали в кассу и иногда скапливались в очереди).

Для начала хотел бы вам сказать, что моя специализация — это Backend, но версткой и клиентской частью приходится заниматься постоянно, особенно в своих проектах, которые я делаю в одиночку. Уже давно стало негласным правилом то, что сайт должен быть удобен на всех устройствах, включая всё их разнообразие, особенно в век популяризации мобильного интернета. Благо, CSS3 позволяет это делать при помощи медиа-выражений (media queries). Но есть еще один способ, показавшийся мне более удобным. В зависимости от размера экрана, его ориентации, типа устройства, устанавливать глобальные стили тегу html (можно и другим элементам). А в CSS, отталкиваясь от этих классов, задавать особые стили для разных случаев. Так CSS станет более понятным и мы избавимся от использования медиа-выражений. Для этого нам и понадобится Restive.JS. Так как я человек-практик, да и полное описание лучше читать на сайте плагина, то в статье я ограничусь созданием адаптивной мини-страницы, в процессе которого, надеюсь, станет понятно, для чего всё это необходимо.

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

• Тестирование (jasmine_node)
• Покрытие кода тестами (istanbul)
• Сборка клиенткой части библиотеки (browserify)
• Автоматизированное тестирование клиента (phantomjs)
• Поиск утечек памяти (memwatch)

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

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

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

Поиск и якорь

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

Что ж, задание понятно. Приступаем.

Перевод статьи «JavaScript CustomEvent», David Walsh

С самого появления JavaScript, события были шлюзом ко взаимодействию пользователя в браузере. События сообщают нам не только о том, что происходит взаимодействие, но также вид взаимодействия, задействованные элементы и предоставляют методы для работы с событием. Создание и инициирование(triggering) кастомных событий всегда являлось более сложной задачей. С использованием JavaScript CustomEvent API, эта сложность может быть устранена. CustomEvent API позволяет разработчикам не только создавать кастомные события, но также инициировать их на элементах DOM, передавая данные по цепочке. Самое главное, что API максимально прост!

Предыстория

Все началось со слов «А сделай-ка xml выгрузку для AdWords», и тут понеслось. Как ни странно, но именно эта задача была выполнена довольно быстро, но дальше было интереснее. Как оказалось, в AdWords появилась возможность писать скрипты (javascript) по автоматизации процесса ведения кампании и было бы все хорошо, если бы не лимиты по времени исполнения и xml. Да-да, именно xml. Я не знаю, почему всем так запал в душу этот формат, но мне он никогда не нравился. С 95% задачи я справился и, откровенно говоря, удовольствия я от этого не получил да и оставалось еще 5% задачи. Именно эти 5% я бросил уже не на xml, a на json и вот тут стало весело.

Больше конкретики

Давайте конкретизируем о чем вообще идет речь. Есть интернет магазин с ~25 000 наименований. Маркетологу нужна выгрузка, чтоб загнать это все в кампанию: создать группы обьявлений, сами обьявления, ключи и т.д. Как выяснилось дальше, то не важно какой формат входящих данных (xml/json), по этому я выбрал тот, что мне больше по душе — json.

Сразу оговорюсь: речь пойдет о гейм-девелопменте для души. Чтобы не стыдно было показать игру миру — придется попотеть подольше.

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

Мы рассказали про новый 2ГИС почти всё. Точнее, почти обо всём, с чем сталкивается пользователь. Настало время рассказать о том, что у него “под капотом”. Угадали, речь об API 2ГИС.

Если вы пользовались новым 2ГИС с момента его появления, вы уже видели 2GIS API 2.0 в деле. Сегодня же он вышел из статуса беты и стал доступен всем желающим. Отдельно хотим поблагодарить тех, кто участвовал в тестировании: ребята, спасибо, вы помогли сделать продукт именно таким, каким он получился. То есть более, чем неплохим.

Если вам не терпится попробовать новый API, то посмотрите сюда. Те, кто любит не только смотреть, но и читать, загляните под кат.

Аннотация

На хабре уже не раз делали описание работы с роутером TL-MR3020 в плане расширения его возможностей на базе прошивки openwrt. Я хочу показать ещё один вариант доработки роутера, при котором он может стать полноценным участником школьного учебного процесса. В статье приводится описание устройства и порядок работы с музыкальным программируемым школьным звонком «Школьник-4».

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

price.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')

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

На глаза попадались даже библиотеки, для разбивания чисел по разрядам, но я решил остановится на вышеупомянутой регулярке.
Повесил форматирование на keyup, что может быть сложнее?

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

К сожалению, не все пользователи используют самые современные браузеры, и зачастую нам приходится жертвовать читаемостью кода или использовать полифиллы, чтобы более-менее уравнять все браузеры и писать кроссбраузерный код.

Есть целый ряд способов исправить эту ситуацию:

lodash и underscore

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

_.chain([1, 2, 3, 4])
.map(function (item) {
    return item * item;
})
.filter(function (item) {
    return item < 9;
})
.value();

Я никогда не смогу ходить! Потому что я ползаю.
—Цитаты великих

    Меня всегда учили прежде всего здороваться, так что — здравствуйте. Сегодня я расскажу про творческие (и не очень) муки, страдания и боль, которые я испытывал на протяжении определенного периода своей жизни, который я обозначу как ПРОЕКТ. Сначала он был на JavaScript (node.js), а теперь он на Scala (Play). Сразу скажу, что я — один из самых субъективных негодяев в обозримой Вселенной, поэтому некоторые обороты, высказывания и иже с ними могут быть восприняты уважаемыми читателями весьма неоднозначно. Короче, я предупредил. И у меня еще одна небольшая просьба — если уж взялись прочитать статью, то не кидайтесь сразу строчить разоблачающие комментарии. Дочитайте. Я не Пастернак, правду говорю. И вообще, почти все спорные моменты так или иначе освещаю, объясняю.

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

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

Буду признателен за конструктивные замечания и предложения по опечаткам, переводу и/или оформлению. Приятного чтения!

Перевод статьи «Deb.js: the Tiniest Debugger in the World», Krasimir Tsonev

Мы, как разработчики, пишем код. Но мы не просто пишем код, мы также проверяем, работает ли написанный нами код. Мы тратим много времени и усилий, чтобы удостовериться, что наши программы делают то что долны делать. процесс отладки зачастую бывает болезненным. Особенно, если мы не используем подходящие инструменты. Чтобы справиться с данной проблемой, сегодняшняя заметка представляет Deb.js, маленькую JavaScript библиотеку, которая помогает при отладке в браузере.

Эта статья будет описывать решение одной конкретной задачи, а также на примере показывать как работает $transclude.

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

Сделаем директиву и назовем ее field. Использовать будем так:

<field title="Цвет" type="select" ng-model="selectedColor" options="color.id as color.name for color in colors"></field>