Обновить
256K+

JavaScript *

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

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

Яндекс карты для angular.js

Время на прочтение3 мин
Охват и читатели21K
image

Приветствую всех, уважаемые харбажители!
В данном посте речь идет о том, как подружить карты яндекса и javascript framework angular.js для их совместной работы. Можно, конечно, использовать и google map, но для стран СНГ их качество оставляет желать лучшего.
Немного погуглив, и не найдя готового решения, пришлось писать свое. Кому интересно, добро пожаловать под кат.
Читать дальше →

DSL на JavaScript для C++ или кодгенератор — это просто!

Время на прочтение8 мин
Охват и читатели8.5K
С добрым понедельником, хабровчане!

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

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

Простой слайдер изображений и контента на AngularJS

Время на прочтение3 мин
Охват и читатели25K
На сегодняшний день в сети есть много готовых решений, которые реализуют тем или иным способом смену слайдов. Большинство из них основаны на анимации через javascript. В этой статье хочу показать какие возможности открывает AngularJS в связке с CSS3. Перед собой я ставил задачу сделать минималистичный и простой модуль, который легко дописывать и видоизменять под свои нужды вплоть до создания собственных эффектов переходов слайдов.
Читать дальше →

Рецепт i18n. Основа — Babel, json с кофе и грант с hbs на свой вкус

Время на прочтение10 мин
Охват и читатели8K
В своем предыдущем посте я писал о том зачем и почему нужно было сделать pybabel-hbs, экстрактор строк gettext из шаблонов handlebars.

Чуть позже появилась необходимость извлекать так же из json.
Так появился pybabel-json.
pip install pybabel-json либо на github

Там использовался лексер джаваскрипта встроенный в babel, но нюансы так же имелись, но пост не об этом, написанное там менее интересное, чем было в hbs плагине и вряд ли нуждается в заострении внимания.

Этот пост о том, как же в целом выглядит полный набор для локализации, от и до, что делать с данными из БД, либо из другого не совсем статичного места.
От и до включает в себя:
(должен заметить — что ни один пункт не является обязательным, все это достаточно легко подключается к любому приложению только частично и по необходимости)

— Babel. Набор утилит для локализации приложений.
— Grunt. Менеджер задач(task-ов),
— coffeescript. В представлении не нуждается, весь клиенстский код написан на coffee, и из него тоже нужно извлекать строки.
— handlebars — темплейты
— json — хранилища строк
— Jed. gettext клиент для js
— po2json. Утилита для перевода .po файлов в .json формат поддерживаемый Jed-ом

А дальше будет много текста

Отчет о конференции IvBit

Время на прочтение2 мин
Охват и читатели1.4K
Представляем вашему вниманию небольшой отчет о конференции IvBit.
19-го октября 2013 г. в Текстильном институте ИВГПУ в рамках III Всероссийского фестиваля науки прошла конференция IvBit 2013.
Несмотря на то, а может именно из-за того, что Иваново расположено достаточно близко к Москве, у нас крайне слабо представлена жизнь IT-сообщества. Конференции, хакатоны и прочие скромные развлечения IT-специалистов нам почти недоступны. Конференции в ВУЗах? К большому сожалению, на них мало кто приходит, кроме самих студентов и их преподавателей. Поэтому было решено организовать и провести конференцию, посвященную исключительно IT-тематике. Для привлечения внимания оставлю здесь слайды презентации первого доклада:

Вашкевич В.В. Россия, Иваново, Альтернатива-Софт, Инженер-программист
«Platypus Platform: новое средство разработки клиент-серверных приложений на JavaScript»


Всех заинтересовавшихся тем, что же было дальше, прошу под кат.
Читать дальше →

Классический подход к управлению зависимостями в сравнении с RequireJS

Время на прочтение5 мин
Охват и читатели11K
Hello World,

