RegExp tutorial

Модули в JavaScript

Когда кода становится очень много, когда его пишут разные люди в разных концах света, встаёт вопрос о разбиении его на файлы. К сожалению (а может и к счастью) JS не имеет встроенных средств инклуда и уж тем более автолоада. Поэтому остро встаёт проблема организации исходников так, чтобы:

    • Они грузились в правильном порядке и подключалось только то, что нужно.
    • Не конфликтовали между собой.
    • На продакшене всё грузились одним-двумя файлами, а не сотней.
    • Не было проблем с отладкой во время разработки.

 Давайте рассмотрим наиболее яркие решения этой проблемы...

Jcrop + Twitter Bootstrap js фиксим баг.

Twitter Bootstrap 2.3: Crop Area Continues Moving After Selection

Споймал такой же баг https://github.com/tapmodo/Jcrop/issues/79 (описание на англ)

При выделении области для кропа, она бегает за указателем мыши. В консоли ошибка "Uncaught RangeError: Maximum call stack size exceeded" jcrop.
Оказывается лечится просто:
В Jcrop в функции https://github.com/tapmodo/Jcrop/blob/master/js/jquery.Jcrop.js#L1153

строку: $(document).unbind('.jcrop');
заменим на
все заработало ) 

Шаблонизация в js

http://embeddedjs.com/

Предыстория

Я занимаюсь разработкой IFrame приложений для социальной сети ВКонтакте. Самый удобный способ навигации по приложению — это динамическая подгрузка данных, без перезагрузки всей страницы. Раньше я генерил html код который нужно отобразить на сервере, пока не встретил EJS — JavaScript Templates…

EJS — Embedded JavaScript

EJS оказался одним из самых удобных и подходящих мне шаблонизаторов. Он работает, как с одиночными переменными, так и с массивами (читай объектами), присутствует логика (if...else...).

Покажу на примере, что может данный шаблонизатор.

Шаблон — /templates/question.ejs:

<div>
  <% if(question) { %>
   <h2><%= author %>: <%= question %></h2>
   <div><textarea name="answer" id="answer"></textarea></div>
   <ul class="nNav btnList">
     <li>
      <a href="" onclick="ACT.question.answer('index'); return false;">Ответить</a>
     </li>
   </ul>
  <% } else { %>
   <h2>Нет вопросов, на которые можно ответить!</h2>
  <% } %>
</div>
* This source code was highlighted with Source Code Highlighter.

Данные — /data/question.php:

{"id":"98","question":"What are you doing now?","author":"Mihalich88"}

* This source code was highlighted with Source Code Highlighter.

Результат:

$.ajax({
  type: "POST",
  url: "/data/question.php",
  dataType: "json",
  data: data,
  success: function(ans){
   var html = new EJS({url: ' /templates/question.ejs'}).render(ans);
  }
});

* This source code was highlighted with Source Code Highlighter.

В итоге

+ «плюсы»

1. Экономия траффика, т.к. передаются только данные ввиде json-объекта, шаблон кэшируется и берется из кэша
2. Снижение нагрузки на сервер, т.к. шаблонизация происходит в браузере
3. MVC структура, с выводом «V» за пределы сервера
4. Работает даже на Opera Mobile 10

— «минусы»

1. Не индексируется, но зато идеально подходит для RIA

Пример приложения, использующего EJS: http://formspring.vk-app.ru
Подводный камень: шаблонизатор работает только с файлами у которых расширение *.ejs. Хотел, чтобы шаблоны имели расширение *.tpl, но не получилось — виснит на рендеринге… Возможно, если поковырять, то все заработет.

Fantastic WYSIWYG editor on jQuery

Create word-processed text on the web using a reliable, fast and unbelievably beautiful editor.
http://imperavi.com/redactor/

Resize image

function resize($upload_data, $w, $h, $path)
{
$config['source_image'] = $upload_data['full_path'];
$config['maintain_ratio'] = TRUE;
$config['new_image'] = $path;
$config['width'] = $w;
$config['height'] = $h;

if ($upload_data['image_width']/$w < $upload_data['image_height']/$h)
$config['height'] = round($upload_data['image_height']*$w/$upload_data['image_width']);
else
$config['width'] = round($upload_data['image_width']*$h/$upload_data['image_height']);

$this->image_lib->initialize($config);

if ( ! $this->image_lib->resize())
{
   $this->data['error'] .= $this->image_lib->display_errors();
echo $this->data['error']; die();
}
else
{
$config['source_image'] = $config['new_image'];
$config['maintain_ratio'] = FALSE;
if ($config['width'] > $config['height'])
$config['x_axis'] = round(($config['width']-$w)/2);
else
$config['y_axis'] = round(($config['height']-$h)/2);

$config['width'] = $w;
$config['height'] = $h;
$this->image_lib->initialize($config);

$this->image_lib->crop();

}
}

