Ubuntu для web-разработчика

Сегодня приведу пример установки условно достаточного набора программ для web-разработки в операционной системе Ubuntu (понятно что вкусы у всех разные). К слову сказать, примерно такую конфигурацию я в данный момент и использую.

Версия Ubuntu, а точнее ее модификация Xubuntu с графической средой Xfce вместо Unity, была выбрана 14.04.5 LTS (поддержка до 17 апреля 2019 года). Почему не 16.04? Потому что в репозиториях для 14.04 еще есть PHP 5, а в 16.04 уже PHP 7. Не все текущие проекты с ним на данный момент совместимы. Можно было конечно поставить PHP 5.6 из специального репозитория с пакетами от сторонних разработчиков и под Ubuntu 16.04, но это уже другая тема.

  1. Сначала устанавливаем мультимедиа кодеки, флеш-плеер, шрифты от Microsoft, распаковщик rar архивов:
    1
    2
    3
    
    sudo apt-get install xubuntu-restricted-extras
    sudo apt install msttcorefonts
    sudo fc-cache -fv
  2. Браузер Google Chrome скачал с https://www.google.ru/chrome/browser/desktop/ (Firefox уже есть из коробки).
  3. Устанавливаем LibreOffice, так как идущий в комплекте Gnumeric конечно ест меньше оперативки, но по функционалу не дотягивает до нужного уровня. Например не понимает csv. Итак:
    1
    2
    3
    
    sudo add-apt-repository ppa:libreoffice/ppa
    sudo apt-get update
    sudo apt-get install libreoffice
  4. Знаменитый заместитель Photoshop — GIMP уже был предустановлен, а вот векторного редактора не хватает. Устанавливаем Inkscape:
    1
    2
    3
    
    sudo add-apt-repository ppa:inkscape.dev/stable
    sudo apt-get update
    sudo apt-get install inkscape
  5. Далее система контроля версий Git, которая незаменима при любой разработке, в том числе и web:
    1
    
    sudo apt-get install git

    Если еще не используете, очень рекомендую. Для быстрого вхождения в тему можно почитать книгу про Git о которой идет речь здесь: https://habrahabr.ru/post/150673/

  6. Устанавливаем LAMP, что означает Linux + Apache + MySQL + PHP:
    1
    2
    
    sudo apt-get install tasksel
    sudo tasksel install lamp-server

    Для запуска сервера после установки используем команду:

    1
    
    sudo service apache2 start

    Так же есть команды restart и stop. Шпаргалку по настройке хостов для локальных сайтов напишу позже в отдельном посте.

  7. Установить phpMyAdmin можно по разному. Один из вариантов — скачать с официального сайта https://www.phpmyadmin.net/downloads/. Я просто распаковал архив в папку сайтов в директорию pma (разумеется можно назвать по своему), а потом добавил хост pma к этой директории. Папка с локальными сайтами в моем случае находится в ~/sites/. Подробнее в вышеупомянутом посте про настройку хостов.
  8. Иногда требуется FTP-клиент. Один из довольно удобных — Filezilla:
    1
    
    sudo apt-get install filezilla
  9. Устанавливаем консольный Yandex.disk:
    1
    2
    3
    
    echo "deb http://repo.yandex.ru/yandex-disk/deb/ stable main" | sudo tee -a /etc/apt/sources.list.d/yandex.list > /dev/null && wget http://repo.yandex.ru/yandex-disk/YANDEX-DISK-KEY.GPG -O- | sudo apt-key add - && sudo apt-get update && sudo apt-get install -y yandex-disk
    mkdir ~/Yandex.Disk
    yandex-disk setup

    И индикатор для панели:

    1
    2
    3
    
    sudo add-apt-repository ppa:slytomcat/ppa
    sudo apt-get update
    sudo apt-get install yd-tools

    Для запуска индикатора используется команда:

    1
    
    yandex-disk-indicator

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

  10. Удобный просмотрщик изображений с возможностью пакетной обработки XnView можно скачать с http://www.xnview.com/en/xnviewmp/#downloads
  11. Skype для общения с заказчиками берем с официального сайта: https://www.skype.com/ru/download-skype/skype-for-linux/
  12. Очень шустрая утилита для нарезки и склейки PDF - pdftk:
    1
    
    sudo apt-get install pdftk
  13. xCHM для чтения документации в формате CHM соответственно:
    1
    
    sudo apt-get install xchm
  14. Для некоторых вещей которых не хватает в связи с Windows-привычками устанавливаем Wine:
    1
    2
    3
    4
    
    sudo dpkg --add-architecture i386
    sudo add-apt-repository ppa:wine/wine-builds && sudo apt-get update
    sudo apt-get install --install-recommends winehq-devel
    winecfg
  15. А теперь то что не хватает — редактор Notepad++. Устанавливаем Windows-версию с официального сайта. Лучше 32-битную, там нормально работает Plugin Manager. Конечно этот вариант спорный, но мне так привычнее. В качестве альтернативы можно предложить похожий редактор Notepadqq. Но он хотя и позиционируется как замена Notepad++, все же до него не дотягивает. Например нет плагинов и нет возможности ставить метки на полях для быстрого перехода по F2 в длинных файлах. И все же для тех кому он подойдет, вот команды для установки:
    1
    2
    3
    
    sudo add-apt-repository ppa:notepadqq-team/notepadqq
    sudo apt-get update
    sudo apt-get install notepadqq
  16. И наконец — может пригодится если немного не хватает RAM для комфортной работы. Утилита zRam для создания сжатого swap в оперативке. Звучит странно, на первый взгляд, но работает хорошо. Можно комфортно открывать большее количество вкладок в браузере одновременно. Устанавливаем:
    1
    
    sudo apt-get install -y zram-config

