Обновить
128K+

JavaScript *

Прототипно-ориентированный язык программирования

242,19
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Date.prototype.getTimezoneOffset — различие возвращаемых значений в разных браузерах

Время на прочтение2 мин
Охват и читатели7.5K
При реализации задачи таймера обратного отсчёта столкнулся с одним «сюрпризом», а именно методом getTimezoneOffset, который отдавал то 3 часа, то 4 часа разницы. Этим хотел бы и поделиться.
Читать дальше →

Создание кроссплатформенного Smart TV приложения на базе библиотеки SmartBox для Samsung, LG, Philips и других

Время на прочтение16 мин
Охват и читатели123K
Ввиду живого интереса к прошлой статье о библиотеке Smartbox, которая призвана стать основой для любого кроссплатформенного SmartTv приложения, я решили описать, как же создать такое приложение разом для трёх вендоров SmartTv устройств:

image
Как создать приложение. Как использовать библиотеку. Как запустить на устройствах и эмуляторах

Создаем тег Markdown с помощью Polymer/Web Components

Время на прочтение4 мин
Охват и читатели11K
К сожалению довольно сложно найти хорошие материалы по web-components на русском языке, поэтому мы с filipovskii_off решили перевести эту небольшую статью от Rob Dodson.

Эх… Markdown… Отличная штука! Я, честно говоря, не писал бы этот пост, если бы не Markdown. Много раз я пытался начать блог, но каждый раз находил процесс написания слишком ограниченным, как в GUI так и в HTML режиме WordPress. Markdown всё изменил для меня. По-моему, нам давно пора сделать его полноценной частью инструментария разработчика.
Сегодня я покажу вам, как создать тег Markdown с помощью Polymer, Web Components фреймворка от Google.

Github


Если хотите следить за ходом создания тега, хватайте код с Github.
Читать дальше →

Почему typeof null === 'object'?

Время на прочтение1 мин
Охват и читатели64K
Все JavaScript-программисты давно привыкли к тому, что typeof null === 'object'; // true, хотя фактически null — примитивное значение. Многие знают, что это баг, и лично Брэндан Айк это признает. Этот баг, вероятно, никогда не будет исправлен из-за необходимости сохранения обратной совместимости существующего кода с новыми версиями языка.

Интересна история того, как же это получилось. Она восходит корнями к первой версии языка, а именно — к тому факту, что значения переменных хранились в 32-битных ячейках в следующем формате:
29-31 бит: само значение;
1-3 бита: метка типа данных;

Было всего пять вариантов метки типа:
Читать дальше →

Вы можете обойтись без jQuery

Время на прочтение1 мин
Охват и читатели56K
jQuery — практически стандартная библиотека любого веб-разработчика. Если при разработке сайтов и веб-приложений почти никогда нет смысла отказываться от вылизанного до последнего байта библиотечного кода ради экономии нескольких десятков килобайт при загрузке, то при написании библиотек отказ от лишней зависимости выглядит куда соблазнительнее. Вполне может оказаться, что в ваш код достаточно включить всего пару десятков строк, реализующих одну или несколько функций jQuery. Да и вопросы совместимости и соответствия стандартам в современных браузерах стоят уже не так остро, как несколько лет назад.
Читать дальше →

Использование Audio API для создания вокодера

Время на прочтение14 мин
Охват и читатели22K
В прошлой статье мы немного познакомились с возможностями Audio API и написали простенький визуализатор сигнала. Теперь настало время копнуть поглубже и распробовать новые фишки API. Но нам нужна цель, к которой мы будем стремиться, и в данном случае нашей целью будет как следует поиздеваться над входящим сигналом и его характеристиками. Другими словами, мы напишем маленький вокодер.

Так как итоговый код получился довольно-таки большим, то в статье будет рассмотрены наиболее важные и интересные с точки зрения Audio API фрагменты. Итоговый результат вы конечно же сможете посмотреть на демке.

Читать дальше →

Простой вызов удалённых сервисных методов в одностраничных приложениях

Время на прочтение3 мин
Охват и читатели9.6K
В этой статье, я хочу поделиться своим подходом в организации клиент-серверного взаимодействия, в одностраничных браузерных приложениях с серверной частью на Java.

