Программирование сайтов
3 Фев в 21:16

Редактор кода 2021 для HTML/CSS/JS/PHP

Уж сколько лет работал на Notepad++ и не хватало в нем только одного – Emmet. Плагин такой для него есть, однако, установить его никак не получилось. Последняя серьезная попытка закончилась появлением его элементов в меню, но работать он так и не захотел. То ли у меня талант, то ли судьба.

Осознавая, сколько времени тратится на написание конструкций типа: ‘<div class=”item”>…</div>’, решился таки поискать замену, и ведь нашел! Бесплатный редактор с предустановленными возможностями Emmet – Visual Studio Code. Не путать с IDE Visual Studio, которая служит для написания и отладки C/C# кода и не только. Это тяжелый продукт, а мне нужно быстро открывать файлы по FTP, значит, запускаться программа должна быстро.

При установке, программа предложит установить KeyMap, подобный другому редактору. Notepad++ там тоже предлагается. Выбирай и пользуйся теми же горячими клавишами. Также, поставил наиболее популярные плагины для PHP и WordPress, так как в последнее время с ним больше всего работаю. В результате, проверяется синтаксис кода, добавляются функции с аргументами в правильном порядке, например, get_post_meta( $post_id:integer, $key:string, $single:boolean ) – то есть, базовые возможности IDE. Это очень удобно!

Еще, из того чего не было в NPP по умолчанию, квадратик цвета в CSS свойствах color и background. Тоже полезная вещь.

Рекомендую.

24 Ноя в 09:55

Модальное окно (простое)

Требуется только jQuery.
HTML:
[html]
<div class="show-popup">Показать окно</div>
<div class="lite-popup-wrapper">
<div class="fon"></div>
<div class="popup">
<div class="popup-content">Содержимое</div>
<div class="closeblock">+</div>
</div>
</div>
[/html]
CSS:
[css]
.show-popup {
cursor: pointer
}
.lite-popup-wrapper {
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index: 999;
}
.lite-popup-wrapper .fon {
background: rgba(0, 0, 0, 0.8);
position:fixed;
width:100%;
height:100%;
}
.lite-popup-wrapper .closeblock {
cursor: pointer;
position: absolute;
line-height: 44px;
font-size: 44px;
transform: rotate(45deg);
text-align: center;
top: 0;
right: 12px;
color: #333;
}
.lite-popup-wrapper .closeblock:hover {
color: #000;
}
.lite-popup-wrapper .popup {
position: relative;
width: 400px;
max-width: 100%;
padding: 40px 0 20px;
background: #00aeef;
color: #fff;
text-align: center;
font-size: 14px;
top: 50vh;
margin: -38px auto; // половина высоты окна
}
.lite-popup-wrapper .popup .popup-content {
padding: 0 15px;
}
/* Эти стили нужны, только если в окне будет форма */
.lite-popup-wrapper .popup textarea,
.lite-popup-wrapper .popup input[type=’text’],
.lite-popup-wrapper .popup input[type=’email’] {
border:0;
font:14px;
background:#fff;
padding:10px;
width:100%;
color:#000;
}
.popupform input[type=’submit’]{
cursor:pointer;
padding:5px 10px;
color:#000;
}
[/css]
JS:
[js]
$(‘.show-popup’).on(‘click’, function(){
$(‘.lite-popup-wrapper’).show();
});
$(‘.closeblock’).on(‘click’, function(){
$(‘.lite-popup-wrapper’).hide();
});
[/js]

3 Ноя в 07:20

Микро-разметка организации

[html]
<div itemscope itemtype="http://schema.org/Organization">
<div itemprop="name" class="title">ИП Иванов Иван Иванович</div>
<link itemprop="url" href="https://stebenkov.ru/">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="postalCode">414056</span>,
<span itemprop="addressCountry">Россия</span>,
<span itemprop="addressRegion">Астраханская область</span>,
<span itemprop="addressLocality">Астрахань</span>,
<span itemprop="streetAddress">Иванова, 567</span>
</div>
<div class="item">Телефон: <a href="tel:88000000000"><span itemprop="telephone">+7(800) 000-00-00</span></a></div>
<div class="item">E-mail: <a href="mailto:feedback@stebenkov.ru"><span itemprop="email">feedback@stebenkov.ru</span></a></div>
</div>
[/html]
В таком варианте валидатор https://search.google.com/structured-data/testing-tool/u/0/?hl=ru не показывает не заполненных полей и предупреждений.

1 Дек в 21:08

Микроразметка мероприятий