Рубрики
4. Полезняшки

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

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

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

Рубрики
4. Полезняшки

Отрисовка 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 для различных браузеров. На момент публикации этой статьи получилась следующая картинка:

Рубрики
1. Языки программирования 2. Теория программирования

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

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

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

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

Рубрики
4. Полезняшки

Простые хаки и 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);