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

Организация рабочего процесса с Trello или замена стикеров на монитор

На вашем мониторе приклеена куча стикеров? Ну или может они уже перекочевали в электронный вид на рабочий стол в виде виджетов? Тогда вам возможно пригодится web-сервис призванный организовать рабочие процессы или же что угодно, как гласит слоган на сайте Trello.com.

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

Структура приложения представляет собой набор произвольно названных досок, каждая из которых может содержать произвольные списки карточек-дел. Карточки можно перемещать между списками или досками. Сами карточки могут содержать фото, вложенные файлы, ссылки, комментарии и еще многое другое. Gold-версия еще больше расширяет возможности кастомизации списков и карточек, но даже обычной более чем достаточно для серьезной работы. Кстати, в текущей версии при создании новой доски в мобильном приложении для Android автоматически создаются три списка по умолчанию: «Нужно сделать», «В процессе» и «Готово» — это довольно удобно. А при создании доски через веб-интерфейс, списки по умолчанию почему-то отсутствуют. Ну, думаю это исправят.

организация чего угодно - Trello.com

Кстати доски бывают приватными, командными и публичными. Можно найти человека в Trello по имени или адресу электронной почты, а затем добавить в качестве участника в определенной доске — и ваши задачи будут синхронизированы. Если кто-то не зарегистрирован в сервисе, его можно пригласить с помощью ссылки (не в Сибирь конечно :) ).

Ну и напоследок, так как этот сайт преимущественно про web-разработку, логично упомянуть, что Trello может быть хорошим инструментом для взаимодействия заказчика сайта и исполнителя. Можно вести список текущих задач, а так же отдельные списки по планируемым доработкам. Как уже упоминалось выше, к карточкам-задачам можно прикреплять скриншоты, ссылки на другие проекты, комментарии и так далее. А если разработку ведет команда, роль инструмента еще более возрастает. Какие то доски могут быть доступны и разработчикам и заказчику(ам), а какие-то чисто разработчику. Можно разграничить взаимодействие более узко — например участвуют только программисты или только дизайнеры. Вобщем простор достаточный.

Конечно Trello не единственный подобный сервис, однако он заслуживает рассмотрения. Особенно если учесть, что львиная доля функционала — бесплатна.

Все еще используете Denwer? Пора попробовать Open Server!

Сразу сделаю оговорку для тех, кто использует для web-разработки среду *NIX — конечно, это намного логичнее разрабатывать на том, на чем и будет работать. Спору нет.

Ну а тем кто все же не покинул мир Windows :) да и еще разрабатывает с помощью этой платформы сайты, пора пересмотреть свой пакет приложений. Например вместо Denwer почему бы не попробовать Open Server, который, кстати, стартовал уже довольно давно — летом 2010. За это время он обрел версию 5.2.6. А количество скачиваний перевалило за миллион. Вобщем проект устоявшийся и к тому же очень функциональный.

настройка Open Server

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

Кстати, если вы хотите вести разработку на PHP 7, то здесь Open Server не заменим. Denwer уже порядком устарел — в последней версии на данный момент доступен лишь PHP 5.3. Вобщем, как ни хорош был когда то Denwer, кажется ему пришла достойная замена.

DLNA или воспроизведение видео с Android-телефона на экране компьютера по Wi-Fi

Набор стандартов DLNA в сочетании с набором сетевых протоколов uPnP позволяют воспроизвести видео с любого совместимого устройства на любое (будь то телефон, планшет, компьютер, медиаплеер, HTPC или смарт-TV). Для примера рассмотрим простой вариант — воспроизведение видео с Android-телефона на компьютере под управлением Windows 7.
Программного обеспечения для использования DLNA довольно много, но так как это открытый стандарт, бывают конфликты. Я приведу пример программ которые заработали лично у меня, что называется, с пол-оборота.

Android-устройство

На телефон устанавливаем бесплатное приложение из Play Маркет: WiTV Samsung. Пусть вас не смущает слово Samsung в названии, программа работает на любом телефоне. Данная программа является как сервером, так и клиентом (то есть может быть как источником контента, так и приемником). Каких либо настроек производить не придется.

Компьютер на базе Windows

На компьютер устанавливаем программу DLNA-клиент: XBMC. Кстати, она, помимо всего прочего, является очень не плохим популярным медиаплеером. Помимо этого XBMC доступен для многих других платформ, в том числе Linux, iOS и других. Скачать его можно с официального сайта xmbc.org. В интернете также можно найти множество особых сборок, но для нашей задачи мы воспользуемся текущей официальной версией: на момент написания поста это XBMC 12.2 ‘Frodo’.
Для того чтобы программа заработала не просто как медиаплеер, а именно как DLNA-клиент, нужно включить лишь одну опцию в настройках. Заходим в меню ‘System’ -> ‘Settings’ -> ‘Services’ -> ‘UPnP’ и ставим галочку напротив пункта ‘Allow contol of XBMC via UPnP’.
xbmc

