<!DOCTYPE html>
<html lang="ru-ru" dir="ltr">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="/templates/yootheme/packages/theme-joomla/assets/images/favicon.png" sizes="any">
                <link rel="apple-touch-icon" href="/templates/yootheme/packages/theme-joomla/assets/images/apple-touch-icon.png">
        <meta charset="utf-8" />
	<base href="https://www.mc-class.ru/" />
	<meta name="generator" content="Joomla! - Open Source Content Management" />
	<title>Блог о создании сайтов - Блог о сайтах</title>
	<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
	<link href="/components/com_jcomments/tpl/default/style.css?v=3002" rel="stylesheet" />
	<link href="/plugins/system/jce/css/content.css?41ad2227162d92a3ea6eacd83931df61" rel="stylesheet" />
	<link href="/templates/yootheme_mc/css/theme.21.css?1736605604" rel="stylesheet" />
	<link href="/templates/yootheme/css/custom.css?4.4.12" rel="stylesheet" />
	<script src="/media/jui/js/jquery.min.js?41ad2227162d92a3ea6eacd83931df61"></script>
	<script src="/media/jui/js/jquery-noconflict.js?41ad2227162d92a3ea6eacd83931df61"></script>
	<script src="/media/jui/js/jquery-migrate.min.js?41ad2227162d92a3ea6eacd83931df61"></script>
	<script src="/templates/yootheme/vendor/assets/uikit/dist/js/uikit.min.js?4.4.12"></script>
	<script src="/templates/yootheme/vendor/assets/uikit/dist/js/uikit-icons.min.js?4.4.12"></script>
	<script src="/templates/yootheme/js/theme.js?4.4.12"></script>
	<script>
document.addEventListener('DOMContentLoaded', function() {
            Array.prototype.slice.call(document.querySelectorAll('a span[id^="cloak"]')).forEach(function(span) {
                span.innerText = span.textContent;
            });
        });
	</script>
	<script>window.yootheme ||= {}; var $theme = yootheme.theme = {"i18n":{"close":{"label":"Close"},"totop":{"label":"Back to top"},"marker":{"label":"Open"},"navbarToggleIcon":{"label":"Open menu"},"paginationPrevious":{"label":"Previous page"},"paginationNext":{"label":"Next page"},"searchIcon":{"toggle":"Open Search","submit":"Submit Search"},"slider":{"next":"Next slide","previous":"Previous slide","slideX":"Slide %s","slideLabel":"%s of %s"},"slideshow":{"next":"Next slide","previous":"Previous slide","slideX":"Slide %s","slideLabel":"%s of %s"},"lightboxPanel":{"next":"Next slide","previous":"Previous slide","slideLabel":"%s of %s","close":"Close"}}};</script>

    </head>
    <body class="">

        <div class="uk-hidden-visually uk-notification uk-notification-top-left uk-width-auto">
            <div class="uk-notification-message">
                <a href="#tm-main">Перейти к содержимому</a>
            </div>
        </div>

                <div class="tm-page-container uk-clearfix">

            
            
        
        
        <div class="tm-page uk-margin-auto">

                        


<header class="tm-header-mobile uk-hidden@m">


    
        <div class="uk-navbar-container">

            <div class="uk-container uk-container-expand">
                <nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;,&quot;container&quot;:&quot;.tm-header-mobile&quot;,&quot;boundary&quot;:&quot;.tm-header-mobile .uk-navbar-container&quot;}">

                                        <div class="uk-navbar-left">

                        
                                                    <a uk-toggle href="#tm-dialog-mobile" class="uk-navbar-toggle">

        
        <div uk-navbar-toggle-icon></div>

        
    </a>
                        
                    </div>
                    
                                        <div class="uk-navbar-center">

                                                    <a href="https://www.mc-class.ru/" aria-label="Вернуться в начало" class="uk-logo uk-navbar-item">
    MC Site</a>
                        
                        
                    </div>
                    
                    
                </nav>
            </div>

        </div>

    



        <div id="tm-dialog-mobile" uk-offcanvas="container: true; overlay: true" mode="slide">
        <div class="uk-offcanvas-bar uk-flex uk-flex-column">

                        <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
            
                        <div class="uk-margin-auto-bottom">
                
<div class="uk-panel" id="module-menu-dialog-mobile">

    
    
