JavaScript *

Нет, не Intel. Intl — JavaScript объект, содержащий в себе функции форматирования чисел, дат и сравнения строк. Приходит, потому что 29 апреля Firefox, последний из популярных браузеров, не поддерживающий Intl, обновляется до 29 версии, в которой поддержка интернационализации будет включена.

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

Что же даёт Intl JS программисту?

Сегодня мы посмотрим на то, как можно использовать директивы ngShow и ngHide в Angularjs.

Зачем они нужны

ngShow и ngHide позволяют отображать или скрывать различные элементы. Это помогает при создании Angular-приложений, так как наши SPA, скорее всего, будут иметь много частей, которые, в зависимости от состояния нашего приложения необходимо скрывать или показывать.

Большим преимуществом этих директив является то, что нам нет необходимости скрывать или показывать элементы при помощи CSS или JavaScript. Это все обрабатывает старый добрый Angular.

Использование

Чтобы использовать ngShow или ngHide, нужно просто добавить директиву к элементу, который вы хотите показать или скрыть.

Вступление

Возможность асинхронной работы с помощью callback-функций(далее просто возвращаемых функций) — отличительная особенность JavaScript. Использование асинхронных возвращаемых функций позволяет вам писать событийно-ориентированный код, но так же добавляет кучу проблем, ведь код перестает выполняться в линейной последовательности.

К счастью, теперь в Chrome Canary DevTools вы можете отслеживать весь стек вызовов асинхронных функций в JavaScript!

Про директивы много написано, но мало о том как писать их правильно. Поделюсь опытом.

Хорошо написанная директива должна

• решать одну задачу
• легко расширяться
• не конфликтовать с другими директивами

Разберем каждый пункт на примере поля для ввода пароля (думаю, всем знакомо поле с глазиком)

<input ng-model="user.password"
       ng-minlength="6"
       form-password
       form-error="Не менее 6 символов">

Сколько директив используется?

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

Bitcore

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

Валидация биткоин адреса:

var bitcore = require('bitcore');
var Address = bitcore.Address;

var addr = new Address("1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa");

console.log(addr.isValid());

Два дня назад Microsoft представил JavaScript'овую UI-ориентированную библиотеку для кроссплатформеной разработки — WinJS, который, хоть и существует достаточно давно, но как отдельный «сет» вне привязки к Windows, был представлен только 02.04.2014.

http://dailyjs.com/2014/04/03/winjs/
http://blogs.windows.com/windows/b/buildingapps/archive/2014/04/02/extending-platform-commonality-through-universal-windows-apps.aspx
https://github.com/winjs/winjs

И вот что интересно…

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

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

Бренден Айк был вынужден покинуть пост руководителя (CEO) компании Mozilla. Решение принято в свете травли, устроенной представителями сексуальных меньшинств, недовольных тем, что Бренден Айк был приверженцем традиционных взглядов на семейные отношения. Травля дошла до того, что некоторые подконтрольные ЛГБТ сайты, в том числе один из крупнейших сайтов знакомств (OKCupid), стали блокировать доступ пользователей Firefox, предлагая сменить браузер, так как Бренден Айк шесть лет назад пожертвовал тысячу долларов на продвижение поправки в конституцию штата Калифорнии, определяющей брак только как союз между мужчиной и женщиной.

Всем привет!
Хотелось бы рассказать вам историю создания одного простенького развлекательного сервиса по записи gif’ок с веб-камеры при помощи HTML5 и JS. О том как решение на коленке на базе опенсорсных решений в одночасье произвело пусть хоть и маленький, но всплеск популярности волны от которого уже на протяжении полугода приносят небольшое количество посетителей которым полезен этот сервис.

А началось все просто

В конце лета обычным рабочим днем бороздя просторы GitHub я наткнулся на довольно интересный скрипт (facetogif) на нативном JS и HTML5 позволяющий записывать ролики с веб-камеры в gif-анимацию. Была приложена даже рабочая демка заливающая готовые ролики на сервис imgur или позволяющая сохранить их сразу на жестком диске.
Эта идея показалась мне очень интересной и я решил с небольшими переделками реализовать ее в виде самостоятельного сервиса.
Сказано — сделано. В тот же вечер я форкнул репозиторий, зарегистрировал домен «вгиф.рф», поднял VPS (самый дешевый тариф за 5$) на DigitalOcean и написал простейший скрипт на php складирующий ролики прямо там на сервере.
Для экономии ресурсов на сервер установил только Nginx и PHP-FPM.

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

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



Кошмар, товарищи!.. Как по мне, так здесь бóльший беспорядок в очерёдности строк/столбцов.

Когда я только-только начал играться с Node.js, для меня существовала лишь одна вещь, которая доставляла мне дискомфорт. Занятно, но я говорю сейчас о module.exports. Говоря занятно, я намекаю на то, что это, всё-таки, одна из фундаментальных частей Node.js и она достаточно проста. Сейчас же, оглядываясь назад, я не могу объяснить почему меня это так стопорило… Просто помню, что этот момент был для меня не очевиден. Ну и, полагаю, что я один из тех многих, кто встретив его разок-другой, сначала только путался, прежде чем написал что-либо применив его.

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

