Pastie подсветка синтаксиса

Самый первый пост, опубликованный мной с тегом JavaScript освещал такую интересную для любого «кодоблоггера» тему, как Динамическая подсветка синтаксиса с помощью javascript.

Если же по каким-то причинам вам лень добавлять javascript к вашему шаблону, вы можете воспользоваться сервисом Pastie.


Pastie «умеет» подсвечивать код ActionScript, C/C++, CSS, Diff, HTML (ERB / Rails), HTML / XML, Java, Javascript, Objective C/C++, Pascal, Perl, PHP, Plain text, Python, Ruby, Ruby (on Rails), Shell Script (Bash), SQL, YAML. Вставьте полученный код javascript в ваш блог и подсветка кода готова.


Второй, неявный способ применения Pastie -- обмен фрагментами кода. Удобно при удаленной разработке в команде.

P.S. Pastie написан на Ruby on Rails.

• Pastie

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

Заставить IE создать элемент style

Сегодня с помощью JavaScript динамически создавал HTML элемент <style> внутри <iframe>. Да, мы, бля, не ищем легких путей ;). В Firefox срабатывает на «отлично», но как всегда не обошлось без сюрпризов от IE. И никакие «умные» (даже затрудняюсь в выборе кавычек) способы не помогали.

Зато вот какой шикарный трюк нагуглил:

var CSS = 'body { margin: 0px; }';
var htmDiv = document.createElement('div');
htmDiv.innerHTML = '<p>x</p><style>'+CSS+'</style>';
document.body.appendChild(htmDiv.childNodes[1]);

Работает в IE6 and IE7 и в нормальных браузерах.

• Thanks to Clint Priest!

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

Feedburner 0 readers

Если вы видите такую картинку в вашем блоге, значит пришла пора перенести ваш RSS канал с Feedburner на Google. Дело в том, что гугль недавно сделал «подарок» всем пользователям Feedburner. Теперь можете забыть, что «когда-то» «где-то там» вы регистрировали RSS канал вашего сайта. С легкой руки Google все ссылки на ваш фид стали неактуальными.

Как перенести аккаунт FeedBurner на Google?

1. Зайдите на FeedBurner используя свою учетную запись;
2. FeedBurner предложит перенести ваш аккаунт на Google. Просто следуйте инструкции;
3. Проверьте URL вашего канала! Не исключено, что он неким «мистическим образом» изменился;
4. Для Blogger: зайдите в Настройки - Канал сайта и в строке URL переадресации канала сообщений пропишите ваш «новый» RSS канал;
5. Измените все виджеты, использующие ваш RSS.

Приятных развлечений! Читать дальше »

CSS спрайты

Да, вы уже наверняка слышали о них... но действительно ли вы понимаете, что они из себя представляют? Название немного сбивает с толку. CSS спрайты -- это не множество маленьких изображений, как вы могли бы подумать. На самом деле это одно большое изображение. Сама соль этой техники заключается в объединении множества маленьких изображений в одно большое.

• Фрай
• Лила
• Бендер
• Зольдберг
• Эми

«А нахрена это нам?» или «А что это нам даст?» -- возможно спросите вы. А вот ответьте мне на такой вопрос: что быстрее скачается с флешки: «полтыщи» картинок, старательно надерганых из интернет, суммарным объемом 1 гигабайт или те же «полтыщи» картинок, но одним архивом объемом в гиг? Поэкспериментируйте ;).

Ну да таки перейдем качественных рассуждений к количественным.

Список-меню без использования CSS спрайтов

Пример 1. Стили CSS

.list-item {top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none;}
#nav li a {background:none no-repeat left center; display: block; height:85px; width:200px; padding-left:85px;}

#nav li a.fry {background-image:url('images/fry_bw.jpg')}
#nav li a.leela {background-image:url('images/leela_bw.jpg')}
#nav li a.bender {background-image:url('images/bender_bw.jpg')}
#nav li a.zoldberg {background-image:url('images/zoldberg_bw.jpg')}
#nav li a.amy {background-image:url('images/amy_bw.jpg')}

#nav li a:hover.fry {background-image:url('images/fry.jpg')}
#nav li a:hover.leela {background-image:url('images/leela.jpg')}
#nav li a:hover.bender {background-image:url('images/bender.jpg')}
#nav li a:hover.zoldberg {background-image:url('images/zoldberg.jpg')}
#nav li a:hover.amy {background-image:url('images/amy.jpg')}

Пример 1. Код HTML

<ul id="nav">
  <li><a class="fry" href="#fry"><div class="list-item">Фрай</div></a></li>
  <li><a class="leela" href="#leela"><div class="list-item">Лила</div></a></li>
  <li><a class="bender" href="#bender"><div class="list-item">Бендер</div></a></li>
  <li><a class="zoldberg" href="#zoldberg"><div class="list-item">Зольдберг</div></a></li>
  <li><a class="amy" href="#amy"><div class="list-item">Эми</div></a></li>
</ul>

Результат:

• Объём страницы: 1.45 Kb
• Запросов: 6
• Время загрузки: 0.181 s

Список-меню с использованием CSS спрайтов

Пример 2. Стили CSS

