artemsites

<h1 id="серия-видео-где-будем-делать-адаптивную-кроссбраузерную-вёрстку-баннера-с-разными-анимациями-видео-записью-внутри-букв-и-всплывающую-форму">Серия видео где будем делать адаптивную, кроссбраузерную вёрстку баннера с разными анимациями, видео записью внутри букв и всплывающую форму</h1>
<h2 id="✅-в-этой-серии-уроков-по-frontend-разработке-будет-рассмотрено">&#9989; В этой серии уроков по frontend разработке будет рассмотрено:</h2>
<h3 id="-как-сделать-видео-внутри-текста-чтобы-на-фоне-за-текстом-ещё-была-картинка-движущаяся-от-движений-мыши">&#128073; Как сделать видео внутри текста чтобы на фоне за текстом ещё была картинка движущаяся от движений мыши</h3>
<h3 id="-как-адаптировать-вёрстку-для-osx-safari-12-и-ios-safari-12">&#128073; Как адаптировать вёрстку для OSx Safari 12 и iOS Safari 12</h3>
<h3 id="-как-адаптировать-вёрстку-для-мобильных-разрешений">&#128073; Как адаптировать вёрстку для мобильных разрешений</h3>
<h3 id="-как-сделать-анимации-на-чистом-scss-и-javascript">&#128073; Как сделать

artemsites

<h1 id="серия-видео-где-будем-делать-книгу-контактов-на-vue-3-options-api---vue-router--pinia-store--localstorage-пока-без-backend">Серия видео где будем делать &quot;Книгу контактов&quot; на Vue 3 (options api)  + Vue Router + Pinia Store + localStorage (пока без backend)</h1>
<h2 id="0-превью-проекта-книга-контактов-на-vue-3-options-api---vue-router--pinia-store--localstorage">0 Превью проекта &quot;Книга Контактов&quot; на Vue 3 options api  + Vue Router + Pinia Store + localStorage</h2>
<p>[[insertYoutube?code=BqsbxSFxBf0]]</p>
<h2 id="1-подготовка-vue-scss-шрифта-заготовка-header-обёртки">1 Подготовка Vue, scss, шрифта, заготовка header обёртки</h2>
<p>[[insertYoutube?code=ghRJtAdhlSQ]]</p>
<h2 id="2-продолжение-шапки-главной-страницы-и-адаптация">2 Продолжение шапки главной страницы и адаптация</h2>
<p>[[insertYoutube?code=F2JC9Ut5nOg]]</p>
<h2 id="3-создание-компонента-фильтрации-пока-визуальное--хранение-в-store-pinia">3 Создание компонента фильтрации, пока визуальное + хранение в store Pinia</h2>
<p>

artemsites

<h1 id="перевод-готовой-вёрстки-баннера-и-всплывающей-формы-на-браузерные-виджеты-vue-некое-подобие-jquery">Перевод готовой вёрстки баннера и всплывающей формы на браузерные виджеты Vue (некое подобие jQuery)</h1>
<p>[[insertYoutube?code=HNCPkUs_Wt4]]   </p>
<h2 id="-исходный-код-урока-находится-на-github">&#128073; Исходный код урока находится на GitHub</h2>
<p><a target="_blank" href="https://github.com/artemsites/mars/tree/vue" title="Открыть в новой вкладке">https://github.com/artemsites/mars/tree/vue</a></p>
<h2 id="-живая-демонстрация-находится-здесь">&#128073; Живая демонстрация находится здесь</h2>
<p><a target="_blank" href="https://practical-web.ru/demo/lessons/vue/mars/" title="Открыть в новой вкладке">https://practical-web.ru/demo/lessons/vue/mars/</a></p>

artemsites

<h1 id="установка-vuejs-на-существующий-классический-сайт-чтобы-сделать-frontend-модуль-к-сайту-vue-вместо-jquery-урок-№1">Установка Vue.js на существующий классический сайт, чтобы сделать frontend модуль к сайту (Vue вместо jQuery) (Урок №1)</h1>
<h2 id="1-как-установить-vuejs-на-классический-сайт">1. Как установить Vue.js на классический сайт</h2>
<p>Допустим у нас есть некоторый сайт c серверной обработкой на php </p>
<p>В шапку сайта подключаем скрипт который можно скопировать из документации 
<a href="https://vuejs.org/guide/quick-start.html#using-vue-from-cdn">https://vuejs.org/guide/quick-start.html#using-vue-from-cdn</a></p>
<p>Следующая строчка подключения скрипта Vue.js</p>
<p><img src="https://practical-web.ru/uploads/ustanovka-vue-js-na-sushchestvuyushchiy-klassicheskiy-sayt-chtoby-sdelat-frontend-modul-k-saytu/1.png" alt="Строчка подключения скрипта Vue.js"></p>
<p>Теперь мы можем пользоваться функционалом Vue.js на обычном сайте</p>
<h2 id="11-как-скачать-vuejs-на-обычный-сайт">1.1 Как скачать V

artemsites

<h1 id="динамический-индикатор-выбора-варианта-в-виде-рамки--vuejs--nuxtjs">Динамический индикатор выбора варианта в виде рамки | VueJS / NuxtJS</h1>
<h2 id="1-зависимости">1. Зависимости:</h2>
<ul>
<li><strong>Функция onEventEndThenStartCallback.js</strong><br><a target="_blank" href="https://practical-web.ru/javascript/kak-vypolnit-callback-po-zaversheniyu-sobytiya-na-javascript" title="Открыть в новой вкладке">Статья</a></li>
</ul>
<p>Зависимость (функция) кладётся в папку (например) helpers и подключается в самом компоненте (это уже прописано в компоненте):</p>
<pre><code>import { onEventEndThenStartCallback } from &#39;@/helpers/onEventEndThenStartCallback&#39;
</code></pre>
<p><img src="https://artemsites.ru/storage/components/select-dynamic-border/select-dynamic-border.gif" alt=""></p>
<h2 id="2-компонент-возвращает-ключ-прописанный-в-items">2. Компонент возвращает ключ прописанный в items:</h2>

