Воспроизведение звука при клике.

Несколько дней я тестировал контекстную рекламу Яндекс на своём сайте.
Как это обычно бывает, я сначала запилю весь функционал, чтоб всё работало, а потом начинаю глубже разбираться в данном вопросе.
Так и в этот раз оказалось, что доход с 1000 показов такого блока составит около 150 рублей. Я это даже за деньги не считаю.
Да и данный веб сайт не является тем сайтом на котором высокий трафик просмотров в отличие от того же онлайн кинотеатра.
Онлайн кинотеатр является полностью бесплатным проектом для всех пользователей и вставлять рекламу там я не собираюсь. Хостеры которые предоставляют все фильмы и сериалы уже встроили свою рекламу в плееры и это не моих рук дело…
На данном сайте находится мой личный блог по разработке и обычным пользователям он не интересен, по этому посещаемость в разы ниже.
Было принято решение по удалению Яндекс рекламы.

При клике на подобный блок я привязал скрипт который, воспроизводил звук и теперь когда нет рекламы то, и скрипт можно вырезать.
Вот собственно он:

// Воспроизводим звук при клике на постер Yandex рекламы ;)
const audio = new Audio('https://youowl.ru/#####/zvuk.mp3');
const element = document.getElementById('yandex_rtb_R-A-3561837-1');
let isPlaying = false;

element.addEventListener('click', () => {
  if (isPlaying) {
    return;
  }
  audio.play();
  isPlaying = true;

  // Обработчик события окончания воспроизведения аудио
  audio.onended = () => {
    isPlaying = false;
  };
});

clean-css — это быстрый и эффективный CSS-оптимизатор для платформы Node.js и любого современного браузера.

Написал готовую часть кода, чтобы была возможность использовать данный плагин напрямую в Gulp, без использования сторонних плагинов.
Есть плагины которые адаптируют данный плагин таким образом, что-бы он работал в Gulp сборках, но проблема в том, что пользователям приходится ждать когда они обновят его до новой версии. Данный код решает эту проблему.

const { src, dest, series } = require('gulp');
const CleanCSS = require('clean-css');
const concat = require('gulp-concat');

function css() {
    const options = {
        compatibility: '*', // (default) - Internet Explorer 10+ compatibility mode
        inline: ['all'], // enables all inlining, same as ['local', 'remote']
        level: 2 // Optimization levels. The level option can be either 0, 1 (default), or 2, e.g.
        // Please note that level 1 optimization options are generally safe while level 2 optimizations should be safe for most users.
    };

    return src('app/**/*.css')
        .pipe(concat('style.min.css'))
        .on('data', function(file) {
            const buferFile = new CleanCSS(options).minify(file.contents)
            return file.contents = Buffer.from(buferFile.styles)
        })
        .pipe(dest('build'))
}
exports.css = series(css)

Репозиторий плагина Clean-css

Набор инструментов для обработки и сжатия JavaScript для ES6+.

Написал готовую часть кода, чтобы была возможность использовать данный плагин напрямую в Gulp, без использования сторонних плагинов.
Есть плагины которые адаптируют данный плагин таким образом, что-бы он работал в Gulp сборках, но проблема в том, что пользователям приходится ждать когда они обновят его до новой версии. Данный код решает эту проблему.

const { src, dest, series } = require('gulp');
const { minify } = require('terser');
function js() {
    const options = {
        parse: {
            bare_returns: true, // (default false) -- support top level return statements.
            html5_comments: true, // (default true)
            shebang: true // (default true) -- support #!command as the first line.
        }
    };
    return src('app/**/*.js')
        .on('data', function(file) {
            async function getJs() {
                const result = await minify(file.contents.toString(), options);
                return await minify(result)
            }
            (async function() {
                try {
                    file.contents = Buffer.from(JSON.parse(Buffer.from(JSON.stringify(await getJs()))).code)
                } catch (error) {
                    const { message, line, col, pos } = error
                    console.log('message: ' + message)
                    console.log('filename: ' + file.basename)
                    console.log('line: ' + line)
                    console.log('col: ' + col)
                    console.log('pos: ' + pos)
                }
            })();
        })
        .pipe(dest('build'))
}
exports.js = series(js)

Репозиторий плагина Terser

HTML-компрессор/минификатор на базе Javascript.

Написал готовую часть кода, чтобы была возможность использовать данный плагин напрямую в Gulp, без использования сторонних плагинов.
Есть плагины которые адаптируют данный плагин таким образом, что-бы он работал в Gulp сборках, но проблема в том, что пользователям приходится ждать когда они обновят его до новой версии. Данный код решает эту проблему.

const { src, dest, series } = require('gulp');
const htmlMinify = require('html-minifier');

const options = {
  includeAutoGeneratedTags: true,
  removeAttributeQuotes: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  sortClassName: true,
  useShortDoctype: true,
  collapseWhitespace: true
};

function html() {
  return src('app/**/*.html')
    .on('data', function(file) {
      const buferFile = Buffer.from(htmlMinify.minify(file.contents.toString(), options))
      return file.contents = buferFile
    })
    .pipe(dest('build'))
}

exports.html = series(html)

Репозиторий плагина html-minifier