Сокращённо, я называю этот подход «Json Remote Service Procedure Call» — JRSPC. (Не очень благозвучно, возможно, но из песни слова не выкинешь.)

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

Например, на сервере, определение бизнес-метода выглядит так:

@Component("testService")
public class TestService{
    @Remote
    public String testMethod(Long userId, String role, boolean test,
            List<User> users, User user){    
            ...
           return "ok"; 
    }   
}    


а его вызов на клиенте — так:

var params = [userId, role, true, [{id:1, login:"111"},  {id:2, login:"222"} ], {id:3, login:"333"}]
Server.call("testService", "testMethod",   params,  sucessCallback, errorCallback, controlWhichWillDisabledUntilResponse);	


Больше, при определении метода, нигде, никакого кода не пишется.

Как это работает

Polyfill для обхода проблемы с браузерным автозаполнением форм

Время на прочтение1 мин
Охват и читатели9.2K
Год назад в репозитории AngularJS был создан issue #1460 «Form model doesn't update on autocomplete».

Браузер, при автозаполнении формы ранее сохраненными данными (например, вводим email — браузер заполняет пароль автоматически) никак не извещает javascript о новых данных в поле.
Читать дальше →

Три правила проектирования интерфейсов с высокоскоростным пользовательским взаимодействием

Время на прочтение9 мин
Охват и читатели40K
Эта запись о том, как увеличить скорость навигации и взаимодействия пользователя с интерфейсом, не прибегая к оптимизациям вычислений и рендеринга. Рекомендации касаются приложений, где сервер используется только для получения данных, а вся логика интерфейса находится в самом приложении. Эта запись о преимуществе клиентских приложений над приложениями с плохо разделённой логикой, представлением и данными.

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

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

  1. Вычисления не должны блокировать взаимодействие с интерфейсом и его рендеринг — пользователь всегда должен иметь возможность указать на фокус своих интересов.
  2. Страница объекта, к которому обратился пользователь, должна отображаться мгновенно, не дожидаясь загрузки данных, в которых нуждается объект.
  3. Запросы в сеть не должны уходить одной большой группой, не должны отправляться сразу; должны откладываться на небольшое время, складываться и приоритезироваться в случае необходимости.


Изложенная в этой заметке информация — это мой практический опыт проектирования и разработки интерфейса моего приложения для поиска и прослушивания музыки seesu.me. Приложения, в котором гармонично комбинируются огромные пласты данных из разрозненных сервисов, таких как last.fm, вконтакте, ex.fm, hypem.com, soundcloud.com, discogs.com, youtube.com


Читать дальше →

LiveReload в очень постороннем браузере

Время на прочтение3 мин
Охват и читатели4.8K
Заморочился я автообновлением странички в браузере на таскаемом с собой iPad при разработке NodeJS/ExpressJS-приложений, чтобы видеть все изменения на лету.
Под катом — как очень просто сделать из мобильного гаджета средство живого просмотра разрабатываемых веб-приложений.
Читать дальше →

Repeatable, еще один способ рендерить списки

Время на прочтение4 мин
Охват и читатели5.3K
(из серии «малая механизация web страниц»)

Что такое Repeatable?


Repeatable это способ вывода (популяции) всякого рода списков, таблиц и пр. по массивам данных. Данный механизм
использует шаблон описанный в самом коде разметки (в отличие от, скажем, {{mustache}} templates).

Поддерживаются выражения и условное включение. И всё это в 90 строках кода.

Repeatable функиональность есть в каждом «взрослом» web framework'е. Но если вы не хотите по тем или иным причинам завязываться с монстрами то вот вам механизм который, что называется, есть не просит.

Пример


Скажем есть такие данные:
var data = [
       { name: "Olga", age: 20, email: "aaa@example.com" },
       { name: "Peter", age: 30, email: "bbb@example.com" },
       { name: "Ivan", age: 15, email: "ccc@example.com" },
    ];

И нам нужно из вывести как-то так:
<ul id="people">
    <li><a href="mailto:{{this.email}}">{{this.name}}</a> <b if="this.age > 18">18+</b> </li> 
    <li>No data available</li>
</ul>

