Шпаргалка WEB разработчика

Правильное подключение стилей и скриптов

В подключении скриптов и стилей добавляем два лайфхака облегчающих жизнь программита:

1. проверяем есть ли MIN версия, и если время ее изменения свежее обычного файла, то подключаем MIN версию.
2. К файлу добавляем ?v=<время изменения файла>, чтобы не попадать в засаду с браузерным кэщем.

WordPress

<?if(file_exists(get_stylesheet_directory()."/template_style.min.css")):?>
    <link rel="stylesheet" type="text/css" href="<?=get_template_directory_uri()?>/template_style.min.css?v=<?=filemtime(get_stylesheet_directory()."/template_style.min.css")?>" />
<?else:?>
    <link rel="stylesheet" type="text/css" href="<?=get_template_directory_uri()?>/template_style.css?v=<?=filemtime(get_stylesheet_directory()."/template_style.css")?>" />
<?endif;?>

<?if(file_exists(get_stylesheet_directory()."/script.min.js")):?>
    <script src="<?=get_template_directory_uri()?>/script.min.js?v=<?=filemtime(get_stylesheet_directory()."/script.min.js")?>" type="text/javascript"></script>
<?else:?>
    <script src="<?=get_template_directory_uri()?>/script.js?v=<?=filemtime(get_stylesheet_directory()."/script.js")?>" type="text/javascript"></script>
<?endif;?>

PHP

Подчключаем файл стилей

<?php
$stylePutn = "/assets/css";

if(file_exists($_SERVER["DOCUMENT_ROOT"].$stylePutn."/style.min.css") && filemtime($_SERVER["DOCUMENT_ROOT"].$stylePutn."/style.min.css") < filemtime($_SERVER["DOCUMENT_ROOT"].$stylePutn."/style.css"))
    echo '<link rel="stylesheet" type="text/css" href="'.$stylePutn.'/style.min.css?v='.filemtime($_SERVER["DOCUMENT_ROOT"].$stylePutn."/style.min.css").'" />';

else
    echo '<link rel="stylesheet" type="text/css" href="'.$stylePutn.'/style.css?v='.filemtime($_SERVER["DOCUMENT_ROOT"].$stylePutn."/style.css").'" />';
?>

Подключаем файл скриптов

<?php
$scriptPutn = "/assets/js";

if(file_exists($_SERVER["DOCUMENT_ROOT"].$scriptPutn."/script.min.js") && filemtime($_SERVER["DOCUMENT_ROOT"].$scriptPutn."/script.min.js") < filemtime($_SERVER["DOCUMENT_ROOT"].$scriptPutn."/script.js"))
    echo '<script src="'.$scriptPutn.'/script.js?v='.filemtime($_SERVER["DOCUMENT_ROOT"].$scriptPutn."/script.min.js").'" type="text/javascript">';

else
    echo '<script src="'.$scriptPutn.'/script.js?v='.filemtime($_SERVER["DOCUMENT_ROOT"].$scriptPutn."/script.js").'" type="text/javascript">';
?>

Ссылки на чат в мессенджере

Whatsapp

https://wa.me/79876543210

Telegram

https://t.me/username

VK

https://vk.me/username

Плавающее сообщение под шапкой

<div class="float-message-wrap">
	<div class="float-message" id="float_message">
		<div class="container">
			
			<b style="color: #FF0000;">!</b>&nbsp;<span>Уважаемые покупатели. В настоящее время на сайте проводятся технические работы.</span>
		</div>
	</div>
</div>

<script>
var headerHeight = 100;
function resizeMessageWraper(){
	var floatMessageWrap = $('#float_message').parent();
	floatMessageWrap.height($('#float_message').outerHeight());
}

$(document).ready(function () {
	resizeMessageWraper();
	headerHeight = $('header').outerHeight();

	$(window).resize(function(){
		resizeMessageWraper();
		headerHeight = $('header').outerHeight();
	});


	$(window).scroll(function(){
		
		if($(this).scrollTop() > headerHeight && !$('body').hasClass('fix-float-message')){
			$('body').addClass('fix-float-message');
		}
		else if($(this).scrollTop() < headerHeight && $('body').hasClass('fix-float-message')){
			$('body').removeClass('fix-float-message');
		}

	});

});
</script>


<style>
.float-message {
	padding: 5px 0;
	background-color: #ffffff;
	font-size: 12px;
}
.fix-float-message .float-message {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 5px 5px 5px #aeaeae;
	z-index: 3000;
}
</style>

Оптимизация загрузки стилей под Google Pagespeed

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" >

<noscript>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet" >
</noscript>

Этот финт ушами помогает сделать фоновую загрузку стилей, чтобы инструмент гугла не ругался на долгое время блокировки потока.