<ul class="uk-nav uk-nav-default">
    
	<li class="item-56 uk-parent"><a href="/razrab.html">Разработка</a>
	<ul class="uk-nav-sub">

		<li class="item-57"><a href="/razrab/bezopasnost.html">Безопасность</a></li>
		<li class="item-58"><a href="/razrab/optimizatsiya.html">Оптимизация</a></li>
		<li class="item-59"><a href="/razrab/sajtostroenie.html">Сайтостроение</a></li>
		<li class="item-60"><a href="/razrab/khosting.html">Хостинг</a></li>
		<li class="item-61"><a href="/razrab/razrabotka.html">Разработка</a></li>
		<li class="item-63"><a href="/razrab/prodvizhenie.html">Продвижение</a></li>
		<li class="item-129"><a href="/razrab/programmirovanie.html">Инструменты</a></li></ul></li>
	<li class="item-64 uk-parent"><a href="/zhizn.html">Жизнь</a>
	<ul class="uk-nav-sub">

		<li class="item-65"><a href="/zhizn/my-live.html">My live</a></li>
		<li class="item-66"><a href="/zhizn/tseli.html">Цели</a></li>
		<li class="item-67"><a href="/zhizn/v-puti.html">В пути</a></li>
		<li class="item-128"><a href="/zhizn/kuda-poekhat.html">Куда поехать</a></li></ul></li>
	<li class="item-22 uk-parent"><a href="/cms.html">CMS</a>
	<ul class="uk-nav-sub">

		<li class="item-164"><a href="/cms/newscms.html">Новости CMS</a></li>
		<li class="item-165"><a href="/cms/seonews.html">Новости SEO</a></li>
		<li class="item-23"><a href="/cms/joomla.html">Joomla CMS</a></li>
		<li class="item-24"><a href="/cms/drugie-cms.html">Другие CMS</a></li></ul></li>
	<li class="item-25 uk-parent"><a href="/zarabotok.html">Заработок</a>
	<ul class="uk-nav-sub">

		<li class="item-45"><a href="/zarabotok/site.html">Сайты</a></li>
		<li class="item-646"><a href="/joomline.html">О Joomline</a></li>
		<li class="item-26"><a href="/zarabotok/kak-zarabotat.html">Как заработать</a></li></ul></li></ul>

</div>

            </div>
            
            
        </div>
    </div>
    
    
    

</header>




<header class="tm-header uk-visible@m">



        <div uk-sticky media="@m" show-on-up animation="uk-animation-slide-top" cls-active="uk-navbar-sticky" sel-target=".uk-navbar-container">
    
        <div class="uk-navbar-container">

            <div class="uk-container uk-container-expand">
                <nav class="uk-navbar" uk-navbar="{&quot;align&quot;:&quot;left&quot;,&quot;container&quot;:&quot;.tm-header &gt; [uk-sticky]&quot;,&quot;boundary&quot;:&quot;.tm-header .uk-navbar-container&quot;}">

                                        <div class="uk-navbar-left">

                                                    <a href="https://www.mc-class.ru/" aria-label="Вернуться в начало" class="uk-logo uk-navbar-item">
    MC Site</a>
                        
                        
                        
                    </div>
                    
                    
                                        <div class="uk-navbar-right">

                                                    
<ul class="uk-navbar-nav">
    
	<li class="item-56 uk-parent"><a href="/razrab.html">Разработка</a>
	<div class="uk-drop uk-navbar-dropdown"><div><ul class="uk-nav uk-navbar-dropdown-nav">

		<li class="item-57"><a href="/razrab/bezopasnost.html">Безопасность</a></li>
		<li class="item-58"><a href="/razrab/optimizatsiya.html">Оптимизация</a></li>
		<li class="item-59"><a href="/razrab/sajtostroenie.html">Сайтостроение</a></li>
		<li class="item-60"><a href="/razrab/khosting.html">Хостинг</a></li>
		<li class="item-61"><a href="/razrab/razrabotka.html">Разработка</a></li>
		<li class="item-63"><a href="/razrab/prodvizhenie.html">Продвижение</a></li>
		<li class="item-129"><a href="/razrab/programmirovanie.html">Инструменты</a></li></ul></div></div></li>
	<li class="item-64 uk-parent"><a href="/zhizn.html">Жизнь</a>
	<div class="uk-drop uk-navbar-dropdown"><div><ul class="uk-nav uk-navbar-dropdown-nav">

		<li class="item-65"><a href="/zhizn/my-live.html">My live</a></li>
		<li class="item-66"><a href="/zhizn/tseli.html">Цели</a></li>
		<li class="item-67"><a href="/zhizn/v-puti.html">В пути</a></li>
		<li class="item-128"><a href="/zhizn/kuda-poekhat.html">Куда поехать</a></li></ul></div></div></li>
	<li class="item-22 uk-parent"><a href="/cms.html">CMS</a>
	<div class="uk-drop uk-navbar-dropdown"><div><ul class="uk-nav uk-navbar-dropdown-nav">

		<li class="item-164"><a href="/cms/newscms.html">Новости CMS</a></li>
		<li class="item-165"><a href="/cms/seonews.html">Новости SEO</a></li>
		<li class="item-23"><a href="/cms/joomla.html">Joomla CMS</a></li>
		<li class="item-24"><a href="/cms/drugie-cms.html">Другие CMS</a></li></ul></div></div></li>
	<li class="item-25 uk-parent"><a href="/zarabotok.html">Заработок</a>
	<div class="uk-drop uk-navbar-dropdown"><div><ul class="uk-nav uk-navbar-dropdown-nav">

		<li class="item-45"><a href="/zarabotok/site.html">Сайты</a></li>
		<li class="item-646"><a href="/joomline.html">О Joomline</a></li>
		<li class="item-26"><a href="/zarabotok/kak-zarabotat.html">Как заработать</a></li></ul></div></div></li></ul>

                        
                                                    
                        
                    </div>
                    
                </nav>
            </div>

        </div>

        </div>
    







