Причины возникновения ошибки

• Обработка больших данных: попытка загрузить в память гигантский файл или огромный массив данных.
• Бесконечные циклы: неисправный цикл, который накапливает данные бесконечно, расходуя память.
• Неконтролируемое увеличение объектов: динамическое создание множества объектов без освобождения памяти.
• Повышенные требования к памяти: некоторые библиотеки или расширения могут требовать значительных объемов памяти для работы.

Как обнаружить проблему

1. Отладка с помощью профилировщика: используйте Xdebug или Blackfire для анализа расхода памяти.
2. Добавление журналов: поместите error_log(print_r(memory_get_usage(true), true)) в интересующие места вашего кода, чтобы отслеживать потребление памяти.
3. Проверка логов: посмотрите логи ошибок PHP, чтобы понять, в каком месте возникает проблема.

Решения проблемы

memory_limit = 512M ; или больше, в зависимости от нужд

ini_set('memory_limit', '512M');

• Используйте итерации вместо массивов: вместо хранения всех данных в массиве, проходите по данным построчно или порционно.
• Освобождайте память: периодически очищайте неиспользуемые переменные с помощью unset() или сброса массивов.
• Парсинг больших файлов: используйте stream-интерфейсы для обработки огромных файлов.
• Делайте инкрементальную обработку: разбейте большую задачу на маленькие порции и обрабатывайте их по очереди.

$data = json_decode(file_get_contents('big.json'), true);

$handle = fopen('big.json', 'rb');
while (!feof($handle)) {
    $line = fgets($handle);
    processLine($line);
}
fclose($handle);

Проверка с помощью jQuery

if ($('#myElement').is(':visible')) {
    console.log('Элемент виден');
} else {
    console.log('Элемент скрыт');
}

Проверка с помощью чистого JavaScript

function isVisible(element) {
    const style = window.getComputedStyle(element);
    return !(style.display === 'none' ||
             style.visibility === 'hidden' ||
             parseFloat(style.opacity) <= 0 ||
             element.offsetWidth === 0 ||
             element.offsetHeight === 0);
}

const el = document.querySelector('#myElement');
if (isVisible(el)) {
    console.log('Элемент виден');
} else {
    console.log('Элемент скрыт');
}

• window.getComputedStyle(): Получает реальные значения стилей элемента, включая унаследованные.
• offsetWidth и offsetHeight: Проверяют, занимает ли элемент пространство на странице.
• opacity: Если прозрачность установлена на 0, элемент фактически невидим.

• Родители: Если родительский элемент скрыт, дочерние элементы также считаются невидимыми.
• Размеры: Если элемент имеет высоту и ширину, равные нулю, он не отображается на странице.
• Visibility: Свойство visibility может скрывать элемент без снятия его из DOM.

Проверка с помощью .length

if ($('#myBlock').length > 0) {
    alert('Блок существует!');
} else {
    alert('Блок не найден!');
}

Проверка с помощью оператора is()

if ($('#myBlock').is('*')) {
    alert('Блок существует!');
} else {
    alert('Блок не найден!');
}

Прямая проверка наличия элементов

var blockExists = $('#myBlock');

if (blockExists.length) {
    alert('Блок существует!');
} else {
    alert('Блок не найден!');
}

Дополнительные советы

$(document).on('DOMNodeInserted', '#myBlock', function() {
    alert('Блок появился на странице!');
});

$(document).ready(function(){
    if ($('#myBlock').length > 0) {
        alert('Блок существует!');
    } else {
        alert('Блок не найден!');
    }
});

Причина ошибки

Как исправить ошибку?

let obj = {};

if (obj && typeof obj.top !== 'undefined') {
    console.log(obj.top);
} else {
    console.error('Объект не содержит свойство top');
}

console.log('Current object:', myObject);
myObject.top += 10; // Возможная точка появления ошибки

if (myObject === null || myObject === undefined) {
    throw new Error('Объект не инициализирован!');
}

let value = myObject?.top ?? 'Default Value';

Пример правильной обработки

let person = {}; // Изначально пустой объект

