JavaScript *

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

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

Buzz.js

В последнее время в интернете все чаще и чаще встречаются проекты, где различные интерфейсные элементы сопровождаются определенными звуками. Я бы даже сказал, что UX/UI в вебе переходит на новую ступень эволюции. А Buzz.js одним из первых готов помочь вам в озвучке вашего интерфейса. Это библиотека для работы с HTML5 Audio API с рядом подходящих обработчиков событий.

var mySound = new buzz.sound( "/sounds/myfile", {
    formats: [ "ogg", "mp3", "aac" ]
});

mySound.play()
    .fadeIn()
    .loop()
    .bind( "timeupdate", function() {
       var timer = buzz.toTimer( this.getTime() );
       document.getElementById( "timer" ).innerHTML = timer;
    });

На фото: Том Круз в фильме Лучший Стрелок

В этой статье мы рассмотрим взаимодействие Single Page HTML Application с облачной MongoDB через JavaScript. В качестве MongoDB-as-a-Service я возьму Mongolab. Стоимость развернутой MongoDB, с объёмом в 500мб, обойдется нам всего-лишь в 0 USD.

Для того, чтобы создать todo-лист, нам не потребуется бекенд. Взаимодействовать с Mongolab мы будем через REST API, а обертку для него в клиентской части мы напишем не прибегая к помощи сторонних JavaScript-фреймворков.

Меня всегда привлекали отзывчивые, динамичные интерфейсы, созданные на Javascript, но каждый раз, пытаясь погрузиться в изучение этого языка, я превращал свой мозг в кашу и ел её оставлял это до «лучших» времен, возвращаясь к статичным страницам на клиенте и PHP на сервере. Время шло.

Год назад, шатаясь по страницам сети, я наткнулся на статью про Coffeescript. Хм, интересно… Пары примеров кода было достаточно, чтобы заразиться идеей где-то его применить, но что то меня напрягало — хотелось мне какой-то фреймворк, который сам заботился бы о компиляции coffee в js. Так я нашел Rails, а вместе с ним ruby, gems, sass и кучу всего того, что привело меня в экстаз критическую точку невозврата…

Доброго времени суток, господа! Меня зовут Денис, и в этой статье я хочу поделиться с вами своими взглядами на разработку front-end'a и небольшой историей изобретения одного велосипеда, а вот очередного или нет — судить вам.

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

Р. Брэдбери

UPDATE: Parse не будет работать к 2017 году.

Введение

В статье описан Backend-as-a-Service подход к хранению и обработки данных. Рассказаны преимущества и недостатки представителя такого подхода — сервиса parse.com. Коротко представлен сервис аутентификации пользователей через соц. сети uLogin. Основное назначение — показать, как эти два сервиса могут взаимодействовать, чтобы проект не требовал регистрации пользователей по логину и паролю, но в то же время сохранилась возможность авторизации пользователей к действиям над объектами.

О BaaS и parse.com

Parse.com — один из самых популярных провайдеров backend-as-a-service (BaaS). BaaS подход позволяет не поднимать свой сервер для хранения и обработки данных приложения. Это используется в мобильных разработках и в обычном вебе. Parse.com имеет свои SDK под несколько платформ, в том числе серверных. Но я расскажу о javascript.

Возможность работать с базой данных через javascript, не поднимая свой сервер, открывает отличные возможности, например, для Single page application (SPA), которое можно хостить на Github Pages, Bitbucket и многих других бесплатных. Первый вопрос, который у меня возник, когда я услышал про работу с БД из клиентского кода — это разграничение прав доступа, так как ключи общеизвестны. Изучив документацию parse.com, я выяснил, что для этого используется авторизация пользователей. Каждый пользователь имеет свой логин и пароль. SDK имеет методы регистрации нового пользователя по логину и паролю, аутентификации по этим же данным. Можно добавить email, при этом сам parse.com умеет отправлять настраиваемые письма для верификации email.