.list-item {left:10px; top:30px; position:relative; font-weight:bold;}
#nav li {list-style: none; clear:both; height:85px; width:200px;}
#nav li a {background:url('images/futurama.jpg') no-repeat; display: block; height:75px; width:75px; float:left;}

#nav li a.fry {background-position:0 0;}
#nav li a.leela {background-position:0 -75px;}
#nav li a.bender {background-position:0 -150px;}
#nav li a.zoldberg {background-position:0 -225px;}
#nav li a.amy {background-position:0 -300px;}

#nav li a:hover.fry {background-position:-75px 0;}
#nav li a:hover.leela {background-position:-75px -75px;}
#nav li a:hover.bender {background-position:-75px -150px;}
#nav li a:hover.zoldberg {background-position:-75px -225px;}
#nav li a:hover.amy {background-position:-75px -300px;}

Пример 2. Код HTML

<ul id="nav">
  <li><a class="fry" href="#fry"></a><span class="list-item">Фрай</span></li>
  <li><a class="leela" href="#leela"></a><span class="list-item">Лила</span></li>
  <li><a class="bender" href="#bender"></a><span class="list-item">Бендер</span></li>
  <li><a class="zoldberg" href="#zoldberg"></a><span class="list-item">Зольдберг</span></li>
  <li><a class="amy" href="#amy"></a><span class="list-item">Эми</span></li>
</ul>

Результат:

• Объём страницы: 1.40 Kb
• Запросов: 2
• Время загрузки: 0.137 s

Даже при тестировании на локальном сервере видно, что скорость загрузки страницы увеличивается при использовании CSS спрайтов.
Читать дальше »

Черно-белое фото на PHP 2

Еще один способ сделать черно-белое фото с помощью PHP. В данном случае используется специальный фильтр IMG_FILTER_GRAYSCALE.

function png2grayscale($filename){
  $img = imagecreatefrompng($filename);
  if ($img && imagefilter($img, IMG_FILTER_GRAYSCALE)) {
    echo 'Image converted to grayscale.';
    imagepng($img, $filename);
  } else {
    echo 'Conversion to grayscale failed.';
  }
  imagedestroy($img);
}

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

Javascript. Пляски с ифреймом

Как получить содержимое iframe с помощью Javascript:

function getContentFromIframe(iFrameName){
  var iFrame = document.getElementById(iFrameName);
  var content = iFrame.contentWindow.document.body.innerHTML;
  //Любые операции с содержимым iframe
}

И наоборот.
Из iframe выполнить функцию в «родительском» окне.

parentReloadImages = function(){
  parent.xajax_reloadImages();
}

parent -- как раз и есть ссылка на родительское окно.
Читать дальше »

Черно-белое фото с помощью PHP

Многим людям нравится черно-белое фото. Такое фото создает некий эффект «классики», «старомодности», зрелости. Vintage -- одним словом. Вы не знали? -- «раньше небо было голубее, солнце желтее...»*, а PHP и в помине не было.

*Это прекрасно видно на черно-белых снимках ;)

И тем не менее пример из недавней практики -- как сделать цветное изображение черно-белым на PHP с помощью библиотеки GD.

function grayscale($filename){
  //Получаем размеры изображения
  $img_size = GetImageSize($filename);
  $width = $img_size[0];
  $height = $img_size[1];
  //Создаем новое изображение с такмими же размерами
  $img = imageCreate($width,$height);
  //Задаем новому изображению палитру "оттенки серого" (grayscale)
  for ($c = 0; $c < 256; $c++) {
    ImageColorAllocate($img, $c,$c,$c);
  }
  //Содаем изображение из файла Jpeg
  $img2 = ImageCreateFromJpeg($filename);
  //Объединяем два изображения
  ImageCopyMerge($img,$img2,0,0,0,0, $width, $height, 100);
  //Сохраняем полученное изображение
  imagejpeg($img, $filename);
 //Освобождаем память, занятую изображением
  imagedestroy($img);
}

Этот метод сохраняет изображения в черно-белой гамме. Например, при загрузке файлов на сервер.

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

function show_grayscale($filename){
  $img_size = GetImageSize($filename);
  $width = $img_size[0];
  $height = $img_size[1];
  $img = imageCreate($width,$height);
  for ($c = 0; $c < 256; $c++) {
    ImageColorAllocate($img, $c,$c,$c);
  }
  $img2 = ImageCreateFromJpeg($filename);
  ImageCopyMerge($img,$img2,0,0,0,0, $width, $height, 100);
  //Отдаем полученное изображение браузеру
  header("Content-type: image/jpeg");
  imagejpeg($img);
  
  imagedestroy($img);
}

Pro et Contra

..или «За и Против» обоих методов.
В первом примере:

• (+) ваше приложение нагружается всего один раз -- когда вы сохраняете изображение;
• (-) на сервере у вас хранятся черно-белые изображения. Цветных вы из них уже не сделаете.

Во втором примере:

• (+) на сервере у вас хранятся цветные изображения. И вы всегда можете выбрать как их отобразить;
• (-) ваше приложение нагружается каждый раз -- когда вы отдаете черно-белое изображение браузеру.

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