// Если попытаться сразу прочитать свойство 'top'
try {
    let x = person.top;
    console.log(x);
} catch(e) {
    console.error('Ошибка:', e.message);
}

// Лучше заранее проверить объект
if (typeof person.top !== 'undefined') {
    console.log(person.top);
} else {
    console.warn('У объекта нет свойства top');
}

1. Передача неправильного типа данных: Возможно, вы передали массив или строку вместо узла DOM.
2. Неверное наименование переменной: Возможно, переменная названа неправильно или содержит ошибку в наименовании.
3. Неправильное создание элемента: Возможно, элемент не был создан корректно перед попыткой его добавления.

let elements = []; // Здесь подразумевается массив элементов

for (let i = 0; i < elements.length; i++) {
    container.appendChild(elements[i]); // Ошибка возникнет, если elements[i] не является узлом DOM
}

Как исправить ошибку

1. Проверьте тип данных: Убедитесь, что переменная, которую вы передаёте в appendChild(), является узлом DOM.
2. Создайте узлы правильно: Убедитесь, что вы создаёте элементы DOM корректно.

let container = document.getElementById('container');

// Создаём элементы и добавляем их в контейнер
for (let i = 0; i < 5; i++) {
    let element = document.createElement('div'); // Создаём элемент DIV
    element.textContent = `Элемент ${i}`; // Задать текст
    container.appendChild(element); // Добавляем элемент в контейнер
}

Основные проблемы производительности

• Замедление при взаимодействии с DOM: постоянные манипуляции с деревом DOM замедляют работу приложения.
• Бесконтрольное использование памяти: создание и удаление большого количества объектов приводит к перерасходу памяти.
• Слишком сложные вычисления: тяжелые математические операции и циклы замедляют приложение.
• Неправильное использование асинхронности: неправильное использование обещаний и async/await может привести к "заморозке" главного потока.

Основные техники оптимизации

• Batch Updates: сгруппируйте изменения DOM в единый блок.
• Virtual DOM: используйте Virtual DOM для минимизации изменений.
• Use DocumentFragment: создайте документные фрагменты для массовой вставки элементов.

// Пример batch updates
document.body.innerHTML = '<div>' + items.map(item => `<li>${item}</li>`).join('') + '</div>';

• Weak References: используйте слабые ссылки для хранения объектов, которые могут быть освобождены сборщиком мусора.
• Reduce Global Variables: уменьшите количество глобальных переменных.
• Avoid Leaks: избегайте утечек памяти, освобождая неиспользуемые объекты.

// Пример слабой ссылки
const weakMap = new WeakMap();
weakMap.set(element, someData);

• Memoization: кэшируйте результаты сложных функций.
• Debounce и Throttle: ограничивайте частоту вызовов событий.
• Parallel Computing: используйте worker threads для параллельных вычислений.

// Memoization example
const memoizedFunction = (() => {
    const cache = new Map();
    return (arg) => {
        if(cache.has(arg)) return cache.get(arg);
        const result = heavyComputation(arg);
        cache.set(arg, result);
        return result;
    };
})();

• Promises: используйте promises для управления асинхронными операциями.
• Async/Await: упрощайте код с помощью async/await.
• Event Loop: понимайте, как работает event loop, чтобы избегать блокировки главного потока.

// Пример использования promises
async function fetchData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
}

• Chrome DevTools: используйте инструменты разработчика Chrome для профилирования производительности.
• Heap Snapshot: смотрите распределение памяти и ищите утечки.
• CPU Profile: измеряйте производительность CPU.

Советы по улучшению производительности

• Minimize Network Requests: уменьшайте количество запросов, объединяя ресурсы.
• Lazy Loading: загружайте ресурсы только при необходимости.
• Code Splitting: разделяйте код на куски для более быстрой загрузки.
• Caching: используйте кэширование для ускорения повторных запросов.

Основные свойства типографики в CSS

• font-family: семейство шрифтов.
• font-style: стиль шрифта (нормальный, наклонный, курсив).
• font-weight: толщина шрифта (от 100 до 900, normal, bold).
• font-size: размер шрифта.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-style: italic;
}

