Затененный задний фон для модального окна

Довольно часто встречающаяся задача: затененный задний фон модального окна или элемента веб страницы.Решается задача довольно просто, с использованием псевдоэлементов :before и :after. Обращаю внимание, что их можно использовать только в парных тегах вида <div></div>, и соответственно нельзя в тегах вида input (т.е. не парных). Еще одним нюансом является то, что значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.

Например задача получить страницу вида:

задний фон для модального окна

Решается примерно так: сначала определим стили CSS:

.application:before {
   content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;
  background-size: cover;
    filter: blur(2px);
}

.application:after {
  content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}
.select_area_color_lent_tag{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background-color: white;
  border: 1px solid black;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  z-index: 20;    
}

HTML для этих стилей может выглядеть таким:

        <div class="application" style="display: none">            <div class="select_area_color_lent_tag">            </div>        </div> 

В нужный момент достаточно показать блок application, и получим картинку как на скриншоте выше,а именно затененный задний фон модального окна:

$(".application").show()

А здесь можно посмотреть еще много советов по работе с CSS

WordPress: Плагин для комментирования записей при помощи vk

Много лет пользовался плагином Social API. Да много лет заброшен и не поддерживается, но работало. Но тут случился переезд сайта с PHP 7.4 на PHP 8.2. И плагин отвалился., Поискал актуальные рабочие плагины — аналоги. Не нашел. Заброшены все. Пришлось закатать рукава и один из самых простых заброшенных плагинов довести до рабочего состояния. Результат выложен тут. Возможно дойдут руки и для того чтобы выложить в репозитарии WordPress.

Ubuntu: устранение уязвимости OpenSSH cve-2023-48795

Вообще, если дистрибутив LTS, то просто выполнив:

apt upgrade
service sshd restart

Уязвимость уже будет теоретически будет устранена, НО! дополнительно можно (на будущее) отключить вообще протоколы ChaCha20-Poly1305 и Encrypt-then-MAC в ssh, которые собственно и эксплуатируются для этой уязвимости:

echo 'Ciphers -chacha20-poly1305@openssh.com' > /etc/ssh/sshd_config.d/anti-terrapin-attack_1.conf
echo 'Ciphers -encrypt-then-mac@openssh.com' > /etc/ssh/ssh_config.d/anti-terrapin-attack.conf

service restart sshd

Теперь если выполнить:

nmap --script ssh2-enum-algos -sV -p 22 localhost 

Можно увидеть список используемых алгоритмов для соединения, и соотвественно узнать, что эти протоколы исчезли из списка доступных

Grafana: Аннотации

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

Создадим ключ API:

Далее, необходимо узнать id дашборда (гаходится как orgId в url) и id панели дашборда, чтобы таргетировать аннотацию.

Далее наваяем небольшой скрипт на PHP, который положим в крон и будем выполнять ночью:

#!/usr/bin/php
<?php
    $geo=21; // Код можно узнать здесь: https://xn--90acbu5aj5f.xn--p1ai/?page_id=6661
    $api_key_grafana="Bearer eyJrIwedwediLCJpZCI6MX0=";
    $api_grafana_url="https://qwedqweai/api/annotations";
    $dash_id=1;
    $panel_id=30;
    $offset=3*60*60; // смещение времени

    $ch = curl_init("https://yandex.ru/time/sync.json?geo=21");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $res=curl_exec($ch);
    curl_close($ch);

    $js=json_decode($res);

    if ($js==null){die("Не удалось получить данные для обработки");};
    $DayFrom=$js->clocks->$geo->sunrise;
    $DayTo=$js->clocks->$geo->sunset;

    $dt=Date("Y-m-d");
    echo "День $dt с $DayFrom по $DayTo\n";
    $dtStart=(strtotime($dt." ".$DayFrom.":00")-$offset)."000";
    $dtEnd=(strtotime($dt." ".$DayTo.":00")-$offset)."000";


    $ch = curl_init($api_grafana_url);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        "Authorization: $api_key_grafana",
        "Content-Type: application/json"
    ));
    curl_setopt($ch, CURLOPT_POST, 1);

    $postd=[];
    $postd["text"]="Дневное время";
    $postd["dashboardId"]=$dash_id;
    $postd["panelId"]=$panel_id;
    $postd["time"]=$dtStart+0;
    $postd["timeEnd"]=$dtEnd+0;
    $postd["tags"]=["daytime"];


    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($postd));
    $res=curl_exec($ch);
    var_dump($res);

?>

В результате на графике получим нечто подобное:

Получение времени захода и восхода солнца

Задача: получить время захода и восхода солнца в текущую дату..

Решение:

Яндекс предоставляет эту информацию в формате json по ссылке вида https://yandex.ru/time/sync.json?geo=21, где 21 — код города в сервисах Яндекса. Список на всякий случай здесь. Один нюанс — нет возможности получить данные на определённую дату.. Да и зависеть от Яндекса, так себе идея. Сегодня сервис работает, через год нет.

Второй вариант: по ссылке вида https://api.sunrise-sunset.org/json?lat=36.7201600&lng=-4.4203400&date=2024-01-22, мы можем получить восход/заход в любую указанную дату. А так как дней всего у нас 365 в году, то вполне возможно просто выкачать эти данные и разместить их у себя например в формате <день_года>.json

1 3 4 5 6 7 55