Первый <li> собственно и есть шаблон записи. Для каждой записи во входном наборе этот элемент будет повторен с подстановками и гуляшшыми девами. Второй <li> будет выведен если Repetable «накормить» пустым массивом.

Если у нас это все описано то собственно популяция нашего списка это одна строка:
var list = $("ul#people").repeatable(); // declaring the repeatable
    list.value = data; // that's data population, sic!

Вот живой пример.
Читать дальше →

10+ полезных jQuery сниппетов на каждый день

Время на прочтение5 мин
Охват и читатели86K


Спустя годы библиотека jQuery стала неотъемлемой частью в работе каждого web-разработчика. Ведь она простая в использовании, быстрая и имеет очень широкие возможности. В этой статье я собрал список из более чем десяти сниппетов, которые вы можете свободно брать для использования. Их очень легко адаптировать под нужды ваших собственных проектов.
Читать дальше →

Кроссплатформенное Smart TV приложение в одном экземпляре. Библиотека SmartBox для Samsung, LG, Philips, STB Mag 200/250 и других

Время на прочтение4 мин
Охват и читатели71K
Копаясь в памяти своего неискушённого идеальным миром мозга, я, припоминаю, как два года назад начиналась наша история по разработке приложений для SmartTv. Если коротко, то это был АД!!! богатейший опыт.

image


Однако, хотелось бы получить этот опыт сразу, не наступая на недокументированные грабли, разложенные по всей технологии, и специальные детские грабли разложенные каждым вендором отдельно. Но как говорится «c'est la vie» и нам пришлось пробиваться сквозь тернии к звёздам!

В итоге мы получили кроссплатформенную расширяемую библиотеку для всех SmartTv.
Описание, демки, скрины, видео данной библиотеки

Ближайшие события

Keypress 2.0.0

Время на прочтение2 мин
Охват и читатели19K
Семнадцать дней назад (19 января 2014 года) вышла новая версия (2.0.0) джаваскриптовой библиотеки Keypress, предназначенной для удобного программирования реакций браузера на события, поступающие от нажатий (и от отпусканий) клавиш на клавиатуре.

Опубликованный на Гитхабе список изменений позволяет уверенно огласить вот что: важнейшим из достоинств новой версии стала возможность ловить события не только во всём окне в целом, но и для одного или нескольких отдельных элементов DOM. Теперь и при программировании различающихся реакций у различных элементов на веб-страницах мы можем с удобством прибегнуть к библиотеке Keypress вместо тех её более ранних и более популярных аналогов (например, jQuery.Hotkeys), которые уступают Keypress по богатству возможностей.

[Keypress]

Возможности же эти вот каковы:

  • Реакция на нажатие и отпускание одной или нескольких клавиш. Поддерживаются синонимы кросс-платформенные (например, "meta" означает "cmd" или "ctrl" в зависимости от системы) и шифтовые (например, "@" означает сочетание Shift и двойки).
     
  • Программируемые сочетания клавиш могут включать в себя не только классические модификаторы ("meta", "alt", "option", "ctrl", "shift", "cmd"), но и какие угодно другие клавиши. Например, программируя WASD-управление пошаговою бродилкою, нетрудно достигнуть того, чтобы нажатие и отпускание клавиши «W» означало шаг вперёд, но «W» и «D» совместно — шаг по диагонали вперёд+направо.
     
  • Возможно указание сочетаний клавиш, состоящих не из одновременных, а из последовательных нажатий клавиш. Это такие сочетания, как код Конами, например.
     
  • Специальные «считающие» комбинации позволяют программировать такие ситуации, в которых нажатие основной клавиши обнуляет некоторый счётчик, а каждое нажатие дополнительной клавиши (при удержании основной) увеличивает этот счётчик на единицу. David Mauro (автор Keypress) приводит в пример такое сочетание Tab+Space, при котором нажатие Tab тотчас же открывает первую вкладку в некотором наборе вкладок, а каждое нажатие на пробел (при удержании Tab) перебрасывает на следующую вкладку — на вторую, на третью, на четвёртую…

Для каждой одиночной клавиши (или для комбинации) возможны дополнительные настройки. Эти настройки позволяют при необходимости сделать вот что:

Читать дальше →

