Шпаргалка по единицам измерений CSS

10 ноября 2013, 16:59

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

Пиксели (px)
Использовать для: границы рамок (borders); общие элементы при создании фиксированных лэйаутов; значения для толщин и смещений CSS теней (shadows). Избегайте использования в качестве граничных точек @media запросов, т.к. в противном случае страница «разваливается» при её зуммировании: используйте rem или em вместо них.
Не используйте для: типографики. (Исключение: установка базового font-size в вашем CSS reset файле).


Проценты (%)
Использовать для: создание респонзив (responsive) картинок и контейнеров; установка высоты height для body в некоторых случаях (full-screen фон, липкий футер (1, 2, 3) и т.д.).
Не используйте для: типографики. (Исключение: font-size в CSS reset).


em, ex
Использовать для: типографики и элементов, относящихся к типографики (margins к примеру), с пониманием, что em и ex имеют "подводные камни" при использовании в сложных лэйаутах. В качестве альтернативы рассмотрите использование единицы rem.


Points and picas
Использовать для: печатных таблиц стилей.
Не используйте для: ничего другого.


rem
Использовать для: более надёжная и предсказуемая альтернатива для em и ex, а также граничных точек @media запросов.
Не используйте для: если планируется поддержка браузеров <= IE8. (Или, если хочется, используйте полифил).


Просто числа
В то время, как многие CSS свойства требуют указания единиц измерения в своём описании, есть несколько свойств, которые желательно и рекомендуемо использовать без оных просто указанием величины «голым» числом (целым или дробным). В частности, line-height и border-image — примеры таких свойств.

Пасхальные яйца Google

3 апреля 2013, 21:07

Забавные пасхальные яйца сайта «корпорации добра».

  1. Набрать в строке поиска
    • do a barrel roll — Бочка
    • zerg rush — Отражение атаки зергов на контент
    • Askew — Поворот странички на несколько градусов
  2. PAC-MAN — Игра в небезызвестный Pacman

Переехали

25 марта 2013, 21:41

Всем привет! Блог плавно переехал на другой сервер. Проблем с работой в это время не наблюдалось.

На предыдущем сервере были проблемы с доставкой почты. Читатели жаловались, что не работают email-уведомления. Да и мне не приходили извещения о новых комментах. Проблема оказалась в том, что в целях безопасности и предотвращения спама на моём предыдущем бесплатном хостинге была отключена работа почты. Решением проблемы оказался перезд на другой.... бесплатный хостинг. Тут уже никаких ограничений ввиду бесплатности нет :)

Так что теперь смело подписывайтесь на интересующие заметки, комментируйте, оставляйте отзывы.

Отличный учебник по Git

20 марта 2013, 23:11

Чтобы подтянуть свои знания по системе контроля версий Git, нашёл просто суперски удобный, структурированный и понятный мануал. Читаем на сайте автора. Учебник периодически обновляется (на момент написания доступна версия от 18.02.2013) и содержит всевозможные поясняющие схемы. Вообщем мега полезная вещь. Пользуемся на здоровье :)

Обновление: Нашёл прекрасное дополнение к предыдущему учебнику — интерактивный тур по основам Git.

Довольно увлекательное чтение выходит :). Для любителей SVNвот.

Заметка о производительности и масштабируемости

13 марта 2013, 1:12

Оригинал заметки находится в блоге Дениса Баженова.

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


Иногда встречаюсь c непониманием того, что такое производительность, а что такое масштабируемость. Почему-то некоторые люди считают, что это одно и то же.

С производительностью все более менее понятно. Это мера скорости работы системы. Запрос поступает в систему и через некоторое время система генерирует ответ. Это время (которое иногда называют latency) и является мерой производительности системы. Для интернет-приложений время получения ответа клиентом может быть значительно больше, чем время генерации ответа на стороне сервера (потери в канале, необходимость загрузки дополнительных статических ресурсов и т.д). Обычно эти издержки не учитываются при оценке производительности, хотя надо признать, они могут очень сильно влиять на user experience работы с приложением.

С масштабируемостью все немного сложнее . Если производительность это ответ на вопрос “как быстро?”, то масштабирумость — на вопрос “как много?”. Как много пользователей одновременно могут пользоваться ресурсом? Как много данных может быть в базе данных прежде чем она перестанет справляется с нагрузкой?

Иначе говоря, оптимизация под производительность подразумевает делать ту же работу используя меньше ресурсов. Под масштабируемость — используя больше ресурсов, делать пропорционально больший объем работы.

Это может показаться странным, но оптимизация под масштабируемость нередко приводит к худшей производительности. С точки зрения производительности наверное нет ничего лучше чем sql-вызовы прямо в шаблоне (зачем тратить лишнее время на вызовы полиморфных методов, да?). Но для того чтобы хорошо масштабироваться по объему данных в БД, необходимо уметь “пилить” нагрузку между серверами. А для этого требуется гибкий механизм диспетчеризации обращений к базе данных (ORM, ActiveRecord, DataMapper, DAO или что там у вас). Нам нужен некий промежуточный слой, который бы абстрагировал клиента от знания где именно (на каком сервере) лежат данные, которые он запрашивает. В зависимости от специфики реализации такие слои могут добавлять существенный overhead к latency ответа. И все это делается только ради того чтобы быть больше, а не быстрее (на самом деле делается гораздо больше, это всего лишь частный пример), потому что в большинстве случаев быть большим выгоднее, чем быть быстрым.