Запуск воспроизведения видео

Итак все готово для пробной трансляции. И компьютер и телефон должны быть подключены к одной сети Wi-Fi. Запускаем XBMC на компьютере. Затем WiTV на Android. Выбираем воспроизведение видео (пиктограмма слева вверху). Затем выбираем видео с телефона или один из представленных каналов (например YouTube). При запуске воспроизведения программа спросит куда выводить видео. Если все работает правильно, в списке устройств появится XBMC, и после его выбора воспроизведение начнется на мониторе компьютера (если формат видео поддерживается).

Телефон как пульт ДУ

Помимо этого, телефон с программой WiTV можно использовать как пульт дистанционного управления XBMC во время просмотра видео (даже если видео было запущено не с телефона). Для этого нужно зайти в воспроизведение видео, а затем выбрать в выпадающем меню (за него отвечает маленькая пиктограмма вверху справа) пункт ‘Плеер’. Даже если вы переведете телефон в спящий режим, воспроизведение не прервется.
Конечно, в качестве полноценного пульта лучше подходит другая программа — Yatse. Но в данном посте я описываю именно WiTV, так как она является DLNA-сервером без всяких плагинов и доплат.

Клонирование объектов в векторном редакторе Inkscape

Некоторое время назад я писал о стрелочных часах на JavaScript. Для создания спрайтов стрелок для них, использовался векторный редактор Inkscape. Для демонстрации как клонировать стрелки с наклоном 6 градусов (для каждой минуты или секунды: 360/60=6) я буду использовать те же исходники что и для часов.
Давайте откроем в Inkscape файл clock.svg. В нем видно одиночные стрелки — минутную, часовую и секундную. Если выделить любую стрелку, например минутную, то видно что она имеет фон, повторяющий по размеру будущий циферблат часов. Это необходимо чтобы вращение стрелок происходило вокруг единого центра. Объект стрелки состоит из 2-ух сгруппированных объектов. Чтобы отредактировать стрелку нужно, соответственно, их разгруппировать. Это действие хорошо знакомо тем, кто работает в векторных редакторах. В Inkscape для этого нажмите Shift+Ctrl+G или Объект->Разгруппировать.
разгруппировать объекты
Объект фона является прозрачным, чтобы не загораживать циферблат часов. Причем фон должен быть круглым, иначе при вращении мы получим изменение высоты и ширины клонов, что нас не устраивает. Чтобы увидеть контур фона, выделите его. Однако прозрачные объекты не получится выделить просто кликнув на них мышью. Но можно обвести рамкой то место, где должен быть фон — выделятся все обведенные объекты. Удерживая Shift, исключите ненужный объект — в данном случае стрелку. После этого откройте диалог Объект->Заливка и обводка. В закладке «Обводка» переместите бегунок Альфа-канала (обозначен буквой A) до конца вправо. Теперь контур фона виден — это обычный круг.
контур фона
Этот шаг был только для того, чтобы увидеть, как правильно готовить стрелки к клонированию. Возвращаем все обратно, то есть возвращаем прозрачность обводки фона и группируем стрелку с фоном (выделить их и нажать Ctrl+G).

Переходим непосредственно к клонированию. Для этого выделяем нужную стрелку и идем в меню Правка->Клоны->Создать узор из клонов. Устанавливаем количество строк = 1, столбцов = 60. В закладке «Поворот» ставим угол на столбец = 6 градусов.
создать узор из клонов
Во всех остальных закладках должно быть все по умолчанию, то есть по нулям (кроме экспоненты, она равна 1). Симметрия стоит на простом смещении. Нажимаем кнопку «Создать» и наблюдаем следующую картину (если увеличить масштаб).
клонированная стрелка
Самый первый клон надо удалить, так как он является абсолютной копией исходного объекта (а два одинаковых объекта нам не нужны). Просто кликните на первую стрелку в ряду и нажмите Del. Теперь надо выделить все клонированные стрелки и вызвать диалог Объект->Выровнять и расставить. В нем нажимаем кнопку в блоке «Убрать перекрытия» (Г=0, В=0).
убрать перекрытия объектов
Вот и готова первая стрелка для часов. Экспортируем ее в растр. Меню Фаил->Экспортировать в растр. Высоту устанавливаем соответственно будущему размеру часов. В примере это 100 пикселей. Ширина в этом случае должна быть 100 * 60 = 6000 пикселей.
экспортировать в растр