</header>

            
            

            <main id="tm-main" >

                
                <div id="system-message-container" data-messages="[]">
</div>

                <!-- Builder #template-rjlceYug -->
<div class="uk-section-default uk-section uk-padding-remove-top">
    
        
        
        
            
                                <div class="uk-container uk-container-expand">                
                    <div class="uk-grid tm-grid-expand uk-grid-margin" uk-grid>
<div class="uk-width-3-4@m">
    
        
            
            
            
                
                    
<h1>        Блог о веб разработке    </h1>
<div class="uk-margin">
    <div class="uk-grid uk-child-width-1-1 uk-child-width-1-1@m uk-grid-row-medium" uk-grid="masonry: next;">        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle" href="/razrab/programmirovanie/970-slajder-nastroeniya-na-chistom-js.html">    
        
            
                
            
            
                                                
                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        Слайдер настроения на чистом JS                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p>Автор проекта создал слайдер, который поможет вам точно указать степень эмоционального состояния. Такой элемент пригодится везде, где требуется оценить качество предоставленной услуги, работы или чего-нибудь ещё.</p></div>        
        
        

                
                
            
        
        </a>    
</div></div>
        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-transition-toggle uk-link-toggle" href="/razrab/programmirovanie/969-uproshchaem-sozdanie-svg-figur.html">    
        
            
                
            
            
                                <div class="uk-card-media-top">

        <div class="uk-inline-clip">    
                <picture>
<source type="image/webp" srcset="/templates/yootheme/cache/b4/5176-b491dee6.webp 768w, /templates/yootheme/cache/3c/5176-3cea0973.webp 1024w, /templates/yootheme/cache/ea/5176-ea1b24c8.webp 1200w, /templates/yootheme/cache/8e/5176-8ea676ef.webp 1280w" sizes="(min-width: 1200px) 1200px">
<img src="/templates/yootheme/cache/1b/5176-1b8dd721.jpeg" width="1200" height="500" alt="Упрощаем создание SVG-фигур" loading="lazy" class="el-image uk-transition-scale-down uk-transition-opaque">
</picture>        
        
        </div>    
</div>                
                                <div class="uk-card-body uk-margin-remove-first-child">                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        Упрощаем создание SVG-фигур                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p>Если вам необходимо быстро создать фигуру необычной формы с помощью SVG, то попробуйте воспользоваться Blobmaker. Он позволяет быстро сгенерировать «кляксу» нужной вам формы всего в несколько нажатий. Выберите количество необходимых точек фигуры, а затем насколько она должна быть кривой и сохраните её. Вы также можете скопировать код и сразу вставить на страницу.</p></div>        
        
        

                                </div>                
                
            
        
        </a>    
</div></div>
        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-transition-toggle uk-link-toggle" href="/razrab/programmirovanie/967-runet-priljog-otdokhnut.html">    
        
            
                
            
            
                                <div class="uk-card-media-top">

        <div class="uk-inline-clip">    
                <picture>
