Привет 🤝 ! Сегодня мы разберем функцию
Что за функция compose?
Это звучит сложно, но на деле все просто.
Пример реализации
В этом примере мы создали три простые функции:
Зачем использовать?
Использование
Заключение
#javascript
compose. Возможно вам не стоит тащить ее в свой проект, так как чаще всего проще использовать готовое решение из библиотек, но будет полезно знать как она работает.Что за функция compose?
compose - это функция высшего порядка, которая принимает на вход несколько функций и возвращает новую функцию. Эта новая функция, при вызове, запускает цепочку переданных функций так, что результат каждой функции передается как аргумент в следующую. Процесс начинается с крайней правой функции и продвигается к левой.Это звучит сложно, но на деле все просто.
Пример реализации
function compose(...funcs) {
return function(arg) {
return funcs.reduceRight((acc, fn) => fn(acc), arg);
};
}
// Пример использования
const multiplyBy2 = x => x * 2;
const add3 = x => x + 3;
const subtract4 = x => x - 4;
const doMagic = compose(multiplyBy2, add3, subtract4);
console.log(doMagic(5)); // Результат: 8
В этом примере мы создали три простые функции:
multiplyBy2, add3, subtract4. Затем мы использовали compose, чтобы создать новую функцию doMagic, которая применяет эти функции в обратном порядке: сначала вычитает 4, затем добавляет 3, и, наконец, умножает результат на 2.Зачем использовать?
Использование
compose позволяет нам строить сложные операции из простых функций, сохраняя при этом чистоту и читаемость кода. Это не только упрощает отладку и тестирование отдельных частей системы, но и способствует написанию декларативного кода, где мы описываем, что хотим сделать, а не как.Заключение
compose - это не просто функция, это философия построения кода, где композиция и простота лежат в основе решения сложных задач. Попробуйте применить compose в своих проектах и увидите, как это может изменить ваш подход к написанию кода.#javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥5👾2❤1🤯1
Вемс тепирв😄 ! Начнем неделю с разбора не самой сложной, но одной из самых популярных задач. Мы будем работать с анаграммами.
Что такое анаграммы?
Анаграммы - это слова или фразы, полученные путем перестановки букв исходного слова или фразы. Например, "привет" и "тепирв" являются анаграммами.
Задача:
Написать функцию, которая определяет, являются ли две строки анаграммами друг друга.
Алгоритм решения:
1. Сначала обе строки приводятся к нижнему регистру и из них удаляются все символы пробелы. Это делается для того, чтобы избежать различий из-за регистра или пробелов.
2. Для каждой нормализованной строки создается объект, где ключи - это символы строки, а значения - количество их вхождений в строку. Функция
3. Если длины нормализованных строк различаются, то они точно не могут быть анаграммами, и функция возвращает
4. Для каждого символа из первой строки проверяется, совпадает ли количество его вхождений в обеих строках, используя созданные карты подсчета символов. Если для любого символа количество вхождений не совпадает, строки не являются анаграммами, и функция возвращает
5. Если все предыдущие проверки пройдены успешно, строки являются анаграммами, тогда функция возвращает
Решение
Этот пример демонстрирует базовый подход к решению задачи об анаграммах. Мы нормализуем строки, удаляем не нужные символы, сравниваем их длины и подсчитываем количество каждого символа. Если все проверки прошли успешно, строки являются анаграммами.
А у вас есть идеи о том, как можно улучшить или изменить это решение? Или, может быть, у вас есть совершенно другой подход к решению? Делитесь своими мыслями и кодом в комментариях💻
#javascript #interview
Что такое анаграммы?
Анаграммы - это слова или фразы, полученные путем перестановки букв исходного слова или фразы. Например, "привет" и "тепирв" являются анаграммами.
Задача:
Написать функцию, которая определяет, являются ли две строки анаграммами друг друга.
Алгоритм решения:
1. Сначала обе строки приводятся к нижнему регистру и из них удаляются все символы пробелы. Это делается для того, чтобы избежать различий из-за регистра или пробелов.
2. Для каждой нормализованной строки создается объект, где ключи - это символы строки, а значения - количество их вхождений в строку. Функция
buildCharCountMap использует метод reduce для преобразования массива символов строки в объект подсчета символов.3. Если длины нормализованных строк различаются, то они точно не могут быть анаграммами, и функция возвращает
false.4. Для каждого символа из первой строки проверяется, совпадает ли количество его вхождений в обеих строках, используя созданные карты подсчета символов. Если для любого символа количество вхождений не совпадает, строки не являются анаграммами, и функция возвращает
false.5. Если все предыдущие проверки пройдены успешно, строки являются анаграммами, тогда функция возвращает
true.Решение
function isAnagram(str1, str2) {
const normalize = str => str.replace(/\s+/g, "").toLowerCase();
const buildCharCountMap = str => {
return str.split('').reduce((acc, char) => {
acc[char] = acc[char] + 1 || 1;
return acc;
}, {});
};
const normalizedStr1 = normalize(str1);
const normalizedStr2 = normalize(str2);
if (normalizedStr1.length !== normalizedStr2.length) {
return false;
}
const str1CharCount = buildCharCountMap(normalizedStr1);
const str2CharCount = buildCharCountMap(normalizedStr2);
for (let char in str1CharCount) {
if (str1CharCount[char] !== str2CharCount[char]) {
return false;
}
}
return true;
}
console.log(isAnagram("Привет", "тепирв")); // true
console.log(isAnagram("Привет", "Пока")); // false
Этот пример демонстрирует базовый подход к решению задачи об анаграммах. Мы нормализуем строки, удаляем не нужные символы, сравниваем их длины и подсчитываем количество каждого символа. Если все проверки прошли успешно, строки являются анаграммами.
А у вас есть идеи о том, как можно улучшить или изменить это решение? Или, может быть, у вас есть совершенно другой подход к решению? Делитесь своими мыслями и кодом в комментариях
#javascript #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥4🆒3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Привет! Сегодня мы рассмотрим, как с помощью JavaScript создавать плавные анимации без использования сторонних библиотек. Речь пойдет о методе
Что такое animate()?
Метод
Как работает animate()?
Ключевые кадры - это объекты, которые описывают стили начального, промежуточного и конечного состояния анимации. Каждый ключевой кадр может содержать одно или несколько свойств CSS, которые вы хотите анимировать.
Параметры анимации - это объект, который может содержать длительность анимации (
Пример использования
Допустим, мы хотим анимировать шар, чтобы он отскакивал. Вот как это можно сделать:
В этом примере мы создаем анимацию для элемента с классом
Посмотреть демо можно тут - JsFiddle(тык)
Заключение
Метод
#javascript #webapi
animate() из Web Animations API.Что такое animate()?
Метод
animate() является частью Web Animations API и позволяет добавлять анимации к DOM-элементам напрямую через JavaScript. Этот метод принимает два основных аргумента: массив ключевых кадров (keyframes) и параметры анимации (options).Как работает animate()?
Ключевые кадры - это объекты, которые описывают стили начального, промежуточного и конечного состояния анимации. Каждый ключевой кадр может содержать одно или несколько свойств CSS, которые вы хотите анимировать.
Параметры анимации - это объект, который может содержать длительность анимации (
duration), функцию времени (easing), задержку перед началом (delay), количество повторений (iterations) и многое другое.Пример использования
Допустим, мы хотим анимировать шар, чтобы он отскакивал. Вот как это можно сделать:
const ball = document.querySelector('.ball');
ball.animate([
{ transform: 'translateY(0)', easing: "ease-in" },
{ transform: 'translateY(40vh)', easing: 'cubic-bezier(.21,.57,.71,1)' },
{ transform: 'translateY(0)', easing: 'ease-out' }
], {
duration: 1500,
iterations: Infinity,
});
В этом примере мы создаем анимацию для элемента с классом
.ball, который перемещается по оси Y, создавая эффект подпрыгивания. Посмотреть демо можно тут - JsFiddle(тык)
Заключение
Метод
animate(), предоставляя возможность работать с ключевыми кадрами и настраиваемыми параметрами анимации, без необходимости прибегать к сторонним библиотекам.#javascript #webapi
👍16🔥6❤2👾2⚡1
Привет! Сегодня поговорим о довольно новом, но уже достаточно популярном свойстве CSS -
Что такое accent-color?
Как работает accent-color?
Применение
В этом примере все элементы управления внутри
Посмотреть демо можно тут - JsFiddle(тык)
Заключение
Использование
#css
accent-color. Это свойство позволяет разработчикам задавать цвет акцента для элементов форм и других элементов управления. Использование accent-color обеспечивает единообразие стиля элементов.Что такое accent-color?
accent-color - это свойство CSS, которое позволяет разработчикам устанавливать цвет акцента для элементов формы, таких как флажки (checkbox), переключатели (radio) и ползунки (range). Это свойство применяется к контейнеру элементов управления, автоматически изменяя цвет акцента для всех дочерних элементов управления.Как работает accent-color?
Применение
accent-color очень просто. Вы задаете его для элемента в вашем CSS, и все поддерживаемые элементы управления внутри этого элемента будут использовать указанный цвет акцента. Например:form {
accent-color: dodgerblue;
}
В этом примере все элементы управления внутри
<form> будут использовать dodgerblue в качестве своего цвета акцента.Посмотреть демо можно тут - JsFiddle(тык)
Заключение
Использование
accent-color в вашем CSS - это простой способ улучшить визуальную согласованность. Это свойство дает вам больше контроля над стилизацией элементов формы, позволяя легко адаптировать их под общий стиль вашего интерфейса.#css
👍15🔥7👀2❤1
Привет, программисты! Сегодня разберем паттерн проектирования "Стратегия". Этот паттерн полезен, когда есть несколько способов выполнения задачи и необходимость легко переключаться между этими способами во время выполнения программы.
Основные приемущества паттерна:
- Помогает скрыть детали реализации алгоритмов от их использования, предоставляя общий интерфейс для выполнения.
- Благодаря общему интерфейсу, различные реализации алгоритмов могут быть легко заменены в зависимости от контекста использования.
- Упрощает добавление новых алгоритмов и изменение существующих без влияния на код, который их использует.
Пример
Рассмотрим использование паттерна на примере сортировки массива. Мы хотим иметь возможность выбирать метод сортировки в зависимости от ситуации.
Пример использования можно посмотреть на прикрепленном изображении
Этот пример демонстрирует, как с помощью стратегии можно легко изменить алгоритм сортировки, используемый в приложении. Паттерн позволяет добавлять новые алгоритмы сортировки, не влияя на код, который их использует.
Заключение
Стратегия удобна, когда нужно изменять поведение объекта в зависимости от условий, не вдаваясь в детали реализации алгоритмов. Она делает код более модульным, упрощает тестирование и поддержку, а также способствует более чистой и организованной архитектуре программы.
#patterns #javascript
Основные приемущества паттерна:
- Помогает скрыть детали реализации алгоритмов от их использования, предоставляя общий интерфейс для выполнения.
- Благодаря общему интерфейсу, различные реализации алгоритмов могут быть легко заменены в зависимости от контекста использования.
- Упрощает добавление новых алгоритмов и изменение существующих без влияния на код, который их использует.
Пример
Рассмотрим использование паттерна на примере сортировки массива. Мы хотим иметь возможность выбирать метод сортировки в зависимости от ситуации.
Пример использования можно посмотреть на прикрепленном изображении
Этот пример демонстрирует, как с помощью стратегии можно легко изменить алгоритм сортировки, используемый в приложении. Паттерн позволяет добавлять новые алгоритмы сортировки, не влияя на код, который их использует.
Заключение
Стратегия удобна, когда нужно изменять поведение объекта в зависимости от условий, не вдаваясь в детали реализации алгоритмов. Она делает код более модульным, упрощает тестирование и поддержку, а также способствует более чистой и организованной архитектуре программы.
#patterns #javascript
👍9🔥8❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Простой и интересный пример интерактивной карточки, которая при наведении мыши будет раскрывать дополнительную информацию с анимацией разворачивания.
Посмотреть можно тут - JsFiddle(тык)
#css #html
Посмотреть можно тут - JsFiddle(тык)
#css #html
👍8🔥6❤2🆒2👾1
Привет, дорогие читатели!
Хочу поделиться с вами новостью, которая, станет важным шагом в развитии канала. В скором времени вы начнете замечать появление рекламных публикаций среди контента. Это шаг, к которому я подходил с особой серьезностью, и я хочу обсудить его с вами, чтобы вы понимали мотивы и цели, которые я преследую.
Первое и самое важное - цель введения рекламы не в заработке. Моя основная задача - расширение этого канала и привлечение новых участников, которые разделяют наши интересы. Все это будет за счет дополнительных вложений полученных с рекламы.
Второе - я понимаю, как важно сохранить ваше доверие и комфорт. Мой приоритет - качество и полезность, поэтому рекламные посты будут соответствовать тематике программирования.
Надеюсь на ваше понимание🙏
Хочу поделиться с вами новостью, которая, станет важным шагом в развитии канала. В скором времени вы начнете замечать появление рекламных публикаций среди контента. Это шаг, к которому я подходил с особой серьезностью, и я хочу обсудить его с вами, чтобы вы понимали мотивы и цели, которые я преследую.
Первое и самое важное - цель введения рекламы не в заработке. Моя основная задача - расширение этого канала и привлечение новых участников, которые разделяют наши интересы. Все это будет за счет дополнительных вложений полученных с рекламы.
Второе - я понимаю, как важно сохранить ваше доверие и комфорт. Мой приоритет - качество и полезность, поэтому рекламные посты будут соответствовать тематике программирования.
Надеюсь на ваше понимание
Please open Telegram to view this post
VIEW IN TELEGRAM
❤25 3🦄2
Привет! На этой неделе мы разберемся, как найти максимальную подстроку без повторяющихся символов. Это не самая популярная, но интересная и не простая задача.
Что мы хотим сделать?
Нужно написать функцию, которая принимает строку и возвращает длину самой длинной подстроки, состоящей из уникальных символов. Например, для строки
Алгоритм решения:
1. Определяем начальный индекс подстроки
2. Создаем коллекцию
3. Проходим циклом по каждому символу строки. Если текущий символ уже встречался, обновляем
4. Добавляем/обновляем позицию текущего символа.
5. Сравниваем текущую длину подстроки с
6. Возвращаем
Решение
Как видите, задача поиска максимальной подстроки без повторяющихся символов, хотя на первый взгляд может показаться достаточно простой, но на самом деле является отличным тестом на ваше понимание алгоритмов и структур данных.
#interview #javascript
Что мы хотим сделать?
Нужно написать функцию, которая принимает строку и возвращает длину самой длинной подстроки, состоящей из уникальных символов. Например, для строки
"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"
Как видите, задача поиска максимальной подстроки без повторяющихся символов, хотя на первый взгляд может показаться достаточно простой, но на самом деле является отличным тестом на ваше понимание алгоритмов и структур данных.
#interview #javascript
👍11🔥5❤3
Всем привет 👋 ! Разберемся с отложенной загрузкой изображений. Этот способо может значительно улучшить производительность и сократить количество трафика.
Зачем это нужно?
Загрузка всех изображений сразу может замедлить отображение важного контента, особенно для пользователей с медленным интернетом. Отложенная загрузка позволяет откладывать загрузку изображений, которые не находятся в области просмотра браузера, до тех пор, пока пользователь не прокрутит страницу до них.
Нативный метод отложенной загрузки
Самый простой и доступный способ - использование атрибута
Преимущества:
- Легкость внедрения.
- Не требует JS, работает сразу после добавления атрибута.
Использование Intersection Observer API
Для случаев, когда требуется больше контроля или когда нативная поддержка отсутствует, на помощь приходит Intersection Observer API. Этот метод позволяет определить, когда изображение входит в область видимости пользователя, и загрузить его.
Преимущества:
- Полный контроль над процессом загрузки.
- Возможность использования для других типов контента, помимо изображений.
- Гибкость в обработке событий входа и выхода из области видимости.
Заключение
Отложенная загрузка изображений - это не просто способ улучшения производительности, но и о создании лучшего пользовательского опыта. Благодаря этому страницы загружаются быстрее, а потребление данных пользователями сокращается.html
Зачем это нужно?
Загрузка всех изображений сразу может замедлить отображение важного контента, особенно для пользователей с медленным интернетом. Отложенная загрузка позволяет откладывать загрузку изображений, которые не находятся в области просмотра браузера, до тех пор, пока пользователь не прокрутит страницу до них.
Нативный метод отложенной загрузки
Самый простой и доступный способ - использование атрибута
loading с значением lazy в теге <img>. Это говорит браузеру, что загрузку изображения следует отложить до момента, когда оно окажется в области видимости пользователя.<img src="example.jpg" loading="lazy" alt="Пример изображения">
Преимущества:
- Легкость внедрения.
- Не требует JS, работает сразу после добавления атрибута.
Использование Intersection Observer API
Для случаев, когда требуется больше контроля или когда нативная поддержка отсутствует, на помощь приходит Intersection Observer API. Этот метод позволяет определить, когда изображение входит в область видимости пользователя, и загрузить его.
<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);
});
Преимущества:
- Полный контроль над процессом загрузки.
- Возможность использования для других типов контента, помимо изображений.
- Гибкость в обработке событий входа и выхода из области видимости.
Заключение
Отложенная загрузка изображений - это не просто способ улучшения производительности, но и о создании лучшего пользовательского опыта. Благодаря этому страницы загружаются быстрее, а потребление данных пользователями сокращается.html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥7❤3👾2👀1
А вы знаете про псевдокласс
Что такое псевдокласс :is()?
Псевдокласс
Вложенные селекторы
Представьте, что вам нужно применить стили к элементам, находящимся внутри разных контейнеров, но только при определенных условиях. Без
Пример использования
Рассмотрим кнопки, расположенные в различных секциях сайта —
Вот как это можно сделать с помощью псевдокласса:
Без :is(), ваш CSS выглядел бы так:
Преимущества использования:
- Стили становятся проще для восприятия.
- Вносить изменения становится легче, поскольку они требуют редактирования только в одном месте.
Итого
Использование псевдокласса
#css
:is() в CSS? Эта фича может значительно упростить ваш код и сделать его более читаемым.Что такое псевдокласс :is()?
Псевдокласс
:is() позволяет группировать несколько селекторов в один, применяя к ним общие стилевые правила. Это особенно полезно, когда вы хотите применить одинаковые стили к различным элементам без повторения кода.Вложенные селекторы
Представьте, что вам нужно применить стили к элементам, находящимся внутри разных контейнеров, но только при определенных условиях. Без
:is(), ваш CSS может быстро стать запутанным. Вот где :is() действительно нужен, позволяя вам сократить и упростить ваш код.Пример использования
Рассмотрим кнопки, расположенные в различных секциях сайта —
header, main, footer. Вы хотите применить к ним одинаковые стили при наведении. Вот как это можно сделать с помощью псевдокласса:
:is(.section, .header, .footer) a:hover {
background-color: blue;
color: white;
}
Без :is(), ваш CSS выглядел бы так:
.section a:hover, .header a:hover, .footer a:hover {
background-color: blue;
color: white;
}
Преимущества использования:
- Стили становятся проще для восприятия.
- Вносить изменения становится легче, поскольку они требуют редактирования только в одном месте.
Итого
Использование псевдокласса
:is() в вашем CSS может существенно упростить стилевые определения и сделать ваш код более простым. Это одна из тех маленьких фич, которые могут сделать большую разницу в поддержке и разработке ваших проектов.#css
👍15🔥11❤5🆒3👾1
На собеседованиях часто поднимается тема Utility Types в TypeScript Сегодня мы рассмотрим одну из таких утилит –
Что такое Pick?
Как это работает?
Допустим, у нас есть тип
Мы хотим создать новый тип, который включал бы только
Теперь
Итого
Эта утилита упрощает процесс создания новых, более специализированных типов из уже существующих. Ключевым моментом здесь является возможность фокусироваться исключительно на тех свойствах, которые необходимы для выполнения конкретной задачи, минимизируя тем самым шанс ошибок и упрощая поддержку кода.
#typescript #interview
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.Итого
Эта утилита упрощает процесс создания новых, более специализированных типов из уже существующих. Ключевым моментом здесь является возможность фокусироваться исключительно на тех свойствах, которые необходимы для выполнения конкретной задачи, минимизируя тем самым шанс ошибок и упрощая поддержку кода.
#typescript #interview
👍18🔥5❤3👾1
Привет 👨💻
Недавно Figma перевела Dev Mode в платную подписку. У многих есть проблемы связанные с оплатой или высокой стоимостью. Однако, благодаря гибкости платформы Figma, которая позволяет интегрировать сторонние плагины, появилась возможность найти альтернативное решение.
Для тех, кто ищет альтернативу, рекомендую ознакомиться с плагином Inspect Styles.
Делитесь другими своими находками в комментариях)
Недавно Figma перевела Dev Mode в платную подписку. У многих есть проблемы связанные с оплатой или высокой стоимостью. Однако, благодаря гибкости платформы Figma, которая позволяет интегрировать сторонние плагины, появилась возможность найти альтернативное решение.
Для тех, кто ищет альтернативу, рекомендую ознакомиться с плагином Inspect Styles.
Делитесь другими своими находками в комментариях)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥5❤3
Мы часто используем в своих проектах сброс или нормализацию стилей. А знаете в чем разница? Понимание их отличий может пригодиться не только в повседневной работе, но и на собеседованиях.
Reset CSS
Сброс CSS - это метод, при котором у всех HTML-элементов удаляются стандартные стили браузера. Цель - предоставить одинаковую стартовую точку для дальнейшей стилизации. Это означает, что все отступы, шрифты и другие стили сбрасываются до нуля.
Преимущества сброса:
- Предоставляет полный контроль над стилизацией.
- Устраняет несоответствия между стилями по умолчанию в различных браузерах, упрощая создание консистентного внешнего вида.
- Идеален для проектов, где необходима полная кастомизация стилей без зависимости от браузерных умолчаний.
Normalize CSS
Нормализация, в отличие от сброса, не убирает все стили браузера, а корректирует и унифицирует отображение элементов, сохраняя при этом полезные умолчания. Она исправляет ошибки и обеспечивает единообразное отображение в разных браузерах, опираясь на современные стандарты.
Преимущества нормализации:
- Сохраняет полезные браузерные стили, улучшая кросс-браузерную совместимость.
- Исправляет баги и расхождения в отображении элементов между браузерами.
Вывод
Выбор между сбросом и нормализацией зависит от ваших целей и предпочтений. Если вы хотите полностью контролировать все стили на странице и начать с "чистого листа", сброс будет вашим выбором. Если же вам важно сохранить некоторые полезные умолчания и обеспечить единообразие без лишнего труда, нормализация станет отличным решением.
#css
Reset CSS
Сброс CSS - это метод, при котором у всех HTML-элементов удаляются стандартные стили браузера. Цель - предоставить одинаковую стартовую точку для дальнейшей стилизации. Это означает, что все отступы, шрифты и другие стили сбрасываются до нуля.
Преимущества сброса:
- Предоставляет полный контроль над стилизацией.
- Устраняет несоответствия между стилями по умолчанию в различных браузерах, упрощая создание консистентного внешнего вида.
- Идеален для проектов, где необходима полная кастомизация стилей без зависимости от браузерных умолчаний.
Normalize CSS
Нормализация, в отличие от сброса, не убирает все стили браузера, а корректирует и унифицирует отображение элементов, сохраняя при этом полезные умолчания. Она исправляет ошибки и обеспечивает единообразное отображение в разных браузерах, опираясь на современные стандарты.
Преимущества нормализации:
- Сохраняет полезные браузерные стили, улучшая кросс-браузерную совместимость.
- Исправляет баги и расхождения в отображении элементов между браузерами.
Вывод
Выбор между сбросом и нормализацией зависит от ваших целей и предпочтений. Если вы хотите полностью контролировать все стили на странице и начать с "чистого листа", сброс будет вашим выбором. Если же вам важно сохранить некоторые полезные умолчания и обеспечить единообразие без лишнего труда, нормализация станет отличным решением.
#css
👍14🔥5❤4👾3
Я считаю, что очень важно получать фидбек в IT и этот канал не исключение. Для меня крайне важно создавать контент, который был бы не просто интересен, но и действительно полезен для вас. Вы можете заметить, что мой контент сильно отличается от большинства каналов. В связи с этим, хотел бы узнать ваше мнение о постах, опубликованных на этой неделе.
Были ли они полезны для вас? Что бы вы хотели увидеть в будущем? Возможно, у вас есть предложения по новым рубрикам или темам, которые были бы вам интересны? Или же вы хотели бы больше постов по уже существующим темам?
Делитесь своими мыслями и предложениями. Ваш фидбек важен для меня🧑💻
P.S. Не стесняйтесь оставлять свои реакции на этот пост🥰
Были ли они полезны для вас? Что бы вы хотели увидеть в будущем? Возможно, у вас есть предложения по новым рубрикам или темам, которые были бы вам интересны? Или же вы хотели бы больше постов по уже существующим темам?
Делитесь своими мыслями и предложениями. Ваш фидбек важен для меня
P.S. Не стесняйтесь оставлять свои реакции на этот пост
Please open Telegram to view this post
VIEW IN TELEGRAM
❤25👨💻6👍4🤔2🦄2👏1
Привет всем! Давно не виделись 🏠
Многие заметили, что посты перестали выходить. Это произошло неожиданно, особенно учитывая, что последний пост был о том, как можно улучшить контент. Я не планировал прекращать, но в один момент у меня пропало вдохновение.
Пока не могу точно сказать, буду ли продолжать вести этот канал. Нужен перерыв, чтобы перезагрузиться и определиться.
Долго готовился к написанию этого поста, и вот он наконец вышел. Надеюсь на ваше понимание!
Многие заметили, что посты перестали выходить. Это произошло неожиданно, особенно учитывая, что последний пост был о том, как можно улучшить контент. Я не планировал прекращать, но в один момент у меня пропало вдохновение.
Пока не могу точно сказать, буду ли продолжать вести этот канал. Нужен перерыв, чтобы перезагрузиться и определиться.
Долго готовился к написанию этого поста, и вот он наконец вышел. Надеюсь на ваше понимание!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤27🤯7👀7👍5👨💻3🔥1
Всем привет! 👋
Очень давно не было постов, и для начала хочу извиниться за своё отсутствие. Иногда в жизни случается что-то, что выбивает из колеи. У меня был именно такой период, и я понял, что самое главное не сдаваться и двигаться вперёд. Сейчас я возвращаюсь и искренне надеюсь, что не разочарую вас🙂
Хочу поздравить каждого из вас с наступившим Новым годом!🎄
Желаю, чтобы этот год стал годом роста и новых возможностей. Пусть всё задуманное сбудется, а трудности обходят вас стороной✨
От себя хочу добавить, что у меня большие планы на этот год, и я искренне верю, что всё задуманное сбудется. Контент будет двигаться в более авторскую сторону (хотя он и был таким). Это значит, что помимо технических тем, я буду больше делиться мыслями о развитии, мотивации и других вещах, которые не менее важны для профессионального и личного роста.
В одном из последних постов я уже просил фидбек и предложения, но с тех пор многое могло измениться. Если у вас появились новые мысли, обязательно напишите в комментариях. Ваш фидбек и предложения помогают делать контент интересным🫶
Спасибо, что остались, и надеюсь на ваше понимание🙏
P.S Ваши реакции и комментарии очень важны. Это помогает мне понимать, что вам интересно и служит огромной мотивацией)
Очень давно не было постов, и для начала хочу извиниться за своё отсутствие. Иногда в жизни случается что-то, что выбивает из колеи. У меня был именно такой период, и я понял, что самое главное не сдаваться и двигаться вперёд. Сейчас я возвращаюсь и искренне надеюсь, что не разочарую вас
Хочу поздравить каждого из вас с наступившим Новым годом!
Желаю, чтобы этот год стал годом роста и новых возможностей. Пусть всё задуманное сбудется, а трудности обходят вас стороной
От себя хочу добавить, что у меня большие планы на этот год, и я искренне верю, что всё задуманное сбудется. Контент будет двигаться в более авторскую сторону (хотя он и был таким). Это значит, что помимо технических тем, я буду больше делиться мыслями о развитии, мотивации и других вещах, которые не менее важны для профессионального и личного роста.
В одном из последних постов я уже просил фидбек и предложения, но с тех пор многое могло измениться. Если у вас появились новые мысли, обязательно напишите в комментариях. Ваш фидбек и предложения помогают делать контент интересным
Спасибо, что остались, и надеюсь на ваше понимание
P.S Ваши реакции и комментарии очень важны. Это помогает мне понимать, что вам интересно и служит огромной мотивацией)
Please open Telegram to view this post
VIEW IN TELEGRAM
❤21🔥8👍6⚡1
This media is not supported in your browser
VIEW IN TELEGRAM
Привет! 👋
Мы довольно часто сталкиваемся с таблицами, и сегодня пост о свойстве
Оно имеет два возможных значения:
1.
При значении
2.
При значении
Главное отличие:
При использовании
Я подготовил пример, где вы можете изменять ширину таблиц с помощью ползунка. Попробовать можно тут JSFiddle(клик) / Codepen(клик)
@TrueFrontender #CSS #HTML
Мы довольно часто сталкиваемся с таблицами, и сегодня пост о свойстве
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥6👀2
Сегодня коротко про один малоиспользуемый HTML-тег —
Этот тег задаёт базовый URL или целевое окно для всех относительных ссылок в документе.
Как он работает?
Тег
1.
2.
Результат:
1. Ссылка будет открываться в новом окне и вести на страницу https://truefrontender.t.me/about.html.
2. Изображение загрузится с https://truefrontender.t.me/images/logo.png.
Когда это полезно?
— Если у вас большой проект, где ссылки и ресурсы ссылаются на один и тот же базовый URL. Вместо указания полного пути каждый раз, вы просто задаёте его через
— При миграции сайта на новый домен — можно временно добавить
Ограничения:
- Тег
А вы когда-нибудь видели или использовали
#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>
Результат:
1. Ссылка будет открываться в новом окне и вести на страницу https://truefrontender.t.me/about.html.
2. Изображение загрузится с https://truefrontender.t.me/images/logo.png.
Когда это полезно?
— Если у вас большой проект, где ссылки и ресурсы ссылаются на один и тот же базовый URL. Вместо указания полного пути каждый раз, вы просто задаёте его через
<base>.— При миграции сайта на новый домен — можно временно добавить
<base> для тестирования.Ограничения:
- Тег
<base> работает только один раз на документ. Если их несколько, браузер берёт только первый.А вы когда-нибудь видели или использовали
<base>? #HTML
2👍12🔥5👀2
Наконец-то закончилась эта долгая и тяжелая рабочая неделя… Надеюсь, у всех получилось хоть немного влиться в работу после праздников. Я уже успел устать 🥲
Продолжаем отдыхать и морально готовиться к тому, что следующие длинные выходные будут только в мае.
Спасибо, что остаетесь здесь, читаете и поддерживаете🫶
Всем хороших выходных🍻
Продолжаем отдыхать и морально готовиться к тому, что следующие длинные выходные будут только в мае.
Спасибо, что остаетесь здесь, читаете и поддерживаете
Всем хороших выходных
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8 5👨💻3👍2