• text-align: выравнивание текста (left, right, center, justify).
• letter-spacing: расстояние между буквами.
• word-spacing: расстояние между словами.
• line-height: высота строки.

p {
    text-align: justify;
    letter-spacing: 1px;
    word-spacing: 2px;
    line-height: 1.5;
}

• color: цвет текста.
• background-color: цвет фона.
• text-shadow: текстовая тень.

h1 {
    color: #333;
    background-color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

• text-transform: преобразование регистра (uppercase, lowercase, capitalize).
• text-decoration: украшение текста (underline, overline, line-through).

strong {
    text-transform: uppercase;
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Custom Fonts</title>
    <style>
        @font-face {
            font-family: 'Open Sans';
            src: url('fonts/opensans.woff2') format('woff2'),
                 url('fonts/opensans.woff') format('woff');
        }

        body {
            font-family: 'Open Sans', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Заголовок с кастомным шрифтом Open Sans</h1>
</body>
</html>

Советы по типографике

• Выбирайте разборчивые шрифты: избегайте сложных и экстравагантных шрифтов для основного текста.
• Используйте контрастные цвета: темные буквы на светлом фоне или наоборот.
• Избегайте длинных строк: длинные строки ухудшают читаемость.
• Уважайте иерархию: заголовки крупнее и контрастнее основного текста.

Что такое псевдоэлементы?

• ::before: вставляет элемент перед содержимым выбранного элемента.
• ::after: вставляет элемент после содержимого выбранного элемента.

Примеры использования псевдоэлементов

<blockquote>Это моя цитата.</blockquote>

blockquote::before {
	content: '"';
	font-size: 2em;
	color: gray;
	margin-right:10px;
}

blockquote::after {
	content: '"';
	font-size:2em;
	color: gray;
	margin-left: 10px;
}

<h2>Заголовок с декоративной линией</h2>

h2::before {
	content: "";
	display: inline-block;
	width: 50px;
	height: 2px;
	background-color: #ccc;
	vertical-align: middle;
	margin-right: 10px;
}

h2::after {
	content: "";
	display: inline-block;
	width: 50px;
	height: 2px;
	background-color: #ccc;
	vertical-align: middle;
	margin-left: 10px;
}

<span class="tooltip">Наведи мышь</span>

.tooltip::after {
	content: attr(title);
	visibility: hidden;
	opacity: 0;
	white-space: nowrap;
	padding:5px;
	background-color: black;
	color: white;
	border-radius:5px;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 10px);
	transition: all 0.3s ease;
}

.tooltip:hover::after {
	visibility: visible;
	opacity:1;
	transform: translate(-50%, 5px);
}

<a href="#" class="decorated-link">Ссылка</a>

.decorated-link::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #ffcc00;
	visibility: hidden;
	transform: scaleX(0);
	transition: all 0.3s cubic-bezier(.8,.2,.3,1.2);
}

.decorated-link:hover::before {
	visibility: visible;
	transform: scaleX(1);
}

Плюсы и минусы псевдоэлементов

• Нет необходимости редактировать HTML: можно легко добавлять декоративные элементы без изменения структуры.
• Полезны для небольших украшений: отлично подходят для иконок, линий, стрелок и других декоративных элементов.
• Могут использоваться для подсказок и подписей: упрощают создание интерактивных элементов.

• Не учитываются в основном потоке: псевдоэлементы не влияют на основную структуру документа.
• Сложность поддержки старых браузеров: некоторые старые браузеры могут некорректно отображать псевдоэлементы.

Что такое позиционирование в CSS?

• Static: нормальное позиционирование, элементы располагаются последовательно.
• Relative: элемент смещается относительно своего первоначального местоположения.
• Absolute: элемент позиционируется относительно ближайшего позиционированного предка.
• Fixed: элемент фиксируется относительно окна браузера.
• Sticky: элемент «прилипает» к определенной точке при прокрутке страницы.

Типы позиционирования

.static-element {
    position: static;
}

.relative-element {
    position: relative;
    top: 10px;
    left: 20px;
}

.absolute-element {
    position: absolute;
    top: 50px;
    left: 100px;
}

.fixed-element {
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky-header {
    position: sticky;
    top: 0;
}

Продвинутые техники позиционирования

.parent-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.child-flex {
    flex-grow: 1;
}

.grid-parent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.grid-child {
    background-color: lightgray;
}

.layer-top {
    position: absolute;
    z-index: 10;
}

.layer-bottom {
    position: absolute;
    z-index: 5;
}

Советы и рекомендации

• Относительное позиционирование: используйте его, если нужно незначительно сместить элемент относительно его исходного положения.
• Абсолютное позиционирование: применяйте, когда нужно поместить элемент в конкретном месте относительно родителя.
• Фиксированное позиционирование: полезно для создания «навсегда висящих» элементов, таких как панели навигации или боковые меню.
• Sticky: идеально подходит для шапок и боковых панелей, которые должны «прилипать» при прокрутке.

Использование анимации и градиента

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Меняющийся бордюр</title>
    <style>
        .border-animated {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            box-shadow: inset 0 0 0 3px transparent; /* внутренняя рамка */
            animation: border-change 5s infinite alternate;
        }

        @keyframes border-change {
            0% {
                box-shadow: inset 0 0 0 3px rgba(255, 0, 0, 1); /* красный */
            }
            100% {
                box-shadow: inset 0 0 0 3px rgba(0, 0, 255, 1); /* синий */
            }
        }
    </style>
</head>
<body>
    <div class="border-animated"></div>
</body>
</html>

Переливающееся изменение цвета границ

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Переливающийся бордюр</title>
    <style>
        .rainbow-border {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            border-radius: 50%;
            background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 100%);
            box-shadow: inset 0 0 0 3px transparent; /* внутренний бордюр */
            animation: rainbow-border 10s infinite linear;
        }

        @keyframes rainbow-border {
            0% {
                box-shadow: inset 0 0 0 3px rgb(255, 0, 0); /* Красный */
            }
            25% {
                box-shadow: inset 0 0 0 3px rgb(255, 255, 0); /* Желтый */
            }
            50% {
                box-shadow: inset 0 0 0 3px rgb(0, 255, 0); /* Зеленый */
            }
            75% {
                box-shadow: inset 0 0 0 3px rgb(0, 0, 255); /* Синий */
            }
            100% {
                box-shadow: inset 0 0 0 3px rgb(255, 0, 0); /* Красный */
            }
        }
    </style>
</head>
<body>
    <div class="rainbow-border"></div>
</body>
</html>

• box-shadow: свойство, которое позволяет создать внутреннюю границу элемента (это наша "линия").
• @keyframes: анимация, которая изменяет цвет внутренней границы плавно между ключевыми кадрами.
• transition: плавный переход между цветами можно задать и без градиента, но с анимацией (эффект плавного перетекания цветов).

Почему программисты используют $?

1. DOM-объекты: Традиционно переменные, содержащие ссылки на элементы DOM (Document Object Model), называют с префиксом $, чтобы подчеркнуть, что они ссылаются на DOM-объекты.
   
   Пример:
   

   const $header = document.querySelector('header');
   const $button = document.getElementById('submit-btn');

2. Обозначения jQuery-оберток: В jQuery традиционно переменные, содержащие обернутые элементы jQuery, обозначаются с префиксом $, чтобы напомнить, что переменная содержит jQuery-коллекцию.
   
   Пример:
   

   const $btn = $('#submit-btn');

3. Чистая конвенция: Иногда префикс $ используется просто как соглашение для обозначения определённых типов переменных, например, для переменных, содержащих обработчики событий или ссылки на ресурсы.

• Только соглашение: Префикс $ не накладывает на переменную никаких специальных свойств или ограничений, это чисто стилистическое решение.
• Совместимость: Стандарт ECMAScript разрешает использовать символ $ в именах переменных наряду с латиницей, цифрами и подчёркиванием _.

Основные преимущества Gulp

• Простота и удобство: задачи в Gulp описаны простыми JavaScript-функциями, что делает их легкими для понимания и модификации.
• Гибкость: возможность комбинировать плагины и настраивать конвейеры обработки файлов.
• Экосистема плагинов: огромная экосистема плагинов, позволяющая решать любые задачи фронтенд-разработки.
• Производительность: асинхронное выполнение задач, параллельное выполнение заданий и кэширование предыдущих процессов.

Как работает Gulp

1. Установка: установить Gulp и зависимые пакеты через npm (Node Package Manager).
2. Конфигурация: создать файл gulpfile.js, в котором будут описаны задачи и конвейеры.
3. Выполнение: запустить Gulp командой gulp task-name, где task-name — название задачи.

Пример базовой конфигурации

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass')); // Подключаем плагин для Sass
const concat = require('gulp-concat'); // Подключаем плагин для объединения файлов

// Задача для компиляции Sass
gulp.task('styles', function() {
    return gulp.src('./src/scss/*.scss')
               .pipe(sass()) // Компилируем Sass в CSS
               .pipe(concat('main.css')) // Объединяем все CSS-файлы в один
               .pipe(gulp.dest('./dist/css/')); // Копируем в дистрибутив
});

// Основной таск
gulp.task('default', gulp.series('styles'));

Распространённые задачи, выполняемые с помощью Gulp

• Минификация и объединение файлов JavaScript/CSS: уменьшение размера файлов для повышения производительности.
• Сжатие изображений: уменьшение размера изображений с помощью плагинов, таких как gulp-imagemin.
• Наблюдение за изменениями файлов: автоматическое выполнение задач при изменениях в файлах.
• Сервера разработки: запуск локального сервера с горячей заменой (hot reload).

• Блог: Gulp: Плагин "gulp-imagemin"

Основные возможности gulp-imagemin

• Автоматическое сжатие изображений: уменьшается размер файлов за счет удаления ненужных метаданных и оптимизации внутренних данных.
• Поддержка популярных форматов: оптимизирует изображения в форматах JPEG, PNG, GIF и SVG.
• Простота интеграции: легко интегрируется в конвейер сборки Gulp.
• Масштабируемость: может оптимизировать сотни изображений за один прогон.

Установка gulp-imagemin

npm install --save-dev gulp gulp-imagemin

Пример использования

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

// Задача для оптимизации изображений
gulp.task('images', () =>
    gulp.src('src/images/**/*.{jpg,png,gif}')
        .pipe(imagemin([
            imagemin.jpegtran({progressive: true}), // оптимизация JPEG
            imagemin.optipng({optimizationLevel: 5}), // оптимизация PNG
            imagemin.svgo(), // оптимизация SVG
            imagemin.gifsicle({interlaced: true}) // оптимизация GIF
        ]))
        .pipe(gulp.dest('build/images'))
);

// Основной таск
gulp.task('default', gulp.series('images'));

• gulp.src: выбирает исходные изображения из папки src/images.
• imagemin: оптимизирует изображения с помощью четырех утилит:
  
  • jpegtran: оптимизирует JPEG-изображения.
  • optipng: оптимизирует PNG-изображения.
  • svgo: оптимизирует SVG-изображения.
  • gifsicle: оптимизирует GIF-изображения.
  
  
• gulp.dest: сохраняет оптимизированные изображения в папку build/images.

• Optimization Level: Уровень оптимизации для PNG. 0 — минимум, 7 — максимум.
• Progressive JPEG: создает прогрессивные JPEG-изображения, которые загружаются поэтапно.
• Interlacing: создаёт чередующиеся изображения, которые выглядят более гладкими при постепенной загрузке.

Оптимизация для production окружения

gulp.task('production-images', () =>
    gulp.src('src/images/**/*.{jpg,png,gif}')
        .pipe(imagemin([
            imagemin.mozjpeg({quality: 60}), // сильное сжатие JPEG
            imagemin.optipng({optimizationLevel: 7}), // максимальная оптимизация PNG
            imagemin.svgo(), // оптимизация SVG
            imagemin.gifsicle({optimizationLevel: 3}) // оптимизация GIF
        ]))
        .pipe(gulp.dest('dist/images'))
);

• Блог: Gulp
• Блог: Работа с изображениями на сайте