Helios Kernel — это библиотека для управления зависимостями между javascript-модуями, реализующая «классический» подход, часто встречаемый в других языках и средах — с помощью функции include().

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

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

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

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

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

Internet Archive позволяет запускать Atari-игры и старое ПО прямо в браузере

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


Два года ушло у команды Internet Archive на разработку JavaScript-порта MESS-эмулятора, позволяющего запускать старые игры и ПО (типа первого редактора таблиц) прямо в современном браузере. По словам разработчиков, разработка позволяет запускать все, от Atari-игр до старого-старого ПО.

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

История одного Google Chrome расширения

Время на прочтение18 мин
Охват и читатели68K
В один прекрасный день, за пару часов до конца работы, мне приходит задача: «Нужно написать приложение для браузера, которое должно по клику пользователя отправлять данные со страницы на сайт клиента. Что за приложение и какой браузер — полностью на ваш выбор...».

Немного поразмыслив я пришел к варианту google chrome extension:

  • Crome использует Blink движок (до апреля 2013 года использовался WebKit), Blink является форком WebKit (а это Safari), так же не забываем новую Opera'у (хотя я все еще использую старую с bookmarks'ами). Таким образом, написав расширения для chrome, мы с минимальными переделками (а то и без них) сможем его портировать на еще 2 браузера
  • Нет опыта работы с API Google Chrome
  • Google все-таки компания добра :)


Когда мысли немного улеглись, первое что я сделал — это ввел в поиске харба "расширение Google Chrome". Увидев обширный вариант статей по данной теме, я со спокойной душой ушел домой полностью уверенный в том, что завтра с утра прочитав их, к концу рабочего дня дело будет 'в шляпе' (как же я тогда ошибался). Прочитав парочку их них я имел общее представление о том как это работает, но этого оказалось мало для воплащения моих идей. Что ж, приступим…
Читать дальше →

Несколько интересностей и полезностей для веб-разработчика (выпуск 6)

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

Zephir — Ze(nd Engine) Ph(p) I(nt)r(mediate). Зефир — это компилируемый высокоуровневый язык программирования, предназначенный для написания PHP расширений без использования C. Проект от создателей Phalcon (скомпилированный PHP MVC Framework). О Zephir на Sitepoint
   

JSDB.IO — большая и качественная база нужных скриптов/библиотек/фреймворков на JavaScript. Все распределено по категориям: Animation, Application, Audio, Video, Games и др. Дабы собрать все популярные .js воедино добавлю еще три ссылки: Microjs (множество маленьких полезностей до 5кб), а еще jsdelivr и cdnjs, которые позволяют добавлять собственные скрипты.

Snap.svg — продукт от Adobe Webplatform. Недавно я рассказывал про "достойного конкурента Raphaël" и в комментариях оспоривали эту фразу из за отсутствия поддержки такого же множества браузеров. В разработке Snap участвует автор Raphaël — Дмитрий Барановский, а причина создания новой библиотеки для работы с SVG — невозможность поддерживать все возможности SVG в старых браузерах.

At.js — очень юзабельный скрипт для автозаполнения (в демо используется Emojify). А еще есть более функциональная библиотека для автозаполнения — Typehead от Twitter.
$('.atwho-inputor').atwho({
  at: "@", data: ["one", "two", "three"],
});

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

Helios Kernel — include в джаваскрипте, теперь и для nodejs

Время на прочтение3 мин
Охват и читатели5.2K
Hello World,

Helios Kernel — это библиотека позволяющая описывать зависимости между javascript-модулями «в стиле include»:

// объявление зависимостей
include("path/to/library1.js");
include("../path/to/another/library2.js");

init = function() {
    // использование зависимостей
    library1.doSomething();
    ...
}


Я уже писал про Helios Kernel раньше, с тех пор проект переехал на гитхаб, а поводом к новому релизу стал тот факт, что весь платформо-зависимый код был выделен, и после некоторого допиливания тесты наконец прошил и под nodejs:



Поэтому теперь я могу написать здесь про библиотеку громкое слово «кроссплатформенная»

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

Создание виджета «Счет Live» использую PHP Web Sockets

Время на прочтение6 мин
Охват и читатели18K
Внедрение веб-сокетов позволяет веб-приложения обрабатывать данные в режиме реального времени, не прибегая к «хакам», таким как long-polling.
Одним из примеров применения, является отображение результатов спортивного матча. Даже сейчас, много сайтов, которые показывают эти данные используют Flash-приложения, т.к. Action Script позволяет общаться с сервером через сокет-соединения. Тем не менее, вев-сокеты позволяют сделать тоже самое используя только HTML и JavaScript. Это, мы постараемся сделать в данном руководстве, используя php-сервер.
image
Читать дальше →

JavaFX WebView (HTML/JS) — используем web практики для разработки desktop приложений

Время на прочтение7 мин
Охват и читатели43K
image
Базовым UI фреймворком для нашего приложения был выбрана JavaFX. JavaFX прекрасно показала себя. В этой же статье мы хотели сконцентрироваться на одном компоненте JavaFX — WebView.

При разработке нашего приложения — интерфейса COLT — мы использовали набирающий популярность среди девелоперов подход, когда часть компонентов UI реализуется на JavaScript/HTML.
Читать дальше →

IndexedDB — безлимитное хранение данных

Время на прочтение7 мин
Охват и читатели19K
Добрый день, уважаемое сообщество.
Для тех, кто не в курсе, что такое IndexedDB и с чем его едят, можно почитать здесь.

А мы идем далее.

Безлимит


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

Но как всегда есть одно «НО», это самое «НО» — ограничение размера БД на машине пользователя в размере 5 МБ, что отнюдь нас не устраивало. Так как данная технология планировалась использоваться в админке нашего проекта и все юзеры использовали в качестве дефолтного браузера Google Chrome, то было принято решение поиска обхода того самого ограничение через расширение-прокси. Перелопатив много инфы мы пришли к выводу, что ограничение на размер БД можно убрать использовав специальные флаги в манифесте нашего расширения:
Читать дальше →

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

Создаём своё расширение для Google Chrome

Время на прочтение5 мин
Охват и читатели231K
На хабре уже есть несколько статей о создании расширений для хрома, поделюсь своим опытом, затронув основные вещи и места, в которых у меня возникли трудности.
Что понадобится для создания расширения в двух словах:
1) Базовые знания Javascript
2) Базовые знания HTML
3) 5$

Покажу создание расширения для хрома на примере своего, созданного для подсчета «потерянного времени» в интернете. То есть это расширение считает время, проведенное на сайтах с возможностью определения посещенных сайтов по категориям: полезное время, либо потерянное время.
Читать дальше →

FRP (functional reactive programming) на Bacon.js

Время на прочтение6 мин
Охват и читатели26K
Часто, при создании достаточно сложных приложений на JavaScript наступает тот момент, когда становиться совершенно непонятно почему приложение перестало работать как надо, или наоборот вдруг заработало. Cвязей между элементами приложения становится так много, что уследить за ними даже с хорошими дебаггером очень трудно. И вот диллема: с одной стороны есть хорошо известная методика создания приложений на JS, столь привычная и глубоко описанная, что недостатков мы уже как бы и не замечаем. С другой стороны есть масса библиотек предлагающих нам перейти на другую сторону попробовать что-то новое. К таким библиотекам относиться и Bacon.js, предоставляя реализацию FRP на JavaScript.
Читать дальше →

Делаем свой персональный Skype, пошаговая инструкция создания WebRTC приложения

Время на прочтение4 мин
Охват и читатели141K
WebRTC

WebRTC позволяет реализовать real-time аудио/видео связь через браузер (firefox и chrome).

В этом топике я расскажу как реализовать простейшее WebRTC приложение.
Читать дальше →

AngularJS: еще одна таблица с сортировкой, фильтрацией и постраничной навигацией

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