<source type="image/webp" srcset="/templates/yootheme/cache/98/5174-98a17485.webp 768w, /templates/yootheme/cache/4a/5174-4a5d779d.webp 1024w, /templates/yootheme/cache/9c/5174-9cac5a26.webp 1200w" sizes="(min-width: 1200px) 1200px">
<img src="/templates/yootheme/cache/02/5174-021c18c5.jpeg" width="1200" height="500" alt="Рунет прилёг отдохнуть" loading="lazy" class="el-image uk-transition-scale-down uk-transition-opaque">
</picture>        
        
        </div>    
</div>                
                                <div class="uk-card-body uk-margin-remove-first-child">                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        Рунет прилёг отдохнуть                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p>Прямо сейчас наблюдается масштабный сбой в работе интернета по всей России. У пользователей не работают соцсети, популярные ресурсы и не загружаются многие приложения, включая банковские.</p></div>        
        
        

                                </div>                
                
            
        
        </a>    
</div></div>
        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-transition-toggle uk-link-toggle" href="/razrab/programmirovanie/961-performance-i-optimizatsiya-typescript-tipov-v-bolshikh-proektakh.html">    
        
            
                
            
            
                                <div class="uk-card-media-top">

        <div class="uk-inline-clip">    
                <picture>
<source type="image/webp" srcset="/templates/yootheme/cache/16/5168-16ae7ab5.webp 768w, /templates/yootheme/cache/3c/5168-3c3ec9e9.webp 1024w, /templates/yootheme/cache/ea/5168-eacfe452.webp 1200w" sizes="(min-width: 1200px) 1200px">
<img src="/templates/yootheme/cache/e3/5168-e3e0a123.jpeg" width="1200" height="500" alt="Performance и оптимизация TypeScript-типов в больших проектах" loading="lazy" class="el-image uk-transition-scale-down uk-transition-opaque">
</picture>        
        
        </div>    
</div>                
                                <div class="uk-card-body uk-margin-remove-first-child">                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        Performance и оптимизация TypeScript-типов в больших проектах                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p>Большие TypeScript-проекты на практике часто представляют собой монорепозитории, в которых может быть сотни и даже тысячи модулей, интерфейсов и типов. На ранних этапах роста всё кажется вполне управляемым, но в определённый момент мы начинаем замечать, что время компиляции становится слишком большим, а IDE начинает работать ощутимо медленнее.</p></div>        
        
        

                                </div>                
                
            
        
        </a>    
</div></div>
        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle" href="/razrab/programmirovanie/958-elfsight-bolee-90-vidzhetov-dlya-vebsajtov-bez-neobkhodimosti-kodit.html">    
        
            
                
            
            
                                                
                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        elfsight  более 90 виджетов для вебсайтов без необходимости кодить                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p>Если вам нужно добавить какой-то полезный виджет, но писать его с нуля или настраивать нет времени и желания, то попробуйте найти нужный на этом сайте. Здесь собраны виджеты, которые встраиваются даже без знания кода и позволяют добавить карты, чаты, формы, встраиваемый контент из соцсетей и многое другое.</p></div>        
        
        

                
                
            
        
        </a>    
</div></div>
        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-transition-toggle uk-link-toggle" href="/razrab/programmirovanie/957-9-komand-git-o-kotorykh-nuzhno-znat.html">    
        
            
                
            
            
                                <div class="uk-card-media-top">

        <div class="uk-inline-clip">    
                <picture>
<source type="image/webp" srcset="/templates/yootheme/cache/5b/5155-5b8ddba3.webp 768w, /templates/yootheme/cache/09/5155-09ccee9d.webp 1024w, /templates/yootheme/cache/df/5155-df3dc326.webp 1200w" sizes="(min-width: 1200px) 1200px">
<img src="/templates/yootheme/cache/41/5155-41ca0461.jpeg" width="1200" height="500" alt="9 команд GIT, о которых нужно знать" loading="lazy" class="el-image uk-transition-scale-down uk-transition-opaque">
</picture>        
        
        </div>    
</div>                
                                <div class="uk-card-body uk-margin-remove-first-child">                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        9 команд GIT, о которых нужно знать                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p>Большинство из нас придерживаются основ: git add, git commit, git push, и, честно говоря, это работает пока…</p></div>        
        
        

                                </div>                
                
            
        
        </a>    
</div></div>
        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-transition-toggle uk-link-toggle" href="/razrab/programmirovanie/955-html-i-css-oshibki-vliyayushchie-na-dostupnost-opyt-nezryachego.html">    
        
            
                
            
            
                                <div class="uk-card-media-top">

        <div class="uk-inline-clip">    
                <picture>