В статье речь пойдет о технологии WebSocket. Точнее не о самой технологии, а о том, как ее можно использовать. Я давно слежу за ней. Еще когда в 2011 году один мой коллега прислал мне ссылку на стандарт, пробежав глазами, я как-то расстроился. Выглядело настолько круто, и я думал, что в момент, когда это появится в популярных браузерах, я уже буду планировать, на что потратить свою пенсию. Но все оказалось не так, и как гласит caniuse.com WebSocket не поддерживается только в Opera Mini (надо бы провести голосование, как давно кто-либо видел Opera Mini).

Кто трогал WebSocketы руками, тот наверняка знает, что работать с API тяжело. В Javascript API достаточно низкоуровневый (принять сообщение — отправить сообщение), и придется разрабатывать алгоритм, как этими сообщениями обмениваться. Поэтому и была предпринята попытка упростить работу с вебсокетами.

Так и появился WSRPC. Для нетерпеливых вот простое демо.

Передохнём от верстки всяких пользовательских интерфейсов и просто порисуем на CSS. Рисовать будем такую вот сцену:



Смотреть на jsfiddle.

В статье я попробую описать пошаговое создание этой сцены.

Привет, Хабр!

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

Я расскажу об инструменте для работы с событиями, который изначально являлся частью конструктора, но затем был вынесен в отдельный плагин для jQuery — jquery-behavior.

Плагин использует функционал jQuery, дополняя его следующими возможностями:

• Работа с раздельными группами обработчиков событий. Для этого используются контроллеры событий.
• Можно отключить все обработчики событий контроллера разом, не перечисляя их.
• Слежение за срабатываниями обработчиков событий.
• Можно узнать точное количество вызовов каждого из них.
• Можно приостанавливать работу отдельных обработчиков событий, или всего контроллера разом.
• Возможность получить полный перечень обработчиков событий конкретного элемента, обработчиков событий с определенным пространством имен или просто всех обработчиков событий контроллера.

Пишем драйвер поддержки графовой базы данных Neo4j для Meteor

В Meteor любая работа с даными связана с двусторонней реактивностью. На данный момент 100% реактивностью обладают встроенная в Meteor MongoDB и Redis (оба драйвера разработаны в стенах Meteor), частично реактивность реализована для MySQL и MSSQL (сторонними разработчиками).

Для вышеуказанных баз данных реактивность реализована посредством observer'ов, которые сообщают где, как, когда и какие данные изменились, для того чтобы драйвер, обслуживающий связь [данные <-> представление], знал какие данные и у каких Клиентов обновить. Neo4j лишен каких-либо watcher'ов и observer'ов, но это нас не остановило. Как мы вышли из данной ситуации и зачем нам нужен Neo4j читайте под катом.

В последние десять лет мой стандартный ответ на вопрос «с какого языка начинать знакомство с программированием?» был прост — Python. Теперь я меняю свою рекомендацию. Python все еще хороший язык. Он позволяет сфокусироваться на задаче и не волноваться об архитектурных заморочках. О штуках, которые опытные программисты считают важными, позабыв о том, каково это — быть абсолютным новичком. Сам язык растворяется на фоне, и вместо объяснения возможностей и философий, уроки посвящены генерации музыкальных звукорядов, вычислению расстояний на стадионе в зависимости от беговой дорожки, или написанию автоматического игрока в покер или ятцы.

И вот в один прекрасный день студент задаст невинный вопрос: «А как сделать так, чтобы симулятор покера был не в командной строке, а в окне, с кнопкой для выдачи следующих карт?»

картинка для привлечения внимания:
«Acorn» — игра, над которой мы работаем,
в ней используется скрипт из этого урока.

В уроке быстро и просто реализуем примерно три задачи:

• 1а. Плавное затухание громкости эмбиента (или саундтрека) предыдущего уровня при переходе на следующий.
  1б. Далее, этот «звук» удаляется через заданное количество времени.
• 2. Плавное возникновение (усиление громкости от 0 до 1) эмбиента после загрузки уровня.
• 3. Кроссфейд эмбиента с самим собой — звуки/саундтрек уровня, за ~10 секунд до своего финала, должны плавно затухать и плавно переходить с усилением в собственное начало.

Доброго дня, друзья!

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

