<rmcreative>

RSS

Все заметки с тегом «JavaScript»

  1. Визуализация данных на JavaScript, d3.js

    28 января 2012

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

    Последовательность работы сводится примерно к следующему:

    1. Получаем данные, которые будем визуализировать. Формат, в общем-то не важен, но удобней всего работать с JSON.
    2. Привязываем данные к DOM-контейнеру при помощи data.
    3. Используем селектор enter, которые выбираем ещё несуществующие представления для каждого элемента данных. Например, это могут быть столбики в графике.
    4. Для каждого выбранного создаём столбик.

    На словах это выходит немного запутанно. Код более красноречив:

    d3.select("body").selectAll("p") // выбрали все p внутри body
      .data([4, 8, 15, 16, 23, 42]) // привязали к выборке данные
      .enter() // будем создавать элементы, если их ещё нет
      .append("p") // это будет элемент p
        .text(function(d){ // используем наши данные для задания текста
           return "I'm number " + d + "!";
        });

    Результатом будет шесть элементов p с номерами, соответствующими переданным данным. Подобно тексту можно задавать и другие свойства, CSS, атрибуты… да всё что угодно. В результате можно получить очень интересные визуализации прилагая к этому минимум усилий. Это главная идея и возможность библиотеки. Остальное предназначено для удобной манипуляции данными, работы с SVG, созданию анимации, AJAX, работы с цветом, проекции значений на разные координатные системы и даже работы с гео-API. Всё вместе позволяет создавать очень интересные интерактивные визуализации.

    Пробуем и пользуемся

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

    Ну и небольшая визуализация от меня. Количество постов в месяц за всё время существования этого блога.

    5 комментариев
  2. Не дать загружать страницу в iframe

    15 декабря 2011

    Вот таким вот способом можно попортить жизнь тем, кто вздумал грузить вашу страницу в iframe:

    if((self.parent && !(self.parent===self)) && (self.parent.frames.length != 0)){
      self.parent.location=document.location;
    }

    Если верно помню, встречено на Яндексе образца 2009 года.

    12 комментариев
  3. Ace editor, редактор кода на JavaScript

    26 ноября 2011

    Вполне себе полноценный JavaScript-редактор кода в виде отдельного компонента, выросший из проекта Mozilla под названием Bespin. По удобству редактирования кода вполне приближается к TextMate, Vim или Eclipse. Присутствуют:

    • Подсветка кода Javascript, HTML, CSS, XML, Python, PHP, Java, Ruby, C++, CoffeeScript.
    • Автоотступы.
    • Командная строка.
    • Нормально работает с документами в 100000 строк.
    • Настраиваемые хоткеи. Есть профили «как VI» и «как Emacs».
    • Цветовые схемы, совместимые с TextMate.
    • Поиск-замена по регулярным выражениям.
    • Подсветка парных скобок.
    • Софт-табы и обычные табы.
    • Может отображать скрытые символы.
    • Подсвечивает слово под курсором.

    Пробуем и пользуемся

    Эту штуку наверняка приятно будет встроить в админку CMS для редактирования шаблонов…

    5 комментариев
  4. Chosen, функциональные и красивые селекты

    28 июля 2011

    Элементы select доставляют достаточно много проблем: начиная с того, что пользоваться ими не очень удобно при большом количестве вариантов и заканчивая тем, что применить к ним стили в старых версиях IE — совершенно неблагодарное занятие.

    Плагин Chosen превращает select-ы в довольно приятные штуки. При этом не нужна ни дополнительная разметка, ни какие-либо значительные телодвижения.

    Пользуемся

    7 комментариев
  5. Paper.js

    28 июня 2011

    Интересная библиотека для работы с canvas. Отличается наличием объектной модели и приятным простым API. Например, прямоугольник можно построить так:

    var topLeft = new Point(10, 20);
    var rectSize = new Size(200, 100);
    var rect = new Rectangle(topLeft, rectSize);

    Пробуем

    Пользуясь случаем вспомнил давнее увлечение и набросал абстрактную штуковину.

    2 комментария
  6. Интерактивный учебник Ильи Кантора по JavaScript (alpha)

    8 июня 2011

    Илья Кантор, скорее всего известный вам как создатель javascript.ru, выложил предварительную версию интерактивного учебника по JavaScript на английском языке. После завершения работы над английской версией, будет перевод на русский.

    Главные критерии, по которым данный труд создавался:

    • Правильный — если вы видели учебники и статьи по JavaScript, то понимаете, о чем это.
    • Современный — с учётом HTML5, IE9 и FF4. Основное внимание на «сейчас», но при этом «с прицелом на будущее».
    • Задачи! Да, в учебнике должны быть задачи, а не только текст. Единственный способ освоить — это сделать. Иначе говоря, учебник должен быть и самоучителем.

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

    3 комментария
  7. jQuery 1.6

    4 мая 2011

    Вышла свежая версия jQuery.

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

    В данном релизе есть несовместимые с предыдущим изменения. Будьте осторожны.

    6 комментариев
  8. Node.js — руководство по убеждению начальства

    29 апреля 2011

    Хабр, конечно, и без меня многие читают, но на этот пост-перевод я всё же сошлюсь. Очень уж близко мне то, как освещены темы «Простые приложения CRUD/HTML», «NoSQL + Node.js + Всякая модная фигня» и выбора инструмента в общем.

    Читаем

    2 комментария
  9. JSFIDDLE

    25 апреля 2011

    Отличный инструмент для быстрой разработки небольшого клиентсад-кода. Вбиваем CSS/JavaScript/HTML и получаем результат для теста, которым можно поделиться.

    В довесок получаем подсветку и форматтер кода, подключение кучи распространённых фреймворков и JSLint, обсуждения, интеграцию с GitHub и ещё кучу всего.

    Пользуемся

    1 комментарий
  10. JavaScript Гарден на русском

    25 марта 2011

    Хороший перевод отличного руководства по самым занятным особенностям JavaScript. Настоятельно рекомендуется как новичкам в языке, так и тем, кто уже с ним плотно работает.

    Читаем, добавляем в закладки и перечитываем перед сном

    Отдельного внимания заслуживает оформление документа: цвета, шрифты и навигация замечательны.

    4 комментария