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

К делу

Внешне задумка выглядит так:

Я вряд ли ошибусь, если предположу, что язык РНР достаточно популярен, если не самый популярный в веб-разработке. Мы не будем анализировать причины этого (а тем более, следствия), а сконцентрируемся на одном небольшом аспекте, а именно — как на РНР разрабатывать сложные AJAX веб-приложения. И не просто так разрабатывать, а использовать в своей работе библиотеку ExtJS, которая позволяет создавать интерфейсы для этих веб-приложений. Конечно, все это можно разнести и серверная сторона, на РНР или на любом другом языке, совершенно ничего не будет знать о клиентской части и AJAX-библиотеке, просто оперируя JSON данными и обычным HTML. Но можно сделать и по-другому — этот подход, аналогичен популярной сегодня технологии Google Web Toolkit. Мы ничего не разделяем, а просто пишем приложение, используя одну среду, один язык и все возможности (и языка и среды), а уже сервер самостоятельно генерирует код для клиента, полностью автоматически. Таким образом можно совсем (ну или почти) не знать и не разбираться в верстке, JavaScript и ExtJS, но писать приложения, которые будут использовать этот фреймворк.

Для языка Java подобные решения существуют, а недавно такой проект, EXT GWT, даже перешел под крыло самой компании-разработчика ExtJS, превратившись в вполне серьезное профессиональное решение. Ну а как в других языках? Java, конечно, хорошо и даже отлично, но душа и тело хотят разнообразия, или просто не хотят переучиваться. Для таких случаев есть свои решения. И одно из них, для РНР, так и называется — PHP-Ext.

Пару лет назад я занимался проблемой data URL в Internet Explorer, добился определённых результатов, но то, что получилось, использовать было невозможно. Data URL (иногда его ещё называют «протокол data:») — возможность вставлять ресурсы (графику, CSS, JavaScript и так далее) в HTML код.


Подробнее о data URL можно узнать из свежей статьи на «Хабре» «Картинки в теле страницы с помощью data:URL». Хотелось только её дополнить двумя замечаниями: IE8b1 поддерживает data URL длиной не более 32Кб, в современных версиях других браузеров ограничений увидеть не удалось, Safari/Opera/FF показали изображения размером около 700Кб.


Теперь амбула.


Вчера ночью мне пришла в голову идея как можно попытаться корректно совместить data URL и включение картинок через протокол mhtml. То, что у меня не получилось два года назад, получилось сейчас.


Результат — готовый код на PHP из двух функций. Первую функцию («bolk_data_uri_header») нужно вызвать в самом начале перед выводом любого вашего кода, вторую («bolk_data_uri») собственно для включения картинки в код.


Надеюсь на примерах всё понятно:

bolk_data_uri_header();
bolk_data_uri('myjpeg.jpg');
bolk_data_uri('ourpng.png', 'border: 2px dotted red');

Код самой библиотеки:

function bolk_data_uri_header() 
{ 
    echo "<!--\n" 
        ."Content-Type: multipart/related; boundary=\"=_NextPart_01C6A9B1.539AB070\"\n\n" 
        ."--=_NextPart_01C6A9B1.539AB070\n" 
        ."Content-Transfer-Encoding: base64\n" 
        ."Content-Type: text/html\n" 
        ."-->\n\n"; 

} 

function bolk_data_uri($file, $style = '') 
{ 
    if (!( file_exists($file) && ($data = @getimagesize($file)) )) return false; 

    $name = uniqid('', true); 

    if ($style <> '') $style = ' style="'.htmlspecialchars($style).'"'; 
    $mime = strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') ? " type='{$data['mime']}" : '';

    echo "<!--\n" 
        ."--=_NextPart_01C6A9B1.539AB070\n" 
        ."Content-Location: {$name}\n" 
        ."Content-Transfer-Encoding: base64\n" 
        ."Content-Type: {$data['mime']}; -->\n" 
        ."<object data='data:{$data['mime']};base64,\n\n"; 

    echo base64_encode(file_get_contents($file)); 

    echo "' {$data[3]}{$style}{$mime}'><img " 
        ."src='mhtml:http://{$_SERVER['HTTP_HOST']}"
        ."{$_SERVER['REQUEST_URI']}!{$name}' {$data[3]}{$style} /></object>\n\n" 
        ."<!--\n" 
        ."--=_NextPart_01C6A9B1.539AB070-->"; 

    return true; 
}