artemsites

<h1 id="как-сделать-switcher-на-css-стилизовав-input-typecheckbox">Как сделать Switcher на CSS стилизовав input type=&quot;checkbox&quot;</h1>
<p><img src="https://practical-web.ru/uploads/kak-sdelat-switcher-na-css-stilizovav-input-type-checkbox/how-it-view.webp" alt="Checkbox Switcher на CSS"></p>
<p>Перед работой нам понадобится установить препроцессор CSS - SCSS<br>и какой нибудь сборщик frontend приложений,<br>например сборщик Vite.js.<br>Если вы его не умеете устанвливать,<br>то можете узнать как это делать в статье <a href="https://practical-web.ru/bundlers/kak-ustanovit-i-primenyat-sborshchik-frontend-prilozheniy-vite-js">об установке и применении сборщика Vite.js</a>        </p>
<h2 id="1-создадим-html-структуру-switcher-компонента">1. Создадим html структуру Switcher компонента</h2>
<pre><code>&lt;label class=&quot;switcher&quot;&gt;
  &lt;span class=&quot;switcher__label&quot;&gt;Switcher&lt;/span&gt;
  &lt;div class=&quot;switcher__box&quot;&gt;
    &lt;span class=&quot;switcher__indicator&quot;&g

artemsites

/**
 * @title Функции помощники для быстрого кодинга, лучшей читаемости и уменьшения итоговой сборки  
 * 
 * @version 1.1 | 20240506
 * @author https://t.me/artemsites
 * 
 * @param {string} selector - CSS selector
 * @param {Element} wrapper - Element wrapper, default document.documentElement
 * @returns {Element|NodeList}
 * 

artemsites

<h1 id="как-конвертировать-английскую-раскладку-в-русскую-на-javascript">Как конвертировать английскую раскладку в русскую на JavaScript?</h1>
<p>Если вы плохо понимаете как подключать вспомогательные и основные скрипты на сайт, то можете узнать об этом подробнее в статье:<br><a target="_blank" href="https://practical-web.ru/javascript/kak-mozhno-podklyuchit-skript-javascript-k-saytu" title="Как подлкючать скрипты JavaScript к HTML странице">Как подлкючать скрипты JavaScript к HTML странице</a> </p>
<h2 id="1-когда-это-бывает-нужно">1. Когда это бывает нужно</h2>
<p>Например когда создаётся поиск посайту и надо чтобы </p>
<h2 id="2-пример-использования-функции">2. Пример использования функции</h2>
<pre><code>let breakStr = &#39;Ghbdtn xbnfntkm&#39;
console.log(convertKeyboardKeysLatinToCyrillic(breakStr))
// Функция пока что выдаёт только в нижнем регистре строку
// Получим: &#39;привет читатель&#39;
</code></pre>

artemsites

<h1 id="как-удалить-минусы-пробелы-и-скобки-из-телефонного-номера-на-javascript">Как удалить минусы, пробелы и скобки из телефонного номера на JavaScript?</h1>
<p>Если вы плохо понимаете как подключать вспомогательные и основные скрипты на сайт, то можете узнать об этом подробнее в статье:<br><a target="_blank" href="https://practical-web.ru/javascript/kak-mozhno-podklyuchit-skript-javascript-k-saytu" title="Как подлкючать скрипты JavaScript к HTML странице">Как подлкючать скрипты JavaScript к HTML странице</a>    </p>
<h2 id="1-как-пользоваться-функцией-удаления-лишних-символов-из-телефона-на-javascript">1. Как пользоваться функцией удаления лишних символов из телефона на JavaScript</h2>
<pre><code>let newNumber = deleteMinusAndSpace(&#39;8 (800) 123-45-67&#39;);
// Что получим
console.log(newNumber);//88001234567
</code></pre>
<h2 id="2-как-очистить-номер-телефона-от-минусов-тире-и-скобок-в-ссылке-a-hreftel7-123-456-78-90-на-javascript">2. Как очистить номер телефона от минусов (тире) и скобок в ссылке <cod

artemsites

<h1 id="как-проверить-все-input-type-email-на-странице-на-валидность-в-javascript">Как проверить все input type email на странице на валидность в JavaScript</h1>
<h2 id="если-вы-плохо-знаете-как-подклчать-скрипты-к-странице-html-можете-ознакомиться-со-статьёй">Если вы плохо знаете как подклчать скрипты к странице html, можете ознакомиться со статьёй</h2>
<p><a target="_blank" href="https://practical-web.ru/javascript/kak-mozhno-podklyuchit-skript-javascript-k-saytu" title="Как можно подключить скрипт JavaScript к сайту?">Как можно подключить скрипт JavaScript к сайту?</a>   </p>
<h2 id="1-как-практически-сделать-проверку-валидности-email-на-веб-странице">1. Как практически сделать проверку валидности email на веб странице</h2>
<ol>
<li>Допустим на странице у нас есть инпуты с типом email</li>
</ol>
<pre><code>&lt;input type=&quot;email&quot;&gt;
</code></pre>
<p>1.1 И добавим стиль ошибки для input type email в файл <code>main.css</code></p>