Беседа с Артемом Захарченко, JavaScript Developer'ом Pics.io

Время на прочтение1 мин
Охват и читатели5.4K
Artem Zakharchenko

Ребята из подкаста «Откровенно про IT-карьеризм» пригласили к себе нашего ведущего фронтендщика Артёма Захарченко. Что из этого получилось — слушаем на их сайте.

В 141-м выпуске подкаста:
  • Про во’IT’и
  • Аутсорсовая империя
  • Gameloft
  • Образование
  • JavaScript
  • JS Конференции
  • Изучение JS
  • Pics.io

Есть также прямая ссылка на файл подкаста.

Генератор космических кораблей из арматуры

Время на прочтение35 мин
Охват и читатели19K
Доброго времени на вашей стороне планеты, Хабр.
Сегодня на хабре прямо день космических кораблей, столько интересных статей про последнюю битву в EVE Online, ну а я в свободное время я продолжаю делать свою двухмерную космическую игру и после длительного перерыва взялся за генератор кораблей. Пусть корабли и не такие шикарные как в EVE, зато свои.



Кому интересно как такой рендер на канве сделать, прошу под кат.
Читать дальше →

О безопасности в Meteor и не только (часть 2)

Время на прочтение9 мин
Охват и читатели9.1K
Если вас не испугала первая часть, предлагаю продолжить разговор о механизмах безопасности Meteor. Начав с loginToken, выдаваемого клиенту, правил allow/deny при модификации базы данных клиентом, коснемся доверенного и недоверенного кода, серверных методов, использования HTTPS и пакета force-ssl, пакета browser-policy (Content Security Policy и X-Frame-Options), и закончим встроенным механизмом валидации данных (функция check() и пакет audit-arguments-check).
Читать дальше →

О безопасности в Meteor и не только (часть 1)

Время на прочтение8 мин
Охват и читатели9.9K
Для разработки приложений фреймворка Meteor существует некоторое число приемов и средств, предназначенных для обеспечения безопасности. В первой части мы поговорим о более известных вещах — скрытии серверной части кода, пакетах autopublish / insecure, скрытии полей коллекций при публикации и встроенной системе учетных записей, заглянув внутрь коллекции Meteor.users. Во второй — про loginToken, выдаваемый клиенту, правила allow/deny при модификации базы данных клиентом, доверенном и недоверенном коде, серверных методах, HTTPS, пакете force-ssl и пакете browser-policy (Content Security Policy и X-Frame-Options), встроенном механизме валидации данных (функция check() и пакет audit-arguments-check).
Читать дальше →

Видеозаписи докладов конференции Happу New Front-End: О фронтенде по-новому

Время на прочтение2 мин
Охват и читатели16K


Команда проекта GeeksLab 18 января 2014 года в Одессе провела конференцию Happу New Front-End: О фронтенде по-новому!. В рамках конференции были подняты темы современной верстки, разработки фронтенда на чистом JavaScript, а также использования различных CSS и JavaScrpt фреймворков для построения фронтенда веб-проектов. С докладами выступили представители таких компаний как: rollApp, Universal Mind, DataArt, Ciklum, Elis, R2Crew, RootUA Media, WMSoftware, Electric Cloud. Презентации и видеозаписи докладов под катом.
Читать дальше →

О применении $.Deferred в работе с асинхронными задачами

Время на прочтение15 мин
Охват и читатели22K
Привет всем!

В данной статье я хотел бы поделиться с вами соображениями о том, как на практике можно использовать механизм работы с асинхронными процессами, предоставляемый библиотекой jQuery с версии 1.5 под названием deferred, «отложенный» (jQuery.Deferred), а также со связанными объектами и методами.

Разумеется, уже написан не один десяток статей на тему работы с парой deferred/promise. Своей же я задался целью предоставить такой набор знаний, который дал бы новичку, во-первых, возможность забыть о своих страхах перед непонятным и сложным и, во-вторых, сделать еще один шаг к написанию понятного и хорошо структурированного кода, работающего с асинхронными процессами. Я бы хотел сосредоточить свое и ваше внимание на проблемах, которые легко разрешаются ипользованием deferred, на предпосылках и типовых схемах использования этого объекта.
Читать дальше →