<source type="image/webp" srcset="/templates/yootheme/cache/ba/5153-baff9550.webp 768w, /templates/yootheme/cache/92/5153-92a03dc6.webp 1024w, /templates/yootheme/cache/44/5153-4451107d.webp 1200w, /templates/yootheme/cache/20/5153-20ec425a.webp 1280w" sizes="(min-width: 1200px) 1200px">
<img src="/templates/yootheme/cache/2a/5153-2a3f1b39.jpeg" width="1200" height="500" alt="HTML и CSS ошибки, влияющие на доступность. Опыт незрячего" loading="lazy" class="el-image uk-transition-scale-down uk-transition-opaque">
</picture>        
        
        </div>    
</div>                
                                <div class="uk-card-body uk-margin-remove-first-child">                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        HTML и CSS ошибки, влияющие на доступность. Опыт незрячего                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p>Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Конечно, они нужны, но HTML и CSS такая же важная часть. Эти технологии несут в себе кучу скрытых моментов, влияющих на доступность.</p></div>        
        
        

                                </div>                
                
            
        
        </a>    
</div></div>
        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-transition-toggle uk-link-toggle" href="/razrab/programmirovanie/953-onlajn-pesochnitsa-dlya-obucheniya-i-testirovaniya-sql.html">    
        
            
                
            
            
                                <div class="uk-card-media-top">

        <div class="uk-inline-clip">    
                <picture>
<source type="image/webp" srcset="/templates/yootheme/cache/8d/5151-8daac497.webp 768w, /templates/yootheme/cache/25/5151-25b33dfd.webp 1024w, /templates/yootheme/cache/7a/5151-7aabd8bc.webp 1199w, /templates/yootheme/cache/f3/5151-f3421046.webp 1200w" sizes="(min-width: 1200px) 1200px">
<img src="/templates/yootheme/cache/71/5151-71acfad2.jpeg" width="1200" height="500" alt="Онлайн-песочница для обучения и тестирования SQL" loading="lazy" class="el-image uk-transition-scale-down uk-transition-opaque">
</picture>        
        
        </div>    
</div>                
                                <div class="uk-card-body uk-margin-remove-first-child">                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        Онлайн-песочница для обучения и тестирования SQL                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p>SQL Playground — это бесплатный сервис, который позволяет вам изучать SQL и тестировать различные запросы как в MySQL, так и в PostgreSQL. Работает песочница прямо в браузере, при этом поддерживает подсветку синтаксиса и обладает автоматических генератором схем БД.</p></div>        
        
        

                                </div>                
                
            
        
        </a>    
</div></div>
        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-transition-toggle uk-link-toggle" href="/zarabotok/21-article/943-majning-ferma-p106-100-8-gb-idealnyj-dobytchik-kriptovalyuty.html">    
        
            
                
            
            
                                <div class="uk-card-media-top">

        <div class="uk-inline-clip">    
                <picture>
<source type="image/webp" srcset="/templates/yootheme/cache/2f/ea9063329e7b091a2dffbda593a0da8d-2f2e2e5e.webp 768w, /templates/yootheme/cache/ac/ea9063329e7b091a2dffbda593a0da8d-ac1f04da.webp 1024w, /templates/yootheme/cache/7a/ea9063329e7b091a2dffbda593a0da8d-7aee2961.webp 1200w" sizes="(min-width: 1200px) 1200px">
<img src="/templates/yootheme/cache/5b/ea9063329e7b091a2dffbda593a0da8d-5b75f107.jpeg" width="1200" height="500" alt="Майнинг ферма P106 100 8 GB - идеальный добытчик криптовалюты" loading="lazy" class="el-image uk-transition-scale-down uk-transition-opaque">
</picture>        
        
        </div>    
</div>                
                                <div class="uk-card-body uk-margin-remove-first-child">                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        Майнинг ферма P106 100 8 GB - идеальный добытчик криптовалюты                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p>Среди известных способов получения криптовалют популярным остается майнинг. Так называют работу вычислительного оборудования, которая беспрерывно решает математические задачи, преобразовывая их в код. Оборудование называют "майнинг-ферма". Оно представляет собой мощное устройство.</p></div>        
        
        

                                </div>                
                
            
        
        </a>    
</div></div>
        <div>
