Архив рубрики: Программы

Переход с Notepad++ на VS Code

Опубликовано автором
1

Долгие годы верой и правдой служил Notepad++. Доходило до того что я использовал его даже в Linux (через Wine). Несмотря на до сих пор его высокую популярность, все же захотел перейти на VS Сode, и не пожалел. Все таки в Notepad++ несмотря на множество плагинов, функционал маловат и продуктивность из-за этого падает. VS Code же напротив сейчас на гребне волны, и даже из коробки в нем много чего есть. Чего стоит только тесная интеграция с git. Хотя зачастую по старой памяти параллельно открыта обычная консоль git, и кое что все равно приходится делать там. Но, тем не менее, наиболее частые операции — add, commit, checkout, push — теперь можно делать прямо из редактора. Однако трудности перехода все же были. Конечно, они в какой-то мере специфичны для меня, но возможно некоторые решения пригодятся и вам. Перед тем как перейти к деталям, замечу, что установка плагинов в VS Code вынесена на основную панель, а не запрятана в недрах меню (в добавок с недвусмысленной иконкой — собери все из кубиков).

Ну а теперь по порядку:

Метки на полях, с быстрым переходом по ним

В Npp они ставились ctrl+F2 или просто мышкой на полях. Переход по ним через F2. Так как бывает приходится иметь дело с длинными файлами, а так же редактировать параллельно код в двух противоположных концах файла, эта функция очень удобна.

Для VS Code есть несколько плагинов на эту тему. Есть например Numbered Bookmarks, который даже судя по названию позволяет ставить нумерованные метки, но для меня это лишне. Остановился на просто Bookmarks. По умолчанию там ctrl+alt+K — создать метку, ctrl+alt+J переход на предыдущую, а ctrl+alt+L на следующую. Метки сохраняются в папке мета-информации .vccode (это нужно иметь ввиду при отслеживании файлов в git).

Вставка HTML

В Notepad++ у меня за это отвечал плагин WebEdit с настроенными кнопками употребительных тегов на панели. Плагин одинаково хорошо вставляет и оборачивает код.

Для VS Code для простой вставки тега, достаточно написать его название и нажать Enter (зависит от типа файла, и соответствующего авто-завершения). Обертку кода в тег тоже можно сделать без плагинов. Для этого выделяем код для обертки, нажимаем shift+ctrl+P (это универсальная комбинация для вызова многих команд), выбираем действие Emmet: Wrap Individual Lines with Abbreviation (Скорее всего оно будет первое в списке, то есть просто нажимаем Enter), затем пишем название тега и еще раз Enter. Довольно мудрено, поэтому я стал искать плагин. Мне пришелся по душе htmltagwrap. Здесь горячая клавиша по умолчанию — alt+W и сразу же происходит обертка тегом P. Если нужен другой тег, просто пишете его название, например div и тег меняется на нужный. К сожалению при нескольких уровнях вложенности иногда бывает работает не корректно и не прописывается автоматически имя завершающего тега, возможно это исправят позднее.

Определение кодировки

Увы, еще встречается кодировка отличная от UTF-8 кое где, например в том же Bitrix. И нужно корректное определение файлов с ней. Кстати, Notepad++ тоже не всегда корректно определял кодировку и мог спутать windows-1251 с Macintosh.

Чтобы VS Code определял кодировку при открытии файла, нужно включить опцию autoGuessEncoding. Для этого идем в меню File -> Preferences -> Settings. Вводим в поиске эту опцию и ставим галку. Теперь редактор должен определять кодировку сам, иначе придется выбирать ее вручную, нажав на название кодировки справа внизу экрана.

Прочее

По умолчанию стоит темная тема оформления. Но я привык к светлой, возможно и вы захотите выбрать что то иное. Для выбора темы нужно нажать не совсем типичную комбинацию клавиш ctrl+K+T, затем выбрать нужную в выпадающем списке. Мне понравилась предустановленная тема Light (Visual Studio). Для особых ценителей можно установить через плагины тему NotepadPlusPlus Remixed Theme. Видимо создана тем, кто так же переходил с Npp.

Хотя в этой статье не ставится цель осветить все полезные плагины, а лишь те что помогают плавно перейти с Npp, упомяну еще парочку.

  • Git History — позволяет посмотреть историю коммитов, подобно Git GUI. На панели справа вверху появляется иконка для вызова плагина.
  • WakaTime — тайм-трекер. Ведет подробную статистику времени, которое вы провели за кодингом. Требуется регистрация на одноименном сайте — wakatime.com — и последующий ввод Api Key в настройках плагина. Для этого нажимаем универсальное shift+ctrl+p, выбираем WakaTime: Api Key, и вставляем ключ полученный на сайте. Саму статистику можно посмотреть на сайте, кликнув на времени, которое отследил Waka, на нижней панели в редакторе.

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 архивов: 
    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. Итак: 
    sudo add-apt-repository ppa:libreoffice/ppa
sudo apt-get update
sudo apt-get install libreoffice
  4. Знаменитый заместитель Photoshop — GIMP уже был предустановлен, а вот векторного редактора не хватает. Устанавливаем Inkscape: 
    sudo add-apt-repository ppa:inkscape.dev/stable
sudo apt-get update
sudo apt-get install inkscape
  5. Далее система контроля версий Git, которая незаменима при любой разработке, в том числе и web: 
    sudo apt-get install git

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

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

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

    sudo service apache2 start

    Так же есть команды restart и stop.

  7. Установить phpMyAdmin можно по разному. Один из вариантов — скачать с официального сайта https://www.phpmyadmin.net/downloads/. Я просто распаковал архив в папку сайтов в директорию pma (разумеется можно назвать по своему), а потом добавил хост pma к этой директории. Папка с локальными сайтами в моем случае находится в ~/sites/.
  8. Иногда требуется FTP-клиент. Один из довольно удобных — Filezilla: 
    sudo apt-get install filezilla
  9. Устанавливаем консольный Yandex.disk: 
    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

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

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

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

    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: 
    sudo apt-get install pdftk
  13. xCHM для чтения документации в формате CHM соответственно: 
    sudo apt-get install xchm
  14. Для некоторых вещей которых не хватает в связи с Windows-привычками устанавливаем Wine: 
    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 в длинных файлах. И все же для тех кому он подойдет, вот команды для установки: 
    sudo add-apt-repository ppa:notepadqq-team/notepadqq
sudo apt-get update
sudo apt-get install notepadqq
  16. И наконец — может пригодится если немного не хватает RAM для комфортной работы. Утилита zRam для создания сжатого swap в оперативке. Звучит странно, на первый взгляд, но работает хорошо. Можно комфортно открывать большее количество вкладок в браузере одновременно. Устанавливаем: 
    sudo apt-get install -y zram-config

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

Опубликовано автором
Добавить комментарий

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

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

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

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

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

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

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

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

Опубликовано автором
2

Сразу сделаю оговорку для тех, кто использует для 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

Опубликовано автором
2

Набор стандартов 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-сервером без всяких плагинов и доплат.

Обновление от 16.02.2020:
Одна из рабочих связок на данный момент:
Программа Tранслировать на TV: Chromecast, IPTV, FireTV, Xbox для Android + Kodi для ПК.