EXAMPLE OF USE


function save_photo ($upload_data, $i, $id)
{

$path_to_image_directory = './uploads/items/'.$id;

$path = $path_to_image_directory.'/';
$path_th = $path_to_image_directory.'/thumb/';


$path_to_orig_image = $path.$i.'_orig.jpg';

if (!file_exists($path_to_orig_image))
copy($upload_data['full_path'], $path_to_orig_image);

if ($upload_data['image_width'] < 639 || $upload_data['image_height'] < 426)
{
$this->data['error'] .= 'Small image(img' . $i . ')';
$this->data['err_upl_img'][$i] = 'Small image(img' . $i . ')';
}

if ($upload_data['image_width'] < 639 && $upload_data['image_height'] < 426)
{
copy($upload_data['full_path'], $path.$i.'.jpg');
}
else
{
$this->resize($upload_data, 639, 426, $path.$i.'.jpg');
}

$this->resize($upload_data, 40, 40, $path_th.$i.'.jpg');

if($i == 0)
$this->resize($upload_data, 134, 89, $path_th.$i.'_main.jpg');

unlink (  $upload_data['full_path'] );  //-> copy and rename

return true;
}

jQuery File Upload

Ура! Еще один, свеженький… чем он лучше других? Дока


а) Новенький! Всегда кто берется что-то делать, то обычно смотрит, есть ли смысл, и если есть — делает это.
б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap'е и иконках Glyphicons
в) Само собой мультиселект файлов, Drag&drop, Прогрессбар и превьюшки фотографий.
г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

blueimp.github.com/jQuery-File-Upload/

Поддержка браузеров:

github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

Apache-Ubuntu-VirtualBox Виртуальный web сервер в Windows

В этой статье я расскажу о том:  как настроить «виртуальную локальную сеть» (ВЛС) с помощью программы VirtualBox, создать «виртуальный компьютер» (ВК), установить на нем ОС UBUNTU с web-сервером Apache.

В качестве основы для создания данной конфигурации, подойдет любой более-менее современный компьютер, с установленной на нем ОС семейства Windows. Точно подойдут XP, Vista, Win7 (подойдет и Linux т.к. VirtualBox «мульти-платформенный», будут только отличаться настройки «взаимодействия сетей»).

Ждем загрузку картинок Jquery - waitForImages

Usage

Standard

Just provide a callback function and it will be called once all descendent images have loaded.

$('selector').waitForImages(function() {

    alert('All images are loaded.');
    $(this).slideUp();
});

this is a reference to the element that waitForImages() is called on.

Advanced

You can pass a second function as a callback that will be called for each image that is loaded, with some information passed as arguments.

$('selector').waitForImages(function() {

    alert('All images have loaded.');

}, function(loaded, count, success) {

   alert(loaded + ' of ' + count + ' images has ' + (success ? 'loaded' : 'failed to load') +  '.');
   $(this).addClass('loaded');

});

You can also set the third argument to true if you'd like the plugin to iterate over all elements, checking for images referenced in the CSS (by default, it looks at the background-image, listStyleImage, borderImage and borderCornerImage properties). If it finds any, they will be treated as an image and loaded.

The callback will be called on the successful and unsuccessful loading of the image. Check the third argument to determine the success of the image load. It will be true if the image loaded successfully.

Alternatively, you can pass an object literal to the plugin, instead of the arguments individually.

$('selector').waitForImages({
    finished: function() {
        ...
    },
    each: function() {
       ...
    },
    waitForAll: true
});

You may also set the CSS properties that possibly contain image references yourself. Just assign an array of properties to the plugin.

$.waitForImages.hasImgProperties = ['backgroundImage'];

waitForImages also exposes a custom selector, :uncached, which when used in conjunction with the img selector, allows you to select img elements that are not cached already by the browser.

$('img:uncached').attr('title', 'Loading Image');

https://github.com/alexanderdickson/waitForImages 

Директива RewriteRule .htaccess

Директива RewriteRule и есть настоящая рабочая лошадка преобразований. Эта директива может встречаться более одного раза. Каждая директива, в этом случае, определяет одно правило преобразования. Порядок определений этих правил важен, потому что этот порядок используется при обработке правил во время работы.

