JavaScript *

Продолжаем дело первой статьи и пытаемся разобраться с тем, что же делает за нас jQuery, когда мы с помощью этой библиотеки создаем DOM-элементы.

В прошлом выпуске мы упомянули, что при передаче в jQuery вместо селектора html-строки, на основе нее функция parseHTML создаст соответствующие элементы и вернет их в привычном jQuery-объекте. Сейчас мы рассмотрим все это более тщательно и затронем кроме core.js еще manipulation.js и attributes.js (мельком).

По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.

У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.

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

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

В субботу у меня ближе к полуночи появилось свободное время и жгучее желание сделать игрушку под браузер, забавы ради и увеличения опыта для. С жанром определился довольно быстро: т.к. на MMORPG в этот раз у меня точно не хватило бы времени, я решил делать просто мясорубку. Минут 20 ушло на написание базового кода для управления игроком и его противниками. И тут встал вопрос — 2D или 3D (вернее так: Canvas/SVG или все же полноценный WebGL)?

Вчера был отличный топик, "История одного хабраспора", о создании «галактики» на HTML5 Canvas, который сам по себе да своими комментариями вдохновил меня на ответный код. Думал, до окончания документации, не писать новых вещей на Хабру, но, как видите, сорвался) Спасибо kibizoidus за это.

В топике вы увидите описание процесс создания звёздной системы на последней версии LibCanvas. Быстро, оптимизированно, кратко.

Webshell.io предназначен для создания прототипов и мэшапов на основе JavaScript API различных веб-сервисов. Что-то вроде IFTTT, но для программистов. С его помощью можно в интерактивном режиме писать запросы на JavaScript и CoffeeScript к клиентским и серверным API Google, Facebook, Twitter и многих других популярных сайтов и видеть их ответы в консоли, а так же создавать свои приложения, API которых, в свою очередь, будет доступен другим разработчикам. Webshell также поддерживает рендеринг HTML из шаблонов EJS.

Многие уже слышали о проекте WebRTC, некоторые даже используют его (или пытаются применять в существующих проектах), а кто-то злобно потирает руки, предвкушая постепенную расправу со Skype и Flash.

Погуглив в Хабре (хе-хе) я почему-то не нашел статей, которые углублялись в техническую сторону WebRTC, показывали бы примеры его использования.

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

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

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

    Не так давно, просматривая глубокой ночью достаточно интересную заметку о игре на основе JS/Canvas (со своими ошибками и заблуждениями, которые были и у меня, что уж греха таить, понастальгировал всласть), я наткнулся на очередную порцию откровенно холиварных комментариев, после прочтения которых мир за окном стал серым и безрадостным, еда потеряла вкус, а любимый чай оказался несладким. И в тот момент то ли звезды сошлись, то ли срочных и важных багов и фич на вчера стало немного меньше, но я решил ввязаться в спор с достаточно резкими тезисами и вступиться за любимую технологию, которую так откровенно поливали непонятно чем. Так бы и осталось все это на уровне беспредметного перебрасывания пакетов с доводами через забор, если бы в ту же ветку не решил написать RussianSpy, и не об абстрактных попугаях, которых легче переписать в 3D, а о вполне конкретной задаче. И промелькнувшая фраза «Могу прислать ТЗ...» плавно намекнула на то, что вечер обещает быть интересным.

Не так давно мне стало любопытно, насколько сносно современные браузеры поддерживают HTML5 и я не нашел лучшего
способа, чем написать простейший 2D платформер. Помимо удовольствия от разработки игрушки и улучшения навыков в использовании JavaScript, в ходе развлечения кропотливой работы был накоплен определенный опыт и эмпирическим путем были найдены основные грабли, на многие из которых мне пришлось наступить. В этой статье я попробую кратко и с примерами резюмировать то, что вынес для себя из проделанной работы. Желающих создать свое высокопроизводительное JavaScript приложение, эффективно работающее с графикой, прошу под кат.

На создание библиотеки для удобного форматирования чисел программиста и веб-дизайнера Адама Дрэйпера вдохновила аналогичная библиотека для даты и времени — moment.js. Numeral.js позволяет задавать число знаков после запятой, символы-разделители для дробной части и групп разрядов, формат представления валют, процентов, времени, аббревиатуры для миллионов, миллиардов, мегабайтов и т.п. Кроме того, можно восстанавливать числовые значения из существующего строкового представления. Библиотека распространяется под лицензией MIT.

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

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

Данный плагин для jQuery позволяет автоматически подбирать подходящую маску ввода на основе введённого начала телефонного номера. Это позволяет сделать ввод номера телефона на странице web-cайта более быстрым и безошибочным. Кроме того, разработанный плагин может быть использован в других областях, если правила ввода возможно представить в виде нескольких масок ввода.

Эта статья рассказывает о том, как создать проект с использованием БЭМ-технологий.
Мы шаг за шагом создадим страничку каталога товаров, пользуясь принципами БЭМ в CSS, возможностями писать декларативный JavaScript на фреймворке i-bem.js и с использованием шаблонизатора BEMHTML. Помогать делать всё это будут bem tools, в частности — инструмент для разработки bem server.



Важно: в статье нет особенных подробностей, её цель — получить проект максимально быстро. Текст, раскрывающий больше информации, пройдёт следующим постом.

Вебсокеты — это прогрессивный стандарт полнодуплексной (двусторонней) связи с сервером по TCP-соединению, совместимый с HTTP. Он позволяет организовывать живой обмен сообщениями между браузером и веб-сервером в реальном времени, причем совершенно иным способом, нежели привычная схема «запрос URL — ответ». Когда два года назад я присматривался к этому стандарту, он был еще в зачаточном состоянии. Существовал лишь неутвержденный набросок черновика и экспериментальная поддержка некоторыми браузерами и веб-серверами, причем в Файрфоксе он был по умолчанию отключен из-за проблем с безопасностью. Однако теперь ситуация изменилась. Стандарт приобрел несколько ревизий (в том числе без обратной совместимости), получил статус RFC (6455) и избавился от детских болезней. Во всех современных браузерах, включая IE10, заявлена поддержка одной из версий протокола, и есть вполне готовые к промышленному использованию веб-серверы.

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

В API Яндекс.Карт 2.0 есть набор стандартных элементов управления картой:



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

Для того чтобы создать собственный макет элемента управления, нужно разобраться в части архитектуры API. В данной статье проводится краткий обзор понятий, с которыми должен ознакомиться разработчик перед выполнением этой задачи и объясняется общий принцип взаимодействия логической и визуальной части элементов управления. Также рассматриваются три примера по созданию макетов – от простого к сложному.

Статья рассчитана на разработчиков, которые уже имели опыт работы с API Яндекс.Карт 2.0. Для знакомства с основными концепциями рекомендую прочитать руководство разработчика.

Французский разработчик Julian Garnier представил реализацию шахмат в 3D с использованием HTML/CSS3/JS, причем вся 3D-анимация выполнена с помощью CSS3.

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

Привет хабравчане!
Увидев мой проект в блоге компании Zfort Group (тут) я решил поделится с вами обзором про проект и его реализацией.

Идея: быстро создать базовый шаблон для дополнений хрома, включая конфиг в manifest.json.
Extensionizr.com построен как веб-приложение, и на выходе генерирует zip архив.
Всё происходит на стороне клиента с помощью Javascript, включая архивацию.