Месяц: Февраль 2025

Прижатие футера к нижней части страницы — частая задача при вёрстке сайтов. Рассмотрим несколько надёжных способов её решения, от простых до более сложных.

1. Способ через Flexbox (рекомендуемый)

Самый современный и гибкий способ прижать футер к низу страницы — использование Flexbox:

<!-- HTML структура -->
<body>
    <div class="wrapper">
        <header>Шапка сайта</header>
        <main>Основной контент</main>
        <footer>Футер</footer>
    </div>
</body>

/* CSS стили */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

footer {
    margin-top: auto;
}

2. Метод отрицательных отступов

Классический способ, который работает даже в старых браузерах:

<!-- HTML структура -->
<div class="wrapper">
    <div class="content">
        <header>Шапка</header>
        <main>Контент</main>
    </div>
    <footer>Футер</footer>
</div>

html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: 100%;
}

.content {
    padding-bottom: 100px; /* Высота футера */
}

footer {
    height: 100px;
    margin-top: -100px;
    clear: both;
}

3. Решение через Grid Layout

Современный подход с использованием Grid:

<body>
    <div class="grid-container">
        <header>Шапка</header>
        <main>Основной контент</main>
        <footer>Футер</footer>
    </div>
</body>

.grid-container {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

header {
    /* стили шапки */
}

main {
    /* стили контента */
}

footer {
    /* стили футера */
}

4. Фиксированный футер

Если нужно, чтобы футер всегда оставался видимым:

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}

main {
    margin-bottom: 60px; /* Отступ равный высоте футера */
}

5. Универсальное решение с CSS-переменными

Гибкий подход с использованием CSS-переменных для динамической высоты футера:

<div class="page-container">
    <main>Контент</main>
    <footer id="footer">Футер</footer>
</div>

:root {
    --footer-height: 60px;
}

.page-container {
    min-height: 100vh;
    padding-bottom: var(--footer-height);
    position: relative;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: var(--footer-height);
}

// Обновление высоты футера при изменении контента
function updateFooterHeight() {
    const footer = document.getElementById('footer');
    const height = footer.offsetHeight;
    document.documentElement.style.setProperty('--footer-height', height + 'px');
}

// Вызываем при загрузке и изменении размера окна
window.addEventListener('load', updateFooterHeight);
window.addEventListener('resize', updateFooterHeight);

Рекомендации по выбору метода

Возможные проблемы и их решения

• Если футер «прыгает» при изменении контента, проверьте min-height для контейнера
• При использовании position: fixed учитывайте отступ для основного контента
• Для динамического контента используйте JavaScript для пересчета высоты
• При адаптивной вёрстке проверяйте работу футера на всех разрешениях

Заключение

Выбор метода прижатия футера зависит от требований проекта и необходимой поддержки браузеров, но в большинстве современных проектов рекомендуется использовать Flexbox или Grid Layout как наиболее гибкие и простые в реализации решения. Не забывайте тестировать выбранное решение на разных устройствах и при разном количестве контента.

В современном веб-разработке jQuery становится всё менее необходимым благодаря развитию стандартного JavaScript. В этой статье мы рассмотрим, как заменить самые популярные методы jQuery на чистый JavaScript.

1. Выбор элементов (Селекторы)

jQuery версия:

// jQuery
$('.my-class')
$('#my-id')
$('div')
$('div.my-class')
$('.my-class:first')

Современный JavaScript:

// JavaScript
document.querySelector('.my-class')            // первый элемент
document.querySelectorAll('.my-class')         // все элементы
document.getElementById('my-id')               // по ID
document.getElementsByTagName('div')           // по тегу
document.querySelector('div.my-class')         // комбинированный селектор
document.querySelectorAll('.my-class')[0]      // первый элемент из коллекции

2. Манипуляции с DOM

Добавление и удаление классов

// jQuery
$('.element').addClass('new-class')
$('.element').removeClass('old-class')
$('.element').toggleClass('active')

// JavaScript
element.classList.add('new-class')
element.classList.remove('old-class')
element.classList.toggle('active')

Изменение содержимого

// jQuery
$('.element').html('<span>Новый контент</span>')
$('.element').text('Просто текст')

// JavaScript
element.innerHTML = '<span>Новый контент</span>'
element.textContent = 'Просто текст'

3. Работа с атрибутами

// jQuery
$('.element').attr('src', 'image.jpg')
$('.element').removeAttr('title')
$('.element').prop('checked', true)

// JavaScript
element.setAttribute('src', 'image.jpg')
element.removeAttribute('title')
element.checked = true

4. События

Простое добавление событий

// jQuery
$('.button').click(function() {
    console.log('Клик!')
})

