Как установить Jekyll?

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

Jekyll написан на ruby, поэтому установка следующая (пример для ubuntu):

# Устанавливаем ruby

sudo apt-get install ruby ruby-dev

# Устанавливаем jekyll

sudo gem install jekyll -V

# Создаем новый статичный сайт и запускаем встроенный сервер

jekyll new my-awesome-site
cd my-awesome-site
jekyll serve

# Заходим в браузере на страницу http://localhost:4000 и смотрим результат.

Все просто.

Практически все, что здесь написано, есть на официальном сайте.

Автоматическое создание виртуального хоста в Apache2 на Linux

В данном случае использовалась Ubuntu.

Чтобы автоматически создать виртуальный хост в Apache2, вы можете использовать bash-скрипт. Для этого создайте файл (например, vhost_creator.sh) и вставьте в него следующее содержимое:

[code lang=»bash»]
#!/bin/bash
echo "Creating Virtual Host"
cd /etc/apache2/sites-available
cat <<EOF >> "$1.conf"
<VirtualHost *:80>
ServerName $1
ServerAlias www.$1
DocumentRoot "/var/www/$1"
<Directory "/var/www/$1">
allow from all
Options +Indexes
</Directory>
</VirtualHost>
EOF
mkdir "/var/www/$1"
cd /etc/apache2/sites-enabled
ln -s "/etc/apache2/sites-available/$1.conf" "$1.conf"
echo "Editing /etc/hosts"
cat <<EOF >> "/etc/hosts"
127.0.0.1 $1
EOF
echo "Set permissions"
chown -R "$2:$2" "/var/www/$1"
echo "Restarting Apache2"
/etc/init.d/apache2 restart
echo "Finished!"
echo "Local address: /var/www/$1"
echo "Web address: http://$1"
[/code]

Сделайте файл исполняемым и запустите его от имени root’а:

