О программировании

/// @author Vital

Метка: JavaScript

  • Уменьшение размеров JavaScript и CSS файлов.

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

    Минификация – операция довольно рутинная и по-хорошему должна быть автоматизирована и встроена в процесс автоматической сборки.
    Тем не менее, иногда возникает необходимость сделать подобную минификацию кода в полевых условиях на сервере заказчика из командной строки. (далее…)

  • Отрисовка SVG внутри HTML5 Canvas.

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

    Здесь я хотел обозначить совсем другую задачу – отобразить картинку в SVG-формате с помощью API Canvas-a. Другими словами, тема статьи не “SVG против Canvas”, а как рисовать SVG картинки внутри Canvas. Подобного рода задача возникнет, например, в случае, если у вас уже есть небольшой набор не слишком сложных SVG-файлов, и вы хотели бы их использовать, при этом ваш графический javascript-овый движок базируется на Canvas-e.

    Можно выделить два основных похода:
    1. Первый подход.
    Парсить SVG файл JavaScript-ом и руками рисовать его в канву.
    Один из самых популярных движков, которые реализуют подобный функционал это: http://code.google.com/p/canvg/

    2. Второй подход.
    На самом деле, многие браузеры умеют рисовать SVG файлы непосредственно в канву методом drawImage. Точно также как обычные растровые изображения (PNG, JPG и т.д.) – https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Using_images.
    Проблемы заключаются как всегда в том, что разные браузеры могут делать это по-разному.
    В итоге пришлось провести небольшую работу для проверки отображение SVG внутри Canvas-a для различных браузеров. На момент публикации этой статьи получилась следующая картинка: (далее…)

  • Про JavaScript (не для JavaScript программистов).

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

    При кажущейся простоте JavaScript не создан для легкого написания надежного кода. Для самопроверки пользуюсь jsLint-ом и периодически запускаю google closure compiler. Тем не менее, это не решает всех проблем. Даже если вы пишете правильный и аккуратный код, указываете комментарии в исходником коде для проверки типов и т.д., все равно приходится время от времени сталкиваться с работами других программистов.

    Из своих “полевых наблюдений” за программистами я понял, что у тех несчастных, которые начинают писать на JavaScript-е после других языков, возникает путанное понимание некоторых фундаментальных понятий этого языка.
    (далее…)

  • Простые хаки и Greasemonkey


    Недавно обратил внимание на то, что шрифты на сайте java.net какие-то неприятные – мутные и плохо читаются. Может они всегда были такими, а я стал чуть-более придирчивым, а может быть стали такими после мега_перезагрузки_сайта.
    На самом деле не столь важно почему, важно понять как подправить…

    Могу предложить два способа из разряда “быстрых хаков”.

    Способ 1. Простой и скучный (и только для только для пользователей Firefox-а).
    Нужно в файле: C:\Documents and Settings\\Application Data\Mozilla\Firefox\Profiles\\chrome\userContent.css
    добавить настройку для конкретного домена:

    @-moz-document domain(java.net) {
  body {
    font-family: Arial,Helvetica,sans-serif !important; 
  }
}

    Способ 2. Простые хитрости Greasemonkey.

    Greasemonkey (замасленная обезьяна, “механик”) – удобная тулза для различного рода кастомизации, переделавание и допиливания страничек. Один из моих любимых инструментов для подобного рода экспериментов.
    Если кратко, используя Greasemonkey вы сможете запускать свои скрипты на JavaScript-е у себя в браузере для определенных сайтов.

    Приведу несколько очень полезных ссылок:

    Кстати Greasemonkey сейчас работает в Google Chrome “из коробки”. Для установки вы просто драг-анд-дропаете в окно браузера ваш файлик (что-то типа sitefix.user.js) и он будет воспринят как обычное расширение.
    Для Firefox, как и раньше нужно поставить плагин https://addons.mozilla.org/ru/firefox/addon/greasemonkey/.

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

    // ==UserScript==
// @name           FontFix
// @namespace      programmisty
// @include        http://*.java.net/*
// ==/UserScript==
var head = document.getElementsByTagName("head")[0];
var style = document.createElement("style");
style.setAttribute("type", 'text/css');
style.innerHTML = " body { font-family: arial,helvetica,sans-serif} ";
head.appendChild(style);