// JavaScript
document.querySelector('.button').addEventListener('click', () => {
    console.log('Клик!')
})

Делегирование событий

// jQuery
$('#parent').on('click', '.child', function() {
    console.log('Клик по дочернему элементу')
})

// JavaScript
document.getElementById('parent').addEventListener('click', (e) => {
    if (e.target.matches('.child')) {
        console.log('Клик по дочернему элементу')
    }
})

5. AJAX запросы

Простой GET запрос

// jQuery
$.ajax({
    url: '/api/data',
    method: 'GET',
    success: function(response) {
        console.log(response)
    },
    error: function(xhr, status, error) {
        console.error(error)
    }
})

// JavaScript
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error))

POST запрос с данными

// jQuery
$.ajax({
    url: '/api/data',
    method: 'POST',
    data: JSON.stringify({ name: 'John' }),
    contentType: 'application/json',
    success: function(response) {
        console.log(response)
    }
})

// JavaScript
fetch('/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: 'John' })
})
    .then(response => response.json())
    .then(data => console.log(data))

6. Анимации

Простое скрытие/показ элементов

// jQuery
$('.element').hide()
$('.element').show()

// JavaScript
element.style.display = 'none'
element.style.display = 'block'

Плавное появление/исчезновение

// jQuery
$('.element').fadeOut()
$('.element').fadeIn()

// JavaScript
// CSS
.fade-transition {
    transition: opacity 0.3s ease-in-out;
}

// JavaScript
function fadeOut(element) {
    element.style.opacity = '0'
    setTimeout(() => {
        element.style.display = 'none'
    }, 300)
}

function fadeIn(element) {
    element.style.display = 'block'
    setTimeout(() => {
        element.style.opacity = '1'
    }, 10)
}

7. Работа с формами

// jQuery
$('form').serialize()
const value = $('input').val()

// JavaScript
const formData = new FormData(form)
const value = input.value

8. Манипуляции с размерами и позицией

// jQuery
const width = $('.element').width()
const offset = $('.element').offset()

// JavaScript
const width = element.offsetWidth
const rect = element.getBoundingClientRect()

9. Работа с коллекциями элементов

// jQuery
$('.items').each(function() {
    $(this).addClass('active')
})

// JavaScript
document.querySelectorAll('.items').forEach(item => {
    item.classList.add('active')
})

10. Утилиты для работы с массивами и объектами

// jQuery
$.extend({}, obj1, obj2)
$.merge(array1, array2)

// JavaScript
Object.assign({}, obj1, obj2)
[...array1, ...array2]

Полезные функции-помощники

// Функция для удобного выбора элементов
const $ = selector => document.querySelector(selector)
const $$ = selector => document.querySelectorAll(selector)

// Функция для добавления нескольких обработчиков событий
function addEventListeners(element, events, handler) {
    events.split(' ').forEach(event => {
        element.addEventListener(event, handler)
    })
}

// Функция для проверки наличия класса
function hasClass(element, className) {
    return element.classList.contains(className)
}

Советы по миграции с jQuery

1. Постепенная миграция: Заменяйте jQuery код по частям, а не весь сразу
2. Используйте полифилы: Для поддержки старых браузеров
3. Тестируйте тщательно: Особенно в разных браузерах
4. Документируйте изменения: Это поможет другим разработчикам

Преимущества перехода на чистый JavaScript

1. Меньший размер кода (нет необходимости загружать jQuery)
2. Лучшая производительность
3. Современный и поддерживаемый код
4. Лучшее понимание JavaScript
5. Упрощенная отладка

Что такое Docker?

Docker — это платформа для контейнеризации приложений. Если объяснять простыми словами, Docker позволяет «упаковать» приложение со всеми его зависимостями в стандартизированный блок (контейнер), который будет работать одинаково на любом компьютере с установленным Docker.

Ключевые преимущества Docker:

• Изоляция: каждое приложение работает в своей среде
• Переносимость: работает одинаково везде
• Легкость: потребляет меньше ресурсов, чем виртуальные машины
• Скорость: быстрый запуск и остановка
• Версионирование: легко откатиться к предыдущей версии

Образы vs Контейнеры: В чём разница?

Образ (Image):

• Это шаблон, только для чтения
• Содержит инструкции для создания контейнера
• Можно сравнить с классом в программировании
• Не может быть изменен после создания
• Хранится в репозитории (например, Docker Hub)

Контейнер:

• Это запущенный экземпляр образа
• Можно изменять во время работы
• Имеет свою файловую систему
• Можно сравнить с объектом класса
• Исчезает после удаления (если не сохранять данные в volumes)

Пример отношения образа к контейнеру:

Образ Ubuntu → Можно запустить 10 разных контейнеров
Образ Nginx → Можно запустить несколько веб-серверов на разных портах