Как убрать всплывающие окна на сайте

Как то раз у одного из моих клиентов, пользующегося бесплатным хостингом, неожиданно стала всплывать недоброкачественная реклама на сайте. Расследование указало на то, что хостинг просто заразили вирусом. Переезжать на новый хостинг по некоторым причинам было неприемлемо. Файлы самого сайта были вирусом не тронуты. В итоге пришлось искать альтернативные методы вырезания рекламы. Сначала был испробован…

Метод перехвата вывода с чисткой кода после закрывающего тега body

Именно в этом месте в моем случае и оказался вредоносный код. Перед началом вывода был добавлен код:

1
2
3
4
5
6
7
8
9
10
<?php
function antibug($buffer)
{
	// убрать мусор
	$garbageCode = substr(strstr($buffer, "</body>"), 7);
	$buffer = str_replace($garbageCode, "", $buffer)."</html>";
	return $buffer;
}
ob_start("antibug");
?>

А в конце:

1
2
3
<?php
ob_end_flush();
?>

Для большинства страничек на сайте это сработало. Но в некоторых местах реклама полезла опять. Тогда был применен 2-ой способ.

Поднятие слоя с сайтом выше всплывающей рекламы

Способ, строго говоря, не очень хороший, так как вредоносный код он не убирает. Из-за этого если хостинг, к примеру, не вылечится от вируса долгое время, кто знает, могут быть санкции поисковой системы — что мол сайт угрожает безопасности и так далее. Но на первое время пойдет, чтобы реклама не надоедала. В моем случае именно это и нужно было. А делается это просто — элементу содержащему весь сайт (в примере, div с идентификатором class=’site’) назначается следующий код CSS:

1
.site {position:relative; z-index:999999;}

И всё! Реклама на сайте присутствует, но её просто не видно.
Кстати у клиента хостинг все таки вылечился, а указанные меры остались в качестве предосторожности на будущее. Конечно, не панацея, но все же.

Как вставить или заменить любую ссылку во Flash с помощью HTML и CSS

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

1
2
3
4
5
6
7
8
9
10
<div style="position:relative;">
<a style="position: absolute; width: 100px; height: 100px; left: 0; top: 0; background: url(/images/blank.gif) left top no-repeat;" href="http://www.example.ru"></a>
<object
  type="application/x-shockwave-flash"
  data="/banner.swf"
  width="100" height="100">
    <param name="movie" value="banner.swf">
    <param name="wmode" value="opaque">
    <param name="allowScriptAccess" value="sameDomain" />
</object></div>

В примере используется флешка 100 на 100 пикселей. На неё накладывается ссылка с абсолютным позиционированием. А чтобы это было возможно, swf-файлу присваивается параметр wmode с значением opaque. Для работы данного примера также необходим пустой gif 1 на 1 пиксель, используемый в качестве фона ссылки.

margin: 0 auto и IE

Для выравнивания сайта по центру часто используется следующий код:

1
.site {margin: 0 auto;}

Идентификатор .site указывает на div-обертку шаблона сайта. У большинства браузеров вопросов не возникает, но Internet Explorer прижимает шаблон к левому краю окна. Один из простых вариантов решения этой задачи — добавить в CSS-файл, предназначенный для IE, код указанный ниже:

1
body {text-align: center;}

Теперь выравнивание по центру Internet Explorer должно работать нормально.

Как обрезать Flash с помощью HTML и CSS

Иногда возникает необходимость модифицировать какой либо элемент дизайна сайта, сделанный на Flash. Допустим fla-исходников нет и в помине, и/или среда разработки Flash недоступна. Если вся требуемая модификация сводится к обрезке имеющегося swf-файла, то это проще сделать средствами HTML и CSS. Например это может потребоваться когда шапка сайта сделана во Flash заодно с меню. Если надо поменять только меню, то его можно отрезать от Flash и сделать альтернативное на JavaScript. Рассмотрим два варианта обрезки.

  1. Обрезаем Flash снизу
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <div style="height:175px; overflow:hidden;">
    <object
      type="application/x-shockwave-flash"
      data="/header.swf"
      width="800" height="200">
        <param name="movie" value="header.swf">
        <param name="wmode" value="transparent">
        <param name="allowScriptAccess" value="sameDomain" />
    </object>
    </div>

    В этом случае высота Flash — 200 пикселей, а высота div-контейнера — 175 пикселей. Соответственно swf-файл будет обрезан снизу на 25 пикселей.

  2. Обрезаем Flash сверху
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    <div style="height:175px; overflow:hidden;">
    <div style="position:relative; top:-25px;">
    <object
      type="application/x-shockwave-flash"
      data="/header.swf"
      width="800" height="200">
        <param name="movie" value="header.swf">
        <param name="wmode" value="transparent">
        <param name="allowScriptAccess" value="sameDomain" />
    </object>
    </div>
    </div>

    А эта обертка в 2 div-а обрезает swf-файл сверху на 25 пикселей.

В следующем посте рассмотрим как вставить или заменить любую ссылку во Flash с помощью HTML и CSS без вмешательства в сам swf-файл.