var x = 5;
var addX = function(value) {
  return value + x;
};

Привычный доступ к переменной x и функции addX из другого файла невозможен. Это никак не связано с использованием var. Дело в том, что Node состоит из блоков называемых модулями, и каждый отдельный файл по своей сути — отдельный блок, чья область видимости изолирована от других таких же блоков.

Каждый программист должен написать свою cms, framework, mmorpg. Именно этим мы и займемся.
Демо

Иногда возникают ситуации, когда необходимо написать скрипт или приложение, взаимодействующее с каким-либо сервисом. Многие крупные сайты предлагают разработчикам свое API, которое они могут использовать в своих проектах. Однако у каждого сервиса свои функции и способы работы с API. Потому нередко сложно начать использовать сторонние API в своих проектах.

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

Сегодня мы выпускаем новую версию нашего продукта. COLT 2.0.
Данный релиз будет интересен JavaScript разработчикам.

Главные новости. Коротко

Поддержка node-webkit, поддержка работы с удаленными или локальными серверами (live-proxy). Консольная версия COLT (запуск без UI на сервере). Поддержка Angular. Новый механизм HTML доставки. Улучшение работы с Sublime Text (JSDocs и другое). Улучшение производительности. Новый интерфейс на node-webkit. Улучшена поддержка Linux. Новый демо режим (как в Sublime). Значительное уменьшение размера дистрибьютива.

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

В комментариях к посту про Underscore/Lo-Dash я упомянул, что среди библиотек, расширяющих стандартную библиотеку JavaScript, я предпочитаю SugarJS, который, в отличие от большинства аналогов, работает через расширение нативных объектов.

Это вызвало горячую дискуссию о том, допустимо ли расширять нативные объекты. Меня очень удивило, что практически все высказавшиеся выступили против.

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

В этом материале разбираются подводные камни JavaScript, известные и не очень, а также предлагаются методы защиты. Поэтому я думаю, что статья будет интересна и полезна любому JS-разработчику, независимо от его отношения к проблеме расширения нативных объектов.

Передаю слово Andrew Plummer.

---

Итак, Sugar — библиотека, которая модифицирует нативные объекты JavaScript. Подождите, разве это не во зло? — спросите вы, — вы что, не извлекли урок из горького опыта Prototype?

По этому поводу существует много заблуждений. Sugar избегает подводные камни, о которые спотыкался Prototype, и фундаментально отличается по своей сути. Однако этот выбор — не без последствий. Ниже разобраны потенциальные проблемы, вызываемые изменением нативных объектов, и изложена позиция Sugar насчет каждой из них:

1. Модификация объектов среды
2. Функции как перечисляемые свойства
3. Переопределение свойств
4. Конфликты в глобальном пространстве имен
5. Допущения насчет отсутствия свойств
6. Соответствие спецификации

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

FastClick.js

Nota Bene. Практически всегда страница в браузере на вашем тач устройстве реагирует недостаточно быстро. Все из-за задержки в 300ms, чтобы убедиться, что это не double tap. FastClick.js — это полифил, который избавляет пользователей вашего сайта от этой задержки.

Кстати, это репозиторий от разработчиков известнейшего Financial Times и у них же есть еще один полезный проект на GitHub — ftscroller, с помощью которого легко создать адаптивный скроллинг и мульти-скроллинг для любого эленмента.

React — это JavaScript библиотека для создания пользовательских интерфейсов от Facebook. Она была разработана «с нуля», с упором на производительность. В этой статье я расскажу вам о diff-алгоритме и механизме рендеринга, который использует React, что позволит вам оптимизировать ваши приложения.

Diff Алгоритм

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

var MyComponent = React.createClass({
  render: function() {
    if (this.props.first) {
      return <div className="first"><span>A Span</span></div>;
    } else {
      return <div className="second"><p>A Paragraph</p></div>;
    }
  }
});

В любой момент времени вы можете описать, как будет выглядеть ваш UI. Важно понимать, что результат рендеринга не является фактическим DOM деревом. Это всего лишь легковесные JS объекты, которые мы называем «виртуальный DOM».

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

Что же, в последнее время, в своей работе я во всех проектах задействую lodash (кому-то может больше нравиться underscore). Для меня это, фактически, — стандарт. В очередной раз пробегая глазами API, я решил составить для себя шпаргалку в виде: «название функции» — «краткое описание». Так удобно освежать API в памяти. Может кому пригодится.

Приветствую, хабражители!

Сегодня я хочу рассказать вам про сервис, который обнаружил буквально недавно — Dripstat. Он позволяет установить на локальную JVM специальный java-агент, который собирает статистику работы сервера приложений и отправляет на сайт, где с ней можно детальнее ознакомиться.

— Ну какие сервисы мониторинга? Сегодня суббота! — скажете вы, и будете правы. Более того, я даже поддержу эту мысль и в данной заметке расскажу как раз об обратной, развлекательной, стороне медали, и чуть-чуть о программировании на JS.



Итак, приглашаю дочитать тех кто заинтересовался.