Основные команды Docker с примерами использования

Сценарий 1: Развертывание веб-приложения

# Создаем образ веб-приложения
docker build -t mywebapp:v1 .

# Запускаем контейнер с проброской портов
docker run -d -p 80:80 --name webapp mywebapp:v1

# Проверяем логи
docker logs webapp

# Перезапускаем при необходимости
docker restart webapp

Сценарий 2: Работа с базой данных

# Запускаем PostgreSQL
docker run -d \
    --name my-postgres \
    -e POSTGRES_PASSWORD=mysecretpassword \
    -v postgres-data:/var/lib/postgresql/data \
    -p 5432:5432 \
    postgres:13

# Подключаемся к базе
docker exec -it my-postgres psql -U postgres

Сценарий 3: Разработка с горячей перезагрузкой

# Запускаем контейнер с монтированием локальной директории
docker run -d \
    --name dev-env \
    -v $(pwd):/app \
    -p 3000:3000 \
    node:14 \
    npm run dev

Часть 2: Docker Compose

Что такое Docker Compose?

Docker Compose — это инструмент для определения и запуска многоконтейнерных приложений. Он использует YAML-файлы для конфигурации служб приложения и позволяет запускать все службы одной командой.

Основные возможности Docker Compose:

• Управление несколькими контейнерами как единым приложением
• Сохранение конфигурации в файле
• Управление сетями и томами
• Масштабирование служб

Практические сценарии использования Docker Compose

Сценарий 1: Веб-приложение с базой данных

# docker-compose.yml
version: '3.8'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      - DATABASE_URL=postgres://user:pass@db:5432/dbname

  db:
    image: postgres:13
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=pass
      - POSTGRES_DB=dbname

volumes:
  postgres-data:

Сценарий 2: Микросервисная архитектура

# docker-compose.yml
version: '3.8'
services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - db
      - redis

  db:
    image: mysql:8
    volumes:
      - db-data:/var/lib/mysql

  redis:
    image: redis:6
    volumes:
      - redis-data:/data

volumes:
  db-data:
  redis-data:

Сценарий 3: Разработческое окружение

# docker-compose.yml
version: '3.8'
services:
  dev:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
    command: npm run dev

Команды Docker Compose с пояснениями

# Запуск всех сервисов в фоновом режиме
docker-compose up -d

# Просмотр логов конкретного сервиса
docker-compose logs backend

# Остановка всех сервисов с удалением контейнеров
docker-compose down

# Пересборка и запуск определенного сервиса
docker-compose up -d --build frontend

# Масштабирование сервиса
docker-compose up -d --scale backend=3

Типичные сценарии отладки

Проверка состояния сервисов

# Статус всех сервисов
docker-compose ps

# Использование ресурсов
docker-compose top

Доступ к контейнерам

# Выполнение команды в контейнере
docker-compose exec backend bash

# Просмотр логов в реальном времени
docker-compose logs -f

Если вы забыли заполнить хоть одно поле в продамусе, он перезагрузит страницу, сотрет все поля. Я написал код, который это предотвращает.

Вставлять в расширение user js/css