Секрет в совмещении данных, чтобы IE, обратившись к странице по протоколу mhtml нашёл нужный кусор, «спрятанный» внутри тега, а остальные браузеры увидели бы картинку через data URL.


Код тестировался под Opera 9.50b, FF 2.0.0.13, Safari 3.1 и IE6. Предложения и результаты испытаний — прошу в комментарии.


Оригинал записи опубликован в моём блоге.

Modalbox — библиотека на prototype и script.aculo.us для создания диалоговых окон и мастеров, обьем ее кода всего 10кб. На мой взгляд это настоящий атрибут веб два нольности.

Очень практично оформлять кликабельные картинки, к примеру при наведении на картинку появится изображения говорящее о том что эта картинка кликабельна — как на картинке выше.

Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять, и об этом я и расскажу вам сейчас.

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

INTRO

Все мы знаем что PHP предназначен для быстрого создания динамических Web страниц. Во всяком случае именно это написано на официальном сайте разработчиков PHP. Однако почему бы не попробовать найти PHP «немного» иное применение, например, попробовать создать полноценное приложение для Windows? Заинтересовал? Тогда понеслась!

Новый сервис для генерации фавиконов.

Для тех, кто уже успел познакомиться с фреймворком.

Как оказалось, существует довольно много людей, которым интересно изменение их кармы. Специально для них открывается наконец Кармаграф — прибор для запоминания вашей кармы.

Чего мы хотим добиться — 1680x1050 98 кб

от автора:
Не скажу чтобы широкоформатники имели огромное распространение, но у некоторых на работе, а у некоторых счастливцев и дома есть такие мониторы. У меня например начальство расщедрилось на Apple Cinema 20"
Конечно же разница была прочувствована немедленно, однако в современном web-дизайне очень многие сайты рассчитаны под 1280 точек максимум. Эта статья призвана помочь оптимизировать рабочее пространство популярного браузера и

Хорошо и счастливо работается только тогда, когда работа заливает сознание. Я люблю писать по ночам, потому что ночью теряется рассеивающее ощущение движения времени. Днем только в самых редких случаях удается достигнуть этой окаменелости, глубокого безразличия к окружающему. День весь расчленен; он измеряется и управляется дробными величинами часов; причем каждый час имеет свою характеристику, настойчиво поддерживающую дробление. Одни часы ассоциативно связаны с профессиональными обязанностями, другие — с обедом (это сильное членение, дающее особую окраску часам предобеденным и послеобеденным), иные — с отдыхом. Словом, день очень заземлен, его этапы предназначены регулировать суету и не способствуют высокому оцепенению. Дневные часы наказывают нас отвратительным ощущением бестолковости, если мы нарушаем и смешиваем их функции; два часа дня и четыре часа — очень разные вещи. Два часа и четыре часа ночи — почти одно и то же. Все ночные часы в равной мере предназначены для сна; сон же представляется нам скорее потребностью, чем обязанностью. Пересилив эту потребность, мы чувствуем себя вправе искажать лицо ночи по нашему усмотрению. Ночные часы лишены индивидуальных признаков. Время не продвигается толчками, но сливается в поток, протекание которого неощутимо.

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

© Лидия Гинзбург

Директор по развитию популярной сети «Одноклассники» OdnoklassnikАлександр Бадерко любезно согласился ответить на мои вопросы, хотя и с оговоркой, что речь пойдёт не об «одноклассниках». Чтобы воспользоваться опытом Александра, мы решили поговорить про такое популярное веяние, как стартапы.

Расскажите, пожалуйста, о себе: сколько вам лет, как давно вы в рунете, в том числе в качестве разработчика?

Лет — 33, в рунете года с 97 как пользователь, да и как «разработчик» тоже — баловался созданием сайтов для своих знакомых. Своими руками сделано около 40 сайтов.