Выпадающее меню на CSS без доступа к HTML, без JavaScript

В некоторых онлайн конструкторах сайтов на определенных тарифах очень ограничен функционал (например — Битрикс24). Бывает нет возможности вставить свой JavaScript-код, а так же поменять HTML-код готовых блоков. Такая политика в общем то не удивительна, надо же как-то монетизировать такие продукты.

Что если все же хочется выпадающее меню на сайте, а базовые модули с таким функционалом не доступны. Попробуем сделать чисто на CSS. Бывает, что его добавлять как раз разрешают.

Итак пример структуры одноуровневого меню, которое будем превращать в двухуровневое:

1
2
3
4
5
6
7
8
9
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Four</li>
<li>Five</li>
<li>Sub el 1</li>
<li>Sub el 2</li>
</ul>

И CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
ul {
  word-spacing: -.36em;
  display: table;
  position: relative;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  padding: 10px;
  word-spacing: normal;
  height: 20px;
  width: 80px;
  background: gray;
}
 
ul:hover li {
  display: inline-block;
}
 
li:nth-child(6),
li:nth-child(7) {
  display: none;
  position: absolute;
  left: 200px;
  background: lightgray;
}
li:nth-child(6) {
  top: 40px;
}
li:nth-child(7) {
  top: 80px;
}
li:nth-child(1):hover ~ li:nth-child(6),
li:nth-child(2):hover ~ li:nth-child(6),
li:nth-child(4):hover ~ li:nth-child(6),
li:nth-child(5):hover ~ li:nth-child(6),
li:nth-child(1):hover ~ li:nth-child(7),
li:nth-child(2):hover ~ li:nth-child(7),
li:nth-child(4):hover ~ li:nth-child(7),
li:nth-child(5):hover ~ li:nth-child(7) {
  display: none;
}

Вот что у нас получилось:

  • First
  • Second
  • Third
  • Four
  • Five
  • Sub el 1
  • Sub el 2

Как видно, выпадающие пункты меню размещены в конце, иначе начинаются проблемы при отображении. Некоторый CSS-код относится к решению проблемы отступов между элементами типа inline-block (В частности word-spacing и display: table у UL). Неудобство, конечно, еще в том что все отступы пунктов выпадающего меню придется прописывать вручную. А для разных разрешений экрана, по видимому, их надо будет настраивать с помощью медиа-запросов CSS.

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

Использование Git, если мало места на хостинге или нет доступа к SSH

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

Что если нужно вести разработку сайта, а к SSH доступа нет. Или, например, для хранения репозитория на рабочем сервере нет места. Конечно, речь идет не о крупных проектах. А скорее о небольших сайтах, где экономия иногда идет на всём и используется недорогой shared-хостинг. Повод ли это отказываться от Git? Не обязательно. Хотя конечно некоторые его преимущества будут потеряны.

Суть подхода проста. На локальном компьютере можно вести разработку как обычно, отличается лишь выгрузка на production (рабочий сервер). Обновления можно делать с помощью патчей по FTP. А для формирования патча можно использовать следующий код из консоли (где COMMITHASH — хеш коммита, начиная с которого делаем патч). Команды выполняются из рабочей директории сайта:

mkdir patch
cp --parents $(git diff --no-commit-id --name-only -r COMMITHASH) ./patch

После выполнения этих команд, в папке patch будет сформирован патч, который включает все измененные файлы от указанного коммита до HEAD, с сохранением структуры папок. Остаётся залить содержимое этой директории по FTP на сервер.

Папку patch, после применения патча, нужно удалить из рабочей копии или занести её в файл .gitignore, чтобы она не индексировалась.

Сложно представить такой подход в команде разработчиков, но если разработчиков всего два или три, достаточно использовать Git-сервер (или например приватный репозиторий на Bitbucket), через который будет идти обмен данными. А загрузку патчей на рабочий сайт по FTP может осуществлять, по согласованию, один человек.

Включение wi-fi на ноутбуке, если не работает аппаратная кнопка

Данный пост, по видимости, надо поместить в рубрику «Ремонтируем с помощью скотча». Чего только им не ремонтируют…

Вобщем возникла довольно распространенная проблема — на ноутбуке не работал wi-fi по причине поломки аппаратной кнопки, которая его включает. Ладно бы она была чисто механическая, но на данном конкретном экземпляре (HP Pavilion dv7-1050er) wi-fi включается с сенсорной панели над клавиатурой. Драйвера установлены, система адаптер видит, но сети не ищет. Диагностика Windows говорит: включите адаптер аппаратной кнопкой.

Нашёл в интернете упоминания о том что надо заклеить определённый контакт на модуле wi-fi, выполненном в форм факторе mini pci-e, и тогда он будет включён принудительно, вне зависимости от положения аппаратных кнопок. Где на форумах говорят 4-ый, где 20-ый контакт. В итоге нашёл фото адаптера Broadcom с указанием нужного контакта. У меня адаптер Intel 5100, но решение тоже! Вместо скотча, правда, взял изоленту — её видно лучше и поплотнее она. Свое фото прилагаю ниже. На всякий случай упомяну, что контакт заклеен с одной стороны.
IMG_20180119_175107
После загрузки ОС, ноутбук сразу нашёл сеть и интернет заработал, а так бы пришлось покупать дополнительно usb wi-fi адаптер.

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

152 ФЗ и нужна ли сайту политика конфиденциальности?

Помню данное словосочетание — «политика конфиденциальности» или «privacy policy» раньше видел только в подвале серьезных сайтов. Но насколько помню, ни разу в нее не заглядывал. И зачем простым пользователям интернета такие страшные слова :).
Но тем не менее в РФ существует Федеральный закон №152 регулирующий и регламентирующий сбор персональных данных. Этими данными могут являться даже просто имя, фамилия и отчество, телефон и так далее. Так что если у вас на сайте есть какие нибудь формы обратной связи и уж тем более форма регистрации, то вы, согласно этому закону, собираете персональные данные. А для этого нужно как минимум уведомить пользователей об этом.
Уже появилось довольно много сервисов помогающих составить Пользовательское соглашение и Политику конфиденциальности. В каких то случаях нужно уведомлять Роскомнадзор. Если у вас коммерческий сайт, например интернет-магазин, скорее всего лучше проконсультироваться с юристом — какие документы и где разместить. Ну и стоит самим разобраться в 152 ФЗ. Ссылок приводить не буду — поиск в помощь.
Почему об этом многие заговорили — потому что есть случаи штрафов. Так что можно игнорировать и иметь вероятность штрафа или что-то предпринять уже сейчас.