{"ops":[{"attributes":{"color":"green","size":"16px","link":"https://programmerblog.ru/article/8"},"insert":"Начало в предыдущей статье."},{"attributes":{"color":"green","size":"16px"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Следующее свойство для скрытия элемента "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"visibility."},{"attributes":{"color":"black","size":"16px"},"insert":" Если установить значение "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"hidden"},{"attributes":{"color":"black","size":"16px"},"insert":", то элемент будет скрыт. Как и со свойством "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"opacity"},{"attributes":{"color":"black","size":"16px"},"insert":", скрытый с помощью данного свойства элемент не виден, но остается на макете страницы. Отличается это свойство тем, что данное свойство запрещает взаимодействовать со скрытым элементом. Данное свойство также поддается анимации, у него можно менять начальное и конечное значения. т.е. можно плавно анимировать свойство при помощи "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"transition."},{"attributes":{"color":"black","size":"16px"},"insert":" Дочерние элементы тега со свойством"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"visibility: hidden"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"black"},"insert":"могут быть видны, если им задать свойство "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"visibility: visible"},{"attributes":{"size":"16px"},"insert":"."},{"attributes":{"size":"16px","color":"black"},"insert":" Проведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"pointer,"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"black"},"insert":"и если кликнуть в этой области, то ничего не произойдет, но при наведении курсора мыши на текст блок станет видимым и начнет обрабатывать события. Мы можем это увидеть кликнув по числу находящемуся в центре второго блока."},{"insert":"\n"}]}

{"ops":[{"attributes":{"color":"black","size":"16px"},"insert":"Сегодня я расскажу вам как можно скрыть блок в разметке"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"HTML"},{"attributes":{"size":"16px","color":"green"},"insert":"."},{"attributes":{"size":"16px","color":"black"},"insert":" Все очень просто, самый простой способ это задать в стилях для нужного блока:"},{"insert":"\n.block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Зачем нам это нужно, например у нас существует страница и при переходе на мобильную версию, мы хотим упростить ее и не показывать данные из какого-то блока, и этот способ может очень нам помочь, достаточно только добавить миксин в стили, с классом нашего блока, например:"},{"insert":"\n@media (max-width: 767px) {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Давайте создадим три блока и уберем один из разметки, средствами "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"CSS."},{"insert":"\n"}]}

{"ops":[{"attributes":{"size":"18px","color":"black"},"insert":"Сегодня я расскажу вам, как произвести один из этапов оптимизации вашего сайта на Laravel. Для оптимизации вашего сайта вам может понадобиться"},{"attributes":{"size":"18px"},"insert":" "},{"attributes":{"size":"18px","color":"red","bold":true},"insert":"Sitemap"},{"attributes":{"size":"18px"},"insert":" "},{"attributes":{"size":"18px","color":"black"},"insert":"или карта сайта. Нужна она для того, чтобы Google или Яндекс сообщали своим поисковым роботам обо всех ваших страницах и их URL-адресах для их индексирования. "},{"insert":"\n"},{"attributes":{"size":"18px","color":"black"},"insert":"Sitemap можно сгенерировать несколькими способами. Вы можете использовать Sitemap генератор, если у вас статичный сайт и данные на нем не меняются, например"},{"attributes":{"size":"18px","color":"#0a0a0a"},"insert":" "},{"attributes":{"bold":true,"size":"18px","color":"blue","background":"white","link":"https://www.xml-sitemaps.com/"},"insert":"XML-Sitemap.com"},{"attributes":{"color":"black"},"insert":" "},{"attributes":{"color":"black","size":"18px"},"insert":"или любой другой. Если же у вас динамический сайт вы можете воспользоваться специальным пакетом "},{"attributes":{"bold":true,"color":"blue","size":"18px","link":"https://github.com/spatie/laravel-sitemap"},"insert":"тут"},{"attributes":{"color":"black"},"insert":" "},{"attributes":{"color":"black","size":"18px"},"insert":"или сделать "},{"attributes":{"color":"black","size":"18px","bold":true},"insert":"sitemap"},{"attributes":{"color":"black","size":"18px"},"insert":" самим, как будет описано ниже."},{"insert":"\n"}]}