[code lang=»bash»]
$ chmod a+x ./vhost_creator.sh
$ sudo ./vhost_creator.sh your_vhost your_login
[/code]
где:
your_vhost — название виртуального хоста, например test.local или mysite.ru (заходить на него вы будете по адресу http://test.local или http://mysite.ru).
your_login — ваша основная учетная запись, например crusat. Этот параметр требуется для установки прав владельца на корневую директорию виртуального хоста.

Последнюю версию данного приложения, вы можете найти на https://github.com/crusat/vhostcreator

Настраиваем виртуальные хосты в apache2

1. Переходим в /etc/apache2/sites-available
2. Создаем файл example.local.conf
3. Вставляем свои данные:
[code]
<VirtualHost *:80>
ServerName example.local
ServerAlias www.example.local
DocumentRoot "/var/www/example"
<Directory "/var/www/example">
allow from all
Options +Indexes
</Directory>
</VirtualHost>
[/code]
4. Переходим в каталог /etc/apache2/sites-enabled
5. Создаем ссылку на файл example.local.conf
[code lang=»bash»]
$ sudo ln -s /etc/apache2/sites-available/example.local.conf example.local.conf
[/code]
6. Перезапускаем апач:
[code lang=»bash»]
$ sudo /etc/init.d/apache2 restart
[/code]
7. Редактируем файл /etc/hosts и добавляем следующую строку:
[code]
127.0.0.1 example.local
[/code]

P.S. Если у вас появляется 500 ошибка, то рекомендую посмотреть логи апача (возможно, у вас не включен mod_rewrite или еще что-либо):
[code lang=»bash»]
$ tail -f /var/log/apache2/error.log
[/code]

PhantomJS отображает квадратики вместо русских букв

Если в системе не установлены нужные для сайта шрифты, если их нельзя установить, либо еще по какой-то причине phantomjs показывает вам квадратики, можете попробовать следующий способ.
На сайте, с которым работаем, задать @font-face для всех используемых шрифтов и только после этого читать/фотографировать содержимое страницы. ВНИМАНИЕ! Работает только на версии >= 1.6.

См. пример, здесь БУДУТ квадратики:
[code lang=»html»]
<!DOCTYPE HTML>
<html>
<head>
<title>@font-face demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body {
font-family: Arial;
margin: 50px;
}
</style>
</head>
<body>
<p>Тест русского текста.</p>
<p>Если вы видите русский текст, то тест успешно пройден.</p>
</body>
</html>
[/code]
Для запуска можно использовать примерно такую команду:
[code lang=»bash»]
phantomjs rasterize.js http://crusat.ru/demos/fontface/index-no-fontface.html test.png
[/code]

А здесь со шрифтами все будет отлично:
[code lang=»html»]
<!DOCTYPE HTML>
<html>
<head>
<title>@font-face demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
@font-face {
font-family: Arial;
src: url(arial.ttf) format("truetype");
}
body {
font-family: Arial;
margin: 50px;
}
</style>
</head>
<body>
<p>Тест русского текста.</p>
<p>Если вы видите русский текст, то тест успешно пройден.</p>
</body>
</html>
[/code]
Для запуска можно использовать примерно такую команду:
[code lang=»bash»]
phantomjs rasterize.js http://crusat.ru/demos/fontface/index.html test.png
[/code]

Это самое простое решение, что пришло мне в голову.

Как написать хак для IE, Firefox, Chrome

Увы, приходится иногда использовать и хаки — сложная не своя верстка, в которой нет времени разбираться, например…
У оперы хаки от версии к версии меняются, поэтому можно в css написать для нее как основы, а остальных поправить хаками (если требуется).

[code lang=»css»]
/* firefox */
@-moz-document url-prefix() {
.myclass {
font-size:16px;
}
/* … */
}
/* chrome и safari */
@media all and (-webkit-min-device-pixel-ratio:0) {
.myclass {
font-size: 18px;
}
/* … */
}
[/code]

Для Internet Explorer — самое удобное. Подход называется «Conditional comments». См. пример:

[code lang=»html»]
<!—[if IE]>
Special instructions for IE here
<![endif]—>
[/code]

Внутри можно, например, подключить css, которая выполнится только в IE:

[code lang=»html»]
<!—[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie.css">
<![endif]—>
[/code]

Также, можно указывать версию IE:

[code lang=»html»]
<!—[if IE 6]> <![endif]—>
<!—[if IE 7]> <![endif]—>
<!—[if IE 8]> <![endif]—>
[/code]

Или указывать версию больше или меньше:
gt: больше, чем.
lt: меньше, чем.
Если добавляется «e», то еще и равно значению
[code lang=»html»]
<!—[if gt IE 6]>Больше 6-ого<![endif]—>
<!—[if lte IE 7]>Седьмой или меньше<![endif]—>
[/code]

И помните, хаки — плохой выход.

Cufon не меняет цвет ссылок при наведении

Обнаружил такую проблему: Cufon (заменитель шрифтов, см. здесь и здесь) прекрасно менял все шрифты, цвета и т.п. Но в одном месте ни в какую не хотел изменять цвет шрифта при наведении (:hover).
Оказалось, что если ссылка, которая должна hover’иться, находится внутри другого блока текста, который уже обработан Cufon’ом, то она не сможет изменить цвет (!), border и некоторые другие свойства будут меняться без проблем.
Итак, ниже показываю, в каких случаях hover’а не происходит, а в каких происходит (в коде все понятно). Либо можно скачать архив, вместе со шрифтами, и самому посмотреть.

[code lang=»html»]
<!doctype html>
<html>
<head>
<script type="text/javascript" src="test/jquery00.js"></script>
<script type="text/javascript" src="test/cufon-yu.js"></script>
<script type="text/javascript" src="test/Plumb_20.js"></script>
<style>
a, a:link, a:visited { color : #0000cc; }
</style>
</head>
<body>
<div class="example">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon’ом, обработка сначала внешнего блока, потом ссылки [hover’а нет]</a> ipsum</div>
<div class="example2"><span class="example">Lorem</span> <a href="#" class="ahref">Ссылка, не вложенная в элемент с Cufon’ом, внутри текста</a> <span class="example">ipsum</span></div>
<div class="example2">Lorem <a href="#" class="ahref">Ссылка, вложенная в другой элемент с Cufon’ом, обработка сначала ссылки, потом внешнего блока</a> ipsum</div>
<div class="example2">Lorem <a href="#">Ссылка без явного указания класса [hover’а нет]</a> ipsum</div>
<a class="ahref" href="#" >Ссылка, не вложенная в другие элементы, которые обрабатываются Cufon’ом</a>

<script type="text/javascript">
Cufon(‘.example’);
Cufon(‘.ahref’, {
color: ‘#0000cc’,
hover: true,
hover: {
color: ‘#ccc’
}
});
Cufon(‘.example a’, {
color: ‘#0000cc’,
hover: true,
hover: {
color: ‘#ccc’
}
});
Cufon(‘.example2’);
</script>
</body>
</html>
[/code]

Table X is marked as crashed and should be repaired

Это ошибка обычно возникает из-за неожиданной перезагрузки СУБД.

В PhpMyAdmin или MySQL-консоли выполните следующий запрос:
[code lang=»sql»]
REPAIR TABLE `mytable`
[/code]
где `mytable` — таблица, указанная в ошибке.

Создание кнопок онлайн

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

Da Button Factory

http://dabuttonfactory.com

У этого сайта одна функция — создание кнопок. Настроек не слишком много, но можно просто и быстро создать неплохие кнопочки.

Аналоги:

http://css-tricks.com/examples/ButtonMaker — кнопки без изображения (на css3).

http://jirox.net/AsButtonGen — китайский сервис, настроек больше, чем в Da Button Factory, но менее удобен.

Если вы знаете еще какие-либо онлайн-сервисы для создания кнопок, пожалуйста, оставьте их адреса в комментариях.

Редактирование изображений онлайн

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

Приступим!

pixlr.com

http://pixlr.com

Просто нереально мощный и бесплатный сервис для работы с фотографиями. Имеет русскоязычный интерфейс. Его вполне можно позиционировать с онлайн-аналогом фотошопа. На этом сайте доступно несколько сервисов для работы с изображениями. Начнем по порядку.

Editor

http://pixlr.com/editor

Интерфейс Editor’а очень сильно похож на интерфейс программы Paint.Net, т.е. является простым и удобным, но в то же время очень функциональным. Попробуйте, и сами все увидите.

 

Express

http://pixlr.com/express

Сервис Express требуется для наложения каких-либо эффектов на фотографию, быстрой обрезки или изменения размеров изображения.

 

O-matic

http://pixlr.com/o-matic

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

 

Также, на pixlr.com есть плагины-грабберы для файрфокса и хрома. С помощью них можно через контекстное меню в браузере открыть интернет-картинку сразу для редактирования в pixlr.com. Также есть бесплатный хостинг для изображений. Это не столь интересно, поэтому подробно не рассматриваю.

Аналоги:

http://www.flauntr.com/flauntr/index.jsp

http://fotoflexer.com

https://www.photoshop.com

http://www.sumopaint.com/app

http://www.phixr.com

http://www.splashup.com

http://www.picjuice.com

http://www.pikipimp.com

http://www.lunapic.com/editor

http://www.alilg.com/software/free-online-photo-editor

http://www.drpic.com

http://www.aviary.com — растровый и векторный редакторы, эффекты, без регистрации.

Если вы знаете еще какие-либо онлайн-сервисы для работы с изображениями, пожалуйста, оставьте их адреса в комментариях.