$(document).ready(function() {
    // Экранирование квадратных скобок в селекторах для input-ов
    const requiredFields = [
        'textarea[name="paid_content"]',
        'input[name="order_id"]',
        'input[name="customer_email"]',
        'input[name="products\\[cur_1\\]\\[price\\]"]',
        'input[name="products\\[cur_1\\]\\[name\\]"]'
    ];

    function restoreFields() {
        requiredFields.forEach(selector => {
            const $field = $(selector);
            const fieldName = $field.attr('name');
            const savedValue = localStorage.getItem(fieldName);
            
            if (savedValue !== null && $field.length) {
                $field.val(savedValue);
            }
        });
    }

    function saveField($field) {
        const fieldName = $field.attr('name');
        const fieldValue = $field.val();
        localStorage.setItem(fieldName, fieldValue);
    }

    function findEmptyField() {
        let emptyField = null;
        
        for (let selector of requiredFields) {
            let $field = $(selector);
            
            // Если поле находится в скрытом контейнере, пропускаем его проверку
            if ($field.closest('.paygoods-product-row.hidden').length) {
                console.log('Пропускаем поле:', selector, 'так как его родитель скрыт');
                continue;
            }
            
            console.log('Проверяем поле:', selector, 'Найдено:', $field.length, 'Значение:', $field.val());
            
            if ($field.length && !$field.val().trim()) {
                console.log('Найдено незаполненное поле:', selector);
                return $field;
            }
        }
        return null;
    }

    function scrollTo($element) {
        if (!$element || !$element.length) return;
        
        console.log('Скроллим к:', $element[0].name || $element[0].id);
        
        let offset = $element.offset().top;
        console.log('Отступ элемента:', offset);
        
        $('html, body').animate({
            scrollTop: offset - 100  // корректируйте смещение при необходимости
        }, {
            duration: 800,
            complete: function() {
                $element.focus();
                $element
                    .css('background-color', '#ffe6e6')
                    .delay(200)
                    .queue(function(next) {
                        $(this).css('background-color', '');
                        next();
                    });
            }
        });
    }

    // Обработчик для всех кнопок
    $('#btnPay-wrapper button, .dropdown-menu button').on('click', function(e) {
        console.log('Кнопка нажата');
        
        let emptyField = findEmptyField();
        console.log('Найдено незаполненное поле:', emptyField ? emptyField[0].name : 'нет');
        
        if (emptyField) {
            e.preventDefault();
            e.stopPropagation();
            scrollTo(emptyField);
            return false;
        }
        // Если незаполненных полей нет – форма отправляется как задумано
    });

    function updateButtonState() {
        let hasEmptyFields = findEmptyField() !== null;
        
        // Обновляем внешний вид кнопок, не блокируя их кликабельность
        $('#btnPay-wrapper button, .dropdown-menu button').each(function() {
            $(this).toggleClass('btn-disabled', hasEmptyFields);
            // Не отключаем кнопки:
            // $(this).prop('disabled', hasEmptyFields);
        });
    }

    // Сохраняем значения при вводе
    $(requiredFields.join(',')).on('input change', function() {
        saveField($(this));
        updateButtonState();
    });

    // Восстанавливаем значения при загрузке страницы
    restoreFields();
    
    // Начальное состояние кнопок
    updateButtonState();

    // Очистка localStorage при успешной отправке формы
    $('form').on('submit', function() {
        requiredFields.forEach(selector => {
            const $field = $(selector);
            const fieldName = $field.attr('name');
            localStorage.removeItem(fieldName);
        });
    });
});

/* Стили для визуальной индикации "заблокированной" кнопки */
.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-inactive {
opacity: 0.7;
cursor: not-allowed !important;
}
.highlight-field {
animation: highlight-pulse 2s ease-in-out;
}
@keyframes highlight-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

body {
  font-family: 'Manrope', Roboto !important;
}

#table-instruction {
  background: #555CFF !important;
  color: #fff !important;
}

#table-instruction a {
  color: #fff !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important; 
}

h1 .editor-pane-line {
  color: #fff;
  line-height: 1.3
}

.hint-text {
  opacity: 1 !important;
}

form > :nth-child(9) span {
  display: none !important;
}

form .input-group-addon {
  display: none !important;
}

form .col-xs-6 .h-45,
input[type="text"],
select,
.jq-selectbox__select,
.form-control{
  border-radius: 6px !important;
  border-color: #aaa!important;
  border-width: 1px !important;
}
.btn.btn-sm {
  padding: 10px 20px !important;
  height: auto !important;
  margin: auto !important;
  border: none !important;
  transition: all .3s;
}

.btn.btn-sm * {
  transition: .3s all;
}

.btn.btn-sm:hover {
  background-color: rgb(219, 219, 219) !important;
  color: #fff !important;
  opacity: 1 !important;
}

.btn.btn-sm:hover span,
.btn.btn-sm:hover i {
  color: #222 !important;
}

.paygoods-product-row {
  border: 1px solid #eee !important;
  padding: 20px !important;
  border-radius: 6px !important;
}

.paygoods-product-add,
.paygoods-product-delete {
  top: -10px !important;
  padding: 10px !important;
  height: 20px !important;
  right: -10px;
}

.paygoods-product-delete {
  background-color: rgb(255, 81, 81) !important;
  color: #fff !important;  
}
.paygoods-product-delete i {
  color: #fff !important;  
}

.price-box {
  background-color: #f0f0ff !important;
  color: #555CFF !important;
  font-size: 20px !important;
  font-weight: bold;
}

button[type="submit"] {
  color: #fff !important;
  background-color: #555CFF !important;
  border: none !important;
  margin-bottom: 30px !important;
}

.dropup-payform {
  width: 100% !important;
}

.dropdown-menu {
  position: relative !important;
  display: flex !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 10px;
}

#dropdownMenu2 {
 display: none !important;
}

.dropup.dropup-payform .dropdown-menu:after,
.dropup.dropup-payform .dropdown-menu:before {
  display: none !important; 
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu li button {
  width: 100%;
  border-radius: 6px !important;
  text-align: center !important;
  background-color: #f1f1f1 !important;
  color: #222 !important;
}

#btnPay-wrapper button{
    width: 100% !important;
}