Шаблон это perl совместимое регулярное выражение которое применяется к текущему URL. Здесь под "текущим" подразумевается значение URL когда применяется это правило. Этот URL не обязательно совпадает с первоначально запрошенным URL, потому что любое количество правил возможно уже были применены к нему и соответственно преобразовали его.

Определяет правила для механизма преобразований 

http://htmlweb.ru/php/htaccess-mod_rewrite-rewriterule.php 

HTML 5 and CSS 3

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. 

Как убрать аттрибуты тэга и лишние теги

Как убрать аттрибуты тэга

Элементарно!1. Вырезать все тэги, которые не попадают под стандарты W3C (порой проще оставить только те, которые могут использоваться, и аттрибуты, которые позволительно использовать) ( это делается с помощью массива тегов и одного регулярного выражения )
Обычно, на сайтах все элементы (заголовки, абзацы, списки и проч., в том числе и таблицы) стилизованы. И правила для их вывода уже определены. Это исключает использование в "текстах" классы и стили. Убивайте все на корню!2. Убрать все inline стили и классы, которые плодит Word
Пожайлуй, вы получите после этого чистый текст. 

Техническое задание на сайт

1. Обоснование необходимости ТЗ

А зачем вообще нужно ТЗ на сайт? Заказчик говорит: «Нужен следующий сайт: каталог товаров, корзина, форма заказа, доставка, мы на карте, о нас, обратная связь». Что не ясно? Ничего необычного, всё обыденно и рутинно.

О git

http://progit.org/book/ru/
http://githowto.com/
http://www.rsdn.ru/article/tools/Git.xml в картинках

c Habra
http://habrahabr.ru/blogs/Git/60347/ Git Wizardry
http://habrahabr.ru/blogs/Git/136847/  Что такое «git push problem: non fast forward»
http://habrahabr.ru/blogs/Git/60030/  Git Workflow

Mysql Dump

mysqldump --user=minskons --password mo > ./mo.sql

APT HOWTO Основная настройка и т.д.

http://www.debian.org/doc/manuals/apt-howto/ch-basico.ru.html 

Как определить версию Unix системы

Для начала понимаем что это вообще за класс операционки, путем вывода универсальной для всех Unix-систем команды:

$ uname -a

которая нам выведет что то типо такого:

Linux hostname.com 2.6.18-194.17.4.el5PAE #1 SMP Mon Oct 25 16:35:27 EDT 2010 i686 i686 i386 GNU/Linux
или
FreeBSD hostname.com 5.5-STABLE FreeBSD 5.5-STABLE #0: Wed Dec  5 20:00:38 MSK 2007  email@hostname.com:/usr/obj/usr/src/sys/GENERIC  i386
или
AIX svcas07 3 4 000145364C00
OS Name Release Version Machine ID

из чего нам либо станет понятно кто это, либо перейдем к более подробному изучению линуха, для того чтобы уже конкретно определить версию линукса:

$ cat /proc/version 

Linux version 2.6.18-194.17.4.el5PAE (mockbuild@builder10.centos.org) (gcc version 4.1.2 20080704 (Red Hat 4.1.2-48)) #1 SMP Mon Oct 25 16:35:27 EDT 2010

то есть нам понятно семейство линуха и версия ядра, тем более что у семейства шапки есть более подробная команда, для того чтобы узнать версию linux:

$ cat /etc/redhat-release

CentOS release 5.6 (Final)

По хорошему это исчерпывающий ответ, но в шапке также имеется дополнительная утилита ставящаяся в полном комплекте, которая выведет более подробную информацию про версию linux:

$ lsb_release -a

LSB Version:    :core-3.1-ia32:core-3.1-noarch:graphics-3.1-ia32:graphics-3.1-noarch
Distributor ID: CentOS
Description:    CentOS release 5.5 (Final)
Release:        5.5
Codename:       Final

Как подключить php_xsl.dll

XSLT-трансформация стала неотъемлемой частью работы web-программиста, поэтому я недавно столкнулся с казалось бы пустяковой задачей - использованием класса XSLTProcessor. Для своих опытов использую Denwer c PHP 5.3.3, ОС - Windows.  (У меня PHP 5.2.12)

Памятка по правам на папки

Памятка по правам на папки

git: удаление файла/каталога из истории

Понадобилось удалить из истории коммитов файл с паролями к БД. Работает следующий метод:

git filter-branch --tree-filter "rm -rf filename" HEAD

(filename - путь к файлу/каталогу), после этого -

git push origin master --force

чтобы переписать историю изменений.