Что это?


Это очередное AngularJS приложение, которое добавляет в обычную таблицу возможности сортировки, фильтрации, разбиения на страницы и пр.

Разумеется, существует несколько готовых решений (1, 2, 3, 4, 5), но они не подходили по ряду причин. В итоге, было решено создать свой вариант, тем более, что я не имею большого работы с AngularJS, а изучать этот фреймворк и его потрясающие возможности лучше на практике.
Подробности

API консоли Javascript

Время на прочтение15 мин
Охват и читатели36K
Разработчикам удобно пользоваться консолью для отладки, но ещё удобнее, если будет оболочка, в которой учтены особенности реализации консоли в различных браузерах, поэтому тема обёрток для консоли устойчиво существует.

Рассмотрим ранее опубликованные решения, затем сделаем обзор методов консоли с помощью перевода недавней статьи Axel Rauschmayer-а, разработчика и консультанта с более чем 15-летним стажем, затем я опубликую некоторые свои решения, которые оказались удачными в процессе эволюции и отладки на ряде проектов.
UPD 2015: обновление таблицы команд до актуального состояния, Github (ru, en; разворачивание на javascript).
ой, сколько букв

Анимация перехода от глобуса к двумерной карте

Время на прочтение5 мин
Охват и читатели19K
Хочу поделиться с хабром своим картографическим экспериментом, а именно анимацией перехода от Ортографической проекции (глобус) к Равнопромежуточной (одна из проекций обычных двумерных карт). Также этот способ подойдёт и для любых других проекций. Результатом экспериментов стала вот такая анимация:

От глобуса к карте


Как и прежде будем использовать библиотеку d3.js, как и прежде сделаем несколько реализаций: SVG и Canvas. Оба варианта можно будет эффектно использовать для интерактивной инфографики. Ну что, начнём?
Приступить к эксперименту

«WebGL Beginner's Guide» Глава 1: Начиная работать с WebGL

Время на прочтение13 мин
Охват и читатели53K
Всем привет!

Хочу начать вольный перевод отличной книги «WebGL Beginner's Guide», которая, на мой взгляд, будет интересна не только новичкам, но и более продвинутым разработчикам.

Содержание:
  • Глава 1: Начиная работать с WebGL
  • Глава 2: Рендеринг геометрии
  • Глава 3: Освещение
  • Глава 4: Камера
  • Глава 5: Движение
  • Глава 6: Цвет, глубина и альфа-смешение
  • Глава 7: Текстуры
  • Глава 8: Выбор
  • Глава 9: Собираем все вместе
  • Глава 10: Дополнительные методы


WebGL первоначально была основана на OpenGL ES 2.0 (ES означает Embedded Systems), версии спецификации OpenGL для таких устройств как iPhone от Apple и iPad. Но спецификация развивалась, стала независимой, ее основная цель это обеспечение переносимости между различными операционными системами и устройствами. Идея веб-интерфейса, рендеринг в реальном времени открыли новую вселенную возможностей для веб-3D сред, таких как видеоигры, научная и медицинская визуализация. Кроме того, из-за широкого распространения веб-браузеров, эти и другие виды 3D-приложений могут быть запущены на мобильных устройствах, таких как смартфоны и планшеты. Если вы хотите создать свою первую веб-видеоигру, 3D арт-проект для виртуальной галереи, визуализацию данных ваших экспериментов или любое другое 3D-приложение, вы должны иметь ввиду, что первым шагом должно быть то, что вы должны убедиться, что у вас есть подходящая среда.
В этой главе вы сможете:
  • Понять структуру WebGL-приложения
  • Создавать свои области рисования (canvas)
  • Проверить WebGL-возможности вашего браузера
  • Понять, как устроена машина состояний WebGL
  • Изменять переменные WebGL, которые влияют на вашу сцену
  • Загружать и исследовать полнофункциональные сцены


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