Для того, чтоб жизнь мёдом не казалась, ограничим себя небольшим подмножеством языка JavaScript, а именно, будем использовать только анонимные функции от одного аргумента. Больше нам ничего не потребуется (ну почти).

Начнем с определения факториала, и посмотрим, что нам понадобится в процессе решения задачи:

var fact = function (n) {
  if (n === 0) return 1;
  return n * fact(n - 1);
};

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

Готовы?

Статей по использованию сервисов распознавания речи в asterisk от Google и Яндекса на Хабре уже есть несколько. Но всегда хочется сделать что-нибудь свое и как-нибудь по-своему.

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

Короткое видео с демонстрацией работы:

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

По информации СМИ, Facebook справился с угрозой и заблокировал распространение вредоносных сообщений. Однако позже мы обнаружили дальнейшее распространение ряда вредоносных ссылок и решили разобраться в том, как работает эта атака, чтобы защитить от неё пользователей Яндекс.Браузера.

СМИ сообщали, что виной всему было вредоносное расширение YouTurn для браузера Chrome, которое пользователю предлагалось установить, если он переходил по ссылке, полученной от своего зараженного друга. Но мы выяснили, что в рамках этого заражения использовалось несколько расширений. YouTurn, кстати, 16 декабря уже было удалено из ChromeStore.



Все они были одинаково устроены, но распространялись под разными названиями и в разное время через фишинговые ресурсы, похожие на страницу Facebook и размещённые на Amazon S3. Интересно, что помимо механизмов распространения они подгружали во все вкладки браузера рекламные баннеры с сомнительным содержимым и предоставляли доступ к аккаунту зараженного пользователя внутреннему приложению с некоторым ID, которое Facebook тоже заблокировал.

Итак, таким ли безобидным был этот «вирус», и что в нём было нового?

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

Доброго времени суток, решил расширить познания в js фреймворках, выбор пал на Meteor.JS, не зная с чего начать, стал гуглить. Нашёл хорошую статью на Хабре тут.



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

Такой движок JS, как V8 (Chrome, Node) от Google, заточен для быстрого исполнения больших приложений. Если вы во время разработки заботитесь об эффективном использовании памяти и быстродействии, вам необходимо знать кое-что о процессах, проходящих в движке JS браузера.

Что бы там ни было — V8, SpiderMonkey (Firefox), Carakan (Opera), Chakra (IE) или что-то ещё, знание внутренних процессов поможет вам оптимизировать работу ваших приложений. Но не призываю вас оптимизировать движок для одного браузера или движка – не делайте так.

Задайте себе вопрос:
— можно ли что-то в моём коде сделать более эффективным?
— какую оптимизацию проводят популярные движки JS?
— что движок не может компенсировать, и может ли сборка мусора подчистить всё так, как я от неё ожидаю?



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

Содержание:

• I. Перебор настоящих массивов
  
  1. Метод forEach и родственные методы
  2. Цикл for
  3. Правильное использование цикла for...in
  4. Цикл for...of (неявное использование итератора)
  5. Явное использование итератора
  
  
• II. Перебор массивоподобных объектов
  
  1. Использование способов перебора настоящих массивов
  2. Преобразование в настоящий массив
  3. Замечание по объектам среды исполнения
  
  

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

Представляю вам список YouTube-каналов для обучения веб-разработке. Список доступен на гитхабе, там он будет пополняться и редактироваться. В планах — создание отдельной странички для фильтрации каналов по тегам и рубрикам.

Также хочу попросить вас о небольшой услуге: если вы знаете канал, не вошедший в список — опубликуйте ссылку на него в комментариях или отправьте pull request. Сообщество будет благодарно вам.

Под катом — текущая версия списка.

Элементарно! Но если бы мне показали подобную инструкцию раньше…

Задание

По запросу /profile без ключа отдаю шаблон login, если пользователь «не того», иначе отдаю шаблон на добавление newProfile или редактирование profile (editMode) своего профиля. А по запросу /profile/key отдаю шаблон на просмотр profile (not editMode) любого профиля; при этом userId не светится, и неверные ключи отвергаются на invalidProfile.

[исходник]