<div class="el-item uk-grid-item-match">
        <a class="uk-card uk-card-default uk-card-small uk-card-hover uk-transition-toggle uk-link-toggle" href="/razrab/programmirovanie/942-pagemap-originalnyj-js-plagin-kotoryj-dobavlyaet-mini-kartu-maketa-vashego-veb-sajta-ryadom-s.html">    
        
            
                
            
            
                                <div class="uk-card-media-top">

        <div class="uk-inline-clip">    
                <picture>
<source type="image/webp" srcset="/templates/yootheme/cache/e9/1354-e91cdf2a.webp 768w, /templates/yootheme/cache/e6/1354-e6eaaf90.webp 1024w, /templates/yootheme/cache/30/1354-301b822b.webp 1200w" sizes="(min-width: 1200px) 1200px">
<img src="/templates/yootheme/cache/a6/1354-a6b06157.jpeg" width="1200" height="500" alt="Pagemap — оригинальный JS-плагин, который добавляет мини-карту макета вашего веб-сайта рядом с полосой прокрутки" loading="lazy" class="el-image uk-transition-scale-down uk-transition-opaque">
</picture>        
        
        </div>    
</div>                
                                <div class="uk-card-body uk-margin-remove-first-child">                
                    

        
                <h2 class="el-title uk-card-title uk-margin-top uk-margin-remove-bottom">                        Pagemap — оригинальный JS-плагин, который добавляет мини-карту макета вашего веб-сайта рядом с полосой прокрутки                    </h2>        
        
    
        
        
                <div class="el-content uk-panel uk-margin-top"><p><strong>Pagemap </strong>— оригинальный JS-плагин, который добавляет мини-карту макета вашего веб-сайта рядом с полосой прокрутки, подобно тому, что вы видите в редакторах кода, таких как VSCode. Очень полезно для веб-сайтов с документацией и других страниц с большим количеством текста.</p></div>        
        
        

                                </div>                
                
            
        
        </a>    
</div></div>
        </div>
</div>
                
            
        
    
</div>
<div class="uk-width-1-4@m">
    
        
            
            
            
                
                    <div>
<div class="uk-grid uk-child-width-1-1" uk-grid>    <div>
<div class="uk-panel" id="module-66">

    
    <div class="content"><script>
<!--
var _acic={dataProvider:10,allowCookieMatch:false};(function(){var e=document.createElement("script");e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script></div>
</div>
</div>    <div>
<div class="uk-panel tm-child-list" id="module-20">

    
        <h3>

                Последнее        
        </h3>

    
    
<ul class="latestnews">
        <li><a href="/razrab/programmirovanie/970-slajder-nastroeniya-na-chistom-js.html">Слайдер настроения на чистом JS</a></li>
        <li><a href="/razrab/programmirovanie/969-uproshchaem-sozdanie-svg-figur.html">Упрощаем создание SVG-фигур</a></li>
        <li><a href="/razrab/programmirovanie/967-runet-priljog-otdokhnut.html">Рунет прилёг отдохнуть</a></li>
        <li><a href="/razrab/programmirovanie/961-performance-i-optimizatsiya-typescript-tipov-v-bolshikh-proektakh.html">Performance и оптимизация TypeScript-типов в больших проектах</a></li>
        <li><a href="/razrab/programmirovanie/958-elfsight-bolee-90-vidzhetov-dlya-vebsajtov-bez-neobkhodimosti-kodit.html">elfsight  более 90 виджетов для вебсайтов без необходимости кодить</a></li>
    </ul>

</div>
</div></div></div>
                
            
        
    
</div></div>
                                </div>                
            
        
    
</div>

                
            </main>

            

                        <footer>
                <!-- Builder #footer -->
<div class="uk-section-muted uk-section">
    
        
        
        
            
                                <div class="uk-container uk-container-large">                
                    <div class="uk-grid tm-grid-expand uk-grid-collapse" uk-grid>
<div class="uk-width-1-2@m">
    
        
            
            
            
                
                    <div><a href="/karta-sajta.html" >Карта сайта</a> | <a href="/obo-mne.html" >Обо мне</a> | <a href="/uslugi.html" >Услуги</a></div>
                
            
        
    
</div>
<div class="uk-width-1-2@m">
    
        
            
            
            
                
                    <div><div class="uk-text-right"> © 2010-2020 <a href="/">MC Site</a></div>

<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(7273033, "init", {
        clickmap:false,
        trackLinks:false,
        accurateTrackBounce:false
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/7273033" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --></div>
                
            
        
    
</div></div>
                                </div>                
            
        
    
</div>            </footer>
            
        </div>

                </div>
        
        

    </body>
</html>
