1070
Сборная солянка про фронтенд. JavaScript, React, TypeScript, HTML, CSS — здесь обсуждаем всё, что связано с веб-разработкой! Связь: @pmowq
Давно не было постов про React. Пора это исправлять) Сегодня про встроенную поддержку метаданных в 19 версии реакта. Теперь можно легко задавать <title>, <meta> и <link> прямо внутри компонентов, без сторонних библиотек.
Что это за фича?
Раньше для изменения метаданных страницы нужно было использовать такие библиотеки, как react-helmet. Но теперь всё стало намного проще, так как React позволяет добавлять метаданные прямо в код компонента, а обновление тегов выполняется автоматически.
Как это работает?
Метаданные можно описывать прямо в JSX, и React автоматически добавит их в <head> страницы.
Пример:
const Post = ({ post }) => {
return (
<article>
<h1>{post.title}</h1>
<title>{post.title}</title>
<meta name="description" content={post.description} />
<meta name="keywords" content={post.keywords.join(', ')} />
<link rel="canonical" href={post.url} />
<p>{post.content}</p>
</article>
);
}
Всем привет 👋 Начнем эту неделю с очень простой темы)
Если вы хоть раз верстали, то наверняка сталкивались с тегами, которые не нужно закрывать. Сегодняшний пост как раз о них 🙂
Что это за элементы и как они называются?
Void-элементы— это тип HTML-элементов, которые не требуют закрывающего тега. Такие элементы предназначены для случаев, когда контент внутри недопустим. Например, <img> используется для добавления изображений, а <br> — для переноса строки.
Полный список void-элементов:<area> — для создания активных областей в <map>.<base> — задаёт базовый URL для документа.<br> — перенос строки.<col> — определяет колонки в таблицах.<embed> — для вставки мультимедиа-контента.<hr> — горизонтальная линия для разделения секций.<img> — для добавления изображений.<input> — для создания полей ввода.<link> — подключение внешних ресурсов, например, CSS.<meta> — метаинформация о документе.<source> — источник для <audio> и <video>.<track> — субтитры и текстовые дорожки для видео.<wbr> — возможный разрыв длинного слова.
На что обратить внимание?1. Не закрывайте void-элементы вручную:
<img src="photo.jpg"></img> <!-- Ошибка -->
2. Void-элементы не могут содержать вложений:
<hr>---</hr> <!-- Так нельзя -->
3. В HTML5 не нужно добавлять слэш перед закрытием:
<img src="example.jpg" alt="Описание"> <!-- Добавляем без слэша -->
Вчера я рассказывал про Intersection Observer , а сегодня подготовил пример его использования. С помощью Intersection Observer будем "печатать" текст, когда он попадает в зону видимости, и скрывать при прокрутке вверх.
Посмотреть пример можно тут JSFiddle / CodePen
#CSS #HTML #JavaScript
Сегодня кажется, что почти каждая команда работает по Scrum или чему-то приближенному. Но довольно часто вижу, что у многих из встреч остаются только базовые. Однако есть одна практика, о которой знают далеко не все — особенно если в вашей команде никогда не было скрам-мастера. Это встреча «Три амиго».
Что это за встреча?
Это встреча на которой пересекаются бизнес, разработка и тестирование, чтобы превратить идеи в понятные, четко сформулированные задачи.
Кто учавствует?
1. Бизнес — задаёт контекст и отвечает на главный вопрос: «Зачем это нужно?».
2. Разработчик — оценивает технические аспекты и предлагает: «Как это сделать?».
3. Тестировщик — добавляет перспективу качества и спрашивает: «Как проверить, что это работает правильно?».
Что происходит на встрече?
1. Разбираются пользовательские истории или фичи, чтобы у всех было единое понимание.
2. Выявляются «узкие места» в реализации, чтобы избежать сюрпризов.
3. Определяются четкие критерии готовности (DoD), чтобы не допустить размытых требований.
Когда эта встреча пригодится?
— Если задачи слишком размыты, встреча помогает превратить абстрактные идеи в четко сформулированные задачи.
— Когда в команде есть разногласия. Если разработчики, тестировщики и бизнес понимают задачу по-разному, такая встреча устранит недоразумения.
— При работе над сложными или технически рискованными фичами можно заранее выявить узкие места, оценить риски и спланировать, как их избежать.
— Когда сроки поджимают, четкое определение критериев готовности и понимание объёма работ помогут сосредоточиться на главном и избежать потери времени на лишние доработки.
— Если важно качество, тестировщики на встрече могут заранее обозначить свои ожидания от задачи, предложить тестовые сценарии и уточнить, как проверить, что всё сделано правильно.
Что в итоге?
Такие встречи помогают синхронизировать участников процесса, предотвратить недоразумения и экономить время на доработках.
Кто-то из вас участвовал в таких встречах? В моем опыте это довольно редкая практика.
Запущу опрос ниже, чтобы понять, насколько популярна эта практика)
#Scrum #Продуктивность #BestPractices
Наступают выходные, а это значит, что пора отдыхать 🍻
На всякий случай хочу сказать, что посты выходят только по будним дням, и следующий будет уже в понедельник.
А пока небольшая подборка старых интересных постов:
1. Разбор задачи с собеседования про анаграммы
2. Отложенная загрузка изображений
3. Простой лоадер для вашего сайта
Спасибо за ваши подписки и активность 🫶 Обнял, поднял ☺️
Хороших выходных, увидимся в понедельник 🤜
Простая, но невероятно милая анимация пульсирующего сердца❤️
Посмотреть реализацию можно тут CodePen
Сегодня про проблемы начинающих (и не только) разработчиков — использование transition: all. Это может казаться удобным, но на практике часто приносит больше вреда, чем пользы.
Почему transition: all проблема?
CSS-свойств много, и когда вы используете all, вы переходите в режим «а пусть плавно изменится всё». Это может вызвать неожиданные эффекты, если вы добавите или измените свойства в будущем.
Например:
button {
transition: all 0.3s ease;
}
button:hover {
background-color: #ff5722;
transform: scale(1.1);
}
box-shadow или добавите border? Всё будет анимироваться, даже если вы этого не хотите. В результате — неочевидный баг на проде.
button {
transition: background-color 0.3s ease, transform 0.3s ease;
}
background-color и transform.transition: all — это как "универсальный ключ", который вроде как открывает всё, но может сломать половину замков. Не ленитесь и всегда указывайте только нужные свойства.
Наконец-то закончилась эта долгая и тяжелая рабочая неделя… Надеюсь, у всех получилось хоть немного влиться в работу после праздников. Я уже успел устать 🥲
Продолжаем отдыхать и морально готовиться к тому, что следующие длинные выходные будут только в мае.
Спасибо, что остаетесь здесь, читаете и поддерживаете 🫶
Всем хороших выходных 🍻
Привет! 👋
Мы довольно часто сталкиваемся с таблицами, и сегодня пост о свойстве table-layout, которое определяет, как браузер вычисляет ширину столбцов в таблицах.table-layout — это CSS-свойство, которое определяет, как браузер должен рассчитывать ширину столбцов в таблице.
Оно имеет два возможных значения:
1. table-layout: auto;
При значении auto ширина столбцов определяется на основе их содержимого. Браузер сначала анализирует данные в таблице, чтобы рассчитать ширину каждого столбца, а затем отрисовывает её. Ширина таблицы зависит от контента в каждой ячейке, а сама таблица подстраивается под содержимое динамически.
2. table-layout: fixed;
При значении fixed ширина столбцов определяется заранее — на основе ширины таблицы и возможных указанных ширин столбцов (<col> или <th>). Контент внутри ячеек больше не влияет на ширину столбца. Ширина столбцов фиксируется сразу после загрузки страницы. Контент, который не помещается, просто обрезается или переносится (в зависимости от свойств колонки).
Главное отличие:
При использовании table-layout: fixed таблица загружается быстрее, потому что ширина столбцов вычисляется сразу. А со значением auto браузер должен сначала обработать всё содержимое таблицы, чтобы вычислить ширину столбцов.
Я подготовил пример, где вы можете изменять ширину таблиц с помощью ползунка. Попробовать можно тут JSFiddle(клик)/Codepen(клик)
@TrueFrontender #CSS #HTML
Привет всем! Давно не виделись 🏠
Многие заметили, что посты перестали выходить. Это произошло неожиданно, особенно учитывая, что последний пост был о том, как можно улучшить контент. Я не планировал прекращать, но в один момент у меня пропало вдохновение.
Пока не могу точно сказать, буду ли продолжать вести этот канал. Нужен перерыв, чтобы перезагрузиться и определиться.
Долго готовился к написанию этого поста, и вот он наконец вышел. Надеюсь на ваше понимание!
Мы часто используем в своих проектах сброс или нормализацию стилей. А знаете в чем разница? Понимание их отличий может пригодиться не только в повседневной работе, но и на собеседованиях.
Reset CSS
Сброс CSS - это метод, при котором у всех HTML-элементов удаляются стандартные стили браузера. Цель - предоставить одинаковую стартовую точку для дальнейшей стилизации. Это означает, что все отступы, шрифты и другие стили сбрасываются до нуля.
Преимущества сброса:
- Предоставляет полный контроль над стилизацией.
- Устраняет несоответствия между стилями по умолчанию в различных браузерах, упрощая создание консистентного внешнего вида.
- Идеален для проектов, где необходима полная кастомизация стилей без зависимости от браузерных умолчаний.
Normalize CSS
Нормализация, в отличие от сброса, не убирает все стили браузера, а корректирует и унифицирует отображение элементов, сохраняя при этом полезные умолчания. Она исправляет ошибки и обеспечивает единообразное отображение в разных браузерах, опираясь на современные стандарты.
Преимущества нормализации:
- Сохраняет полезные браузерные стили, улучшая кросс-браузерную совместимость.
- Исправляет баги и расхождения в отображении элементов между браузерами.
Вывод
Выбор между сбросом и нормализацией зависит от ваших целей и предпочтений. Если вы хотите полностью контролировать все стили на странице и начать с "чистого листа", сброс будет вашим выбором. Если же вам важно сохранить некоторые полезные умолчания и обеспечить единообразие без лишнего труда, нормализация станет отличным решением.
#css
На собеседованиях часто поднимается тема Utility Types в TypeScript Сегодня мы рассмотрим одну из таких утилит – Pick. Этот инструмент позволяет нам создавать новые типы, выбирая из существующих только те свойства, которые нам нужны.
Что такое Pick?Pick<T, K> — это утилита в TypeScript, которая позволяет создать новый тип на основе типа T, выбрав из него свойства, указанные в K.
Как это работает?
Допустим, у нас есть тип User с несколькими свойствами:
type User = {
id: number;
name: string;
email: string;
age: number;
};
name и email пользователя. Вот как мы это можем сделать с помощью Pick:type UserContactInfo = Pick<User, 'name' | 'email'>;
UserContactInfo — это новый тип с двумя свойствами: name и email, исключая все остальные свойства из User.
Всем привет!
Для тех, кто хочет расширить и проверить знания во фронтенде, а также ищет свежие идей для своих проектов, рекомендую обратить внимание на канал @code_ready.
В этом канале каждый день выходят полезные посты с готовым кодом и примерами его использования.
Также автор время от времени публикует разборы вопросов с собеседований и разные полезности из мира IT.
Этот канал будет хорошим дополнением к моим постам!
Привет! На этой неделе мы разберемся, как найти максимальную подстроку без повторяющихся символов. Это не самая популярная, но интересная и не простая задача.
Что мы хотим сделать?
Нужно написать функцию, которая принимает строку и возвращает длину самой длинной подстроки, состоящей из уникальных символов. Например, для строки "abcabcbb", ответ будет 3, потому что максимальная подстрока без повторений - "abc".
Алгоритм решения:
1. Определяем начальный индекс подстроки start и переменную для хранения максимальной длины подстроки maxLength.
2. Создаем коллекцию charIndex для отслеживания символов и их последних позиций в строке.
3. Проходим циклом по каждому символу строки. Если текущий символ уже встречался, обновляем start до его текущей позиции.
4. Добавляем/обновляем позицию текущего символа.
5. Сравниваем текущую длину подстроки с maxLength и обновляем maxLength , если появилось значение больше.
6. Возвращаем maxLength после завершения цикла.
Решение
function findLongestSubstring(str) {
// Инициализация начального индекса подстроки и максимальной длины
let start = 0;
let maxLength = 0;
// Создаем коллекцию для хранения символов и их последних позиций в строке
const charIndex = new Map();
// Проходим по каждому символу в строке
for (let end = 0; end < str.length; end++) {
const currentChar = str[end];
// Если символ уже встречался, обновляем начальный индекс подстроки
// чтобы исключить повторяющийся символ
if (charIndex.has(currentChar)) {
start = Math.max(start, charIndex.get(currentChar) + 1);
}
// Записываем или обновляем позицию текущего символа
charIndex.set(currentChar, end);
// Вычисляем максимальную длину, сравнивая текущую длину подстроки с максимальной
maxLength = Math.max(maxLength, end - start + 1);
}
// Возвращаем максимальную длину найденной подстроки
return maxLength;
}
findLongestSubstring('abcabcbb') // Возвращает 3, т.к. максимальная подстрока без повторений - "abc"
Простой и интересный пример интерактивной карточки, которая при наведении мыши будет раскрывать дополнительную информацию с анимацией разворачивания.
Посмотреть можно тут - JsFiddle(тык)
#css #html
А как вы относитесь к чату? Он уже есть, но пока он используется только для комментариев к постам. Давайте попробуем сделать его более активным? Возможно, в нём вы сможете найти ответы на свои вопросы по фронту или, наоборот, помочь кому-то.
Если интересно, то предлагаю вступить в чат(тык). А еще его можно найти в профиле канала 😏
Завершаем эту неделю постом, который, возможно, вдохновит кого-то покопаться в интересном проекте на выходных.
Может быть, кто-то помнит бородатые времена UCOZ? У них был довольно прикольный интерфейс в виде рабочего стола.
Я нашел интересный проект, который написан на чистом JavaScript и может быть поднят локально.
Что интересно:
— Написан на чистом JavaScript.
— Можно поднять локально.
— Работает как полноценная операционная система в браузере.
Репозиторий проекта: GitHub
Демонстрация: Puter.com
#JavaScript #OpenSource
Разберём Intersection Observer — это API для отслеживания появления элементов в зоне видимости.
Синтаксис выглядит так:
const observer = new IntersectionObserver(callback, options);
observer.observe(targetElement);
root — Контейнер, в пределах которого отслеживается пересечение. По умолчанию — null (viewport). rootMargin — Отступы вокруг контейнера, например, 50px 0px отслеживает на 50px раньше. threshold — Уровень видимости элемента (например, 0.5 для 50% видимости или массив значений [0, 0.5, 1], чтобы отслеживать видимость элемента на 0%, 50% и 100%).observe() — Начинает отслеживать указанный элемент. unobserve() — Прекращает отслеживание элемента. disconnect() — Полностью останавливает работу Observer. takeRecords() — Возвращает список всех записей о пересечении, которые ещё не были обработаны.entries — это массив объектов, содержащих информацию о каждом отслеживаемом элементе. entry — один из этих объектов. Вот его свойства:isIntersecting — true, если элемент пересёк границы видимости.target — сам элемент DOM, за которым ведётся наблюдение.boundingClientRect — размеры и положение элемента относительно viewport.intersectionRect — область пересечения элемента с видимой частью контейнера.rootBounds — размеры контейнера (root), если он указан.
Редкий атрибут, про который многие даже не слышали, — это reversed для <ol>. Довольно простая и базовая штука, но, возможно, однажды пригодится)
Что делает reversed?
Вы, наверное, догадались по названию, но если нет — атрибут reversed позволяет отображать элементы списка в обратном порядке нумерации. Вместо того чтобы начинать с единицы, счёт стартует с максимального числа и идёт вниз.
Как работает?
Добавьте этот атрибут к <ol>, например:
<ol>
<li>Первое место</li>
<li>Второе место</li>
<li>Третье место</li>
</ol>
3. Первое место
2. Второе место
1. Третье место
Закончим неделю на лайтовом посте, но который поможет сделать вашу жизнь немного продуктивнее 🧑💻 Многие из нас ведут заметки, но не всегда их удобно организовать и структурировать. Сегодня пост как раз про приложение, которое поможет решить эту проблему.
Obsidian — это инструмент для создания заметок, который превращает информацию в настоящую базу знаний.
Почему стоит попробовать Obsidian?
— Все записи полностью локальны и создаются в формате Markdown.
— Обсидиан позволяет связывать заметки друг с другом. Просто пишите [[Название заметки]], и вы создадите связь. А встроенный Graph View визуализирует всю вашу базу знаний в виде сети.
— Обширная библиотека плагинов позволяет добавлять задачи, трекеры, канбан-доски, базы данных, аналитику и многое другое.
Для чего и почему я использую Obsidian?
Я использую Obsidian для работы, ведения этого канала и структурирования своих мыслей. Можно сказать, что это моя персональная вики.
Кстати, этот пост не исключение и он тоже хранится у меня в заметках)
Скачать и попробовать Obsidian можно тут obsidian.md
Кто-то уже пробовал? Интересно узнать ваше мнение и рекомендации.
#Markdown #Продуктивность
Это среда, мои чуваки 🐸
Сегодня предлагаю разобраться с загрузкой и выполнением скриптов. Этот вопрос частенько всплывает на собеседованиях, но на практике мы редко сталкиваемся с ним, ведь почти всегда у нас есть одна точка входа. Однако понимание того, как работает загрузка, всё же важно и лучше разобраться.
Как работает загрузка без атрибутов?
Если вы подключаете скрипт обычным способом:
<script src="main.js"></script>
<head>, это заблокирует загрузку страницы, пока скрипт не будет загружен и выполнен. Это критично для производительности и серьезно влияет на пользовательский опыт. Наши заказчики будут серьезно недовольны)async и defer можно избежать блокировки парсинга HTML.
<script src="main.js" async></script>
<script src="main.js" defer></script>
defer и async работают только с внешними скриптами (src). Если вы напишете инлайн-скрипт, атрибуты проигнорируютсяtype="module" автоматически включает defer. async подходит для независимых скриптов, таких как аналитика, рекламные библиотеки, виджеты и трекеры.defer используется для скриптов, которые зависят от DOM или должны выполняться строго в порядке их подключения. Например, это основной код вашего приложения или скрипты с полифилами.async и defer дают простой способ улучшить производительность и не блокировать страницу.
Всех с понедельником 😭
Сегодня разберём задачу с собеседования про пропущенное число в массиве.
Условие задачи:
У нас есть неупорядоченный массив n-длины, содержащий числа от 1 до n+1. Одно из этих чисел отсутствует. Нужно найти пропущенное число.
Решение с сортировкой
Самый простой способ — отсортировать массив и сравнить его элементы с ожидаемой последовательностью чисел.
Алгоритм:
1. Отсортировать массив.
2. Пройти по нему и найти, где последовательность нарушается.
function findMissingNumberSort(arr) {
arr.sort((a, b) => a - b); // Сортируем массив
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== i + 1) {
return i + 1; // Если число не совпадает с ожидаемым
}
}
return arr.length + 1; // Если пропущено последнее число
}
console.log(findMissingNumberSort([3, 1, 4, 6, 2])); // 5
function findMissingNumberSum(arr) {
const n = arr.length + 1; // Учитываем пропущенное число
const expectedSum = (n * (n + 1)) / 2; // Ожидаемая сумма
const actualSum = arr.reduce((acc, num) => acc + num, 0); // Сумма массива
return expectedSum - actualSum; // Пропущенное число
}
console.log(findMissingNumberSum([3, 1, 4, 6, 2])); // Результат: 5
Сегодня коротко про один малоиспользуемый HTML-тег — <base>.
Этот тег задаёт базовый URL или целевое окно для всех относительных ссылок в документе.
Как он работает?
Тег <base> вставляется внутри <head> и имеет два атрибута:
1. href — задаёт базовый URL.
2. target — задаёт целевое окно (например, _blank, _self, _parent, _top).
<head>
<base href="https://truefrontender.t.me/" target="_blank">
</head>
<body>
<a href="about.html">О канале</a>
<img src="images/logo.png" alt="Логотип">
</body>
<base>.<base> для тестирования.<base> работает только один раз на документ. Если их несколько, браузер берёт только первый.<base>?
Всем привет! 👋
Очень давно не было постов, и для начала хочу извиниться за своё отсутствие. Иногда в жизни случается что-то, что выбивает из колеи. У меня был именно такой период, и я понял, что самое главное не сдаваться и двигаться вперёд. Сейчас я возвращаюсь и искренне надеюсь, что не разочарую вас 🙂
Хочу поздравить каждого из вас с наступившим Новым годом! 🎄
Желаю, чтобы этот год стал годом роста и новых возможностей. Пусть всё задуманное сбудется, а трудности обходят вас стороной ✨
От себя хочу добавить, что у меня большие планы на этот год, и я искренне верю, что всё задуманное сбудется. Контент будет двигаться в более авторскую сторону (хотя он и был таким). Это значит, что помимо технических тем, я буду больше делиться мыслями о развитии, мотивации и других вещах, которые не менее важны для профессионального и личного роста.
В одном из последних постов я уже просил фидбек и предложения, но с тех пор многое могло измениться. Если у вас появились новые мысли, обязательно напишите в комментариях. Ваш фидбек и предложения помогают делать контент интересным 🫶
Спасибо, что остались, и надеюсь на ваше понимание 🙏
P.S Ваши реакции и комментарии очень важны. Это помогает мне понимать, что вам интересно и служит огромной мотивацией)
Я считаю, что очень важно получать фидбек в IT и этот канал не исключение. Для меня крайне важно создавать контент, который был бы не просто интересен, но и действительно полезен для вас. Вы можете заметить, что мой контент сильно отличается от большинства каналов. В связи с этим, хотел бы узнать ваше мнение о постах, опубликованных на этой неделе.
Были ли они полезны для вас? Что бы вы хотели увидеть в будущем? Возможно, у вас есть предложения по новым рубрикам или темам, которые были бы вам интересны? Или же вы хотели бы больше постов по уже существующим темам?
Делитесь своими мыслями и предложениями. Ваш фидбек важен для меня 🧑💻
P.S. Не стесняйтесь оставлять свои реакции на этот пост 🥰
Привет 👨💻
Недавно Figma перевела Dev Mode в платную подписку. У многих есть проблемы связанные с оплатой или высокой стоимостью. Однако, благодаря гибкости платформы Figma, которая позволяет интегрировать сторонние плагины, появилась возможность найти альтернативное решение.
Для тех, кто ищет альтернативу, рекомендую ознакомиться с плагином Inspect Styles.
Делитесь другими своими находками в комментариях)
А вы знаете про псевдокласс :is() в CSS? Эта фича может значительно упростить ваш код и сделать его более читаемым.
Что такое псевдокласс :is()?
Псевдокласс :is() позволяет группировать несколько селекторов в один, применяя к ним общие стилевые правила. Это особенно полезно, когда вы хотите применить одинаковые стили к различным элементам без повторения кода.
Вложенные селекторы
Представьте, что вам нужно применить стили к элементам, находящимся внутри разных контейнеров, но только при определенных условиях. Без :is(), ваш CSS может быстро стать запутанным. Вот где :is() действительно нужен, позволяя вам сократить и упростить ваш код.
Пример использования
Рассмотрим кнопки, расположенные в различных секциях сайта — header, main, footer. Вы хотите применить к ним одинаковые стили при наведении.
Вот как это можно сделать с помощью псевдокласса:
:is(.section, .header, .footer) a:hover {
background-color: blue;
color: white;
}
header button, main button, footer button {
background-color: blue;
color: white;
}
:is() в вашем CSS может существенно упростить стилевые определения и сделать ваш код более простым. Это одна из тех маленьких фич, которые могут сделать большую разницу в поддержке и разработке ваших проектов.
Всем привет 👋! Разберемся с отложенной загрузкой изображений. Этот способо может значительно улучшить производительность и сократить количество трафика.
Зачем это нужно?
Загрузка всех изображений сразу может замедлить отображение важного контента, особенно для пользователей с медленным интернетом. Отложенная загрузка позволяет откладывать загрузку изображений, которые не находятся в области просмотра браузера, до тех пор, пока пользователь не прокрутит страницу до них.
Нативный метод отложенной загрузки
Самый простой и доступный способ - использование атрибута loading с значением lazy в теге <img>. Это говорит браузеру, что загрузку изображения следует отложить до момента, когда оно окажется в области видимости пользователя.
<img src="example.jpg" loading="lazy" alt="Пример изображения">
<img data-src="example.jpg" alt="Пример изображения">
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
const lazyImages = document.querySelectorAll('img[data-src]');
lazyImages.forEach((img) => {
observer.observe(img);
});
Привет, дорогие читатели!
Хочу поделиться с вами новостью, которая, станет важным шагом в развитии канала. В скором времени вы начнете замечать появление рекламных публикаций среди контента. Это шаг, к которому я подходил с особой серьезностью, и я хочу обсудить его с вами, чтобы вы понимали мотивы и цели, которые я преследую.
Первое и самое важное - цель введения рекламы не в заработке. Моя основная задача - расширение этого канала и привлечение новых участников, которые разделяют наши интересы. Все это будет за счет дополнительных вложений полученных с рекламы.
Второе - я понимаю, как важно сохранить ваше доверие и комфорт. Мой приоритет - качество и полезность, поэтому рекламные посты будут соответствовать тематике программирования.
Надеюсь на ваше понимание 🙏
Привет, программисты! Сегодня разберем паттерн проектирования "Стратегия". Этот паттерн полезен, когда есть несколько способов выполнения задачи и необходимость легко переключаться между этими способами во время выполнения программы.
Основные приемущества паттерна:
- Помогает скрыть детали реализации алгоритмов от их использования, предоставляя общий интерфейс для выполнения.
- Благодаря общему интерфейсу, различные реализации алгоритмов могут быть легко заменены в зависимости от контекста использования.
- Упрощает добавление новых алгоритмов и изменение существующих без влияния на код, который их использует.
Пример
Рассмотрим использование паттерна на примере сортировки массива. Мы хотим иметь возможность выбирать метод сортировки в зависимости от ситуации.
Пример использования можно посмотреть на прикрепленном изображении
Этот пример демонстрирует, как с помощью стратегии можно легко изменить алгоритм сортировки, используемый в приложении. Паттерн позволяет добавлять новые алгоритмы сортировки, не влияя на код, который их использует.
Заключение
Стратегия удобна, когда нужно изменять поведение объекта в зависимости от условий, не вдаваясь в детали реализации алгоритмов. Она делает код более модульным, упрощает тестирование и поддержку, а также способствует более чистой и организованной архитектуре программы.
#patterns #javascript