00.00
Переключение темы

Веб сайт маркетплейса.

Классический стек: HTML, CSS и JS.
Только главная страница веб-сайта была адаптирован под различные устройства и является кросс браузерной.

В проекте использовал:
Slick-carousel это слайдер.
Mmixitup библиотека для анимированной фильтрации и сортировки.
Ion-rangeslider слайдер диапазонов.
Rateyo плагин звездного рейтинга, который использует SVG.

Marketplace

Доступные страницы в этом проекте:

Home, how-It-works, favorites, contact, conditions, blog, new-items, pricing-plan, product, recovery, register.

Одностраничный сайт.

Вёрстка и ничего больше.
Классический стек: HTML, CSS и JS.
В проекте использовал Swiper слайдер.
Этот веб-сайт адаптирован под различные устройства и является кросс браузерным.

Chevrolet-Tahoe

Home page.

Веб сайт маркетплейса.

Сайт был сделан в коммерческих целях. Для демонстрации я урезал его и изменил его наполнение, и текст.
Классический стек: HTML, CSS и JS.
В проекте использовал Swiper слайдер.
Этот веб-сайт адаптирован под различные устройства и является кросс браузерным.

adobe marketplace

Доступные страницы в этом проекте:

Home, category, about, terms of services

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