Страницы

среда, 27 марта 2013 г.

Прозрачный однородный фон

Есть несколько способов, которыми можно сделать однородный прозрачный фон на сайте.
Рассмотрим на примере:
- нужно получить темно-иссиня-серый фон #3b4044 с прозрачностью слоя 0.75.

1. RGBA(59, 64, 68 .75)


Это первое, что приходит на ум. Отличный вариант для быстрого задания цвета с прозрачностью. Даже разложение 16-ричного определения цвета на три 10-ричных канала не представляет сложности. Но есть одна проблема: не работает в ie8 =(

2. Opacity(.75)


Второе, что приходит на ум. Сделать фон одноцветным и добавить прозрачность. Работает даже в ie5 с помощью дополнительных фильтров:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */
filter: alpha(opacity=75); /* IE 5-7 */

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

Да еще и сглаживание шрифтов нарушается в ie ((

3. background: url(image)


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

Это лечится следующим способом:

4. background: url('data:image/png;base64,...')


Перевод изображения в формат base64, таким образом картинка кодируется и вставляется непосредственно в css.

Вот несколько сайтов для конвертации image to base64:


В итогде получаем:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpisHZ03Q8QYAAC/QGBtfPbbQAAAABJRU5ErkJggg==

Size increased from 109 to 148 (36%)

вторник, 5 марта 2013 г.

Git

Недавно прошла замечательный курс: http://gitreal.codeschool.com/
Открыла для себя несколько забавных команд, которыми можно было бы поделиться

Начальные установки:

  • git config --global user.name "Admin Adminkovi4"
    установка имени пользователя
  • git config --global user.email "admin@mailinator.com"
    установка емэйла пользователя
  • git init
    инициализация гита

Общие команды:

  • git blame index.html --date short
    просмотр в указанном файле построчно: кто и когда последний менял каждую строчку кода (короткий формат даты)
  • git help config
    показать хэлп указанной команды, в данном случае config
  • git log
    показать логи
  • git status
    показать статус
  • git diff
    показывается изменения между коммитами
  • git diff --staged
    показывается staged изменения между коммитами
  • git diff HEAD~5
    показывается изменения между последними пятью коммитами и текущим состоянием
  • git diff sha1..sha2
    показывается изменения между коммитами от sha1 до sha2
  • git diff master bird
    показывается изменения между коммитами на master и на ветке bird
  • git check­out -- cats.html
    отменяет изменения в указанном файле (восстаналивает файл из индекса)

    При этом команда git check­out cats.html работает так:
    если есть ветка с именем cats.html, то произойдет переключение на эту ветку. Для того, чтобы этого не произошло можно сделать git checkout -- cats.html, тогда гит будет точно знать, что нужно восстановить файл, а не переключиться на ветку.

    Кроме того файл можно восстанавливать не только с текущего индекса, а, например, так:
    git checkout master~2 cats.html
    тогда cats.html будет взят из версии мастера на 2 коммита раньше

Работа с коммитами:

  • git add --all
    аналог git add .
    (добавить все измененные файлы в коммит)
  • git commit -a -m "Comment"
    заменяет две команды:
    git add .
    git commit -m "Comment"

  • git commit --amend -m "Comment"
    добавляет изменения к прошлому комиту и меняет сообщение на новое
    (хак, который нужно аккуратно использовать)
  • git reset --soft HEAD^
    удаляет последний коммит, а изменения остаются незакоммиченные
  • git reset --hard HEAD^
    удаляет последний коммит и все изменения в нем
    аналогично:
    git reset --hard HEAD^^ - удаляет два последних коммита и все изменения
    git reset --hard HEAD~5 удаляет два последние 5 коммитов и все изменения
  • git push -u origin master
    -u пишется в первый раз, чтобы потом запомнить позицию и можно было писать просто git push

Работа с удаленным сервером и удаленными ветками:

  • git remote add origin http://githunb.com/blabla.git
    создание нового удаленого сервера с именем origin
  • git remote -v
    просмотр списка удаленных серверов
  • git remote rm origin
    удалить удаленный сервер (масло масляное? ^_^)
  • git remote show origin
    показывается информацию об удаленном сервере
  • git remote prune origin
    удаляет локальные ветки, которых больше нет на удаленном сервере
  • git branch -r
    показывает список всех удаленных веток
  • git push origin :name_branch
    удаляет удаленную ветку name_branch

Теги:

  • git tag -a v0.0.3 -m "version 0.0.3"
    добавляет новй тег с именем v0.0.3
  • git push --tags
    пушит новый тег

Конфигурация и логирование:

  • git config --global color.ui true
    раскрашивает логи =)
  • git config --pretty=oneline
    выводит логи в сокращенно одну строчку
  • git log --pretty=format:"%h %ad- %s [%an]"
    вывод логов в указанном формате, где
    %ad - author date
    %an - author name
    %h - SHA hash
    %s - subject
    %d - ref names
  • git log --oneline -p
    вывод логов с выводом измененных строчек
  • git log --oneline --stat
    вывод логов с выводом статистики изменений
  • git log --oneline --graph
    вывод логов в виде графического дерева коммитов
  • git log --until=1.minute.ago
    вывод всех логов до указанной даты
  • git log --since-1.day.ago
    вывод логов начиная с указанной даты
  • git log --since=2012.01.01 --until=2013.12.31
    вывод логов во временном промежутке
  • git rm --cached development.log
    гит перестает следить за указанным файлом и удаляет его из гита, но не локально
  • git config --list
    посмотреть список конфигураций
  • git config --global core.editor emacs
    исползовать emacs в качестве интерактивных команд
  • git config --global merge.tool opendiff
    использовать opendiff для мержа конфликтов (работает только в OS X)

Алиасы:

  • git config --global alias.mylog \
    "log --pretty=format:'%h %s [%an]' --graph"

    задание алиаса для лог формата
  • git config --global alias.st status
    создание сокращения, отныне git st аналогичен команде git status