Только не поймите меня неправильно, я не хочу сказать, что быть быстрым не надо. Пользователи не будут ходить на ваш ресурс если страницы будут открываться по 10 секунд. Что я хочу сказать, так это то, что ваши пользователи не будут платить вам больше, если страницы вашего ресурса будут открываться не 0.2 секунды, а 0.1. Но если у вас будет в два раза больше пользователей…

Безопасно передаём файлы по SSH

4 марта 2013, 22:51

Посмотрим на метод копирования файлов и директорий между двумя Unix или Linux-серверами по ssh с помощью программы scp. Scp использует ssh для соединения и предоставляет аналогичный уровень безопасности.

В примерах ниже, замените [username] именем пользователя сервера (логином), [host-ip] — ip адресом хоста / именем домена.

Пример 1: Скопировать файл с локальной машины на удалённый сервер

scp /local/directory/file.zip [username]@[host-ip]:/remote/directory/file.zip

Пример 2: Скопировать файл с удалённого сервера на локальную машину

scp [username]@[host-ip]:/remote/directory/file.zip /local/directory/file.zip

Пример 3: Скопировать директорию с локальной машины на удалённую

scp -r /local/directory [username]@[host-ip]:/remote/directory

Пример 4: Скопировать несколько файлов с локальной машины на удалённый сервер

scp file.txt another-file.txt [username]@[host-ip]:/remote/directory

Пример 5: Скопировать файлы с локальной машины на удалённую, в свою домашнюю директорию

scp file.txt another-file.txt [username]@[host-ip]:~

Замечание о скорости копирования

По умолчанию scp использует при передаче данных алгоритм шифрования Triple-DES. Можно несколько увеличить скорость передачи данных, включив алгоритм Blowfish. Для этого в командной строке следует добавить -c blowfish:

scp -c blowfish file.txt [username]@[host-ip]:~

Подборка .htaccess правил

3 марта 2013, 21:35

Составлю подборку полезных и часто используемых .htaccess правил и решений и периодически буду дополнять новыми.

Убираем www из урла
Для удобства или для SEO, вы можете захотеть убрать (или использовать) www в адресе вашего сайта. Приведенный код убирает www из урла сайта и перенаправляет на адрес вида http://mysite.com

RewriteEngine On
RewriteCond %{HTTP_HOST} !^mysite\.com$ [NC]
RewriteRule ^(.*)$ http://mysite.com/$1 [R=301,L]
Автоматически устанавливать файлам кодировку utf-8
Один из вариантов избежать проблем с кодировкой — это создать .htaccess с таким содержанием:
<FilesMatch "\.(htm|html|css|js)$">
AddDefaultCharset UTF-8
</FilesMatch>
Убрать расширение файла
Расширения файлов могут быть полезны для разработчиков, но они абсолютно не нужны обычным посетителям вашего сайта. Приведенный ниже код удаляет .html расширение у всех html-файлов.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
# Вместо html может быть любое другое расширение: php, htm, asp и т.д.
Запись php ошибок в лог-файл
Интересный способ записи ошибок выполнения скрипта. Просто создайте файл php_error.log у вас на сервере и укажите до него путь в последней строке кода.
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
# log to file
php_flag log_errors on
php_value error_log /location/to/php_error.log
Перенаправление со старого домена на новый
Перенаправляем посетителей со своего старого сайта на новый, используя 301 редирект.
RewriteEngine On
RewriteRule ^(.*)$ http://www.newsite.ru/$1 [R=301,L]
Изменяем некоторые системные значения
Данные модификации могут срабатывать не всегда:
# Увеличиваем максимальный размер загружаемого файла
php_value upload_max_filesize 100M
# Увеличиваем максимальный размер файла передаваемого пост-запросом
php_value post_max_size 100M
# Увеличиваем время выполнения скрипта
php_value max_execution_time 700
Удалить подраздел/категорию из урла
Для того, чтобы изменить урл вида: http://site.ru/category/seo на http://site.ru/seo, дописываем в .htaccess следующий код:
RewriteRule ^category/(.+)$ http://www.yourdomain.com/$1 [R=301,L]
Пользовательские страницы ошибок
Для каждой ошибки создаём свой html(php)-файл и прописываем в .htaccess следующие инструкции:
ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authrequest.html
ErrorDocument 403 /errors/forbidden.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/servererror.html
Запрет выполнения php-скриптов
Данный код может быть очень быть полезен там, где вы храните файлы или картинки. Только нужно запретить перезаписывать .htaccess.
php_flag engine off
Защита от хотлинкинга
Хотлинк — это включение в веб-страницу файлов-изображений или других ресурсов с чужого сервера. Для избежания этого злостного деяния используем следующий код:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.ru/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Ctrl +  Ранее