понедельник, 26 сентября 2011 г.

Git удаление файла или папки из истории

Если вы случайно закоммитили ненужный файл или папку в git-репозиторий и уже сделали push, то чтобы удалить все следы этого файла или папки в том числе и из истории, достаточно выполнить команду:
git filter-branch --tree-filter "rm -rf PATH" HEAD
где PATH - это относительный путь до файла или папки.
После этого выполните (чтобы перезаписать историю изменений):
git push origin master --force

четверг, 22 сентября 2011 г.

Подсказки в input и textarea (placeholder)

Еще одна довольно частая задача в веб-проектах - это показывать подсказки в input и textarea, чтобы сэкономить место, да и просто для красоты.
Например, такие:

До HTML5 это приходилось решать примерно так:
<input onblur="if (!this.value) {this.style.color= '#ccc';this.value = this.defaultValue}" onfocus="if (this.value == this.defaultValue) {this.value = ''; this.style.color= '#ccc'}" style="color: #ccc;" type="text" value="Поиск" />
Для тех, кто не знает про замечательный атрибут defaultValue, поясню - в нём сохраняет то значение, которое было у поля при загрузке страницы.
На самом деле уже заметно, что делается это нетривиально, но на этом сложности не заканчиваются.
При сабмите формы нужно тоже смотреть, если у поля this.value == this.defaultValue, то нужно сбрасывать это значение, чтобы оно не было отправлено на сервер.
В итоге получаем, что для решения задачи нам нужно написать несколько строк javascript, которые ну никак не красят код страницы + без JS это работать не будет.

К счастью, в HTML5 позаботились об этом и ввели атрибут placeholder http://dev.w3.org/html5/spec/common-input-element-attributes.html#the-placeholder-attribute
И теперь достаточно указать этот атрибут, чтобы получить подсказки для полей:
<input placeholder="Подсказка" type="text" />
Рабочие примеры:

пятница, 9 сентября 2011 г.

Множественная загрузка файлов с помощью HTML5

В некоторых формах, хочется позволять загружать сразу несколько файлов.
Раньше были только следующие варианты сделать это:
  1. Использовать флэш + js http://swfupload.org/
    Тут возникает много всяких трудностей и появляются всякие подводные камни, начиная с того, что флэш установлен не у всех, а заканчивая тем, что если вы хотите позволять загружать файлы только авторизованным пользователям, то вам нужно еще как-то передавать PHPSESSID (ну или другой идентификатор сессии), однако нужная сессия может не стартануть из-за настроек безопасности сервера (в частности из-за Suhosin).  Поэтому этот вариант всегда требует альтернативного способа.
  2. Есть еще один вариант: сначала показывать один <input type="file" name="files[]" />, а рядом добавить кнопочку еще один файл, по которой с помощью javascript создавать новый элемент input и добавлять его на страницу. Тут всё прозрачно, но не очень юзабельно для пользователя, ведь намного удобнее сразу выбрать несколько файлов и один раз нажать кнопку ОК.
Возможно есть и другие достаточно извращённые варианты реализации массовой загрузки файлов, но все они либо доставляют проблемы разработчикам/админам, либо неудобства пользователю.

С появлением HTML5 эта задача сильно упростилась, потому что у <input type="file" /> появился новый атрибут multiple (http://dev.w3.org/html5/markup/input.file.html).
Чтобы реализовать множественную загрузку файлов, достаточно прописать этот атрибут у нужного элемента.

Простейший пример:
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple="" />
    <br />
    <input type="submit" />
</form>
Это будет работать во всех современных браузерах: Google Chrome, Firefox, Opera.

четверг, 8 сентября 2011 г.

Лучшая минификация javascript с помощью Closure Compiler

Практически в любом веб-проекте возникает необходимость минификации javascript.
На мой взгляд, на сегодняшний день лучше всех остальных с этой задачей справляется Closure Compiler http://closure-compiler.appspot.com
Помимо онлайн-инструмента, есть также REST API, которое позволяет автоматизировать процесс.
Но проще всего использовать скрипт, написанный на Java, который можно скачать здесь:
http://code.google.com/intl/ru-RU/closure/compiler/docs/gettingstarted_app.html
В простейшем случае (SIMPLE_OPTIMIZATIONS) достаточно выполнить команду:
java -jar compiler.jar --js file1.js file2.js --js_output_file file.min.js
Более подробно об уровнях сжатия и оптимизации можете прочитать здесь: http://code.google.com/intl/ru-RU/closure/compiler/docs/compilation_levels.html